q object or define methods on the\n * collection it returns.\n *\n * By default, the core module is assigned to a global module named q.\n * In case q is already defined, the name qxWeb\n * is used instead.\n *\n * For further details, take a look at the documentation in the\n * user manual.\n *\n * @ignore(q)\n *\n * @group (Core)\n */\nqx.Bootstrap.define(\"qxWeb\", {\n extend : qx.type.BaseArray,\n statics : {\n // internal storage for all initializers\n __init : [],\n\n // internal reference to the used qx namespace\n $$qx : qx,\n\n /**\n * Internal helper to initialize collections.\n *\n * @param arg {var} An array of Elements which will\n * be initialized as {@link q}. All items in the array which are not\n * either a window object, a DOM element node or a DOM document node will\n * be ignored.\n * @param clazz {Class} The class of the new collection.\n * @return {q} A new initialized collection.\n */\n $init : function(arg, clazz) {\n // restore widget instance\n if (arg.length && arg.length == 1 && arg[0] && arg[0].$widget instanceof qxWeb) {\n return arg[0].$widget;\n }\n\n var clean = [];\n for (var i = 0; i < arg.length; i++) {\n // check for node or window object\n var isNode = !!(arg[i] && (arg[i].nodeType === 1 ||\n arg[i].nodeType === 9 || arg[i].nodeType === 11));\n if (isNode) {\n clean.push(arg[i]);\n continue;\n }\n var isWindow = !!(arg[i] && arg[i].history && arg[i].location && arg[i].document);\n if (isWindow) {\n clean.push(arg[i]);\n }\n }\n\n if (arg[0] && arg[0].getAttribute && arg[0].getAttribute(\"data-qx-class\") && clean.length < 2) {\n clazz = qx.Bootstrap.getByName(arg[0].getAttribute(\"data-qx-class\")) || clazz;\n }\n\n var col = qx.lang.Array.cast(clean, clazz);\n for (var i=0; i < qxWeb.__init.length; i++) {\n qxWeb.__init[i].call(col);\n }\n\n return col;\n },\n\n\n /**\n * This is an API for module development and can be used to attach new methods\n * to {@link q}.\n *\n * @param module {Map} A map containing the methods to attach.\n * @param override {Boolean?false} Force to override\n */\n $attach : function(module, override) {\n for (var name in module) {\n if (qxWeb.prototype[name] != undefined && Array.prototype[name] == undefined && override !== true) {\n if (qx.core.Environment.get(\"qx.debug\")) {\n throw new Error(\"Method '\" + name + \"' already available.\");\n }\n } else {\n qxWeb.prototype[name] = module[name];\n }\n }\n },\n\n\n /**\n * This is an API for module development and can be used to attach new methods\n * to {@link q}.\n *\n * @param module {Map} A map containing the methods to attach.\n * @param override {Boolean?false} Force to override\n */\n $attachStatic : function(module, override) {\n for (var name in module) {\n if (qx.core.Environment.get(\"qx.debug\")) {\n if (qxWeb[name] != undefined && override !== true) {\n throw new Error(\"Method '\" + name + \"' already available as static method.\");\n }\n }\n qxWeb[name] = module[name];\n }\n },\n\n /**\n * This is an API for module development and can be used to attach new methods\n * to {@link q} during runtime according to the following conventions:\n *\n * Public members of the module are attached to the collection similar to\n * qxWeb.$attach. Members beginning with '$' or '_' are ignored.\n *\n * Statics of the module are attached to {@link q} similar to\n * qxWeb.$attachStatic. Statics beginning with '$' or '_', as well as constants\n * (all upper case) and some qooxdoo-internal statics of the module are ignored.\n *\n *\n * If more fine-grained control outside if these conventions is needed,\n * simply use qxWeb.$attach or qxWeb$attachStatic.\n *\n * @param clazz {Object} the qooxdoo class definition calling this method.\n * @param staticsNamespace {String?undefined} Specifies the namespace under which statics are attached to {@link q}.\n */\n $attachAll : function(clazz, staticsNamespace) {\n // members\n for (var name in clazz.members) {\n if (name.indexOf(\"$\") !== 0 && name.indexOf(\"_\") !== 0)\n qxWeb.prototype[name] = clazz.members[name];\n }\n\n // statics\n var destination;\n if (staticsNamespace != null) {\n qxWeb[staticsNamespace] = qxWeb[staticsNamespace] || {};\n destination = qxWeb[staticsNamespace];\n } else {\n destination = qxWeb;\n }\n\n for (var name in clazz.statics) {\n if (name.indexOf(\"$\") !== 0 && name.indexOf(\"_\") !== 0 && name !== \"name\" && name !== \"basename\" &&\n name !== \"classname\" && name !== \"toString\" && name !== name.toUpperCase())\n destination[name] = clazz.statics[name];\n }\n },\n\n\n /**\n * This is an API for module development and can be used to attach new initialization\n * methods to {@link q} which will be called when a new collection is\n * created.\n *\n * @param init {Function} The initialization method for a module.\n */\n $attachInit : function(init) {\n this.__init.push(init);\n },\n\n\n /**\n * Define a new class using the qooxdoo class system.\n *\n * @param name {String?} Name of the class. If null, the class will not be\n * attached to a namespace.\n * @param config {Map ? null} Class definition structure. The configuration map has the following keys:\n * | Name | Type | Description |
|---|---|---|
| extend | Class | The super class the current class inherits from. |
| construct | Function | The constructor of the class. |
| statics | Map | Map of static values / functions of the class. |
| members | Map | Map of instance members of the class. |
| defer | Function | Function that is called at the end of\n * processing the class declaration. |
Object or Array) directly inside the members section.\n * Only list and initialize it with null. Initialize your reference type inside the\n * construct. Check out one of the samples below to get the idea.\n * @return {Function} The defined class.\n */\n define : function(name, config) {\n if (config == undefined) {\n config = name;\n name = null;\n }\n return qx.Bootstrap.define.call(qx.Bootstrap, name, config);\n }\n },\n\n\n /**\n * Primary usage:\n * Accepts a selector string and returns a collection of found items. The optional context\n * element can be used to reduce the amount of found elements to children of the\n * context element. If the context object is a collection, its first item is used.\n *\n * Secondary usage:\n * Creates a collection from an existing DOM element, document node or window object\n * (or an Array containing any such objects)\n *\n * Sizzle is used as selector engine.\n * Check out the documentation\n * for more details.\n *\n * @param selector {String|Element|Document|Window|Array} Valid selector (CSS3 + extensions),\n * window object, DOM element/document or Array of DOM Elements.\n * @param context {Element|q} Only the children of this element are considered.\n * @return {q} A collection of DOM elements.\n */\n construct : function(selector, context) {\n if (!selector && this instanceof qxWeb) {\n return this;\n }\n\n if (!selector) {\n selector = [];\n }\n else if (qx.Bootstrap.isString(selector)) {\n if (context instanceof qxWeb && context.length != 0) {\n context = context[0];\n }\n if (context instanceof qxWeb) {\n selector = [];\n } else {\n selector = qx.bom.Selector.query(selector, context);\n }\n }\n else if ((selector.nodeType === 1 || selector.nodeType === 9 ||\n selector.nodeType === 11) ||\n (selector.history && selector.location && selector.document))\n {\n selector = [selector];\n }\n return qxWeb.$init(selector, qxWeb);\n },\n\n\n members : {\n /**\n * Gets a new collection containing only those elements that passed the\n * given filter. This can be either a selector expression or a filter\n * function.\n *\n * @param selector {String|Function} Selector expression or filter function\n * @return {q} New collection containing the elements that passed the filter\n */\n filter : function(selector) {\n if (qx.lang.Type.isFunction(selector)) {\n return qxWeb.$init(Array.prototype.filter.call(this, selector), this.constructor);\n }\n return qxWeb.$init(qx.bom.Selector.matches(selector, this), this.constructor);\n },\n\n\n /**\n * Recreates a collection which is free of all duplicate elements from the original.\n *\n * @return {q} Returns a copy with no duplicates\n */\n unique : function() {\n var unique = qx.lang.Array.unique(this);\n return qxWeb.$init(unique, this.constructor);\n },\n\n\n /**\n * Returns a copy of the collection within the given range.\n *\n * @param begin {Number} The index to begin.\n * @param end {Number?} The index to end.\n * @return {q} A new collection containing a slice of the original collection.\n */\n slice : function(begin, end) {\n // Old IEs return an empty array if the second argument is undefined\n // check 'end' explicit for \"undefined\" [BUG #7322]\n if (end !== undefined) {\n return qxWeb.$init(Array.prototype.slice.call(this, begin, end), this.constructor);\n }\n return qxWeb.$init(Array.prototype.slice.call(this, begin), this.constructor);\n },\n\n\n /**\n * Removes the given number of items and returns the removed items as a new collection.\n * This method can also add items. Take a look at the\n * documentation of MDN for more details.\n *\n * @param index {Number} The index to begin.\n * @param howMany {Number} the amount of items to remove.\n * @param varargs {var} As many items as you want to add.\n * @return {q} A new collection containing the removed items.\n */\n splice : function(index , howMany, varargs) {\n return qxWeb.$init(Array.prototype.splice.apply(this, arguments), this.constructor);\n },\n\n\n /**\n * Returns a new collection containing the modified elements. For more details, check out the\n * MDN documentation.\n *\n * @param callback {Function} Function which produces the new element.\n * @param thisarg {var} Context of the callback.\n * @return {q} New collection containing the elements that passed the filter\n */\n map : function(callback, thisarg) {\n return qxWeb.$init(Array.prototype.map.apply(this, arguments), qxWeb);\n },\n\n\n /**\n * Returns a copy of the collection including the given elements.\n *\n * @param varargs {var} As many items as you want to add.\n * @return {q} A new collection containing all items.\n */\n concat : function(varargs) {\n var clone = Array.prototype.slice.call(this, 0);\n for (var i=0; i < arguments.length; i++) {\n if (arguments[i] instanceof qxWeb) {\n clone = clone.concat(Array.prototype.slice.call(arguments[i], 0));\n } else {\n clone.push(arguments[i]);\n }\n }\n return qxWeb.$init(clone, this.constructor);\n },\n\n\n /**\n * Returns the index of the given element within the current\n * collection or -1 if the element is not in the collection\n * @param elem {Element|Element[]|qxWeb} Element or collection of elements\n * @param fromIndex {Integer} The index to start the search at\n * @return {Number} The element's index\n */\n indexOf : function(elem, fromIndex) {\n if (!elem) {\n return -1;\n }\n\n if (!fromIndex) {\n fromIndex = 0;\n }\n\n if (typeof fromIndex !== \"number\") {\n return -1;\n }\n\n if (fromIndex < 0) {\n fromIndex = this.length + fromIndex;\n if (fromIndex < 0) {\n fromIndex = 0;\n }\n }\n\n if (qx.lang.Type.isArray(elem)) {\n elem = elem[0];\n }\n\n for (var i = fromIndex, l = this.length; i\n * osparc.WatchDog.getInstance().startCheck();\n *\n */\n\nqx.Class.define(\"osparc.WatchDog\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.__clientHeartbeatWWPinger = new Worker(\"resource/osparc/pacemaker.js\");\n this.__clientHeartbeatWWPinger.onmessage = () => {\n this.__pingServer();\n };\n\n // register for socket.io event to change the default heartbeat interval\n const socket = osparc.wrapper.WebSocket.getInstance();\n socket.removeSlot(\"set_heartbeat_emit_interval\");\n socket.on(\"set_heartbeat_emit_interval\", ({ interval }) => {\n const newInterval = parseInt(interval) * 1000;\n this.setHeartbeatInterval(newInterval);\n }, this);\n },\n\n properties: {\n online: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeOnline\",\n apply: \"__applyOnline\"\n },\n\n heartbeatInterval: {\n check: \"Number\",\n init: 2 * 1000, // in milliseconds\n nullable: false,\n apply: \"_applyHeartbeatInterval\"\n }\n },\n\n members: {\n __clientHeartbeatWWPinger: null,\n\n __applyOnline: function(value) {\n const logo = osparc.navigation.LogoOnOff.getInstance();\n if (logo) {\n logo.setOnline(value);\n }\n\n if (value) {\n this.__clientHeartbeatWWPinger.postMessage([\"start\", this.getHeartbeatInterval()]);\n } else {\n this.__clientHeartbeatWWPinger.postMessage([\"stop\"]);\n }\n },\n\n _applyHeartbeatInterval: function(value) {\n this.__clientHeartbeatWWPinger.postMessage([\"start\", value]);\n },\n\n __pingServer: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n try {\n socket.emit(\"client_heartbeat\");\n } catch (error) {\n // no need to handle the error, nor does it need to cause further issues\n // it is ok to eat it up\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * The qx.locale.Manager provides static translation methods (like tr()) and\n * general locale information.\n *\n * @require(qx.event.dispatch.Direct)\n * @require(qx.locale.LocalizedString)\n *\n * @cldr()\n */\n\nqx.Class.define(\"qx.locale.Manager\",\n{\n type : \"singleton\",\n extend : qx.core.Object,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n this.__translations = qx.$$translations || {};\n this.__locales = qx.$$locales || {};\n\n this.initLocale();\n this.__clientLocale = this.getLocale();\n },\n\n\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /**\n * Translate a message\n *\n * @param messageId {String} message id (may contain format strings)\n * @param varargs {Object} variable number of arguments applied to the format string\n * @return {String | LocalizedString} The translated message or localized string\n * @see qx.lang.String.format\n */\n tr : function(messageId, varargs)\n {\n var args = qx.lang.Array.fromArguments(arguments);\n args.splice(0, 1);\n\n return qx.locale.Manager.getInstance().translate(messageId, args);\n },\n\n\n /**\n * Translate a plural message\n *\n * Depending on the third argument the plural or the singular form is chosen.\n *\n * @param singularMessageId {String} message id of the singular form (may contain format strings)\n * @param pluralMessageId {String} message id of the plural form (may contain format strings)\n * @param count {Integer} singular form if equals 1, otherwise plural\n * @param varargs {Object} variable number of arguments applied to the format string\n * @return {String | LocalizedString} The translated message or localized string\n * @see qx.lang.String.format\n */\n trn : function(singularMessageId, pluralMessageId, count, varargs)\n {\n var args = qx.lang.Array.fromArguments(arguments);\n args.splice(0, 3);\n\n // assumes \"Two forms, singular used for one only\" (seems to be the most common form)\n // (http://www.gnu.org/software/gettext/manual/html_node/gettext_150.html#Plural-forms)\n // closely related with bug #745\n if (count != 1) {\n return qx.locale.Manager.getInstance().translate(pluralMessageId, args);\n } else {\n return qx.locale.Manager.getInstance().translate(singularMessageId, args);\n }\n },\n\n\n /**\n * Translate a message with translation hint (from developer addressed to translator).\n *\n * @param hint {String} hint for the translator of the message. Will be included in the .po file.\n * @param messageId {String} message id (may contain format strings)\n * @param varargs {Object} variable number of arguments applied to the format string\n * @return {String | LocalizedString} The translated message or localized string\n * @see qx.lang.String.format\n */\n trc : function(hint, messageId, varargs)\n {\n var args = qx.lang.Array.fromArguments(arguments);\n args.splice(0, 2);\n\n return qx.locale.Manager.getInstance().translate(messageId, args);\n },\n\n /**\n * Translate a plural message with translation hint (from developer addressed to translator).\n *\n * Depending on the third argument the plural or the singular form is chosen.\n *\n * @param hint {String} hint for the translator of the message. Will be included in the .po file.\n * @param singularMessageId {String} message id of the singular form (may contain format strings)\n * @param pluralMessageId {String} message id of the plural form (may contain format strings)\n * @param count {Integer} singular form if equals 1, otherwise plural\n * @param varargs {Object} variable number of arguments applied to the format string\n * @return {String | LocalizedString} The translated message or localized string\n * @see qx.lang.String.format\n */\n trnc : function(hint, singularMessageId, pluralMessageId, count, varargs)\n {\n var args = qx.lang.Array.fromArguments(arguments);\n args.splice(0, 4);\n\n // see trn()\n if (count != 1) {\n return qx.locale.Manager.getInstance().translate(pluralMessageId, args);\n } else {\n return qx.locale.Manager.getInstance().translate(singularMessageId, args);\n }\n },\n\n /**\n * Mark the message for translation but return the original message.\n *\n * @param messageId {String} the message ID\n * @return {String} messageId\n */\n marktr : function(messageId) {\n return messageId;\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** current locale. locale is an language code like de, de_AT, en, en_GB, fr, ... */\n locale :\n {\n check : \"String\",\n apply : \"_applyLocale\",\n event : \"changeLocale\",\n init : (function() { \n var locale = qx.core.Environment.get(\"locale\");\n if(!locale || locale === \"\") {\n return qx.core.Environment.get(\"locale.default\");\n }\n var variant = qx.core.Environment.get(\"locale.variant\");\n if (variant !== \"\") {\n locale += \"_\" + variant;\n }\n return locale; })()\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n\n __defaultLocale : qx.core.Environment.get(\"locale.default\"),\n __locale : null,\n __language : null,\n __translations : null,\n __locales : null,\n __clientLocale : null,\n\n /**\n * Get the language code of the current locale\n *\n * This is the first part of a locale definition. The language for \"de_DE\" would be \"de\"\n *\n * @return {String} language code\n */\n getLanguage : function() {\n return this.__language;\n },\n\n\n /**\n * Get the territory code of the current locale\n *\n * This is the second part of a locale definition. The territory for \"de_DE\" would be \"DE\"\n *\n * @return {String} territory code\n */\n getTerritory : function() {\n return this.getLocale().split(\"_\")[1] || \"\";\n },\n\n\n /**\n * Return the available application locales\n *\n * This corresponds to the LOCALES setting in config.json. Without argument,\n * it only returns the currently loaded locales, with an argument of true\n * all locales that went into the build. This is particularly interesting if\n * locales were generated as dedicated I18N parts, and have to be loaded\n * explicitly before being available.\n *\n * @param includeNonloaded {Boolean?null} include locales not yet loaded\n * @return {String[]} array of available locales\n */\n getAvailableLocales : function(includeNonloaded)\n {\n var locales = [];\n\n for (var locale in this.__locales)\n {\n if (locale != this.__defaultLocale) {\n if (this.__locales[locale] === null && !includeNonloaded) {\n continue; // skip not yet loaded locales\n }\n locales.push(locale);\n }\n }\n\n return locales;\n },\n\n\n /**\n * Extract the language part from a locale.\n *\n * @param locale {String} locale to be used\n * @return {String} language\n */\n __extractLanguage : function(locale)\n {\n var language;\n if (locale == null) {\n return null;\n }\n var pos = locale.indexOf(\"_\");\n\n if (pos == -1) {\n language = locale;\n } else {\n language = locale.substring(0, pos);\n }\n\n return language;\n },\n\n\n // property apply\n _applyLocale : function(value, old)\n {\n if (qx.core.Environment.get(\"qx.debug\")) {\n if (!(value in this.__locales || value == this.__clientLocale)) {\n qx.log.Logger.warn(\"Locale: \" + value+\" not available.\");\n }\n }\n\n this.__locale = value;\n this.__language = this.__extractLanguage(value);\n },\n\n\n /**\n * Add a translation to the translation manager.\n *\n * If
languageCode already exists, its map will be updated with\n * translationMap (new keys will be added, existing keys will be\n * overwritten).\n *\n * @param languageCode {String} language code of the translation like de, de_AT, en, en_GB, fr, ...\n * @param translationMap {Map} mapping of message identifiers to message strings in the target\n * language, e.g. {\"greeting_short\" : \"Hello\"}. Plural forms\n * are separate keys.\n */\n addTranslation : function(languageCode, translationMap)\n {\n var catalog = this.__translations;\n if (catalog[languageCode])\n {\n for (var key in translationMap) {\n catalog[languageCode][key] = translationMap[key];\n }\n }\n else\n {\n catalog[languageCode] = translationMap;\n }\n },\n\n\n /**\n * Add a localization to the localization manager.\n *\n * If localeCode already exists, its map will be updated with\n * localeMap (new keys will be added, existing keys will be overwritten).\n *\n * @param localeCode {String} locale code of the translation like de, de_AT, en, en_GB, fr, ...\n * @param localeMap {Map} mapping of locale keys to the target locale values, e.g.\n * {\"cldr_date_format_short\" : \"M/d/yy\"}.\n */\n addLocale : function(localeCode, localeMap)\n {\n var catalog = this.__locales;\n if (catalog[localeCode])\n {\n for (var key in localeMap) {\n catalog[localeCode][key] = localeMap[key];\n }\n }\n else\n {\n catalog[localeCode] = localeMap;\n }\n },\n\n\n /**\n * Translate a message using the current locale and apply format string to the arguments.\n *\n * Implements the lookup chain locale (e.g. en_US) -> language (e.g. en) ->\n * default locale (e.g. C). Localizes the arguments if possible and splices\n * them into the message. If qx.dynlocale is on, returns a {@link\n * LocalizedString}.\n *\n * @param messageId {String} message id (may contain format strings)\n * @param args {Object[]} array of objects, which are inserted into the format string\n * @param locale {String ? #locale} locale to be used; if not given, defaults to the value of {@link #locale}\n * @return {String | LocalizedString} translated message or localized string\n */\n translate : function(messageId, args, locale)\n {\n var catalog = this.__translations;\n return this.__lookupAndExpand(catalog, messageId, args, locale);\n },\n\n /**\n * Provide localization (CLDR) data.\n *\n * Implements the lookup chain locale (e.g. en_US) -> language (e.g. en) ->\n * default locale (e.g. C). Localizes the arguments if possible and splices\n * them into the message. If qx.dynlocale is on, returns a {@link\n * LocalizedString}.\n *\n * @param messageId {String} message id (may contain format strings)\n * @param args {Object[]} array of objects, which are inserted into the format string\n * @param locale {String ? #locale} locale to be used; if not given, defaults to the value of {@link #locale}\n * @return {String | LocalizedString} translated message or localized string\n */\n localize : function(messageId, args, locale)\n {\n var catalog = this.__locales;\n return this.__lookupAndExpand(catalog, messageId, args, locale);\n },\n\n\n /**\n * Look up an I18N key in a catalog and expand format strings.\n *\n * Implements the lookup chain locale (e.g. en_US) -> language (e.g. en) ->\n * default locale (e.g. C). Localizes the arguments if possible and splices\n * them into the message. If qx.dynlocale is on, returns a {@link\n * LocalizedString}.\n *\n * @param catalog {Map} map of I18N keys and their values\n * @param messageId {String} message id (may contain format strings)\n * @param args {Object[]} array of objects, which are inserted into the format string\n * @param locale {String ? #locale} locale to be used; if not given, defaults to the value of {@link #locale}\n * @return {String | LocalizedString} translated message or localized string\n */\n __lookupAndExpand : function(catalog, messageId, args, locale)\n {\n if (qx.core.Environment.get(\"qx.debug\")) {\n this.assertObject(catalog);\n this.assertString(messageId);\n this.assertArray(args);\n }\n var txt;\n\n if (!catalog) {\n return messageId;\n }\n\n if (locale) {\n var language = this.__extractLanguage(locale);\n }\n else\n {\n locale = this.__locale;\n language = this.__language;\n }\n\n // e.g. DE_at\n if (!txt && catalog[locale]) {\n txt = catalog[locale][messageId];\n }\n\n // e.g. DE\n if (!txt && catalog[language]) {\n txt = catalog[language][messageId];\n }\n\n // C\n if (!txt && catalog[this.__defaultLocale]) {\n txt = catalog[this.__defaultLocale][messageId];\n }\n\n if (!txt) {\n txt = messageId;\n }\n\n if (args.length > 0)\n {\n var translatedArgs = [];\n for ( var i = 0; i < args.length; i++)\n {\n var arg = args[i];\n if (arg && arg.translate) {\n translatedArgs[i] = arg.translate();\n } else {\n translatedArgs[i] = arg;\n }\n }\n txt = qx.lang.String.format(txt, translatedArgs);\n }\n\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n txt = new qx.locale.LocalizedString(txt, messageId, args, catalog === this.__locales);\n }\n\n return txt;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.DownloadLinkTracker\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n downloading: {\n check: \"Boolean\",\n init: false,\n nullable: true\n }\n },\n\n members: {\n downloadLinkUnattended: function(url, fileName) {\n const downloadAnchorNode = document.createElement(\"a\");\n downloadAnchorNode.setAttribute(\"href\", url);\n downloadAnchorNode.setAttribute(\"download\", fileName);\n downloadAnchorNode.setAttribute(\"osparc\", \"downloadFile\");\n document.body.appendChild(downloadAnchorNode);\n this.setDownloading(true);\n downloadAnchorNode.click();\n document.body.removeChild(downloadAnchorNode);\n // This is needed to make it work in Firefox\n setTimeout(() => this.setDownloading(false), 100);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Singleton class that stores all the application resources and acts as a cache for them. It is used by {osparc.data.Resources},\n * before making an API call to retrieve resources from the server, it will try to get them from here. Same with post and put calls,\n * their stored elements will be cached here.\n *\n * *Example*\n *\n * Here is a little example of how to use the class. You can get resources like this:\n *\n * \n * let studies = osparc.store.Store.getInstance().getStudies();\n *\n *\n * To invalidate the cache for any of the entities, config for example, just do:\n *
\n * osparc.store.Store.getInstance().resetConfig();\n *\n * or\n *
\n * osparc.store.Store.getInstance().invalidate(\"config\");\n *\n * To invalidate the entire cache:\n *
\n * osparc.store.Store.getInstance().invalidate();\n *\n */\nqx.Class.define(\"osparc.store.Store\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n config: {\n check: \"Object\",\n init: {}\n },\n statics: {\n check: \"Object\",\n init: {}\n },\n announcements: {\n check: \"Array\",\n init: []\n },\n maintenance: {\n check: \"Object\",\n init: {}\n },\n currentStudy: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: true,\n event: \"changeCurrentStudy\",\n apply: \"__applyCurrentStudy\",\n },\n currentStudyId: {\n check: \"String\",\n init: null,\n nullable: true\n },\n studyBrowserContext: {\n check: [\"studiesAndFolders\", \"workspaces\", \"search\", \"trash\"],\n init: \"studiesAndFolders\",\n nullable: false,\n event: \"changeStudyBrowserContext\",\n },\n studies: {\n check: \"Array\",\n init: []\n },\n folders: {\n check: \"Array\",\n init: []\n },\n workspaces: {\n check: \"Array\",\n init: []\n },\n studyComments: {\n check: \"Array\",\n init: []\n },\n resourceUsage: {\n check: \"Array\",\n init: []\n },\n nodesInStudyResources: {\n check: \"Array\",\n init: []\n },\n serviceResources: {\n check: \"Array\",\n init: []\n },\n snapshots: {\n check: \"Array\",\n init: [],\n event: \"changeSnapshots\"\n },\n iterations: {\n check: \"Array\",\n init: [],\n event: \"changeIterations\"\n },\n templates: {\n check: \"Array\",\n init: []\n },\n profile: {\n check: \"Object\",\n init: {}\n },\n wallets: {\n check: \"Array\",\n init: [],\n event: \"changeWallets\",\n apply: \"__applyWallets\"\n },\n // If a study with a wallet is opened, this wallet will be the active one\n activeWallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changeActiveWallet\",\n apply: \"__applyActiveWallet\"\n },\n // User's default or primary wallet\n preferredWallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changePreferredWallet\",\n apply: \"__applyPreferredWallet\"\n },\n // activeWallet, preferredWallet or null (in a product with wallets enabled there shouldn't be a null context wallet)\n contextWallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changeContextWallet\"\n },\n creditPrice: {\n check: \"Number\",\n init: null,\n nullable: true,\n event: \"changeCreditPrice\"\n },\n productMetadata: {\n check: \"Object\",\n init: {},\n nullable: true\n },\n permissions: {\n check: \"Array\",\n init: []\n },\n apiKeys: {\n check: \"Array\",\n init: []\n },\n tokens: {\n check: \"Array\",\n init: []\n },\n services: {\n check: \"Array\",\n init: []\n },\n pricingPlans: {\n check: \"Array\",\n init: []\n },\n pricingUnits: {\n check: \"Array\",\n init: []\n },\n billableServices: {\n check: \"Array\",\n init: []\n },\n portsCompatibility: {\n check: \"Object\",\n init: {}\n },\n dags: {\n check: \"Array\",\n init: []\n },\n storageLocations: {\n check: \"Array\",\n init: []\n },\n tags: {\n check: \"Array\",\n init: [],\n event: \"changeTags\"\n },\n classifiers: {\n check: \"Array\",\n init: null,\n nullable: true,\n event: \"changeClassifiers\"\n },\n tasks: {\n check: \"Array\",\n init: []\n },\n licensedItems: {\n check: \"Array\",\n init: []\n },\n },\n\n events: {\n \"studyStateChanged\": \"qx.event.type.Data\",\n \"studyDebtChanged\": \"qx.event.type.Data\",\n },\n\n members: {\n // fetch resources that do not require log in\n preloadCalls: async function() {\n await osparc.data.Resources.get(\"config\");\n await osparc.data.Resources.get(\"statics\");\n },\n\n /**\n * Updates an element or a set of elements in the store.\n * @param {String} resource Name of the resource property. If used with {osparc.data.Resources}, it has to be the same there.\n * @param {*} data Data to be stored, it needs to have the correct type as in the property definition.\n * @param {String} idField Key(s) used for the id field. This field has to be unique among all elements of that resource.\n */\n update: function(resource, data, idField = \"uuid\") {\n if (data === undefined) {\n return;\n }\n const stored = this.get(resource);\n if (Array.isArray(stored)) {\n if (Array.isArray(data)) {\n this.set(resource, data);\n } else {\n const idFields = Array.isArray(idField) ? idField : [idField];\n const element = stored.find(item => idFields.every(id => item[id] === data[id]));\n if (element) {\n const newStored = stored.map(item => {\n if (idFields.every(id => item[id] === data[id])) {\n return data;\n }\n return item;\n });\n this.set(resource, newStored);\n } else {\n this.set(resource, [...stored, data]);\n }\n }\n } else {\n this.set(resource, data);\n }\n },\n\n append: function(resource, data) {\n if (data === undefined) {\n return;\n }\n const stored = this.get(resource);\n if (Array.isArray(stored)) {\n this.set(resource, stored.concat(data));\n } else {\n this.set(resource, data);\n }\n },\n\n /**\n * Remove an element from an array, or erase the store for a given resource.\n * @param {String} resource Name of the resource property. If used with {osparc.data.Resources}, it has to be the same there.\n * @param {String} idField Key(s) used for the id field. This field has to be unique among all elements of that resource.\n * @param {String} id(s) Value of the id field.\n */\n remove: function(resource, idField = \"uuid\", id) {\n const stored = this.get(resource);\n if (Array.isArray(stored)) {\n const idFields = Array.isArray(idField) ? idField : [idField];\n const ids = Array.isArray(id) ? id : [id];\n const index = stored.findIndex(element => {\n let match = true;\n for (let i=0; i
\n * // create the composite\n * var composite = new qx.ui.container.Composite()\n *\n * // configure it with a horizontal box layout with a spacing of '5'\n * composite.setLayout(new qx.ui.layout.HBox(5));\n *\n * // add some children\n * composite.add(new qx.ui.basic.Label(\"Name: \"));\n * composite.add(new qx.ui.form.TextField());\n *\n * this.getRoot().add(composite);\n *\n *\n * This example horizontally groups a label and text field by using a\n * Composite configured with a horizontal box layout as a container.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.container.Composite\",\n{\n extend : qx.ui.core.Widget,\n include : [ qx.ui.core.MChildrenHandling, qx.ui.core.MLayoutHandling ],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param layout {qx.ui.layout.Abstract} A layout instance to use to\n * place widgets on the screen.\n */\n construct : function(layout)\n {\n this.base(arguments);\n\n if (layout != null) {\n this._setLayout(layout);\n }\n },\n\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /**\n * This event is fired after a child widget was added to this widget. The\n * {@link qx.event.type.Data#getData} method of the event returns the\n * added child.\n */\n addChildWidget : \"qx.event.type.Data\",\n\n\n /**\n * This event is fired after a child widget has been removed from this widget.\n * The {@link qx.event.type.Data#getData} method of the event returns the\n * removed child.\n */\n removeChildWidget : \"qx.event.type.Data\"\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // overridden\n _afterAddChild : function(child) {\n this.fireNonBubblingEvent(\"addChildWidget\", qx.event.type.Data, [child]);\n },\n\n\n // overridden\n _afterRemoveChild : function(child) {\n this.fireNonBubblingEvent(\"removeChildWidget\", qx.event.type.Data, [child]);\n }\n },\n\n\n\n /*\n *****************************************************************************\n DEFER\n *****************************************************************************\n */\n\n defer : function(statics, members)\n {\n qx.ui.core.MChildrenHandling.remap(members);\n qx.ui.core.MLayoutHandling.remap(members);\n }\n});","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2022 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Author: Ignacio Pascual (ignapas)\n */\n\n/**\n * @asset(form/test1.json)\n */\n\nqx.Class.define(\"osparc.desktop.FormSandboxPage\", {\n extend: qx.ui.container.Composite,\n construct: function() {\n this.base();\n this.__buildLayout();\n this.__attachEventHandlers();\n osparc.utils.Utils.fetchJSON(\"/resource/form/test1.json\")\n .then(schema => {\n const stringData = JSON.stringify(schema, null, 4);\n this.__schema.setValue(stringData);\n this.__form.addListener(\"ajvReady\", () => {\n this.__form.setSchema(schema);\n });\n });\n },\n members: {\n __schema: null,\n __data: null,\n __jsonData: null,\n __buildLayout: function() {\n this.setPadding(100);\n this.setLayout(new qx.ui.layout.HBox(50));\n const schemaAndData = new qx.ui.container.Composite();\n schemaAndData.setLayout(new qx.ui.layout.VBox(20));\n this.__schema = new qx.ui.form.TextArea();\n this.__data = new qx.ui.form.TextArea();\n schemaAndData.add(this.__schema, {height: \"50%\"});\n schemaAndData.add(this.__data, {height: \"50%\"});\n this.add(schemaAndData, {width: \"50%\"});\n this.__form = new osparc.form.json.JsonSchemaForm();\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(this.__form);\n this.add(scrollContainer, {width: \"50%\"});\n },\n __attachEventHandlers: function() {\n this.__schema.addListener(\"input\", data => {\n try {\n const jsonSchema = JSON.parse(data.getData());\n this.__form.setSchema(jsonSchema);\n this.__form.setData(this.__jsonData);\n } catch (e) {\n this.__form.setSchema(null);\n }\n });\n this.__data.addListener(\"input\", data => {\n try {\n const jsonData = JSON.parse(data.getData());\n this.__form.setData(jsonData);\n this.__jsonData = jsonData;\n } catch (e) {\n console.error(e);\n this.__form.setData(null);\n }\n });\n this.__form.addListener(\"submit\", data => {\n const stringData = JSON.stringify(data.getData().json, null, 4);\n this.__data.setValue(stringData);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Sandbox of static methods related to products.\n */\n\nqx.Class.define(\"osparc.product.Utils\", {\n type: \"static\",\n\n statics: {\n getProductName: function() {\n return qx.core.Environment.get(\"product.name\");\n },\n\n isProduct: function(productName) {\n const product = this.getProductName();\n return (productName === product);\n },\n\n isS4LProduct: function() {\n return (\n this.isProduct(\"s4l\") ||\n this.isProduct(\"s4lacad\") ||\n this.isProduct(\"s4ldesktop\") ||\n this.isProduct(\"s4ldesktopacad\")\n );\n },\n\n getStudyAlias: function(options = {}) {\n let alias = null;\n if (this.getProductName().includes(\"s4l\")) {\n if (options.plural) {\n alias = qx.locale.Manager.tr(\"projects\");\n } else {\n alias = qx.locale.Manager.tr(\"project\");\n }\n } else if (options.plural) {\n alias = qx.locale.Manager.tr(\"studies\");\n } else {\n alias = qx.locale.Manager.tr(\"study\");\n }\n\n if (options.firstUpperCase) {\n alias = osparc.utils.Utils.capitalize(alias);\n } else if (options.allUpperCase) {\n alias = alias.toUpperCase();\n }\n\n return alias;\n },\n\n getTemplateAlias: function(options = {}) {\n let alias = null;\n if (this.getProductName().includes(\"s4l\")) {\n if (options.plural) {\n alias = qx.locale.Manager.tr(\"tutorials\");\n } else {\n alias = qx.locale.Manager.tr(\"tutorial\");\n }\n } else if (options.plural) {\n alias = qx.locale.Manager.tr(\"templates\");\n } else {\n alias = qx.locale.Manager.tr(\"template\");\n }\n\n if (options.firstUpperCase) {\n alias = osparc.utils.Utils.capitalize(alias);\n } else if (options.allUpperCase) {\n alias = alias.toUpperCase();\n }\n\n return alias;\n },\n\n getServiceAlias: function(options = {}) {\n let alias = qx.locale.Manager.tr(\"service\");\n if (options.plural) {\n alias = qx.locale.Manager.tr(\"services\");\n }\n\n if (options.firstUpperCase) {\n alias = osparc.utils.Utils.capitalize(alias);\n } else if (options.allUpperCase) {\n alias = alias.toUpperCase();\n }\n\n return alias;\n },\n\n resourceTypeToAlias: function(resourceType, options) {\n switch (resourceType) {\n case \"study\":\n return this.getStudyAlias(options);\n case \"template\":\n return this.getTemplateAlias(options);\n case \"service\":\n return this.getServiceAlias(options);\n }\n return resourceType;\n },\n\n getLogoPath: function(longLogo = true) {\n let logosPath = null;\n const colorManager = qx.theme.manager.Color.getInstance();\n const textColor = colorManager.resolve(\"text\");\n const lightLogo = osparc.utils.Utils.getColorLuminance(textColor) > 0.4;\n const product = osparc.product.Utils.getProductName();\n switch (product) {\n case \"s4l\": {\n if (lightLogo) {\n if (longLogo) {\n logosPath = \"osparc/Sim4Life_full_logo_white.svg\";\n } else {\n logosPath = \"osparc/s4l_logo_white_short.svg\";\n }\n } else if (longLogo) {\n logosPath = \"osparc/Sim4Life_full_logo_black.svg\";\n } else {\n logosPath = \"osparc/s4l_logo_black_short.svg\";\n }\n break;\n }\n case \"s4llite\":\n logosPath = lightLogo ? \"osparc/s4llite-white.png\" : \"osparc/s4llite-black.png\";\n break;\n case \"s4lacad\":\n logosPath = lightLogo ? \"osparc/Sim4Life_full_logo_white.svg\" : \"osparc/Sim4Life_full_logo_black.svg\";\n break;\n case \"s4ldesktop\":\n logosPath = lightLogo ? \"osparc/Sim4Life_full_logo_white.svg\" : \"osparc/Sim4Life_full_logo_black.svg\";\n break;\n case \"s4ldesktopacad\":\n logosPath = lightLogo ? \"osparc/Sim4Life_full_logo_white.svg\" : \"osparc/Sim4Life_full_logo_black.svg\";\n break;\n case \"tis\":\n logosPath = lightLogo ? \"osparc/tip_itis-white.svg\" : \"osparc/tip_itis-black.svg\";\n break;\n case \"tiplite\":\n logosPath = lightLogo ? \"osparc/tip_lite_itis-white.svg\" : \"osparc/tip_lite_itis-black.svg\";\n break;\n default:\n logosPath = lightLogo ? \"osparc/osparc-white.svg\" : \"osparc/osparc-black.svg\";\n break;\n }\n return logosPath;\n },\n\n forceNullCreditsColor: function(wallet) {\n // TIP is a product that can be used for free, so allow making 0 credits scenario more friendly.\n if (osparc.product.Utils.isProduct(\"tis\") || osparc.product.Utils.isProduct(\"tiplite\")) {\n // Ideally, check if there was ever a transaction. If not, keep the indicator gray.\n // Note: Since we can't fetch payments per wallet, for now rely on the available credits.\n const credits = wallet.getCreditsAvailable();\n return credits === 0;\n }\n return false;\n },\n\n /**\n * @returns {String} [\"REGISTER\", \"REQUEST_ACCOUNT_FORM\", \"REQUEST_ACCOUNT_INSTRUCTIONS\"]\n */\n getCreateAccountAction: function() {\n const config = osparc.store.Store.getInstance().get(\"config\");\n if (config[\"invitation_required\"]) {\n const vendor = osparc.store.VendorInfo.getInstance().getVendor();\n if (vendor[\"invitation_form\"]) {\n // If invitation_required (login_settings) and invitation_form (vendor)\n return \"REQUEST_ACCOUNT_FORM\";\n }\n // do not show request account form, pop up a dialog with instructions instead\n return \"REQUEST_ACCOUNT_INSTRUCTIONS\";\n }\n return \"REGISTER\";\n },\n\n hasConvertToPipelineEnabled: function() {\n return false;\n },\n\n // oSPARC only\n hasExportCMisEnabled: function() {\n const product = this.getProductName();\n return product === \"osparc\";\n },\n\n // All products except oSPARC\n hasIdlingTrackerEnabled: function() {\n const product = this.getProductName();\n return product !== \"osparc\";\n },\n\n // All products except oSPARC\n showLicenseExtra: function() {\n const product = this.getProductName();\n return product !== \"osparc\";\n },\n\n showStudyPreview: function() {\n if (this.isProduct(\"s4llite\") || this.isProduct(\"tis\") || this.isProduct(\"tiplite\")) {\n return false;\n }\n return true;\n },\n\n showAboutProduct: function() {\n return (\n this.isS4LProduct() ||\n this.isProduct(\"s4llite\") ||\n this.isProduct(\"tis\") ||\n this.isProduct(\"tiplite\")\n );\n },\n\n showPreferencesTokens: function() {\n if (this.isProduct(\"s4llite\") || this.isProduct(\"tis\") || this.isProduct(\"tiplite\")) {\n return false;\n }\n return true;\n },\n\n showPreferencesExperimental: function() {\n if (this.isProduct(\"s4llite\") || this.isProduct(\"tis\") || this.isProduct(\"tiplite\")) {\n return false;\n }\n return true;\n },\n\n showDisableServiceAutoStart: function() {\n if (this.isProduct(\"s4llite\")) {\n return false;\n }\n return true;\n },\n\n showQuality: function() {\n if (this.isProduct(\"osparc\")) {\n return true;\n }\n return false;\n },\n\n showClassifiers: function() {\n if (this.getProductName().includes(\"s4l\")) {\n return false;\n }\n return true;\n },\n\n showS4LStore: function() {\n const licensesEnabled = osparc.store.StaticInfo.getInstance().areLicensesEnabled();\n return this.isS4LProduct() && licensesEnabled;\n },\n\n getIconUrl: function(asset = \"Default.png\") {\n const base = \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/icons\"\n let url;\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n url = `${base}/osparc/${asset}`;\n break;\n case \"tis\":\n case \"tiplite\":\n url = `${base}/tip/${asset}`;\n break;\n default:\n url = `${base}/s4l/${asset}`;\n break;\n }\n return url;\n },\n\n getThumbnailUrl: function(asset = \"Default.png\") {\n const base = \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails\"\n let url;\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n url = `${base}/oSparc/${asset}`;\n break;\n case \"tis\":\n case \"tiplite\":\n url = `${base}/TIP/${asset}`;\n break;\n default:\n url = `${base}/S4L/${asset}`;\n break;\n }\n return url;\n },\n\n getBackgroundUrl: function(asset = \"Thumbnail-01.png\") {\n const base = \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/background-images\"\n let url;\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n url = `${base}/oSparc/${asset}`;\n break;\n case \"tis\":\n case \"tiplite\":\n url = `${base}/TIP/${asset}`;\n break;\n default:\n url = `${base}/S4L/${asset}`;\n break;\n }\n return url;\n },\n\n hasNewPlusButton: function() {\n return Boolean(osparc.store.Products.getInstance().getPlusButtonUiConfig());\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * Manager for color themes\n */\nqx.Class.define(\"qx.theme.manager.Color\",\n{\n type : \"singleton\",\n extend : qx.util.ValueManager,\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** the currently selected color theme */\n theme :\n {\n check : \"Theme\",\n nullable : true,\n apply : \"_applyTheme\",\n event : \"changeTheme\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n\n _applyTheme : function(value)\n {\n var dest = {};\n\n if (value) {\n var colors = value.colors;\n\n for (var name in colors) {\n dest[name] = this.__parseColor(colors, name);\n }\n }\n\n this._setDynamic(dest);\n },\n\n\n /**\n * Helper to take a color stored in the theme and returns the string color value.\n * In most of the times that means it just returns the string stored in the theme.\n * It additionally checks if its a valid color at all.\n *\n * @param colors {Map} The map of color definitions.\n * @param name {String} The name of the color to check.\n * @return {String} The resolved color as string.\n */\n __parseColor : function(colors, name) {\n var color = colors[name];\n if (typeof color === \"string\") {\n if (!qx.util.ColorUtil.isCssString(color)) {\n // check for references to in theme colors\n if (colors[color] != undefined) {\n return this.__parseColor(colors, color);\n }\n throw new Error(\"Could not parse color: \" + color);\n }\n return color;\n\n } else if (color instanceof Array) {\n return qx.util.ColorUtil.rgbToRgbString(color);\n }\n\n throw new Error(\"Could not parse color: \" + color);\n },\n\n\n /**\n * Returns the dynamically interpreted result for the incoming value,\n * (if available), otherwise returns the original value\n * @param value {String} Value to resolve\n * @return {var} either returns the (translated) result of the incoming\n * value or the value itself\n */\n resolve : function(value)\n {\n var cache = this._dynamic;\n var resolved = cache[value];\n\n if (resolved)\n {\n return resolved;\n }\n\n // If the font instance is not yet cached create a new one to return\n // This is true whenever a runtime include occurred (using \"qx.Theme.include\"\n // or \"qx.Theme.patch\"), since these methods only merging the keys of\n // the theme and are not updating the cache\n var theme = this.getTheme();\n if (theme !== null && theme.colors[value])\n {\n return cache[value] = theme.colors[value];\n }\n\n return value;\n },\n\n\n /**\n * Whether a value is interpreted dynamically\n *\n * @param value {String} dynamically interpreted identifier\n * @return {Boolean} returns true if the value is interpreted dynamically\n */\n isDynamic : function(value) {\n var cache = this._dynamic;\n\n if (value && (cache[value] !== undefined))\n {\n return true;\n }\n\n // If the font instance is not yet cached create a new one to return\n // This is true whenever a runtime include occurred (using \"qx.Theme.include\"\n // or \"qx.Theme.patch\"), since these methods only merging the keys of\n // the theme and are not updating the cache\n var theme = this.getTheme();\n if (theme !== null && value && (theme.colors[value] !== undefined))\n {\n cache[value] = theme.colors[value];\n return true;\n }\n\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.StaticInfo\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n members: {\n getValue: function(key) {\n const statics = osparc.store.Store.getInstance().get(\"statics\");\n if (key in statics) {\n return statics[key];\n }\n const errorMsg = `${key} not found in statics`;\n console.warn(errorMsg);\n return null;\n },\n\n getPlatformName: function() {\n const staticKey = \"stackName\";\n const stackName = this.getValue(staticKey);\n let platformName = \"dev\";\n if (stackName.includes(\"master\")) {\n platformName = \"master\";\n } else if (stackName.includes(\"staging\")) {\n platformName = \"staging\";\n } else if (stackName.includes(\"production\")) {\n platformName = \"\";\n }\n return platformName;\n },\n\n getDisplayName: function() {\n const staticKey = \"displayName\";\n return this.getValue(staticKey);\n },\n\n getReleaseData: function() {\n const rTag = this.getValue(\"vcsReleaseTag\");\n const rUrl = this.getValue(\"vcsReleaseUrl\");\n return {\n \"tag\": rTag,\n \"url\": rUrl\n };\n },\n\n\n getMaxNumberDyNodes: function() {\n const staticKey = \"webserverProjects\";\n const wsStaticData = this.getValue(staticKey);\n const key = \"PROJECTS_MAX_NUM_RUNNING_DYNAMIC_NODES\";\n if (key in wsStaticData) {\n return wsStaticData[key];\n }\n return null;\n },\n\n areLicensesEnabled: function() {\n const isDisabled = osparc.utils.DisabledPlugins.isLicensesDisabled();\n return !isDisabled;\n },\n\n getTrashRetentionDays: function() {\n const staticKey = \"webserverTrash\";\n const wsStaticData = this.getValue(staticKey);\n const key = \"TRASH_RETENTION_DAYS\";\n if (key in wsStaticData) {\n return wsStaticData[key];\n }\n return \"unknown\";\n },\n\n getAccountDeletionRetentionDays: function() {\n const staticKey = \"webserverLogin\";\n const wsStaticData = this.getValue(staticKey);\n const key = \"LOGIN_ACCOUNT_DELETION_RETENTION_DAYS\";\n if (key in wsStaticData) {\n return wsStaticData[key];\n }\n return 30;\n },\n\n is2FARequired: function() {\n const staticKey = \"webserverLogin\";\n const wsStaticData = this.getValue(staticKey);\n const key = \"LOGIN_2FA_REQUIRED\";\n if (key in wsStaticData) {\n return wsStaticData[key];\n }\n return false;\n },\n\n getCountries: function() {\n const staticKey = \"countries\";\n const metadata = this.getValue(staticKey);\n return metadata ? metadata : [];\n },\n\n /**\n * @returns {Number} Cookie expiration time in seconds\n */\n getCookieMaxAge: function() {\n const staticKey = \"webserverSession\";\n const wsStaticData = this.getValue(staticKey);\n const key = \"SESSION_COOKIE_MAX_AGE\";\n if (key in wsStaticData) {\n return wsStaticData[key];\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.NewRelease\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__buildLayout();\n },\n\n statics: {\n /**\n * Compare the version logged in the cache with the one being shown\n */\n firstTimeISeeThisFrontend: function() {\n let isIt = false;\n const lastUICommit = osparc.utils.Utils.localCache.getLastCommitVcsRefUI();\n const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();\n if (lastUICommit && thisUICommit) {\n isIt = lastUICommit !== thisUICommit;\n }\n osparc.utils.Utils.localCache.setLastCommitVcsRefUI(thisUICommit);\n return isIt;\n },\n\n /**\n * Compare the latest version provided by the backend with the one loaded in the browser (might be an old cached one)\n */\n isMyFrontendOld: function() {\n return new Promise((resolve, reject) => {\n osparc.store.AppSummary.getLatestUIFromBE()\n .then(lastUICommit => {\n const thisUICommit = osparc.utils.LibVersions.getVcsRefUI();\n if (lastUICommit && thisUICommit) {\n resolve(lastUICommit !== thisUICommit)\n } else {\n reject();\n }\n })\n .catch(() => reject());\n });\n }\n },\n\n members: {\n __buildLayout: function() {\n const introText = qx.locale.Manager.tr(\"We are pleased to announce that some new features were deployed for you!\");\n const introLabel = new qx.ui.basic.Label(introText).set({\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n this._add(introLabel);\n\n const releaseTag = osparc.utils.Utils.getReleaseTag();\n const releaseLink = osparc.utils.Utils.getReleaseLink();\n const linkLabel = new osparc.ui.basic.LinkLabel().set({\n value: this.tr(\"What's new in \") + releaseTag,\n url: releaseLink,\n font: \"link-label-14\"\n });\n this._add(linkLabel);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A vertical box layout.\n *\n * The vertical box layout lays out widgets in a vertical column, from top\n * to bottom.\n *\n * *Features*\n *\n * * Minimum and maximum dimensions\n * * Prioritized growing/shrinking (flex)\n * * Margins (with vertical collapsing)\n * * Auto sizing (ignoring percent values)\n * * Percent heights (not relevant for size hint)\n * * Alignment (child property {@link qx.ui.core.LayoutItem#alignY} is ignored)\n * * Vertical spacing (collapsed with margins)\n * * Reversed children layout (from last to first)\n * * Horizontal children stretching (respecting size hints)\n *\n * *Item Properties*\n *\n *
- \n *
- flex (Integer): The flexibility of a layout item determines how the container\n * distributes remaining empty space among its children. If items are made\n * flexible, they can grow or shrink accordingly. Their relative flex values\n * determine how the items are being resized, i.e. the larger the flex ratio\n * of two items, the larger the resizing of the first item compared to the\n * second.\n *\n * If there is only one flex item in a layout container, its actual flex\n * value is not relevant. To disallow items to become flexible, set the\n * flex value to zero.\n * \n *
- height (String): Allows to define a percent\n * height for the item. The height in percent, if specified, is used instead\n * of the height defined by the size hint. The minimum and maximum height still\n * takes care of the element's limits. It has no influence on the layout's\n * size hint. Percent values are mostly useful for widgets which are sized by\n * the outer hierarchy.\n * \n *
\n * var layout = new qx.ui.layout.VBox();\n * layout.setSpacing(4); // apply spacing\n *\n * var container = new qx.ui.container.Composite(layout);\n *\n * container.add(new qx.ui.core.Widget());\n * container.add(new qx.ui.core.Widget());\n * container.add(new qx.ui.core.Widget());\n *\n *\n * *External Documentation*\n *\n * See extended documentation\n * and links to demos for this layout.\n *\n */\nqx.Class.define(\"qx.ui.layout.VBox\",\n{\n extend : qx.ui.layout.Abstract,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param spacing {Integer?0} The spacing between child widgets {@link #spacing}.\n * @param alignY {String?\"top\"} Vertical alignment of the whole children\n * block {@link #alignY}.\n * @param separator {String|qx.ui.decoration.IDecorator?} A separator to be rendered between the items\n */\n construct : function(spacing, alignY, separator)\n {\n this.base(arguments);\n\n if (spacing) {\n this.setSpacing(spacing);\n }\n\n if (alignY) {\n this.setAlignY(alignY);\n }\n\n if (separator) {\n this.setSeparator(separator);\n }\n },\n\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Vertical alignment of the whole children block. The vertical\n * alignment of the child is completely ignored in VBoxes (\n * {@link qx.ui.core.LayoutItem#alignY}).\n */\n alignY :\n {\n check : [ \"top\", \"middle\", \"bottom\" ],\n init : \"top\",\n apply : \"_applyLayoutChange\"\n },\n\n\n /**\n * Horizontal alignment of each child. Can be overridden through\n * {@link qx.ui.core.LayoutItem#alignX}.\n */\n alignX :\n {\n check : [ \"left\", \"center\", \"right\" ],\n init : \"left\",\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Vertical spacing between two children */\n spacing :\n {\n check : \"Integer\",\n init : 0,\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Separator lines to use between the objects */\n separator :\n {\n check : \"Decorator\",\n nullable : true,\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Whether the actual children list should be laid out in reversed order. */\n reversed :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyReversed\"\n }\n },\n\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __heights : null,\n __flexs : null,\n __enableFlex : null,\n __children : null,\n\n\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyReversed : function()\n {\n // easiest way is to invalidate the cache\n this._invalidChildrenCache = true;\n\n // call normal layout change\n this._applyLayoutChange();\n },\n\n\n /**\n * Rebuilds caches for flex and percent layout properties\n */\n __rebuildCache : function()\n {\n var children = this._getLayoutChildren();\n var length = children.length;\n var enableFlex = false;\n var reuse = this.__heights && this.__heights.length != length && this.__flexs && this.__heights;\n var props;\n\n // Sparse array (keep old one if lengths has not been modified)\n var heights = reuse ? this.__heights : new Array(length);\n var flexs = reuse ? this.__flexs : new Array(length);\n\n // Reverse support\n if (this.getReversed()) {\n children = children.concat().reverse();\n }\n\n // Loop through children to preparse values\n for (var i=0; i
true, if the item could be removed.\n */\n remove : function(item) {\n for (var i = 0; i < this.__groups.length; i++) {\n var group = this.__groups[i];\n for (var j = 0; j < group.items.length; j++) {\n var storedItem = group.items[j];\n if (storedItem === item) {\n // remove all stored data\n group.items.splice(j, 1);\n group.labels.splice(j, 1);\n group.names.splice(j, 1);\n group.options.splice(j, 1);\n\n // remove the item to the validation manager\n this._validationManager.remove(item);\n // remove the item to the reset manager\n this._resetter.remove(item);\n\n // fire the change event\n this.fireEvent(\"change\");\n return true;\n }\n }\n }\n return false;\n },\n\n\n /**\n * Removes the given group header from the form. All items in the group will be moved to\n * another group (usually the previous group). If there is more than one group with\n * the same title, only the first group will be removed.\n *\n * @param title {String} The title.\n * @return {Boolean} true, if the header could be removed.\n */\n removeGroupHeader : function(title) {\n for (var i = 0; i < this.__groups.length; i++) {\n var group = this.__groups[i];\n if (group.title === title) {\n var targetGroup;\n\n // if it's the first group\n if (i == 0) {\n // if it's the only group\n if (this.__groups.length == 1) {\n // remove the title and the header options\n group.title = null;\n group.headerOptions = {};\n // fire the change event\n this.fireEvent(\"change\");\n return true;\n } else {\n // add to the next\n targetGroup = this.__groups[i+1];\n }\n } else {\n // add to the previous group\n targetGroup = this.__groups[i-1];\n }\n\n // copy the data over\n targetGroup.items = targetGroup.items.concat(group.items);\n targetGroup.labels = targetGroup.labels.concat(group.labels);\n targetGroup.names = targetGroup.names.concat(group.names);\n targetGroup.options = targetGroup.options.concat(group.options);\n\n // delete the group\n this.__groups.splice(i, 1);\n\n this._groupCounter--;\n\n // fire the change event\n this.fireEvent(\"change\");\n return true;\n }\n }\n return false;\n },\n\n\n /**\n * Removes the given button from the form.\n *\n * @param button {qx.ui.form.Button} The button to remove.\n * @return {Boolean} true, if the button could be removed.\n */\n removeButton : function(button) {\n for (var i = 0; i < this._buttons.length; i++) {\n var storedButton = this._buttons[i];\n if (storedButton === button) {\n this._buttons.splice(i, 1);\n this._buttonOptions.splice(i, 1);\n // fire the change event\n this.fireEvent(\"change\");\n return true;\n }\n }\n return false;\n },\n\n\n /**\n * Returns all added items as a map.\n *\n * @return {Map} A map containing for every item an entry with its name.\n */\n getItems : function() {\n var items = {};\n // go threw all groups\n for (var i = 0; i < this.__groups.length; i++) {\n var group = this.__groups[i];\n // get all items\n for (var j = 0; j < group.names.length; j++) {\n var name = group.names[j];\n items[name] = group.items[j];\n }\n }\n return items;\n },\n\n\n /**\n * Return an item by name.\n *\n * @param name {string} Item name.\n * @return {qx.ui.form.IForm|null} The form item or null.\n */\n getItem : function(name) {\n for (var i = 0; i < this.__groups.length; i++) {\n var group = this.__groups[i];\n for (var j = 0; j < group.names.length; j++) {\n if (group.names[j] === name) {\n return group.items[j];\n }\n }\n }\n\n return null;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n RESET SUPPORT\n ---------------------------------------------------------------------------\n */\n\n /**\n * Resets the form. This means reseting all form items and the validation.\n */\n reset : function() {\n this._resetter.reset();\n this._validationManager.reset();\n },\n\n\n /**\n * Redefines the values used for resetting. It calls\n * {@link qx.ui.form.Resetter#redefine} to get that.\n */\n redefineResetter : function() {\n this._resetter.redefine();\n },\n\n\n /**\n * Redefines the value used for resetting of the given item. It calls\n * {@link qx.ui.form.Resetter#redefineItem} to get that.\n *\n * @param item {qx.ui.core.Widget} The item to redefine.\n */\n redefineResetterItem : function(item) {\n this._resetter.redefineItem(item);\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n VALIDATION\n ---------------------------------------------------------------------------\n */\n\n /**\n * Validates the form using the\n * {@link qx.ui.form.validation.Manager#validate} method.\n *\n * @return {Boolean | null} The validation result.\n */\n validate : function() {\n return this._validationManager.validate();\n },\n\n\n /**\n * Returns the internally used validation manager. If you want to do some\n * enhanced validation tasks, you need to use the validation manager.\n *\n * @return {qx.ui.form.validation.Manager} The used manager.\n */\n getValidationManager : function() {\n return this._validationManager;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n RENDERER SUPPORT\n ---------------------------------------------------------------------------\n */\n\n /**\n * Accessor method for the renderer which returns all added items in a\n * array containing a map of all items:\n * {title: title, items: [], labels: [], names: []}\n *\n * @return {Array} An array containing all necessary data for the renderer.\n * @internal\n */\n getGroups : function() {\n return this.__groups;\n },\n\n\n /**\n * Accessor method for the renderer which returns all added buttons in an\n * array.\n * @return {Array} An array containing all added buttons.\n * @internal\n */\n getButtons : function() {\n return this._buttons;\n },\n\n\n /**\n * Accessor method for the renderer which returns all added options for\n * the buttons in an array.\n * @return {Array} An array containing all added options for the buttons.\n * @internal\n */\n getButtonOptions : function() {\n return this._buttonOptions;\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n INTERNAL\n ---------------------------------------------------------------------------\n */\n\n /**\n * Creates and returns the used validation manager.\n *\n * @return {qx.ui.form.validation.Manager} The validation manager.\n */\n _createValidationManager : function() {\n return new qx.ui.form.validation.Manager();\n },\n\n\n /**\n * Creates and returns the used resetter.\n *\n * @return {qx.ui.form.Resetter} the resetter class.\n */\n _createResetter : function() {\n return new qx.ui.form.Resetter();\n }\n },\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n destruct : function()\n {\n // holding references to widgets --> must set to null\n this.__groups = this._buttons = this._buttonOptions = null;\n this._validationManager.dispose();\n this._resetter.dispose();\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.auth.LoginPageSplit\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.HBox();\n this._setLayout(layout);\n\n const loginPage = this.__loginPage = new osparc.auth.LoginWithDecorators();\n loginPage.addListener(\"done\", e => this.fireDataEvent(\"done\", e.getData()));\n\n this.__rebuildLayout();\n\n setTimeout(() => this.__resized(), 100);\n window.addEventListener(\"resize\", () => this.__resized());\n },\n\n properties: {\n compactVersion: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeCompactVersion\",\n apply: \"__rebuildLayout\"\n }\n },\n\n events: {\n \"done\": \"qx.event.type.Data\",\n },\n\n statics: {\n COMPACT_WIDTH_BREAKPOINT: 2*(osparc.auth.core.BaseAuthPage.FORM_WIDTH + 50),\n COMPACT_HEIGHT_BREAKPOINT: osparc.WindowSizeTracker.HEIGHT_BREAKPOINT * 1.1,\n },\n\n members: {\n __loginPage: null,\n\n _getBackgroundImage: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n __resized: function() {\n const width = document.documentElement.clientWidth;\n const height = document.documentElement.clientHeight;\n this.setCompactVersion(\n (width < this.self().COMPACT_WIDTH_BREAKPOINT) ||\n (height < this.self().COMPACT_HEIGHT_BREAKPOINT)\n );\n },\n\n __rebuildLayout: function() {\n this._removeAll();\n\n const loginPage = this.__loginPage;\n const container = new qx.ui.container.Scroll();\n container.add(loginPage);\n const spacers = [\n loginPage.getChildControl(\"top-spacer\"),\n loginPage.getChildControl(\"bottom-spacer\"),\n ];\n const hideableItems = loginPage.getChildControl(\"login-view\").getHideableItems();\n if (this.isCompactVersion()) {\n // no split-image\n // just the login widget\n this.__resetBackgroundImage();\n this._add(container, {\n flex: 1\n });\n spacers.forEach(spacer => spacer.setMinHeight(0));\n hideableItems.forEach(hideableItem => hideableItem.exclude());\n } else {\n // split-image on the left\n // the login widget on the right\n this.___setBackgroundImage();\n this._add(new qx.ui.core.Spacer(), {\n width: \"50%\"\n });\n this._add(container, {\n width: \"50%\"\n });\n spacers.forEach(spacer => spacer.setMinHeight(50));\n hideableItems.forEach(hideableItem => hideableItem.show());\n }\n },\n\n __setBackgroundImage: function(backgroundImage) {\n if (osparc.product.Utils.getProductName().includes(\"s4l\")) {\n this.getContentElement().setStyles({\n \"background-image\": backgroundImage,\n \"background-repeat\": \"no-repeat\",\n \"background-size\": \"65% auto, 80% auto\", // auto width, 85% height\n \"background-position\": \"left bottom, left -440px bottom -230px\" // left bottom\n });\n } else {\n this.getContentElement().setStyles({\n \"background-image\": backgroundImage,\n \"background-repeat\": \"no-repeat\",\n \"background-size\": \"50% auto\", // 50% of the view width\n \"background-position\": \"left 10% center\" // left bottom\n });\n }\n },\n\n __resetBackgroundImage: function() {\n this.getContentElement().setStyles({\n \"background-image\": \"\"\n });\n },\n\n ___setBackgroundImage: function() {\n const backgroundImage = this._getBackgroundImage();\n this.__setBackgroundImage(backgroundImage);\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A horizontal box layout.\n *\n * The horizontal box layout lays out widgets in a horizontal row, from left\n * to right.\n *\n * *Features*\n *\n * * Minimum and maximum dimensions\n * * Prioritized growing/shrinking (flex)\n * * Margins (with horizontal collapsing)\n * * Auto sizing (ignoring percent values)\n * * Percent widths (not relevant for size hint)\n * * Alignment (child property {@link qx.ui.core.LayoutItem#alignX} is ignored)\n * * Horizontal spacing (collapsed with margins)\n * * Reversed children layout (from last to first)\n * * Vertical children stretching (respecting size hints)\n *\n * *Item Properties*\n *\n * - \n *
- flex (Integer): The flexibility of a layout item determines how the container\n * distributes remaining empty space among its children. If items are made\n * flexible, they can grow or shrink accordingly. Their relative flex values\n * determine how the items are being resized, i.e. the larger the flex ratio\n * of two items, the larger the resizing of the first item compared to the\n * second.\n *\n * If there is only one flex item in a layout container, its actual flex\n * value is not relevant. To disallow items to become flexible, set the\n * flex value to zero.\n * \n *
- width (String): Allows to define a percent\n * width for the item. The width in percent, if specified, is used instead\n * of the width defined by the size hint. The minimum and maximum width still\n * takes care of the element's limits. It has no influence on the layout's\n * size hint. Percent values are mostly useful for widgets which are sized by\n * the outer hierarchy.\n * \n *
\n * var layout = new qx.ui.layout.HBox();\n * layout.setSpacing(4); // apply spacing\n *\n * var container = new qx.ui.container.Composite(layout);\n *\n * container.add(new qx.ui.core.Widget());\n * container.add(new qx.ui.core.Widget());\n * container.add(new qx.ui.core.Widget());\n *\n *\n * *External Documentation*\n *\n * See extended documentation\n * and links to demos for this layout.\n *\n */\nqx.Class.define(\"qx.ui.layout.HBox\",\n{\n extend : qx.ui.layout.Abstract,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param spacing {Integer?0} The spacing between child widgets {@link #spacing}.\n * @param alignX {String?\"left\"} Horizontal alignment of the whole children\n * block {@link #alignX}.\n * @param separator {String|qx.ui.decoration.IDecorator?} A separator to render between the items\n */\n construct : function(spacing, alignX, separator)\n {\n this.base(arguments);\n\n if (spacing) {\n this.setSpacing(spacing);\n }\n\n if (alignX) {\n this.setAlignX(alignX);\n }\n\n if (separator) {\n this.setSeparator(separator);\n }\n },\n\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Horizontal alignment of the whole children block. The horizontal\n * alignment of the child is completely ignored in HBoxes (\n * {@link qx.ui.core.LayoutItem#alignX}).\n */\n alignX :\n {\n check : [ \"left\", \"center\", \"right\" ],\n init : \"left\",\n apply : \"_applyLayoutChange\"\n },\n\n\n /**\n * Vertical alignment of each child. Can be overridden through\n * {@link qx.ui.core.LayoutItem#alignY}.\n */\n alignY :\n {\n check : [ \"top\", \"middle\", \"bottom\" ],\n init : \"top\",\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Horizontal spacing between two children */\n spacing :\n {\n check : \"Integer\",\n init : 0,\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Separator lines to use between the objects */\n separator :\n {\n check : \"Decorator\",\n nullable : true,\n apply : \"_applyLayoutChange\"\n },\n\n\n /** Whether the actual children list should be laid out in reversed order. */\n reversed :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyReversed\"\n }\n },\n\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __widths : null,\n __flexs : null,\n __enableFlex : null,\n __children : null,\n\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyReversed : function()\n {\n // easiest way is to invalidate the cache\n this._invalidChildrenCache = true;\n\n // call normal layout change\n this._applyLayoutChange();\n },\n\n\n /**\n * Rebuilds caches for flex and percent layout properties\n */\n __rebuildCache : function()\n {\n var children = this._getLayoutChildren();\n var length = children.length;\n var enableFlex = false;\n var reuse = this.__widths && this.__widths.length != length && this.__flexs && this.__widths;\n var props;\n\n // Sparse array (keep old one if lengths has not been modified)\n var widths = reuse ? this.__widths : new Array(length);\n var flexs = reuse ? this.__flexs : new Array(length);\n\n // Reverse support\n if (this.getReversed()) {\n children = children.concat().reverse();\n }\n\n // Loop through children to preparse values\n for (var i=0; i
You can now use your credentials to login.\"));\n }\n\n login.addListener(\"toRegister\", () => {\n pages.setSelection([registration]);\n login.resetValues();\n }, this);\n\n if (requestAccount) {\n login.addListener(\"toRequestAccount\", () => {\n pages.setSelection([requestAccount]);\n login.resetValues();\n }, this);\n }\n\n login.addListener(\"toReset\", () => {\n pages.setSelection([resetPasswordRequest]);\n login.resetValues();\n }, this);\n\n login.addListener(\"toVerifyPhone\", e => {\n verifyPhoneNumber.set({\n userEmail: e.getData()\n });\n pages.setSelection([verifyPhoneNumber]);\n login.resetValues();\n }, this);\n\n login.addListener(\"to2FAValidationCode\", e => {\n const data = e.getData();\n login2FAValidationCode.set({\n userEmail: data.userEmail,\n smsEnabled: true,\n message: data.message\n });\n if (data.nextStep === \"SMS_CODE_REQUIRED\") {\n login2FAValidationCode.restartSMSButton(data.retryAfter);\n } else if (data.nextStep === \"EMAIL_CODE_REQUIRED\") {\n login2FAValidationCode.restartEmailButton(data.retryAfter);\n }\n pages.setSelection([login2FAValidationCode]);\n login.resetValues();\n }, this);\n\n verifyPhoneNumber.addListener(\"skipPhoneRegistration\", e => {\n const data = e.getData();\n login2FAValidationCode.set({\n userEmail: data.userEmail,\n smsEnabled: false,\n message: data.message\n });\n login2FAValidationCode.restartEmailButton(data.retryAfter);\n pages.setSelection([login2FAValidationCode]);\n }, this);\n\n login2FAValidationCode.addListener(\"done\", msg => {\n login.resetValues();\n this.fireDataEvent(\"done\", msg);\n }, this);\n\n registration.addListener(\"done\", msg => {\n osparc.utils.Utils.cookie.deleteCookie(\"user\");\n this.fireDataEvent(\"done\", msg);\n });\n\n if (requestAccount) {\n requestAccount.addListener(\"done\", msg => {\n osparc.utils.Utils.cookie.deleteCookie(\"user\");\n this.fireDataEvent(\"done\", msg);\n });\n }\n\n verifyPhoneNumber.addListener(\"done\", msg => {\n login.resetValues();\n this.fireDataEvent(\"done\", msg);\n }, this);\n\n [resetPasswordRequest, resetPassword].forEach(srcPage => {\n srcPage.addListener(\"done\", msg => {\n pages.setSelection([login]);\n srcPage.resetValues();\n }, this);\n });\n\n return pages;\n },\n\n __getVersionLink: function() {\n const versionLinkLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n })).set({\n margin: [10, 0]\n });\n\n versionLinkLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const createReleaseNotesLink = osparc.utils.Utils.createReleaseNotesLink();\n createReleaseNotesLink.set({\n textColor: \"text-darker\"\n });\n versionLinkLayout.add(createReleaseNotesLink);\n\n const organizationLink = new osparc.ui.basic.LinkLabel().set({\n textColor: \"text-darker\"\n });\n const vendor = osparc.store.VendorInfo.getInstance().getVendor();\n if (vendor && \"url\" in vendor && \"copyright\" in vendor) {\n organizationLink.set({\n value: vendor.copyright,\n url: vendor.url\n });\n }\n versionLinkLayout.add(organizationLink);\n\n versionLinkLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n return versionLinkLayout;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/**\n * Main Authentication Page:\n * A multi-page view that fills all page\n */\n\nqx.Class.define(\"osparc.auth.LoginPageS4L\", {\n extend: osparc.auth.LoginPageSplit,\n\n construct: function() {\n this.base(arguments);\n\n this.setBackgroundColor(\"rgba(0, 20, 46, 1)\");\n },\n\n members: {\n // overridden\n _getBackgroundImage: function() {\n let backgroundImage = \"\";\n\n const defaultBG = `url(${osparc.product.Utils.getBackgroundUrl(\"Sim4Life-head-default.png\")}), url(${osparc.product.Utils.getBackgroundUrl(\"clouds_11.png\")})`;\n const liteBG = `url(${osparc.product.Utils.getBackgroundUrl(\"Sim4Life-head-lite.png\")}), url(${osparc.product.Utils.getBackgroundUrl(\"clouds_11.png\")})`;\n const academyBG = `url(${osparc.product.Utils.getBackgroundUrl(\"Sim4Life-head-academy.png\")}), url(${osparc.product.Utils.getBackgroundUrl(\"clouds_11.png\")})`;\n\n switch (osparc.product.Utils.getProductName()) {\n case \"s4llite\":\n backgroundImage = liteBG;\n break;\n case \"s4lacad\":\n case \"s4ldesktopacad\":\n backgroundImage = academyBG;\n break;\n case \"s4ldesktop\":\n case \"s4l\":\n default:\n backgroundImage = defaultBG;\n break;\n }\n return backgroundImage;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Main Authentication Page:\n * A multi-page view that fills all page\n */\n\nqx.Class.define(\"osparc.auth.LoginPageTI\", {\n extend: osparc.auth.LoginPageSplit,\n\n members: {\n // overridden\n _getBackgroundImage: function() {\n const backgroundImage = \"url(resource/osparc/tip_splitimage.png)\";\n return backgroundImage;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.auth.LoginPageOsparc\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.HBox();\n this._setLayout(layout);\n\n const loginPage = new osparc.auth.LoginWithDecorators();\n loginPage.addListener(\"done\", e => this.fireDataEvent(\"done\", e.getData()));\n const container = new qx.ui.container.Scroll();\n container.add(loginPage);\n this._add(container, {\n flex: 1\n });\n },\n\n events: {\n \"done\": \"qx.event.type.Data\",\n },\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\n/**\n * Class that defines all the endpoints of the API to get the application resources. It also offers some convenient methods\n * to get them. It stores all the data in {osparc.store.Store} and consumes it from there whenever it is possible. The flag\n * \"useCache\" must be set in the resource definition.\n *\n * *Example*\n *\n * Here is a little example of how to use the class. For making calls that will update or add resources in the server,\n * such as POST and PUT calls. You can use the \"fetch\" method. Let's say you want to modify a study using POST.\n *\n *
\n * const params = {\n * url: { // Params for the URL\n * studyId\n * },\n * data: { // Payload\n * studyData\n * }\n * }\n * osparc.data.Resources.fetch(\"studies\", \"getOne\", params)\n * .then(study => {\n * // study contains the new updated study\n * // This code will execute if the call succeeds\n * })\n * .catch(err => {\n * // Treat the error. This will execute if the call fails.\n * });\n * \n *\n * Keep in mind that in order for this to work, the resource has to be defined in the static property resources:\n * \n * statics.resources = {\n * studies: {\n * useCache: true, // Decide if the resources in the response have to be cached to avoid future calls\n * endpoints: {\n * // Define here all possible operations on this resource\n * post: { // Second parameter of of fetch, endpoint name. The used method (post) should be contained in this name.\n * method: \"POST\", // HTTP REST operation\n * url: statics.API + \"/projects/{studyId}\" // Defined in params under the 'url' property\n * }\n * }\n * }\n * }\n * \n *\n * For just getting the resources without modifying them in the server, we use the dedicated methods 'get' and 'getOne'.\n * They will try to get them from the cache if they exist there. If not, they will issue the call to get them from the server.\n */\n\nqx.Class.define(\"osparc.data.Resources\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n defer: function(statics) {\n /*\n * Define here all resources and their endpoints.\n */\n statics.resources = {\n /*\n * CONFIG\n */\n \"config\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/config\"\n }\n }\n },\n\n /*\n * STATICS\n * Gets the json file containing some runtime server variables.\n */\n \"statics\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: \"/static-frontend-data.json\",\n isJsonFile: true\n }\n }\n },\n\n /*\n * APP SUMMARY\n * Gets the json file built by the qx compiler with some extra env variables\n * added by oSPARC as compilation vars\n */\n \"appSummary\": {\n useCache: false,\n endpoints: {\n get: {\n method: \"GET\",\n url: \"/{productName}/app-summary.json\",\n isJsonFile: true\n }\n }\n },\n\n /*\n * STUDIES\n */\n \"studies\": {\n useCache: true,\n idField: \"uuid\",\n deleteId: \"studyId\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/projects?type=user\"\n },\n getOne: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}\"\n },\n getActive: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/active?client_session_id={tabId}\"\n },\n getPage: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects?type=user&offset={offset}&limit={limit}&workspace_id={workspaceId}&folder_id={folderId}&order_by={orderBy}\"\n },\n getPageSearch: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects:search?offset={offset}&limit={limit}&text={text}&tag_ids={tagIds}&order_by={orderBy}\"\n },\n getPageTrashed: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects:search?filters={%22trashed%22:%22true%22}&offset={offset}&limit={limit}&order_by={orderBy}\"\n },\n postToTemplate: {\n method: \"POST\",\n url: statics.API + \"/projects?from_study={study_id}&as_template=true©_data={copy_data}\"\n },\n open: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}:open\"\n },\n getWallet: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/wallet\"\n },\n selectWallet: {\n method: \"PUT\",\n url: statics.API + \"/projects/{studyId}/wallet/{walletId}\"\n },\n payDebt: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/wallet/{walletId}:pay-debt\"\n },\n openDisableAutoStart: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}:open?disable_service_auto_start={disableServiceAutoStart}\"\n },\n close: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}:close\"\n },\n duplicate: {\n method: \"POST\",\n // url: statics.API + \"/projects/{studyId}:duplicate\"\n // supports copy_data\n url: statics.API + \"/projects?from_study={studyId}\"\n },\n state: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/state\"\n },\n postNewStudy: {\n method: \"POST\",\n url: statics.API + \"/projects\"\n },\n postNewStudyFromTemplate: {\n method: \"POST\",\n url: statics.API + \"/projects?from_study={templateId}\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/projects/{studyId}\"\n },\n trash: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}:trash\"\n },\n untrash: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}:untrash\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/projects/{studyId}\"\n },\n addNode: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/nodes\"\n },\n startNode: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}:start\"\n },\n stopNode: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}:stop\"\n },\n getNode: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}\"\n },\n patchNode: {\n method: \"PATCH\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}\"\n },\n deleteNode: {\n useCache: false,\n method: \"DELETE\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}\"\n },\n getNodeErrors: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}/errors\"\n },\n getPricingUnit: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}/pricing-unit\"\n },\n putPricingUnit: {\n method: \"PUT\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}/pricing-plan/{pricingPlanId}/pricing-unit/{pricingUnitId}\"\n },\n checkShareePermissions: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/nodes/-/services:access?for_gid={gid}\"\n },\n postAccessRights: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/groups/{gId}\"\n },\n deleteAccessRights: {\n useCache: false,\n method: \"DELETE\",\n url: statics.API + \"/projects/{studyId}/groups/{gId}\"\n },\n putAccessRights: {\n useCache: false,\n method: \"PUT\",\n url: statics.API + \"/projects/{studyId}/groups/{gId}\"\n },\n addTag: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/tags/{tagId}:add\"\n },\n removeTag: {\n useCache: false,\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/tags/{tagId}:remove\"\n },\n getInactivity: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/inactivity\"\n },\n moveToFolder: {\n method: \"PUT\",\n url: statics.API + \"/projects/{studyId}/folders/{folderId}\"\n },\n moveToWorkspace: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/workspaces/{workspaceId}:move\"\n },\n }\n },\n \"studyComments\": {\n useCache: true,\n idField: \"uuid\",\n endpoints: {\n getPage: {\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/comments?offset={offset}&limit={limit}\"\n },\n addComment: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/comments\"\n }\n }\n },\n \"folders\": {\n useCache: true,\n idField: \"uuid\",\n endpoints: {\n getPage: {\n method: \"GET\",\n url: statics.API + \"/folders?workspace_id={workspaceId}&folder_id={folderId}&offset={offset}&limit={limit}&order_by={orderBy}\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/folders/{folderId}\"\n },\n getPageSearch: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/folders:search?offset={offset}&limit={limit}&text={text}&order_by={orderBy}\"\n },\n getPageTrashed: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/folders:search?filters={%22trashed%22:%22true%22}&offset={offset}&limit={limit}&order_by={orderBy}\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/folders\"\n },\n update: {\n method: \"PUT\",\n url: statics.API + \"/folders/{folderId}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/folders/{folderId}\"\n },\n moveToWorkspace: {\n method: \"POST\",\n url: statics.API + \"/folders/{folderId}/workspaces/{workspaceId}:move\"\n },\n trash: {\n method: \"POST\",\n url: statics.API + \"/folders/{folderId}:trash\"\n },\n untrash: {\n method: \"POST\",\n url: statics.API + \"/folders/{folderId}:untrash\"\n },\n }\n },\n \"workspaces\": {\n endpoints: {\n getPage: {\n method: \"GET\",\n url: statics.API + \"/workspaces?&offset={offset}&limit={limit}\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/workspaces/{workspaceId}\"\n },\n getPageSearch: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/workspaces?offset={offset}&limit={limit}&filters={filters}&order_by={orderBy}\"\n },\n getPageTrashed: {\n useCache: false,\n method: \"GET\",\n // url: statics.API + \"/workspaces:search?filters={%22trashed%22:%22true%22}&offset={offset}&limit={limit}&order_by={orderBy}\"\n url: statics.API + \"/workspaces?filters={%22trashed%22:%22true%22}&offset={offset}&limit={limit}&order_by={orderBy}\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/workspaces\"\n },\n update: {\n method: \"PUT\",\n url: statics.API + \"/workspaces/{workspaceId}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/workspaces/{workspaceId}\"\n },\n trash: {\n method: \"POST\",\n url: statics.API + \"/workspaces/{workspaceId}:trash\"\n },\n untrash: {\n method: \"POST\",\n url: statics.API + \"/workspaces/{workspaceId}:untrash\"\n },\n postAccessRights: {\n method: \"POST\",\n url: statics.API + \"/workspaces/{workspaceId}/groups/{groupId}\"\n },\n putAccessRights: {\n method: \"PUT\",\n url: statics.API + \"/workspaces/{workspaceId}/groups/{groupId}\"\n },\n deleteAccessRights: {\n method: \"DELETE\",\n url: statics.API + \"/workspaces/{workspaceId}/groups/{groupId}\"\n },\n }\n },\n \"resourceUsage\": {\n useCache: false,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/services/-/resource-usages?offset={offset}&limit={limit}&filters={filters}&order_by={orderBy}\"\n },\n getWithWallet: {\n method: \"GET\",\n url: statics.API + \"/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}\"\n },\n getWithWalletFiltered: {\n method: \"GET\",\n url: statics.API + \"/services/-/resource-usages?wallet_id={walletId}&offset={offset}&limit={limit}&filters={filters}&order_by={orderBy}\"\n },\n getUsagePerService: {\n method: \"GET\",\n url: statics.API + \"/services/-/aggregated-usages?wallet_id={walletId}&aggregated_by=services&time_period={timePeriod}\"\n }\n }\n },\n /*\n * NODES\n */\n \"nodesInStudyResources\": {\n idField: [\"studyId\", \"nodeId\"],\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}/resources\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/projects/{studyId}/nodes/{nodeId}/resources\"\n }\n }\n },\n\n /*\n * TRASH\n */\n \"trash\": {\n endpoints: {\n delete: {\n method: \"POST\",\n url: statics.API + \"/trash:empty\"\n }\n }\n },\n\n /*\n * SNAPSHOTS\n */\n \"snapshots\": {\n idField: \"uuid\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints\"\n },\n getPage: {\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints?offset={offset}&limit={limit}\"\n },\n getOne: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/{snapshotId}\"\n },\n updateSnapshot: {\n method: \"PATCH\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/{snapshotId}\"\n },\n currentCommit: {\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/HEAD\"\n },\n checkout: {\n method: \"POST\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/{snapshotId}:checkout\"\n },\n preview: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/{snapshotId}/workbench/view\"\n },\n getParameters: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints/{snapshotId}/parameters\"\n },\n takeSnapshot: {\n method: \"POST\",\n url: statics.API + \"/repos/projects/{studyId}/checkpoints\"\n }\n }\n },\n /*\n * ITERATIONS\n */\n \"iterations\": {\n idField: \"uuid\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/projects/{studyId}/checkpoint/{snapshotId}/iterations\"\n },\n createIterations: {\n method: \"POST\",\n url: statics.API + \"/projects/{studyId}/checkpoint/{snapshotId}/iterations\"\n }\n }\n },\n /*\n * TEMPLATES (actually studies flagged as templates)\n */\n \"templates\": {\n useCache: true,\n idField: \"uuid\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/projects?type=template\"\n },\n getPage: {\n method: \"GET\",\n url: statics.API + \"/projects?type=template&offset={offset}&limit={limit}\"\n }\n }\n },\n /*\n * TASKS\n */\n \"tasks\": {\n useCache: false,\n idField: \"id\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/tasks\"\n }\n }\n },\n\n /*\n * SERVICES\n */\n \"services\": {\n useCache: true,\n idField: [\"key\", \"version\"],\n endpoints: {\n pricingPlans: {\n useCache: false,\n method: \"GET\",\n url: statics.API + \"/catalog/services/{key}/{version}/pricing-plan\"\n }\n }\n },\n\n /*\n * SERVICES V2 (web-api >=0.42.0)\n */\n \"servicesV2\": {\n useCache: false, // handled in osparc.store.Services\n idField: [\"key\", \"version\"],\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/catalog/services/-/latest\"\n },\n getPage: {\n method: \"GET\",\n url: statics.API + \"/catalog/services/-/latest?offset={offset}&limit={limit}\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/catalog/services/{key}/{version}\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/catalog/services/{key}/{version}\"\n }\n }\n },\n\n /*\n * PORTS COMPATIBILITY\n */\n \"portsCompatibility\": {\n useCache: false, // It has its own cache handler\n endpoints: {\n matchInputs: {\n // get_compatible_inputs_given_source_output_handler\n method: \"GET\",\n url: statics.API + \"/catalog/services/{serviceKey2}/{serviceVersion2}/inputs:match?fromService={serviceKey1}&fromVersion={serviceVersion1}&fromOutput={portKey1}\"\n },\n matchOutputs: {\n useCache: false,\n // get_compatible_outputs_given_target_input_handler\n method: \"GET\",\n url: statics.API + \"/catalog/services/{serviceKey1}/{serviceVersion1}/outputs:match?fromService={serviceKey2}&fromVersion={serviceVersion2}&fromOutput={portKey2}\"\n }\n }\n },\n\n /*\n * SERVICE RESOURCES\n */\n \"serviceResources\": {\n idField: [\"key\", \"version\"],\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/catalog/services/{key}/{version}/resources\"\n }\n }\n },\n\n /*\n * ADMIN PRICING PLANS\n */\n \"adminPricingPlans\": {\n useCache: false, // handled in osparc.store.Pricing\n endpoints: {\n getPage: {\n method: \"GET\",\n url: statics.API + \"/admin/pricing-plans?offset={offset}&limit={limit}\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}\"\n },\n update: {\n method: \"PUT\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/admin/pricing-plans\"\n },\n }\n },\n\n /*\n * PRICING PLANS\n */\n \"pricingPlans\": {\n useCache: false, // handled in osparc.store.Pricing\n endpoints: {\n getPage: {\n method: \"GET\",\n url: statics.API + \"/pricing-plans?offset={offset}&limit={limit}\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/pricing-plans/{pricingPlanId}\"\n },\n }\n },\n\n /*\n * PRICING UNITS\n */\n \"pricingUnits\": {\n useCache: false, // handled in osparc.store.Pricing\n endpoints: {\n getOne: {\n method: \"GET\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}/pricing-units/{pricingUnitId}\"\n },\n update: {\n method: \"PUT\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}/pricing-units/{pricingUnitId}\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}/pricing-units\"\n },\n }\n },\n\n /*\n * BILLABLE SERVICES\n */\n \"billableServices\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}/billable-services\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/admin/pricing-plans/{pricingPlanId}/billable-services\"\n },\n }\n },\n\n /*\n * SCHEDULED MAINTENANCE\n * Example: {\"start\": \"2023-01-17T14:45:00.000Z\", \"end\": \"2023-01-17T23:00:00.000Z\", \"reason\": \"Release 1.0.4\"}\n */\n \"maintenance\": {\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/scheduled_maintenance\"\n }\n }\n },\n /*\n * ANNOUNCEMENTS\n */\n \"announcements\": {\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/announcements\"\n }\n }\n },\n /*\n * PROFILE\n */\n \"profile\": {\n useCache: true,\n endpoints: {\n getOne: {\n method: \"GET\",\n url: statics.API + \"/me\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/me\"\n },\n }\n },\n /*\n * PREFERENCES\n */\n \"preferences\": {\n endpoints: {\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/me/preferences/{preferenceId}\"\n }\n }\n },\n /*\n * PERMISSIONS\n */\n \"permissions\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/me/permissions\"\n }\n }\n },\n /*\n * API-KEYS\n */\n \"apiKeys\": {\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/auth/api-keys\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/auth/api-keys\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/auth/api-keys/{apiKeyId}\"\n }\n }\n },\n /*\n * TOKENS\n */\n \"tokens\": {\n useCache: true,\n idField: \"service\",\n deleteId: \"service\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/me/tokens\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/me/tokens\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/me/tokens/{service}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/me/tokens/{service}\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/me/tokens/{service}\"\n }\n }\n },\n /*\n * NOTIFICATIONS\n */\n \"notifications\": {\n useCache: false,\n idField: \"notification\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/me/notifications\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/me/notifications\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/me/notifications/{notificationId}\"\n }\n }\n },\n /*\n * ORGANIZATIONS\n */\n \"organizations\": {\n useCache: false, // osparc.store.Groups handles the cache\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/groups\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/groups\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/groups/{gid}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/groups/{gid}\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/groups/{gid}\"\n }\n }\n },\n /*\n * ORGANIZATION MEMBERS\n */\n \"organizationMembers\": {\n useCache: false, // osparc.store.Groups handles the cache\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/groups/{gid}/users\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/groups/{gid}/users\"\n },\n getOne: {\n method: \"GET\",\n url: statics.API + \"/groups/{gid}/users/{uid}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/groups/{gid}/users/{uid}\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/groups/{gid}/users/{uid}\"\n }\n }\n },\n /*\n * USERS\n */\n \"users\": {\n useCache: false, // osparc.store.Groups handles the cache\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/groups/{gid}/users\"\n },\n search: {\n method: \"POST\",\n url: statics.API + \"/users:search\"\n }\n }\n },\n /*\n * WALLETS\n */\n \"wallets\": {\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/wallets\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/wallets\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/wallets/{walletId}\"\n },\n getAccessRights: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/groups\"\n },\n putAccessRights: {\n method: \"PUT\",\n url: statics.API + \"/wallets/{walletId}/groups/{groupId}\"\n },\n postAccessRights: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/groups/{groupId}\"\n },\n deleteAccessRights: {\n method: \"DELETE\",\n url: statics.API + \"/wallets/{walletId}/groups/{groupId}\"\n },\n getAutoRecharge: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/auto-recharge\"\n },\n putAutoRecharge: {\n method: \"PUT\",\n url: statics.API + \"/wallets/{walletId}/auto-recharge\"\n },\n }\n },\n /*\n * PRODUCTS\n */\n \"creditPrice\": {\n useCache: false,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/credits-price\"\n }\n }\n },\n \"productMetadata\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/products/{productName}\"\n },\n updateEmailTemplate: {\n method: \"PUT\",\n url: statics.API + \"/products/{productName}/templates/{templateId}\"\n },\n getUiConfig: {\n method: \"GET\",\n url: statics.API + \"/products/current/ui\"\n },\n }\n },\n \"invitations\": {\n endpoints: {\n post: {\n method: \"POST\",\n url: statics.API + \"/invitation:generate\"\n }\n }\n },\n \"poUsers\": {\n endpoints: {\n search: {\n method: \"GET\",\n url: statics.API + \"/admin/users:search?email={email}\"\n },\n preRegister: {\n method: \"POST\",\n url: statics.API + \"/admin/users:pre-register\"\n }\n }\n },\n /*\n * PAYMENTS\n */\n \"payments\": {\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/wallets/-/payments?offset={offset}&limit={limit}\"\n },\n startPayment: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/payments\"\n },\n cancelPayment: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/payments/{paymentId}:cancel\"\n },\n payWithPaymentMethod: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/payments-methods/{paymentMethodId}:pay\"\n },\n invoiceLink: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/payments/{paymentId}/invoice-link\"\n }\n }\n },\n /*\n * PAYMENT METHODS\n */\n \"paymentMethods\": {\n useCache: false,\n endpoints: {\n init: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/payments-methods:init\"\n },\n cancel: {\n method: \"POST\",\n url: statics.API + \"/wallets/{walletId}/payments-methods/{paymentMethodId}:cancel\"\n },\n get: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/payments-methods\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/wallets/{walletId}/payments-methods/{paymentMethodId}\"\n }\n }\n },\n /*\n * AUTO RECHARGE\n */\n \"autoRecharge\": {\n useCache: false,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/auto-recharge\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/wallets/{walletId}/auto-recharge\"\n }\n }\n },\n /*\n * CLASSIFIERS\n * Gets the json object containing sample classifiers\n */\n \"classifiers\": {\n useCache: false,\n idField: \"classifiers\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/groups/{gid}/classifiers\"\n },\n postRRID: {\n method: \"POST\",\n url: statics.API + \"/groups/sparc/classifiers/scicrunch-resources/{rrid}\"\n }\n }\n },\n\n /*\n * PASSWORD\n */\n \"password\": {\n useCache: false,\n endpoints: {\n post: {\n method: \"POST\",\n url: statics.API + \"/auth/change-password\"\n }\n }\n },\n /*\n * AUTH\n */\n \"auth\": {\n useCache: false,\n endpoints: {\n postRegister: {\n method: \"POST\",\n url: statics.API + \"/auth/register\"\n },\n postRequestAccount: {\n method: \"POST\",\n url: statics.API + \"/auth/request-account\"\n },\n captcha: {\n method: \"POST\",\n url: statics.API + \"/auth/captcha\"\n },\n checkInvitation: {\n method: \"POST\",\n url: statics.API + \"/auth/register/invitations:check\"\n },\n unregister: {\n method: \"POST\",\n url: statics.API + \"/auth/unregister\"\n },\n verifyPhoneNumber: {\n method: \"POST\",\n url: statics.API + \"/auth/verify-phone-number\"\n },\n validateCodeRegister: {\n method: \"POST\",\n url: statics.API + \"/auth/validate-code-register\"\n },\n resendCode: {\n method: \"POST\",\n url: statics.API + \"/auth/two_factor:resend\"\n },\n postLogin: {\n method: \"POST\",\n url: statics.API + \"/auth/login\"\n },\n validateCodeLogin: {\n method: \"POST\",\n url: statics.API + \"/auth/validate-code-login\"\n },\n postLogout: {\n method: \"POST\",\n url: statics.API + \"/auth/logout\"\n },\n postRequestResetPassword: {\n method: \"POST\",\n url: statics.API + \"/auth/reset-password\"\n },\n postResetPassword: {\n method: \"POST\",\n url: statics.API + \"/auth/reset-password/{code}\"\n },\n changeEmail: {\n method: \"POST\",\n url: statics.API + \"/auth/change-email\"\n },\n }\n },\n /*\n * STORAGE LOCATIONS\n */\n \"storageLocations\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/storage/locations\"\n }\n }\n },\n /*\n * STORAGE DATASETS\n */\n \"storageDatasets\": {\n useCache: false,\n endpoints: {\n getByLocation: {\n method: \"GET\",\n url: statics.API + \"/storage/locations/{locationId}/datasets\"\n }\n }\n },\n /*\n * STORAGE FILES\n */\n \"storageFiles\": {\n useCache: false,\n endpoints: {\n getByLocationAndDataset: {\n method: \"GET\",\n url: statics.API + \"/storage/locations/{locationId}/datasets/{datasetId}/metadata\"\n },\n getByNode: {\n method: \"GET\",\n url: statics.API + \"/storage/locations/0/files/metadata?uuid_filter={nodeId}\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/storage/locations/{toLoc}/files/{fileName}?extra_location={fromLoc}&extra_source={fileUuid}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/storage/locations/{locationId}/files/{fileUuid}\"\n }\n }\n },\n /*\n * STORAGE LINK\n */\n \"storageLink\": {\n useCache: false,\n endpoints: {\n getOne: {\n method: \"GET\",\n url: statics.API + \"/storage/locations/{locationId}/files/{fileUuid}\"\n },\n put: {\n method: \"PUT\",\n url: statics.API + \"/storage/locations/{locationId}/files/{fileUuid}?file_size={fileSize}\"\n }\n }\n },\n /*\n * ACTIVITY\n */\n \"activity\": {\n useCache: false,\n endpoints: {\n getOne: {\n method: \"GET\",\n url: statics.API + \"/activity/status\"\n }\n }\n },\n\n /*\n * Test/Diagnostic entrypoint\n */\n \"checkEP\": {\n useCache: false,\n endpoints: {\n postFail: {\n method: \"POST\",\n url: statics.API + \"/check/fail\"\n },\n postEcho: {\n method: \"POST\",\n url: statics.API + \"/check/echo\"\n }\n }\n },\n\n /*\n * TAGS\n */\n \"tags\": {\n useCache: true,\n idField: \"id\",\n deleteId: \"tagId\",\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/tags\"\n },\n post: {\n method: \"POST\",\n url: statics.API + \"/tags\"\n },\n patch: {\n method: \"PATCH\",\n url: statics.API + \"/tags/{tagId}\"\n },\n delete: {\n method: \"DELETE\",\n url: statics.API + \"/tags/{tagId}\"\n },\n getAccessRights: {\n method: \"GET\",\n url: statics.API + \"/tags/{tagId}/groups\"\n },\n putAccessRights: {\n method: \"PUT\",\n url: statics.API + \"/tags/{tagId}/groups/{groupId}\"\n },\n postAccessRights: {\n method: \"POST\",\n url: statics.API + \"/tags/{tagId}/groups/{groupId}\"\n },\n deleteAccessRights: {\n method: \"DELETE\",\n url: statics.API + \"/tags/{tagId}/groups/{groupId}\"\n },\n }\n },\n\n /*\n * LICENSED ITEMS\n */\n \"licensedItems\": {\n useCache: true,\n endpoints: {\n get: {\n method: \"GET\",\n url: statics.API + \"/catalog/licensed-items\"\n },\n getPage: {\n method: \"GET\",\n url: statics.API + \"/catalog/licensed-items?offset={offset}&limit={limit}\"\n },\n purchases: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/licensed-items-purchases?offset={offset}&limit={limit}\"\n },\n purchase: {\n method: \"POST\",\n url: statics.API + \"/catalog/licensed-items/{licensedItemId}:purchase\"\n },\n checkouts: {\n method: \"GET\",\n url: statics.API + \"/wallets/{walletId}/licensed-items-checkouts?offset={offset}&limit={limit}\"\n },\n }\n }\n };\n },\n\n members: {\n /**\n * @param {String} resource Name of the resource as defined in the static property 'resources'.\n * @param {String} endpoint Name of the endpoint. Several endpoints can be defined for each resource.\n * @param {Object} urlParams Object containing only the parameters for the url of the request.\n */\n replaceUrlParams: function(resource, endpoint, urlParams) {\n const resourceDefinition = this.self().resources[resource];\n const res = new osparc.io.rest.Resource(resourceDefinition.endpoints);\n // Use qooxdoo's Get request configuration\n // eslint-disable-next-line no-underscore-dangle\n const getReqConfig = res._resource._getRequestConfig(endpoint, urlParams);\n return getReqConfig;\n },\n\n /**\n * Method to fetch resources from the server. If configured properly, the resources in the response will be cached in {osparc.store.Store}.\n * @param {String} resource Name of the resource as defined in the static property 'resources'.\n * @param {String} endpoint Name of the endpoint. Several endpoints can be defined for each resource.\n * @param {Object} params Object containing the parameters for the url and for the body of the request, under the properties 'url' and 'data', respectively.\n * @param {Object} options Collections of options (pollTask, resolveWResponse, timeout, timeoutRetries)\n */\n fetch: function(resource, endpoint, params = {}, options = {}) {\n if (params === null) {\n params = {};\n }\n if (options === null) {\n options = {};\n }\n return new Promise((resolve, reject) => {\n if (this.self().resources[resource] == null) {\n reject(Error(`Error while fetching ${resource}: the resource is not defined`));\n }\n\n const resourceDefinition = this.self().resources[resource];\n const res = new osparc.io.rest.Resource(resourceDefinition.endpoints, options.timeout);\n if (!res.includesRoute(endpoint)) {\n reject(Error(`Error while fetching ${resource}: the endpoint is not defined`));\n }\n\n const sendRequest = () => {\n res[endpoint](params.url || null, params.data || null);\n }\n\n const successCB = e => {\n const response = e.getRequest().getResponse();\n const endpointDef = resourceDefinition.endpoints[endpoint];\n const data = endpointDef.isJsonFile ? response : response.data;\n // OM: Temporary solution until the quality object is better defined\n if (data && endpoint.includes(\"get\") && [\"studies\", \"templates\"].includes(resource)) {\n if (Array.isArray(data)) {\n data.forEach(std => {\n osparc.metadata.Quality.attachQualityToObject(std);\n });\n } else {\n osparc.metadata.Quality.attachQualityToObject(data);\n }\n }\n\n const useCache = (\"useCache\" in endpointDef) ? endpointDef.useCache : resourceDefinition.useCache;\n if (useCache) {\n if (endpoint.includes(\"delete\") && resourceDefinition[\"deleteId\"] && resourceDefinition[\"deleteId\"] in params.url) {\n const deleteId = params.url[resourceDefinition[\"deleteId\"]];\n this.__removeCached(resource, deleteId);\n } else if (endpointDef.method === \"POST\" && options.pollTask !== true) {\n this.__addCached(resource, data);\n } else if (endpointDef.method === \"GET\") {\n if (endpoint.includes(\"getPage\")) {\n this.__addCached(resource, data);\n } else {\n this.__setCached(resource, data);\n }\n }\n }\n\n res.dispose();\n\n if (\"resolveWResponse\" in options && options.resolveWResponse) {\n response.params = params;\n resolve(response);\n } else {\n resolve(data);\n }\n };\n\n const errorCB = e => {\n if (e.getPhase() === \"timeout\") {\n if (options.timeout && options.timeoutRetries) {\n options.timeoutRetries--;\n sendRequest();\n return;\n }\n }\n\n let message = null;\n let status = null;\n if (e.getData().error) {\n const errorData = e.getData().error;\n if (errorData.message) {\n message = errorData.message;\n }\n const logs = errorData.logs || null;\n if (message === null && logs && logs.length) {\n message = logs[0].message;\n }\n const errors = errorData.errors || [];\n if (message === null && errors && errors.length) {\n message = errors[0].message;\n }\n status = errorData.status;\n } else {\n const req = e.getRequest();\n message = req.getResponse();\n status = req.getStatus();\n }\n res.dispose();\n\n // If a 401 is received, make a call to the /me endpoint.\n // If the backend responds with yet another 401, assume that the backend logged the user out\n if (status === 401 && resource !== \"profile\" && osparc.auth.Manager.getInstance().isLoggedIn()) {\n console.warn(\"Checking if user is logged in the backend\");\n this.fetch(\"profile\", \"getOne\")\n .catch(err => {\n if (\"status\" in err && err.status === 401) {\n // Unauthorized again, the cookie might have expired.\n // We can assume that all calls after this will respond with 401, so bring the user ot the login page.\n qx.core.Init.getApplication().logout(qx.locale.Manager.tr(\"You were logged out. Your cookie might have expired.\"));\n }\n });\n }\n\n if ([404, 503].includes(status)) {\n message += \"Please try again later and/or contact support\";\n }\n const err = Error(message ? message : `Error while trying to fetch ${endpoint} ${resource}`);\n if (status) {\n err.status = status;\n }\n reject(err);\n };\n\n const successEndpoint = endpoint + \"Success\";\n const errorEndpoint = endpoint + \"Error\";\n res.addListenerOnce(successEndpoint, e => successCB(e), this);\n res.addListener(errorEndpoint, e => errorCB(e), this);\n sendRequest();\n });\n },\n\n getAllPages: function(resource, params = {}, endpoint = \"getPage\") {\n return new Promise((resolve, reject) => {\n let resources = [];\n let offset = 0;\n if (!(\"url\" in params)) {\n params[\"url\"] = {};\n }\n params[\"url\"][\"offset\"] = offset;\n params[\"url\"][\"limit\"] = 10;\n const options = {\n resolveWResponse: true\n };\n this.fetch(resource, endpoint, params, options)\n .then(resp => {\n // sometimes there is a kind of a double \"data\"\n const meta = (\"_meta\" in resp[\"data\"]) ? resp[\"data\"][\"_meta\"] : resp[\"_meta\"];\n const data = (\"_meta\" in resp[\"data\"]) ? resp[\"data\"][\"data\"] : resp[\"data\"];\n resources = [...resources, ...data];\n const allRequests = [];\n for (let i=offset+meta.limit; i
\n * var description = {\n * \"get\": { method: \"GET\", url: \"/photo/{id}\" },\n * \"put\": { method: \"PUT\", url: \"/photo/{id}\"},\n * \"post\": { method: \"POST\", url: \"/photos/\"}\n * };\n * var photo = new qx.io.rest.Resource(description);\n * // Can also be written: photo.invoke(\"get\", {id: 1});\n * photo.get({id: 1});\n *\n * // Additionally sets request data (provide it as string or set the content type)\n * // In a RESTful environment this creates a new resource with the given 'id'\n * photo.configureRequest(function(req) {\n * req.setRequestHeader(\"Content-Type\", \"application/json\");\n * });\n * photo.put({id: 1}, {title: \"Monkey\"});\n *\n * // Additionally sets request data (provide it as string or set the content type)\n * // In a RESTful environment this adds a new resource to the resource collection 'photos'\n * photo.configureRequest(function(req) {\n * req.setRequestHeader(\"Content-Type\", \"application/json\");\n * });\n * photo.post(null, {title: \"Monkey\"});\n * \n *\n * To check for existence of URL parameters or constrain them to a certain format, you\n * can add a check property to the description. See {@link #map} for details.\n *\n * \n * var description = {\n * \"get\": { method: \"GET\", url: \"/photo/{id}\", check: { id: /\\d+/ } }\n * };\n * var photo = new qx.io.rest.Resource(description);\n * // photo.get({id: \"FAIL\"});\n * // -- Error: \"Parameter 'id' is invalid\"\n * \n *\n * If your description happens to use the same action more than once, consider\n * defining another resource.\n *\n * \n * var description = {\n * \"get\": { method: \"GET\", url: \"/photos\"},\n * };\n * // Distinguish \"photo\" (singular) and \"photos\" (plural) resource\n * var photos = new qx.io.rest.Resource(description);\n * photos.get();\n * \n *\n * Basically, all routes of a resource should point to the same URL (resource in\n * terms of HTTP). One acceptable exception of this constraint are resources where\n * required parameters are part of the URL (/photos/1/) or filter\n * resources. For instance:\n *\n * \n * var description = {\n * \"get\": { method: \"GET\", url: \"/photos/{tag}\" }\n * };\n * var photos = new qx.io.rest.Resource(description);\n * photos.get();\n * photos.get({tag: \"wildlife\"})\n * \n *\n * Strictly speaking, the photos instance represents two distinct resources\n * and could therefore just as well mapped to two distinct resources (for instance,\n * named photos and photosTagged). What style to choose depends on the kind of data\n * returned. For instance, it seems sensible to stick with one resource if the filter\n * only limits the result set (i.e. the individual results have the same properties).\n *\n * In order to respond to successful (or erroneous) invocations of actions,\n * either listen to the generic \"success\" or \"error\" event and get the action\n * from the event data, or listen to action specific events defined at runtime.\n * Action specific events follow the pattern \"<action>Success\" and\n * \"<action>Error\", e.g. \"indexSuccess\".\n * \n * NOTE: Instances of this class must be disposed of after use\n *\n */\nqx.Class.define(\"qx.io.rest.Resource\",\n{\n extend: qx.core.Object,\n implement : [ qx.core.IDisposable ],\n\n /**\n * @param description {Map?} Each key of the map is interpreted as\n * action name. The value associated to the key must be a map\n * with the properties method and url.\n * check is optional. Also see {@link #map}.\n *\n * For example:\n *\n * \n * { get: {method: \"GET\", url: \"/photos/{id}\", check: { id: /\\d+/ }} }\n * \n *\n * @see qx.bom.rest\n * @see qx.io.rest\n */\n construct: function(description)\n {\n this.base(arguments);\n\n this.__longPollHandlers = {};\n this.__pollTimers = {};\n this.__routes = {};\n\n this._resource = this._tailorResource(this._getResource());\n\n try {\n if (typeof description !== \"undefined\") {\n if (qx.core.Environment.get(\"qx.debug\")) {\n qx.core.Assert.assertMap(description);\n }\n this.__mapFromDescription(description);\n }\n } catch(e) {\n this.dispose();\n throw e;\n }\n },\n\n events:\n {\n /**\n * Fired when any request was successful.\n *\n * The action the successful request is associated to, as well as the\n * request itself, can be retrieved from the event’s properties.\n * Additionally, an action specific event is fired that follows the pattern\n * \"index() was\n * successful.\n */\n \"actionSuccess\": \"qx.event.type.Rest\",\n\n /**\n * Fired when any request fails.\n *\n * The action the failed request is associated to, as well as the\n * request itself, can be retrieved from the event’s properties.\n * Additionally, an action specific event is fired that follows the pattern\n * \"index() failed.\n */\n \"actionError\": \"qx.event.type.Rest\"\n },\n\n statics:\n {\n /**\n * Number of milliseconds below a long-poll request is considered immediate and\n * subject to throttling checks.\n */\n POLL_THROTTLE_LIMIT: 100,\n\n /**\n * Number of immediate long-poll responses accepted before throttling takes place.\n */\n POLL_THROTTLE_COUNT: 30,\n\n /**\n * A symbol used in checks to declare required parameter.\n */\n REQUIRED: true,\n\n /**\n * Get placeholders from URL.\n *\n * @param url {String} The URL to parse for placeholders.\n * @return {Array} Array of placeholders without the placeholder prefix.\n */\n placeholdersFromUrl: function(url) {\n return qx.bom.rest.Resource.placeholdersFromUrl(url);\n }\n },\n\n members:\n {\n _resource: null,\n __longPollHandlers: null,\n __pollTimers: null,\n __routes: null,\n\n /**\n * Get resource.\n *\n * May be overridden to change type of resource.\n * @param description {Map?} See construct.\n * @return {qx.bom.rest.Resource} Resource implementation which does the heavy lifting.\n */\n _getResource: function(description) {\n return new qx.bom.rest.Resource(description);\n },\n\n /**\n * Tailors (apply dependency injection) the given resource to fit our needs.\n *\n * @param resource {qx.bom.rest.Resource} Resource.\n * @return {qx.bom.rest.Resource} Tailored resource.\n */\n _tailorResource: function(resource) {\n // inject different request implementation\n resource.setRequestFactory(this._getRequest);\n\n // inject different request handling\n resource.setRequestHandler({\n onsuccess: {\n callback: function(req, action) {\n return function() {\n var props = [req.getResponse(), null, false, req, action, req.getPhase()];\n this.fireEvent(action + \"Success\", qx.event.type.Rest, props);\n this.fireEvent(\"success\", qx.event.type.Rest, props);\n };\n },\n context: this\n },\n onfail: {\n callback: function(req, action) {\n return function() {\n var props = [req.getResponse(), null, false, req, action, req.getPhase()];\n this.fireEvent(action + \"Error\", qx.event.type.Rest, props);\n this.fireEvent(\"error\", qx.event.type.Rest, props);\n };\n },\n context: this\n },\n onloadend: {\n callback: function(req, action) {\n return function() {\n req.dispose();\n };\n },\n context: this\n }\n });\n\n return resource;\n },\n\n //\n // Request\n //\n\n /**\n * Configure request.\n *\n * @param callback {Function} Function called before request is send.\n * Receives request, action, params and data.\n *\n * \n * res.configureRequest(function(req, action, params, data) {\n * if (action === \"index\") {\n * req.setAccept(\"application/json\");\n * }\n * });\n * \n */\n configureRequest: function(callback) {\n this._resource.configureRequest(callback);\n },\n\n /**\n * Get request.\n *\n * May be overridden to change type of request.\n * @return {qx.io.request.Xhr} Xhr object\n */\n _getRequest: function() {\n return new qx.io.request.Xhr();\n },\n\n //\n // Routes and actions\n //\n\n /**\n * Map action to combination of method and URL pattern.\n *\n * \n * res.map(\"get\", \"GET\", \"/photos/{id}\", {id: /\\d+/});\n *\n * // GET /photos/123\n * res.get({id: \"123\"});\n * \n *\n * @param action {String} Action to associate to request.\n * @param method {String} Method to configure request with.\n * @param url {String} URL to configure request with. May contain positional\n * parameters ({param}) that are replaced by values given when the action\n * is invoked. Parameters are optional, unless a check is defined. A default\n * value can be provided ({param=default}).\n * @param check {Map?} Map defining parameter constraints, where the key is\n * the URL parameter and the value a regular expression (to match string) or\n * qx.io.rest.Resource.REQUIRED (to verify existence).\n */\n map: function(action, method, url, check) {\n // add dynamic methods also on ourself to allow 'invoke()' delegation\n this.__addAction(action, method, url, check);\n\n this._resource.map(action, method, url, check);\n },\n\n /**\n * Map actions to members.\n *\n * @param action {String} Action to associate to request.\n * @param method {String} Method to configure request with.\n * @param url {String} URL to configure request with. May contain positional\n * parameters ({param}) that are replaced by values given when the action\n * is invoked. Parameters are optional, unless a check is defined. A default\n * value can be provided ({param=default}).\n * @param check {Map?} Map defining parameter constraints, where the key is\n * the URL parameter and the value a regular expression (to match string) or\n * qx.io.rest.Resource.REQUIRED (to verify existence).\n */\n __addAction: function(action, method, url, check) {\n this.__routes[action] = [method, url, check];\n\n // Undefine generic getter when action is named \"get\"\n if (action == \"get\") {\n this[action] = undefined;\n }\n\n // Do not overwrite existing \"non-action\" methods unless the method is\n // null (i.e. because it exists as a stub for documentation)\n if (typeof this[action] !== \"undefined\" && this[action] !== null &&\n this[action].action !== true)\n {\n throw new Error(\"Method with name of action (\"+action+\") already exists\");\n }\n\n this.__declareEvent(action + \"Success\");\n this.__declareEvent(action + \"Error\");\n\n this[action] = qx.lang.Function.bind(function() {\n Array.prototype.unshift.call(arguments, action);\n return this.invoke.apply(this, arguments);\n }, this);\n\n // Method is safe to overwrite\n this[action].action = true;\n\n },\n\n /**\n * Invoke action with parameters.\n *\n * Internally called by actions dynamically created.\n *\n * May be overridden to customize action and parameter handling.\n *\n * @lint ignoreUnused(successHandler, failHandler, loadEndHandler)\n *\n * @param action {String} Action to invoke.\n * @param params {Map} Map of parameters inserted into URL when a matching\n * positional parameter is found.\n * @param data {Map|String} Data to be send as part of the request.\n * See {@link qx.io.request.AbstractRequest#requestData}.\n * @return {Number} Id of the action's invocation.\n */\n invoke: function(action, params, data) {\n var params = (params == null) ? {} : params;\n\n // Cache parameters\n this.__routes[action].params = params;\n\n return this._resource.invoke(action, params, data);\n },\n\n /**\n * Set base URL.\n *\n * The base URL is prepended to the URLs given in the description.\n * Changes affect all future invocations.\n *\n * @param baseUrl {String} Base URL.\n */\n setBaseUrl: function(baseUrl) {\n this._resource.setBaseUrl(baseUrl);\n },\n\n /**\n * Abort action.\n *\n * Example:\n *\n * \n * // Abort all invocations of action\n * res.get({id: 1});\n * res.get({id: 2});\n * res.abort(\"get\");\n *\n * // Abort specific invocation of action (by id)\n * var actionId = res.get({id: 1});\n * res.abort(actionId);\n * \n *\n * @param varargs {String|Number} Action of which all invocations to abort\n * (when string), or a single invocation of an action to abort (when number)\n */\n abort: function(varargs) {\n this._resource.abort(varargs);\n },\n\n /**\n * Resend request associated to action.\n *\n * Replays parameters given when action was invoked originally.\n *\n * @param action {String} Action to refresh.\n */\n refresh: function(action) {\n this._resource.refresh(action);\n },\n\n /**\n * Periodically invoke action.\n *\n * Replays parameters given when action was invoked originally. When the\n * action was not yet invoked and requires parameters, parameters must be\n * given.\n *\n * Please note that IE tends to cache overly aggressive. One work-around is\n * to disable caching on the client side by configuring the request with\n * setCache(false). If you control the server, a better\n * work-around is to include appropriate headers to explicitly control\n * caching. This way you still avoid requests that can be correctly answered\n * from cache (e.g. when nothing has changed since the last poll). Please\n * refer to \n * XMLHttpRequest Caching Test for available options.\n *\n * @lint ignoreUnused(intervalListener)\n *\n * @param action {String} Action to poll.\n * @param interval {Number} Interval in ms.\n * @param params {Map?} Map of parameters. See {@link #invoke}.\n * @param immediately {Boolean?false} true, if the poll should\n * invoke a call immediately.\n * @return {qx.event.Timer} Timer that periodically invokes action. Use to\n * stop or resume. Is automatically disposed on disposal of object.\n */\n poll: function(action, interval, params, immediately) {\n // Dispose timer previously created for action\n if (this.__pollTimers[action]) {\n this.__pollTimers[action].dispose();\n }\n\n // Fallback to previous params\n if (typeof params == \"undefined\") {\n params = this.__routes[action].params;\n }\n\n // Invoke immediately\n if (immediately) {\n this.invoke(action, params);\n }\n\n var intervalListener = function() {\n var reqs = this.getRequestsByAction(action),\n req = (reqs) ? reqs[0] : null;\n\n if (!immediately && !req) {\n this.invoke(action, params);\n return;\n }\n if (req && (req.isDone() || req.isDisposed())) {\n this.refresh(action);\n }\n };\n\n var timer = this.__pollTimers[action] = new qx.event.Timer(interval);\n timer.addListener(\"interval\", intervalListener, this._resource);\n timer.start();\n return timer;\n },\n\n /**\n * Long-poll action.\n *\n * Use Ajax long-polling to continuously fetch a resource as soon as the\n * server signals new data. The server determines when new data is available,\n * while the client keeps open a request. Requires configuration on the\n * server side. Basically, the server must not close a connection until\n * new data is available. For a high level introduction to long-polling,\n * refer to \n * Ajax with long polling.\n *\n * Uses {@link #refresh} internally. Make sure you understand the\n * implications of IE's tendency to cache overly aggressive.\n *\n * Note no interval is given on the client side.\n *\n * @lint ignoreUnused(longPollHandler)\n *\n * @param action {String} Action to poll.\n * @return {String} Id of handler responsible for long-polling. To stop\n * polling, remove handler using {@link qx.core.Object#removeListenerById}.\n */\n longPoll: function(action) {\n var res = this,\n lastResponse, // Keep track of last response\n immediateResponseCount = 0; // Count immediate responses\n\n // Throttle to prevent high load on server and client\n function throttle() {\n var isImmediateResponse =\n lastResponse &&\n ((new Date()) - lastResponse) < res._getThrottleLimit();\n\n if (isImmediateResponse) {\n immediateResponseCount += 1;\n if (immediateResponseCount > res._getThrottleCount()) {\n if (qx.core.Environment.get(\"qx.debug\")) {\n res.debug(\"Received successful response more than \" +\n res._getThrottleCount() + \" times subsequently, each within \" +\n res._getThrottleLimit() + \" ms. Throttling.\");\n }\n return true;\n }\n }\n\n // Reset counter on delayed response\n if (!isImmediateResponse) {\n immediateResponseCount = 0;\n }\n\n return false;\n }\n\n var handlerId = this.__longPollHandlers[action] =\n this.addListener(action + \"Success\", function longPollHandler() {\n if (res.isDisposed()) {\n return;\n }\n\n if (!throttle()) {\n lastResponse = new Date();\n res.refresh(action);\n }\n });\n\n this.invoke(action);\n return handlerId;\n },\n\n /**\n * Get request configuration for action and parameters.\n *\n * This is were placeholders are replaced with parameters.\n *\n * @param action {String} Action associated to request.\n * @param params {Map} Parameters to embed in request.\n * @return {Map} Map of configuration settings. Has the properties\n * method, url and check.\n */\n _getRequestConfig: function(action, params) {\n return this._resource._getRequestConfig(action, params);\n },\n\n /**\n * Override to adjust the throttle limit.\n * @return {Integer} Throttle limit in milliseconds\n */\n _getThrottleLimit: function() {\n return qx.io.rest.Resource.POLL_THROTTLE_LIMIT;\n },\n\n /**\n * Override to adjust the throttle count.\n * @return {Integer} Throttle count\n */\n _getThrottleCount: function() {\n return qx.io.rest.Resource.POLL_THROTTLE_COUNT;\n },\n\n /**\n * Map actions from description.\n *\n * Allows to decoratively define routes.\n *\n * @param description {Map} Map that defines the routes.\n */\n __mapFromDescription: function(description) {\n Object.keys(description).forEach(function(action) {\n var route = description[action],\n method = route.method,\n url = route.url,\n check = route.check;\n\n if (qx.core.Environment.get(\"qx.debug\")) {\n qx.core.Assert.assertString(method, \"Method must be string for route '\" + action + \"'\");\n qx.core.Assert.assertString(url, \"URL must be string for route '\" + action + \"'\");\n }\n\n this.map(action, method, url, check);\n }, this);\n },\n\n /**\n * Declare event at runtime.\n *\n * @param type {String} Type of event.\n */\n __declareEvent: function(type) {\n if (!this.constructor.$$events) {\n this.constructor.$$events = {};\n }\n\n if (!this.constructor.$$events[type]) {\n this.constructor.$$events[type] = \"qx.event.type.Rest\";\n }\n }\n },\n\n /**\n * Destructs the Resource.\n *\n * All created requests, routes and pollTimers will be disposed.\n */\n destruct: function() {\n var action;\n\n if (this.__pollTimers) {\n for (action in this.__pollTimers) {\n var timer = this.__pollTimers[action];\n timer.stop();\n timer.dispose();\n }\n }\n\n if (this.__longPollHandlers) {\n for (action in this.__longPollHandlers) {\n var id = this.__longPollHandlers[action];\n this.removeListenerById(id);\n }\n }\n\n this._resource.destruct();\n this._resource = this.__routes = this.__pollTimers = this.__longPollHandlers = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/**\n * Base class for RESTful resources\n */\nqx.Class.define(\"osparc.io.rest.Resource\", {\n extend: qx.io.rest.Resource,\n\n construct: function(description, timeout = 0) {\n this.base(arguments, description);\n\n this.configureRequest(request => {\n const headers = [{\n key: \"Accept\",\n value: \"application/json\"\n }, {\n key: \"Content-Type\",\n value: \"application/json\"\n }, {\n key: \"X-Simcore-Products-Name\",\n value: qx.core.Environment.get(\"product.name\")\n }];\n\n if (this.AUTHENTICATION !== undefined && this.AUTHENTICATION !== null) {\n headers.concat(this.AUTHENTICATION.getAuthHeaders());\n }\n\n headers.forEach(item => request.setRequestHeader(item.key, item.value));\n\n if (timeout) {\n request.setTimeout(timeout);\n }\n });\n },\n\n statics: {\n AUTHENTICATION: null,\n\n setAutheticationHeader: function(usernameOrToken, password=null) {\n osparc.io.rest.Resource.AUTHENTICATION = new qx.io.request.authentication.Basic(usernameOrToken, password);\n }\n },\n\n members: {\n includesRoute: function(route) {\n return Object.keys(this.__routes).includes(route);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.metadata.Quality\", {\n type: \"static\",\n\n statics: {\n attachQualityToObject: function(obj) {\n if (!(\"quality\" in obj)) {\n obj[\"quality\"] = {};\n }\n if (!(\"enabled\" in obj[\"quality\"])) {\n obj[\"quality\"][\"enabled\"] = true;\n }\n\n if (\"tsr\" in obj[\"quality\"]) {\n obj[\"quality\"][\"tsr_current\"] = obj[\"quality\"][\"tsr\"];\n delete obj[\"quality\"][\"tsr\"];\n }\n\n const defaultCurrentTSR = osparc.metadata.Quality.getDefaultCurrentQualityTSR();\n if (!(\"tsr_current\" in obj[\"quality\"])) {\n obj[\"quality\"][\"tsr_current\"] = defaultCurrentTSR;\n }\n Object.keys(defaultCurrentTSR).forEach(sectionKey => {\n if (!(sectionKey in obj[\"quality\"][\"tsr_current\"])) {\n obj[\"quality\"][\"tsr_current\"][sectionKey] = defaultCurrentTSR[sectionKey];\n }\n });\n\n const defaultTargetTSR = osparc.metadata.Quality.getDefaultTargetQualityTSR();\n if (!(\"tsr_target\" in obj[\"quality\"])) {\n obj[\"quality\"][\"tsr_target\"] = defaultTargetTSR;\n }\n Object.keys(defaultTargetTSR).forEach(sectionKey => {\n if (!(sectionKey in obj[\"quality\"][\"tsr_target\"])) {\n obj[\"quality\"][\"tsr_target\"][sectionKey] = defaultTargetTSR[sectionKey];\n }\n });\n\n if ((\"annotations\" in obj[\"quality\"])) {\n delete obj[\"quality\"][\"annotations\"];\n }\n },\n\n isEnabled: function(quality) {\n return quality && \"enabled\" in quality && quality[\"enabled\"];\n },\n\n getConformanceLevel: function() {\n const conformanceLevel = {\n \"l00\": {\n \"title\": \"Insufficient\",\n \"description\": \"Missing or grossly incomplete information to properly evaluate \\\nthe conformance with the rule\",\n \"level\": 0,\n \"outreach\": \"None or very limited\"\n },\n \"l01\": {\n \"title\": \"Partial\",\n \"description\": \"Unclear to the M&S practitioners familiar with the application \\\ndomain and the intended context of use\",\n \"level\": 1,\n \"outreach\": \"Outreach to application-domain specific M&S practitioners\"\n },\n \"l02\": {\n \"title\": \"Adequate\",\n \"description\": \"Can be understood by M&S practitioners familiar with the application \\\ndomain and the intended context of use\",\n \"level\": 2,\n \"outreach\": \"Outreach to application-domain specific M&S practitioners\"\n },\n \"l03\": {\n \"title\": \"Extensive\",\n \"description\": \"Can be understood by M&S practitioners not familiar with the application \\\ndomain and the intended context of use\",\n \"level\": 3,\n \"outreach\": \"Outreach to practitioners who may not be application-domain experts\"\n },\n \"l04\": {\n \"title\": \"Comprehensive\",\n \"description\": \"Can be understood by non-M&S practitioners familiar with the application \\\ndomain and the intended context of use\",\n \"level\": 4,\n \"outreach\": \"Outreach to application-domain experts who may not be M&S practitioners\"\n }\n };\n return conformanceLevel;\n },\n\n findConformanceLevel: function(level) {\n let confLevel = null;\n const conformanceLevels = osparc.metadata.Quality.getConformanceLevel();\n Object.values(conformanceLevels).forEach(conformanceLevel => {\n if (conformanceLevel.level === level) {\n confLevel = conformanceLevel;\n }\n });\n return confLevel;\n },\n\n getDefaultCurrentQualityTSR: function() {\n const defaultCurrentTSR = {\n \"r01\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r02\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r03\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r03b\": {\n \"references\": \"\"\n },\n \"r03c\": {\n \"references\": \"\"\n },\n \"r04\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r05\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r06\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r07\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r07b\": {\n \"references\": \"\"\n },\n \"r07c\": {\n \"references\": \"\"\n },\n \"r07d\": {\n \"references\": \"\"\n },\n \"r07e\": {\n \"references\": \"\"\n },\n \"r08\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r08b\": {\n \"references\": \"\"\n },\n \"r09\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r10\": {\n \"level\": 0,\n \"references\": \"\"\n },\n \"r10b\": {\n \"references\": \"\"\n }\n };\n return defaultCurrentTSR;\n },\n\n getDefaultTargetQualityTSR: function() {\n const defaultTargetTSR = {\n \"r01\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r02\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r03\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r03b\": {\n \"references\": \"\"\n },\n \"r03c\": {\n \"references\": \"\"\n },\n \"r04\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r05\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r06\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r07\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r07b\": {\n \"references\": \"\"\n },\n \"r07c\": {\n \"references\": \"\"\n },\n \"r07d\": {\n \"references\": \"\"\n },\n \"r07e\": {\n \"references\": \"\"\n },\n \"r08\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r08b\": {\n \"references\": \"\"\n },\n \"r09\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r10\": {\n \"level\": 4,\n \"references\": \"\"\n },\n \"r10b\": {\n \"references\": \"\"\n }\n };\n return defaultTargetTSR;\n },\n\n computeTSRScore: function(currentTSR, targetTSR) {\n let score = 0;\n let targetScore = 0;\n let maxScore = 0;\n Object.entries(currentTSR).forEach(([tsrKey, cTSR]) => {\n if (\"level\" in cTSR && \"level\" in targetTSR[tsrKey] && targetTSR[tsrKey][\"level\"] !== 0) {\n score += cTSR.level;\n targetScore += targetTSR[tsrKey].level;\n maxScore += 4;\n }\n });\n return {\n score,\n targetScore,\n maxScore\n };\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/** Authentication data\n *\n * - Keeps data and state of current authenticated (logged in) user\n*/\n\nqx.Class.define(\"osparc.auth.Data\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n /**\n * Basic authentification with a token\n */\n auth: {\n init: null,\n nullable: true,\n check: \"osparc.io.request.authentication.Token\",\n apply: \"__applyAuth\"\n },\n\n role: {\n check: [\"anonymous\", \"guest\", \"user\", \"tester\", \"product_owner\", \"admin\"],\n init: null,\n nullable: false,\n event: \"changeRole\",\n apply: \"__applyRole\"\n },\n\n guest: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changeGuest\"\n },\n\n loggedIn: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n event: \"changeLoggedIn\",\n },\n\n /**\n * User Id\n */\n userId: {\n init: null,\n nullable: false,\n check: \"Number\"\n },\n\n /**\n * Group ID\n */\n groupId: {\n init: null,\n nullable: false,\n check: \"Number\"\n },\n\n username: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeUsername\",\n },\n\n email: {\n init: null,\n nullable: true, // email of logged in user, otherwise null\n check: \"String\"\n },\n\n firstName: {\n init: \"\",\n nullable: true,\n check: \"String\",\n event: \"changeFirstName\"\n },\n\n lastName: {\n init: \"\",\n nullable: true,\n check: \"String\",\n event: \"changeLastName\"\n },\n\n expirationDate: {\n init: null,\n nullable: true,\n check: \"Date\",\n event: \"changeExpirationDate\"\n },\n },\n\n members: {\n __applyAuth: function(auth) {\n this.setLoggedIn(auth !== null && auth instanceof osparc.io.request.authentication.Token);\n },\n\n __applyRole: function(role) {\n if (role && [\"user\", \"tester\", \"product_owner\", \"admin\"].includes(role)) {\n this.setGuest(false);\n } else {\n this.setGuest(true);\n }\n },\n\n setToken: function(token) {\n if (token) {\n osparc.utils.Utils.cookie.setCookie(\"user\", token);\n this.setAuth(new osparc.io.request.authentication.Token(token));\n }\n },\n\n resetToken: function() {\n osparc.utils.Utils.cookie.setCookie(\"user\", \"logout\");\n this.resetAuth();\n },\n\n isLogout: function() {\n return osparc.utils.Utils.cookie.getCookie(\"user\") === \"logout\";\n },\n\n getFriendlyUsername: function() {\n const firstName = this.getFirstName();\n if (firstName) {\n return firstName;\n }\n return this.getUsername();\n },\n\n getFullName: function() {\n let name = \"\";\n if (this.getFirstName()) {\n name += this.getFirstName();\n }\n if (this.getLastName()) {\n name += \" \" + this.getLastName();\n }\n return name;\n },\n\n getFriendlyRole: function() {\n const role = this.getRole();\n let friendlyRole = role.replace(/_/g, \" \");\n friendlyRole = osparc.utils.Utils.firstsUp(friendlyRole);\n return friendlyRole;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Singleton class that pops up a window showing a log message. The time the window is visible depends\n * on the length of the message. Also if a second message is added will be stacked to the previous one.\n *\n * Depending on the log level (\"DEBUG\", \"INFO\", \"WARNING\", \"ERROR\") the background color of the window\n * will be different.\n *\n * *Example*\n *\n * Here is a little example of how to use the class.\n *\n * \n * osparc.FlashMessenger.getInstance().logAs(log);\n *\n */\n\nqx.Class.define(\"osparc.FlashMessenger\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n this.__messages = new qx.data.Array();\n\n this.__messageContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX\n });\n const root = qx.core.Init.getApplication().getRoot();\n root.add(this.__messageContainer, {\n top: 10\n });\n\n this.__displayedMessagesCount = 0;\n\n this.__attachEventHandlers();\n },\n\n statics: {\n MAX_DISPLAYED: 3,\n logAs: function(message, level, duration) {\n return this.getInstance().logAs(message, level, duration);\n }\n },\n\n members: {\n __messages: null,\n __messageContainer: null,\n __displayedMessagesCount: null,\n\n /**\n * Public function to log a FlashMessage to the user.\n *\n * @param {String} message Message that the message will show.\n * @param {String=\"INFO\",\"DEBUG\",\"WARNING\",\"ERROR\"} level Level of the warning. The color of the badge will change accordingly.\n * @param {Number} duration\n */\n logAs: function(message, level=\"INFO\", duration=null) {\n return this.log({\n message,\n level: level.toUpperCase(),\n duration\n });\n },\n\n log: function(logMessage) {\n const message = osparc.utils.Utils.isObject(logMessage.message) && \"message\" in logMessage.message ?\n logMessage.message.message :\n logMessage.message;\n\n const level = logMessage.level.toUpperCase(); // \"DEBUG\", \"INFO\", \"WARNING\", \"ERROR\"\n\n const flashMessage = new osparc.ui.message.FlashMessage(message, level, logMessage.duration);\n flashMessage.addListener(\"closeMessage\", () => this.removeMessage(flashMessage), this);\n this.__messages.push(flashMessage);\n\n return flashMessage;\n },\n\n /**\n * Private method to show a message to the user. It will stack it on the previous ones.\n *\n * @param {osparc.ui.message.FlashMessage} flashMessage FlashMessage element to show.\n */\n __showMessage: function(flashMessage) {\n if (!flashMessage.getMessage()) {\n flashMessage.setMessage(qx.locale.Manager.tr(\"No message\"));\n }\n\n this.__messages.remove(flashMessage);\n this.__messageContainer.resetDecorator();\n this.__messageContainer.add(flashMessage);\n const {\n width\n } = flashMessage.getSizeHint();\n if (this.__displayedMessagesCount === 0 || width > this.__messageContainer.getWidth()) {\n this.__updateContainerPosition(width);\n }\n this.__displayedMessagesCount++;\n\n let duration = flashMessage.getDuration();\n if (duration === null) {\n const message = flashMessage.getMessage();\n const wordCount = message.split(\" \").length;\n duration = Math.max(5500, wordCount*500); // An average reader takes 300ms to read a word\n }\n if (duration !== 0) {\n qx.event.Timer.once(() => this.removeMessage(flashMessage), this, duration);\n }\n },\n\n /**\n * Private method to remove a message. If there are still messages in the queue, it will show the next available one.\n *\n * @param {osparc.ui.message.FlashMessage} flashMessage FlashMessage element to remove.\n */\n removeMessage: function(flashMessage) {\n if (this.__messageContainer.indexOf(flashMessage) > -1) {\n this.__displayedMessagesCount--;\n this.__messageContainer.setDecorator(\"flash-container-transitioned\");\n this.__messageContainer.remove(flashMessage);\n qx.event.Timer.once(() => {\n if (this.__messages.length) {\n // There are still messages to show\n this.__showMessage(this.__messages.getItem(0));\n }\n }, this, 200);\n }\n },\n\n /**\n * Function to re-position the message container according to the next message size, or its own size, if the previous is missing.\n *\n * @param {Integer} messageWidth Size of the next message to add in pixels.\n */\n __updateContainerPosition: function(messageWidth) {\n const width = messageWidth || this.__messageContainer.getSizeHint().width;\n const root = qx.core.Init.getApplication().getRoot();\n if (root && root.getBounds()) {\n this.__messageContainer.setLayoutProperties({\n left: Math.round((root.getBounds().width - width) / 2)\n });\n }\n },\n\n __attachEventHandlers: function() {\n this.__messages.addListener(\"change\", e => {\n const data = e.getData();\n if (data.type === \"add\") {\n if (this.__displayedMessagesCount < this.self().MAX_DISPLAYED) {\n this.__showMessage(data.added[0]);\n }\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A helper class for accessing the property system directly.\n *\n * This class is rather to be used internally. For all regular usage of the\n * property system the default API should be sufficient.\n */\nqx.Class.define(\"qx.util.PropertyUtil\",\n{\n statics :\n {\n /**\n * Get the property map of the given class\n *\n * @param clazz {Class} a qooxdoo class\n * @return {Map} A properties map as defined in {@link qx.Class#define}\n * including the properties of included mixins and not including refined\n * properties.\n */\n getProperties : function(clazz) {\n return clazz.$$properties;\n },\n\n\n /**\n * Get the property map of the given class including the properties of all\n * superclasses!\n *\n * @param clazz {Class} a qooxdoo class\n * @return {Map} The properties map as defined in {@link qx.Class#define}\n * including the properties of included mixins of the current class and\n * all superclasses.\n */\n getAllProperties : function(clazz)\n {\n\n var properties = {};\n var superclass = clazz;\n // go threw the class hierarchy\n while (superclass != qx.core.Object) {\n var currentProperties = this.getProperties(superclass);\n for (var property in currentProperties) {\n properties[property] = currentProperties[property];\n }\n superclass = superclass.superclass;\n }\n return properties;\n },\n\n\n\n /*\n -------------------------------------------------------------------------\n USER VALUES\n -------------------------------------------------------------------------\n */\n\n /**\n * Returns the user value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @return {var} The user value\n */\n getUserValue : function(object, propertyName) {\n return object[\"$$user_\" + propertyName];\n },\n\n /**\n * Sets the user value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @param value {var} The value to set\n */\n setUserValue : function(object, propertyName, value) {\n object[\"$$user_\" + propertyName] = value;\n },\n\n /**\n * Deletes the user value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n */\n deleteUserValue : function(object, propertyName) {\n delete(object[\"$$user_\" + propertyName]);\n },\n\n\n /*\n -------------------------------------------------------------------------\n INIT VALUES\n -------------------------------------------------------------------------\n */\n\n /**\n * Returns the init value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @return {var} The init value\n */\n getInitValue : function(object, propertyName) {\n return object[\"$$init_\" + propertyName];\n },\n\n /**\n * Sets the init value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @param value {var} The value to set\n */\n setInitValue : function(object, propertyName, value) {\n object[\"$$init_\" + propertyName] = value;\n },\n\n /**\n * Deletes the init value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n */\n deleteInitValue : function(object, propertyName) {\n delete(object[\"$$init_\" + propertyName]);\n },\n\n\n /*\n -------------------------------------------------------------------------\n THEME VALUES\n -------------------------------------------------------------------------\n */\n\n /**\n * Returns the theme value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @return {var} The theme value\n */\n getThemeValue : function(object, propertyName) {\n return object[\"$$theme_\" + propertyName];\n },\n\n /**\n * Sets the theme value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @param value {var} The value to set\n */\n setThemeValue : function(object, propertyName, value) {\n object[\"$$theme_\" + propertyName] = value;\n },\n\n /**\n * Deletes the theme value of the given property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n */\n deleteThemeValue : function(object, propertyName) {\n delete(object[\"$$theme_\" + propertyName]);\n },\n\n\n /*\n -------------------------------------------------------------------------\n THEMED PROPERTY\n -------------------------------------------------------------------------\n */\n\n /**\n * Sets a themed property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n * @param value {var} The value to set\n */\n setThemed : function(object, propertyName, value)\n {\n var styler = qx.core.Property.$$method.setThemed;\n object[styler[propertyName]](value);\n },\n\n /**\n * Resets a themed property\n *\n * @param object {Object} The object to access\n * @param propertyName {String} The name of the property\n */\n resetThemed : function(object, propertyName)\n {\n var unstyler = qx.core.Property.$$method.resetThemed;\n object[unstyler[propertyName]]();\n }\n }\n});","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.Preferences\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n preferredWalletId: {\n nullable: false,\n init: null,\n check: \"Number\",\n event: \"changePreferredWalletId\"\n },\n\n themeName: {\n nullable: false,\n init: {},\n check: \"String\",\n apply: \"__applyThemeName\"\n },\n\n // ---------------------------\n\n autoConnectPorts: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeAutoConnectPorts\",\n apply: \"__patchPreference\"\n },\n\n confirmBackToDashboard: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeConfirmBackToDashboard\",\n apply: \"__patchPreference\"\n },\n\n confirmDeleteStudy: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeConfirmDeleteStudy\",\n apply: \"__patchPreference\"\n },\n\n confirmDeleteNode: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeConfirmDeleteNode\",\n apply: \"__patchPreference\"\n },\n\n confirmStopNode: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeConfirmStopNode\",\n apply: \"__patchPreference\"\n },\n\n snapNodeToGrid: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeSnapNodeToGrid\",\n apply: \"__patchPreference\"\n },\n\n creditsWarningThreshold: {\n check: \"Number\",\n nullable: false,\n init: 200,\n event: \"changeCreditsWarningThreshold\",\n apply: \"__patchPreference\"\n },\n\n walletIndicatorVisibility: {\n check: [\"always\", \"warning\"],\n nullable: false,\n init: \"warning\",\n event: \"changeWalletIndicatorVisibility\",\n apply: \"__patchPreference\"\n },\n\n userInactivityThreshold: {\n check: \"Number\",\n nullable: false,\n init: 1800,\n event: \"changeUserInactivityThreshold\",\n apply: \"__patchPreference\"\n },\n\n lowDiskSpaceThreshold: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeLowDiskSpaceThreshold\",\n apply: \"__patchPreference\"\n },\n\n jobConcurrencyLimit: {\n check: \"Number\",\n nullable: false,\n init: 4,\n event: \"changeJobConcurrencyLimit\",\n apply: \"__patchPreference\"\n },\n\n allowMetricsCollection: {\n nullable: false,\n init: true,\n check: \"Boolean\",\n event: \"changeAllowMetricsCollection\",\n apply: \"__patchPreference\"\n },\n\n twoFAPreference: {\n nullable: true,\n check: [\"SMS\", \"EMAIL\", \"DISABLED\"],\n init: \"SMS\",\n event: \"changeTwoFAPreference\",\n apply: \"__patchPreference\"\n },\n\n billingCenterUsageColumnOrder: {\n nullable: true,\n check: \"Array\",\n event: \"changeBillingCenterUsageColumnOrder\",\n apply: \"__patchPreference\"\n }\n },\n\n statics: {\n patchPreference: function(preferenceId, value) {\n const params = {\n url: {\n preferenceId\n },\n data: {\n value\n }\n };\n return osparc.data.Resources.fetch(\"preferences\", \"patch\", params);\n },\n\n patchPreferenceField: function(preferenceId, preferenceField, newValue) {\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const oldValue = preferencesSettings.get(preferenceId);\n if (newValue === oldValue) {\n return;\n }\n\n preferenceField.setEnabled(false);\n osparc.Preferences.patchPreference(preferenceId, newValue)\n .then(() => preferencesSettings.set(preferenceId, newValue))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n preferenceField.setValue(oldValue);\n })\n .finally(() => preferenceField.setEnabled(true));\n }\n },\n\n members: {\n __applyThemeName: function(themeName) {\n if (themeName && themeName !== qx.theme.manager.Meta.getInstance().getTheme().name) {\n const preferredTheme = qx.Theme.getByName(themeName);\n const themes = qx.Theme.getAll();\n if (preferredTheme && Object.keys(themes).includes(preferredTheme.name)) {\n qx.theme.manager.Meta.getInstance().setTheme(preferredTheme);\n\n if (osparc.auth.Manager.getInstance().isLoggedIn()) {\n this.self().patchPreference(\"themeName\", preferredTheme.name);\n }\n }\n }\n },\n\n requestChangePreferredWalletId: function(walletId) {\n this.self().patchPreference(\"preferredWalletId\", walletId)\n .then(() => {\n const store = osparc.store.Store.getInstance();\n const wallets = store.getWallets();\n const walletFound = wallets.find(wallet => wallet.getWalletId() === walletId);\n if (walletFound) {\n store.setPreferredWallet(walletFound);\n }\n wallets.forEach(wallet => wallet.setPreferredWallet(wallet.getWalletId() === walletId));\n this.setPreferredWalletId(walletId);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n },\n\n __patchPreference: function(value, _, propName) {\n this.self().patchPreference(propName, value);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.MainPageDesktop\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(null, null, \"separator-vertical\"));\n\n this._add(osparc.notification.RibbonNotifications.getInstance());\n\n const navBar = new osparc.navigation.NavigationBar();\n navBar.populateLayout();\n // exclude some items from the navigation bar\n navBar.getChildControl(\"dashboard-label\").exclude();\n navBar.getChildControl(\"dashboard-button\").exclude();\n navBar.getChildControl(\"notifications-button\").exclude();\n navBar.getChildControl(\"help\").exclude();\n\n // exclude all the menu entries except \"log-out\" from user menu\n const userMenuButton = navBar.getChildControl(\"user-menu\");\n const userMenu = userMenuButton.getMenu();\n // eslint-disable-next-line no-underscore-dangle\n const userMenuEntries = userMenu._getCreatedChildControls();\n Object.entries(userMenuEntries).forEach(([id, userMenuEntry]) => {\n if (![\"mini-profile-view\", \"po-center\", \"log-out\"].includes(id)) {\n userMenuEntry.exclude();\n }\n });\n // exclude also the separators\n userMenu.getChildren().forEach(child => {\n if (child.classname === \"qx.ui.menu.Separator\") {\n child.exclude();\n }\n });\n this._add(navBar);\n\n osparc.MaintenanceTracker.getInstance().startTracker();\n\n const store = osparc.store.Store.getInstance();\n const preloadPromises = [];\n const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();\n if (walletsEnabled) {\n preloadPromises.push(store.reloadCreditPrice());\n preloadPromises.push(store.reloadWallets());\n }\n preloadPromises.push(store.getAllClassifiers(true));\n preloadPromises.push(osparc.store.Tags.getInstance().fetchTags());\n Promise.all(preloadPromises)\n .then(() => {\n const desktopCenter = new osparc.desktop.credits.DesktopCenter();\n this._add(desktopCenter, {\n flex: 1\n });\n\n this.__listenToWalletSocket();\n });\n },\n\n members: {\n __listenToWalletSocket: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n if (!socket.slotExists(\"walletOsparcCreditsUpdated\")) {\n socket.on(\"walletOsparcCreditsUpdated\", data => {\n osparc.desktop.credits.Utils.creditsUpdated(data[\"wallet_id\"], data[\"osparc_credits\"]);\n }, this);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n/**\n * @ignore(fetch)\n */\n\n/**\n * Widget managing the layout once the user is logged in.\n *\n * It offers a:\n * - NavigationBar\n * - Main Stack\n * - Dashboard Stack\n * - StudyBrowser\n * - TemplateBrowser\n * - ServiceBrowser\n * - DataManager\n * - StudyEditor\n *\n *
\n * let mainPage = new osparc.desktop.MainPage();\n * this.getRoot().add(mainPage);\n *\n */\n\nqx.Class.define(\"osparc.desktop.MainPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this._add(osparc.notification.RibbonNotifications.getInstance());\n\n const navBar = this.__navBar = new osparc.navigation.NavigationBar();\n navBar.populateLayout();\n navBar.addListener(\"backToDashboardPressed\", () => this.__backToDashboardPressed(), this);\n navBar.addListener(\"openLogger\", () => this.__openLogger(), this);\n this._add(navBar);\n\n // Some resources request before building the main stack\n osparc.MaintenanceTracker.getInstance().startTracker();\n osparc.CookieExpirationTracker.getInstance().startTracker();\n // osparc.NewUITracker.getInstance().startTracker();\n\n const store = osparc.store.Store.getInstance();\n const preloadPromises = [];\n const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();\n if (walletsEnabled) {\n preloadPromises.push(store.reloadCreditPrice());\n preloadPromises.push(store.reloadWallets());\n }\n preloadPromises.push(store.getAllClassifiers(true));\n preloadPromises.push(osparc.store.Tags.getInstance().fetchTags());\n preloadPromises.push(osparc.store.Products.getInstance().fetchUiConfig());\n Promise.all(preloadPromises)\n .then(() => {\n const mainStack = this.__createMainStack();\n this._add(mainStack, {\n flex: 1\n });\n\n this.__listenToWalletSocket();\n this.__attachHandlers();\n });\n },\n\n members: {\n __navBar: null,\n __dashboard: null,\n __loadingPage: null,\n __studyEditor: null,\n\n __listenToWalletSocket: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n if (!socket.slotExists(\"walletOsparcCreditsUpdated\")) {\n socket.on(\"walletOsparcCreditsUpdated\", data => {\n osparc.desktop.credits.Utils.creditsUpdated(data[\"wallet_id\"], data[\"osparc_credits\"]);\n }, this);\n }\n },\n\n __backToDashboardPressed: function() {\n if (!osparc.data.Permissions.getInstance().canDo(\"studies.user.create\", true)) {\n return;\n }\n if (this.__studyEditor) {\n const isReadOnly = this.__studyEditor.getStudy().isReadOnly();\n const preferencesSettings = osparc.Preferences.getInstance();\n if (!isReadOnly && preferencesSettings.getConfirmBackToDashboard()) {\n const studyName = this.__studyEditor.getStudy().getName();\n const win = new osparc.ui.window.Confirmation();\n if (osparc.product.Utils.getProductName().includes(\"s4l\")) {\n let msg = this.tr(\"Do you want to close \") + \"\" + studyName + \"?\";\n msg += \"
\";\n msg += this.tr(\"Make sure you saved your changes to:\");\n msg += \"
\";\n msg += this.tr(\"- current smash file\");\n msg += \"
\";\n msg += this.tr(\"- current notebooks (jupyterlab session will be terminated)\");\n win.set({\n maxWidth: 460,\n caption: this.tr(\"Close\"),\n message: msg,\n confirmText: this.tr(\"Yes\")\n });\n } else {\n const msg = this.tr(\"Do you want to save and close \") + \"\" + studyName + \"?\";\n win.set({\n caption: this.tr(\"Save & Close\"),\n message: msg,\n confirmText: this.tr(\"Yes\")\n });\n }\n const confirmButton = win.getConfirmButton();\n osparc.utils.Utils.setIdToWidget(confirmButton, \"confirmDashboardBtn\");\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__backToDashboard();\n }\n }, this);\n } else {\n this.__backToDashboard();\n }\n } else {\n this.__showDashboard();\n }\n },\n\n __backToDashboard: async function() {\n const dashboardBtn = this.__navBar.getChildControl(\"dashboard-button\");\n dashboardBtn.setFetching(true);\n if (this.__studyEditor.didStudyChange()) {\n // make sure very latest changes are saved\n await this.__studyEditor.updateStudyDocument();\n }\n this.closeEditor();\n this.__showDashboard();\n // reset templates\n this.__dashboard.getTemplateBrowser().invalidateTemplates();\n this.__dashboard.getTemplateBrowser().reloadResources();\n // reset studies\n this.__dashboard.getStudyBrowser().invalidateStudies();\n this.__dashboard.getStudyBrowser().reloadResources();\n this.__dashboard.getStudyBrowser().resetSelection();\n dashboardBtn.setFetching(false);\n\n const store = osparc.store.Store.getInstance();\n store.setActiveWallet(null);\n },\n\n closeEditor: function() {\n if (this.__studyEditor) {\n this.__studyEditor.closeEditor();\n }\n },\n\n __openLogger: function() {\n if (this.__studyEditor) {\n osparc.ui.window.Window.popUpInWindow(this.__studyEditor.getStudyLogger(), this.tr(\"Platform logger\"), 950, 650);\n }\n },\n\n __createMainStack: function() {\n const mainStack = new qx.ui.container.Stack().set({\n alignX: \"center\"\n });\n\n const mainPageHandler = osparc.desktop.MainPageHandler.getInstance();\n mainPageHandler.setStack(mainStack);\n\n const dashboardLayout = this.__createDashboardLayout();\n mainPageHandler.addDashboard(dashboardLayout);\n\n const loadingPage = this.__loadingPage = new osparc.ui.message.Loading();\n mainPageHandler.addLoadingPage(loadingPage);\n\n const studyEditor = this.__studyEditor = this.__getStudyEditor();\n mainPageHandler.addStudyEditor(studyEditor);\n\n return mainStack;\n },\n\n __createDashboardLayout: function() {\n const dashboard = this.__dashboard = new osparc.dashboard.Dashboard();\n const tabsBar = dashboard.getChildControl(\"bar\");\n tabsBar.set({\n paddingBottom: 6\n });\n this.__navBar.addDashboardTabButtons(tabsBar);\n const dashboardLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n dashboardLayout.add(dashboard, {\n flex: 1\n });\n return dashboardLayout;\n },\n\n __attachHandlers: function() {\n const studyBrowser = this.__dashboard.getStudyBrowser();\n studyBrowser.addListener(\"publishTemplate\", e => this.__publishTemplate(e.getData()));\n },\n\n __publishTemplate: function(data) {\n const text = this.tr(\"Started template creation and added to the background tasks\");\n osparc.FlashMessenger.getInstance().logAs(text, \"INFO\");\n\n const params = {\n url: {\n \"study_id\": data[\"studyData\"].uuid,\n \"copy_data\": data[\"copyData\"]\n },\n data: data[\"studyData\"]\n };\n const options = {\n pollTask: true\n };\n const fetchPromise = osparc.data.Resources.fetch(\"studies\", \"postToTemplate\", params, options);\n const pollTasks = osparc.data.PollTasks.getInstance();\n const interval = 1000;\n pollTasks.createPollingTask(fetchPromise, interval)\n .then(task => {\n const templateBrowser = this.__dashboard.getTemplateBrowser();\n if (templateBrowser) {\n templateBrowser.taskToTemplateReceived(task, data[\"studyData\"].name);\n }\n task.addListener(\"resultReceived\", e => {\n const templateData = e.getData();\n osparc.store.Study.addCollaborators(templateData, data[\"accessRights\"]);\n });\n })\n .catch(errMsg => {\n const msg = this.tr(\"Something went wrong Duplicating the study
\") + errMsg;\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n },\n\n __showDashboard: function() {\n if (!osparc.data.Permissions.getInstance().canDo(\"dashboard.read\")) {\n // If guest fails to load study, log him out\n qx.core.Init.getApplication().logout();\n return;\n }\n\n osparc.desktop.MainPageHandler.getInstance().showDashboard();\n this.__navBar.show();\n this.__navBar.setStudy(null);\n this.__dashboard.getStudyBrowser().resetSelection();\n if (this.__studyEditor) {\n this.__studyEditor.destruct();\n }\n },\n\n __showLoadingPage: function(msg) {\n const mainPageHandler = osparc.desktop.MainPageHandler.getInstance();\n mainPageHandler.setLoadingPageHeader(msg);\n mainPageHandler.showLoadingPage();\n },\n\n __startSnapshot: async function(studyId, snapshotId) {\n this.__showLoadingPage(this.tr(\"Loading Snapshot\"));\n\n this.__loadingPage.setMessages([\n this.tr(\"Closing previous snapshot...\")\n ]);\n this.closeEditor();\n const store = osparc.store.Store.getInstance();\n const currentStudy = store.getCurrentStudy();\n while (currentStudy.isLocked()) {\n await osparc.utils.Utils.sleep(1000);\n store.getStudyState(studyId);\n }\n this.__loadingPage.setMessages([]);\n this.__openSnapshot(studyId, snapshotId);\n },\n\n __openSnapshot: function(studyId, snapshotId) {\n const params = {\n url: {\n \"studyId\": studyId,\n \"snapshotId\": snapshotId\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"checkout\", params)\n .then(snapshotResp => {\n if (!snapshotResp) {\n const msg = this.tr(\"Snapshot not found\");\n throw new Error(msg);\n }\n const params2 = {\n url: {\n \"studyId\": studyId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params2)\n .then(studyData => {\n if (!studyData) {\n const msg = this.tr(\"Study not found\");\n throw new Error(msg);\n }\n osparc.desktop.MainPageHandler.getInstance().loadStudy(studyData);\n });\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n this.__showDashboard();\n return;\n });\n },\n\n __startIteration: async function(studyId, iterationUuid) {\n this.__showLoadingPage(this.tr(\"Loading Iteration\"));\n\n this.__loadingPage.setMessages([\n this.tr(\"Closing...\")\n ]);\n this.closeEditor();\n const store = osparc.store.Store.getInstance();\n const currentStudy = store.getCurrentStudy();\n while (currentStudy.isLocked()) {\n await osparc.utils.Utils.sleep(1000);\n store.getStudyState(studyId);\n }\n this.__loadingPage.setMessages([]);\n this.__openIteration(iterationUuid);\n },\n\n __openIteration: function(iterationUuid) {\n const params = {\n url: {\n \"studyId\": iterationUuid\n }\n };\n // OM TODO. DO NOT ADD ITERATIONS TO STUDIES CACHE\n osparc.data.Resources.getOne(\"studies\", params)\n .then(studyData => {\n if (!studyData) {\n const msg = this.tr(\"Iteration not found\");\n throw new Error(msg);\n }\n osparc.desktop.MainPageHandler.getInstance().loadStudy(studyData);\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n this.__showDashboard();\n return;\n });\n },\n\n __getStudyEditor: function() {\n if (this.__studyEditor) {\n return this.__studyEditor;\n }\n const studyEditor = new osparc.desktop.StudyEditor();\n studyEditor.addListener(\"startSnapshot\", e => {\n const snapshotId = e.getData();\n this.__startSnapshot(this.__studyEditor.getStudy().getUuid(), snapshotId);\n }, this);\n studyEditor.addListener(\"startIteration\", e => {\n const iterationUuid = e.getData();\n this.__startIteration(this.__studyEditor.getStudy().getUuid(), iterationUuid);\n }, this);\n studyEditor.addListener(\"expandNavBar\", () => this.__navBar.show());\n studyEditor.addListener(\"collapseNavBar\", () => this.__navBar.exclude());\n studyEditor.addListener(\"backToDashboardPressed\", () => this.__backToDashboardPressed(), this);\n studyEditor.addListener(\"forceBackToDashboard\", () => this.__showDashboard(), this);\n studyEditor.addListener(\"userIdled\", () => this.__backToDashboard(), this);\n studyEditor.addListener(\"changeStudy\", e => {\n const study = e.getData();\n this.__navBar.setStudy(study);\n });\n return studyEditor;\n }\n }\n});\n","/* ************************************************************************\n\n explorer - an entry point to oSparc\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.viewer.MainPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function(studyId, viewerNodeId) {\n this.base();\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this._add(osparc.notification.RibbonNotifications.getInstance());\n\n const navBar = new osparc.viewer.NavigationBar();\n navBar.populateLayout();\n this._add(navBar);\n\n osparc.MaintenanceTracker.getInstance().startTracker();\n\n const nodeViewer = new osparc.viewer.NodeViewer(studyId, viewerNodeId);\n this._add(nodeViewer, {\n flex: 1\n });\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.data.PollTasks\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.initTasks();\n },\n\n properties: {\n tasks: {\n check: \"Array\",\n init: [],\n nullable: true,\n event: \"changeTasks\"\n }\n },\n\n members: {\n addTask: function(taskData, interval) {\n const tasks = this.getTasks();\n const index = tasks.findIndex(t => t.getTaskId() === taskData[\"task_id\"]);\n if (index === -1) {\n const task = new osparc.data.PollTask(taskData, interval);\n tasks.push(task);\n return task;\n }\n return null;\n },\n\n createPollingTask: function(fetchPromise, interval) {\n return new Promise((resolve, reject) => {\n fetchPromise\n .then(taskData => {\n if (\"status_href\" in taskData) {\n const task = this.addTask(taskData, interval);\n resolve(task);\n } else {\n throw Error(\"Status missing\");\n }\n })\n .catch(err => reject(err));\n });\n },\n\n removeTasks: function() {\n const tasks = this.getTasks();\n tasks.forEach(task => task.dispose());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.MaintenanceTracker\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n start: {\n check: \"Date\",\n init: null,\n nullable: true\n },\n\n end: {\n check: \"Date\",\n init: null,\n nullable: true\n },\n\n reason: {\n check: \"String\",\n init: null,\n nullable: true\n }\n },\n\n statics: {\n CHECK_INTERVAL: 15*60*1000, // Check every 15'\n CLOSABLE_WARN_IN_ADVANCE: 48*60*60*1000, // Show Closable Ribbon Message 48h in advance\n PERMANENT_WARN_IN_ADVANCE: 60*60*1000 // Show Permanent Ribbon Message 60' in advance\n },\n\n members: {\n __checkInterval: null,\n __lastRibbonMessage: null,\n __logoutTimer: null,\n\n startTracker: function() {\n const checkMaintenance = () => {\n osparc.data.Resources.get(\"maintenance\")\n .then(scheduledMaintenance => {\n if (scheduledMaintenance) {\n // for now it's just a string\n this.__setMaintenance(JSON.parse(scheduledMaintenance));\n } else {\n this.__setMaintenance(null);\n }\n })\n .catch(err => console.error(err));\n };\n checkMaintenance();\n this.__checkInterval = setInterval(checkMaintenance, this.self().CHECK_INTERVAL);\n },\n\n stopTracker: function() {\n if (this.__checkInterval) {\n clearInterval(this.__checkInterval);\n }\n },\n\n __getText: function() {\n if (this.getStart() === null) {\n return null;\n }\n\n let text = osparc.utils.Utils.formatDateAndTime(this.getStart());\n if (this.getEnd()) {\n if (this.getStart().getDate() === this.getEnd().getDate()) {\n // do not print the same day twice\n text += \" - \" + osparc.utils.Utils.formatTime(this.getEnd());\n } else {\n text += \" - \" + osparc.utils.Utils.formatDateAndTime(this.getEnd());\n }\n }\n text += \" (local time)\";\n if (this.getReason()) {\n text += \": \" + this.getReason();\n }\n return text;\n },\n\n __setMaintenance: function(maintenanceData) {\n // ignore old maintenance\n if (maintenanceData && (new Date(maintenanceData.end).getTime() < new Date().getTime())) {\n console.warn(`Old maintenance \"${maintenanceData.reason}\" wasn't removed\"`);\n return;\n }\n\n const oldStart = this.getStart();\n const oldEnd = this.getEnd();\n const oldReason = this.getReason();\n\n this.setStart(maintenanceData && \"start\" in maintenanceData ? new Date(maintenanceData.start) : null);\n this.setEnd(maintenanceData && \"end\" in maintenanceData ? new Date(maintenanceData.end) : null);\n this.setReason(maintenanceData && \"reason\" in maintenanceData ? maintenanceData.reason : null);\n\n if (\n maintenanceData === null || // it will remove it\n (oldStart === null || oldStart.getTime() !== this.getStart().getTime()) ||\n (oldEnd === null || oldEnd.getTime() !== this.getEnd().getTime()) ||\n oldReason !== this.getReason()\n ) {\n this.__scheduleStart();\n }\n },\n\n __scheduleStart: function() {\n this.__removeRibbonMessage();\n this.__removeScheduledLogout();\n\n if (this.getStart()) {\n this.__scheduleRibbonMessage();\n this.__scheduleLogout();\n }\n },\n\n __scheduleRibbonMessage: function() {\n const now = new Date();\n const diffClosable = this.getStart().getTime() - now.getTime() - this.self().CLOSABLE_WARN_IN_ADVANCE;\n const diffPermanent = this.getStart().getTime() - now.getTime() - this.self().PERMANENT_WARN_IN_ADVANCE;\n\n const messageToRibbon = closable => {\n this.__removeRibbonMessage();\n const text = this.__getText();\n const notification = new osparc.notification.RibbonNotification(text, \"maintenance\", closable);\n osparc.notification.RibbonNotifications.getInstance().addNotification(notification);\n this.__lastRibbonMessage = notification;\n };\n if (diffClosable < 0) {\n messageToRibbon(true);\n } else {\n setTimeout(() => messageToRibbon(true), diffClosable);\n }\n if (diffPermanent < 0) {\n messageToRibbon(false);\n } else {\n setTimeout(() => messageToRibbon(false), diffPermanent);\n }\n },\n\n __removeRibbonMessage: function() {\n if (this.__lastRibbonMessage) {\n osparc.notification.RibbonNotifications.getInstance().removeNotification(this.__lastRibbonMessage);\n this.__lastRibbonMessage = null;\n }\n },\n\n __logout: function() {\n this.set({\n start: null,\n end: null,\n reason: null\n });\n const reason = qx.locale.Manager.tr(\"We are under maintenance. Please check back later\");\n qx.core.Init.getApplication().logout(reason);\n },\n\n __scheduleLogout: function() {\n const now = new Date();\n if (this.getStart().getTime() > now.getTime()) {\n const diff = this.getStart().getTime() - now.getTime();\n this.__logoutTimer = setTimeout(() => this.__logout(), diff);\n } else if (this.getStart().getTime() < now.getTime() && this.getEnd().getTime() > now.getTime()) {\n this.__logout();\n }\n },\n\n __removeScheduledLogout: function() {\n if (this.__logoutTimer) {\n clearTimeout(this.__logoutTimer);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.CookieExpirationTracker\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n PERMANENT_WARN_IN_ADVANCE: 2*60*60*1000, // Show Permanent Flash Message 2h in advance\n LOG_OUT_BEFORE_EXPIRING: 60*1000 // Log user out 1' in before expiring\n },\n\n properties: {\n expirationDate: {\n check: \"Date\",\n nullable: false,\n init: null,\n apply: \"__startInterval\"\n }\n },\n\n members: {\n __updateInterval: null,\n __message: null,\n __messageInterval: null,\n\n startTracker: function() {\n const cookieMaxAge = osparc.store.StaticInfo.getInstance().getCookieMaxAge(); // seconds\n if (cookieMaxAge) {\n const nowDate = new Date();\n const expirationDateMilliseconds = nowDate.getTime() + cookieMaxAge*1000;\n this.setExpirationDate(new Date(expirationDateMilliseconds));\n }\n },\n\n stopTracker: function() {\n if (this.__updateInterval) {\n clearInterval(this.__updateInterval);\n }\n\n this.__removeFlashMessage();\n },\n\n __startInterval: function() {\n this.__checkTimes();\n // check every 1' if the countdown routine needs to be started\n this.__updateInterval = setInterval(() => this.__checkTimes(), 60*1000);\n },\n\n __checkTimes: function() {\n const nowDate = new Date();\n const expirationDate = this.getExpirationDate();\n if (nowDate.getTime() + this.self().PERMANENT_WARN_IN_ADVANCE > expirationDate.getTime()) {\n this.__removeFlashMessage();\n this.__displayFlashMessage(parseInt((expirationDate.getTime() - nowDate.getTime())/1000));\n }\n if (nowDate.getTime() + this.self().LOG_OUT_BEFORE_EXPIRING > expirationDate.getTime()) {\n this.__logoutUser();\n }\n },\n\n // FLASH MESSAGE //\n __displayFlashMessage: function(willExpireIn) {\n const updateFlashMessage = () => {\n if (willExpireIn <= 0) {\n this.__removeFlashMessage();\n return;\n }\n\n this.__updateFlashMessage(willExpireIn);\n willExpireIn--;\n };\n updateFlashMessage();\n this.__messageInterval = setInterval(updateFlashMessage, 1000); // update every second\n },\n\n __removeFlashMessage: function() {\n // removes a flash message if displaying\n if (this.__messageInterval) {\n clearInterval(this.__messageInterval);\n }\n if (this.__message) {\n osparc.FlashMessenger.getInstance().removeMessage(this.__message);\n this.__message = null;\n }\n },\n\n __updateFlashMessage: function(timeoutSec) {\n const timeout = osparc.utils.Utils.formatSeconds(timeoutSec);\n const text = qx.locale.Manager.tr(`Your session will expire in ${timeout}.
Please log out and log in again.`);\n if (this.__message === null) {\n this.__message = osparc.FlashMessenger.getInstance().logAs(text, \"WARNING\", timeoutSec*1000);\n this.__message.getChildControl(\"closebutton\").exclude();\n } else {\n this.__message.setMessage(text);\n }\n },\n // /FLASH MESSAGE //\n\n __logoutUser: function() {\n const reason = qx.locale.Manager.tr(\"Session expired\");\n qx.core.Init.getApplication().logout(reason);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.NewUITracker\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n CHECK_INTERVAL: 60*60*1000 // Check every 60'\n },\n\n members: {\n __checkInterval: null,\n\n startTracker: function() {\n const checkNewUI = () => {\n osparc.NewRelease.isMyFrontendOld()\n .then(newReleaseAvailable => {\n if (newReleaseAvailable) {\n let msg = \"\";\n msg += qx.locale.Manager.tr(\"A new version of the application is now available.\");\n msg += \"
\";\n msg += qx.locale.Manager.tr(\"Click the Reload button to get the latest features.\");\n // permanent message\n const flashMessage = osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\", 0).set({\n maxWidth: 500\n });\n const reloadButton = osparc.utils.Utils.reloadNoCacheButton();\n flashMessage.addWidget(reloadButton);\n this.stopTracker();\n }\n })\n .catch(() => setTimeout(() => checkNewUI(), 5*1000));\n };\n checkNewUI();\n this.__checkInterval = setInterval(checkNewUI, this.self().CHECK_INTERVAL);\n },\n\n stopTracker: function() {\n if (this.__checkInterval) {\n clearInterval(this.__checkInterval);\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * Switch button for controlling the theme\n */\n\nqx.Class.define(\"osparc.ui.switch.ThemeSwitcher\", {\n type: \"static\",\n\n statics: {\n getValidThemes: function() {\n return Object.values(qx.Theme.getAll()).filter(theme => theme.type === \"meta\");\n },\n\n isSwitchUseful: function() {\n const validThemes = this.getValidThemes();\n if (validThemes && validThemes.length === 2) {\n return true;\n }\n return false;\n },\n\n switchTheme: function() {\n const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();\n if (validThemes.length !== 2) {\n return;\n }\n\n const currentTheme = qx.theme.manager.Meta.getInstance().getTheme();\n const idx = validThemes.findIndex(validTheme => validTheme.name === currentTheme.name);\n if (idx !== -1) {\n const theme = validThemes[1-idx];\n osparc.Preferences.getInstance().setThemeName(theme.name);\n qx.event.message.Bus.getInstance().dispatchByName(\"themeSwitch\", theme.name);\n }\n },\n\n bindLabelToTheme: function(widget, buttonImageSize) {\n const themeManager = qx.theme.manager.Meta.getInstance();\n themeManager.addListener(\"changeTheme\", () => {\n osparc.ui.switch.ThemeSwitcher.updateLabel(widget, buttonImageSize);\n }, this);\n osparc.ui.switch.ThemeSwitcher.updateLabel(widget, buttonImageSize);\n },\n\n bindIconToTheme: function(widget, buttonImageSize) {\n const themeManager = qx.theme.manager.Meta.getInstance();\n themeManager.addListener(\"changeTheme\", () => {\n osparc.ui.switch.ThemeSwitcher.updateIcon(widget, buttonImageSize);\n }, this);\n osparc.ui.switch.ThemeSwitcher.updateIcon(widget, buttonImageSize);\n },\n\n updateLabel: function(widget) {\n const themeManager = qx.theme.manager.Meta.getInstance();\n const theme = themeManager.getTheme();\n const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();\n const idx = validThemes.findIndex(validTheme => validTheme.name === theme.name);\n widget.setLabel(idx === 0 ? qx.locale.Manager.tr(\"Dark theme\") : qx.locale.Manager.tr(\"Light theme\"));\n },\n\n updateIcon: function(widget, buttonImageSize) {\n const themeManager = qx.theme.manager.Meta.getInstance();\n const theme = themeManager.getTheme();\n const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();\n const idx = validThemes.findIndex(validTheme => validTheme.name === theme.name);\n widget.setIcon((idx === 0 ? \"@FontAwesome5Solid/moon/\" : \"@FontAwesome5Solid/sun/\") + buttonImageSize);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n/**\n * Each object which wants to store data representative for the real item\n * should implement this interface.\n */\nqx.Interface.define(\"qx.ui.form.IModel\",\n{\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /** Fired when the model data changes */\n \"changeModel\" : \"qx.event.type.Data\"\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /**\n * Set the representative data for the item.\n *\n * @param value {var} The data.\n */\n setModel : function(value) {},\n\n\n /**\n * Returns the representative data for the item\n *\n * @return {var} The data.\n */\n getModel : function() {},\n\n\n /**\n * Sets the representative data to null.\n */\n resetModel : function() {}\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Defines the methods all UI filterable elements should implement.\n */\nqx.Interface.define(\"osparc.filter.IFilterable\", {\n members:{\n /**\n * Function in charge of setting the element to a filtered state.\n * It will usually hide it or decrease its opacity, but it could also trigger some other UI changes.\n *\n * @param {Object?} data The data contained in the message.\n * @param {qx.event.message.Message?} msg Incoming message containing the data.\n */\n _filter: function(data, msg) {\n this.assertArgumentsCount(arguments, 0, 2);\n if (msg) {\n this.assertInstance(msg, qx.event.message.Message);\n }\n },\n\n /**\n * Function in charge of removing the filtered state from the element.\n * It will usually make it visible again, but it could also trigger some other UI changes.\n *\n * @param {Object?} data The data contained in the message.\n * @param {qx.event.message.Message?} msg Incoming message containing the data.\n */\n _unfilter: function(data, msg) {\n this.assertArgumentsCount(arguments, 0, 2);\n if (msg) {\n this.assertInstance(msg, qx.event.message.Message);\n }\n },\n\n /**\n * Function deciding if the element should react to a filter.\n * It serves as a pre-check before the actual decision of being filtered out or not is made.\n * For example, an element could decide not to react to a text search filter if the length of the text to search is shorter than n characters.\n * It should check the data for all filter ids and return true if it should react to any of them.\n *\n * @param {Object} data The data contained in the message.\n * @param {qx.event.message.Message?} msg Incoming message containing the data.\n * @return {Boolean} True or false depending on whether the element should take any filter into account.\n */\n _shouldReactToFilter: function(data, msg) {\n this.assertArgumentsCount(arguments, 1, 2);\n if (msg) {\n this.assertInstance(msg, qx.event.message.Message);\n }\n },\n\n /**\n * Function deciding if the element should be filtered out or not from the interface.\n * It should check the data for all filter ids of its group and return true if the element qualifies to be filtered out.\n *\n * @param {Object} data The data contained in the message.\n * @param {qx.event.message.Message?} msg Incoming message containing the data.\n * @return {Boolean} True or false depending on whether the element should be switched to a filtered state.\n */\n _shouldApplyFilter: function(data, msg) {\n this.assertArgumentsCount(arguments, 1, 2);\n if (msg) {\n this.assertInstance(msg, qx.event.message.Message);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n/**\n * Can be included for implementing {@link qx.ui.form.IModel}. It only contains\n * a nullable property named 'model' with a 'changeModel' event.\n */\nqx.Mixin.define(\"qx.ui.form.MModelProperty\",\n{\n properties :\n {\n /**\n * Model property for storing additional information for the including\n * object. It can act as value property on form items for example.\n *\n * Be careful using that property as this is used for the\n * {@link qx.ui.form.MModelSelection} it has some restrictions:\n *\n * * Don't use equal models in one widget using the\n * {@link qx.ui.form.MModelSelection}.\n *\n * * Avoid setting only some model properties if the widgets are added to\n * a {@link qx.ui.form.MModelSelection} widget.\n *\n * Both restrictions result of the fact, that the set models are deputies\n * for their widget.\n */\n model :\n {\n nullable : true,\n event : \"changeModel\",\n apply : \"_applyModel\",\n dereference : true\n }\n },\n\n\n members :\n {\n // apply method\n _applyModel : function(value, old) {\n // Empty implementation\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Common functions for all elements that can be filtered\n */\nqx.Mixin.define(\"osparc.filter.MFilterable\", {\n members: {\n /**\n * Used to subscribe the element to a filter group.\n *\n * @param {String} filterGroupId Id of the filter group to subscribe to.\n */\n subscribeToFilterGroup: function(filterGroupId) {\n const msgName = osparc.utils.Utils.capitalize(filterGroupId, \"filter\");\n qx.event.message.Bus.getInstance().subscribe(msgName, this.__subscriber, this);\n },\n /**\n * Subscriber function for incoming messages. It implements the common filtering workflow of every\n * filterable GUI element: If the filter state is appropriate, compare it with the own state and act\n * accordingly by applying the filter or removing it.\n *\n * @param {qx.event.message.Message} msg Message dispatched.\n */\n __subscriber: function(msg) {\n if (this._shouldReactToFilter(msg.getData(), msg) && this._shouldApplyFilter(msg.getData(), msg)) {\n this._filter(msg.getData(), msg);\n } else {\n this._unfilter(msg.getData(), msg);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.CardBase\", {\n extend: qx.ui.core.Widget,\n implement: [qx.ui.form.IModel, osparc.filter.IFilterable],\n include: [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n [\n \"pointerover\",\n \"focus\"\n ].forEach(e => this.addListener(e, this._onPointerOver, this));\n\n [\n \"pointerout\",\n \"focusout\"\n ].forEach(e => this.addListener(e, this._onPointerOut, this));\n\n this.addListener(\"changeSelected\", this.__evalSelectedButton, this);\n },\n\n events: {\n \"updateStudy\": \"qx.event.type.Data\",\n \"updateTemplate\": \"qx.event.type.Data\",\n \"updateService\": \"qx.event.type.Data\",\n \"publishTemplate\": \"qx.event.type.Data\",\n \"tagClicked\": \"qx.event.type.Data\",\n \"emptyStudyClicked\": \"qx.event.type.Data\"\n },\n\n statics: {\n SHARE_ICON: \"@FontAwesome5Solid/share-alt/13\",\n SHARED_USER: \"@FontAwesome5Solid/user/13\",\n SHARED_ORGS: \"@FontAwesome5Solid/users/13\",\n SHARED_ALL: \"@FontAwesome5Solid/globe/13\",\n PERM_READ: \"@FontAwesome5Solid/eye/13\",\n MODE_APP: \"@FontAwesome5Solid/desktop/13\",\n NEW_ICON: \"@FontAwesome5Solid/plus/\",\n LOADING_ICON: \"@FontAwesome5Solid/circle-notch/\",\n PRODUCT_ICON: osparc.product.Utils.getIconUrl(),\n // Get the default thumbnail for each product else add the image and extension osparc.product.Utils.getThumbnailUrl(Thumbnail-01.png)\n PRODUCT_THUMBNAIL: osparc.product.Utils.getThumbnailUrl(),\n\n CARD_PRIORITY: {\n NEW: 0,\n PLACEHOLDER: 1,\n ITEM: 2,\n LOADER: 3\n },\n\n ICON_SIZE: 32,\n\n createCardIcon: function() {\n const iconSize = osparc.dashboard.CardBase.ICON_SIZE;\n const icon = new osparc.ui.basic.Thumbnail(null, iconSize, iconSize).set({\n minHeight: iconSize,\n minWidth: iconSize,\n });\n icon.getChildControl(\"image\").set({\n anonymous: true,\n decorator: \"rounded\",\n minWidth: iconSize,\n minHeight: iconSize,\n });\n return icon\n },\n\n createTSRLayout: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2).set({\n alignY: \"middle\"\n })).set({\n toolTipText: qx.locale.Manager.tr(\"Ten Simple Rules\"),\n minWidth: 85\n });\n const tsrLabel = new qx.ui.basic.Label(qx.locale.Manager.tr(\"TSR:\")).set({\n alignY: \"middle\"\n });\n layout.add(tsrLabel);\n const tsrRating = new osparc.ui.basic.StarsRating().set({\n alignY: \"middle\"\n });\n layout.add(tsrRating);\n return layout;\n },\n\n filterText: function(checks, text) {\n if (text) {\n const includesSome = checks.some(check => check && check.toLowerCase().trim().includes(text.toLowerCase()));\n return !includesSome;\n }\n return false;\n },\n\n filterTags: function(checks, tags) {\n if (tags && tags.length) {\n const includesAll = tags.every(tag => checks.includes(tag));\n return !includesAll;\n }\n return false;\n },\n\n filterSharedWith: function(checks, sharedWith) {\n if (sharedWith && sharedWith !== \"show-all\") {\n const groupsStore = osparc.store.Groups.getInstance();\n const myGroupId = groupsStore.getMyGroupId();\n if (checks && myGroupId in checks) {\n const myAccessRights = checks[myGroupId];\n const totalAccess = \"delete\" in myAccessRights ? myAccessRights[\"delete\"] : myAccessRights[\"write\"];\n if (sharedWith === \"my-resources\") {\n return !totalAccess;\n } else if (sharedWith === \"shared-with-me\") {\n return totalAccess;\n } else if (sharedWith === \"shared-with-everyone\") {\n const everyoneGroupIds = [\n groupsStore.getEveryoneProductGroup().getGroupId(),\n groupsStore.getEveryoneGroup().getGroupId(),\n ];\n const found = Object.keys(checks).some(gId => everyoneGroupIds.includes(parseInt(gId)));\n return !found;\n }\n return false;\n }\n // if we get here, it means that it was shared-with-me via an organization\n if (sharedWith === \"shared-with-me\") {\n return false;\n }\n return true;\n }\n return false;\n },\n\n filterServiceType: function(resourceType, metadata, serviceType) {\n if (serviceType && resourceType === \"service\") {\n if (metadata && metadata.type) {\n const matches = metadata.type === serviceType;\n return !matches;\n }\n return false;\n }\n return false;\n },\n\n filterClassifiers: function(checks, classifiers) {\n if (classifiers && classifiers.length) {\n const includesAll = classifiers.every(classifier => checks.includes(classifier));\n return !includesAll;\n }\n return false;\n },\n\n populateShareIcon: function(shareIcon, accessRights) {\n const gids = Object.keys(accessRights).map(key => parseInt(key));\n\n // Icon\n const groupsStore = osparc.store.Groups.getInstance();\n const groupEveryone = groupsStore.getEveryoneGroup();\n const groupProductEveryone = groupsStore.getEveryoneProductGroup();\n const organizations = groupsStore.getOrganizations();\n const myGroupId = groupsStore.getMyGroupId();\n\n const organizationIds = Object.keys(organizations).map(key => parseInt(key));\n if (gids.includes(groupEveryone.getGroupId()) || gids.includes(groupProductEveryone.getGroupId())) {\n shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ALL);\n } else if (organizationIds.filter(value => gids.includes(value)).length) { // find intersection\n shareIcon.setSource(osparc.dashboard.CardBase.SHARED_ORGS);\n } else if (gids.length === 1 && gids[0] === myGroupId) {\n shareIcon.setSource(osparc.dashboard.CardBase.SHARE_ICON);\n } else {\n shareIcon.setSource(osparc.dashboard.CardBase.SHARED_USER);\n }\n\n // Tooltip\n if (gids.length === 0 || (gids.length === 1 && gids[0] === myGroupId)) {\n const canIWrite = osparc.data.model.Study.canIWrite(accessRights);\n if (canIWrite) {\n shareIcon.set({\n toolTipText: qx.locale.Manager.tr(\"Share\")\n });\n }\n return;\n }\n\n this.addHintFromGids(shareIcon, gids);\n },\n\n addHintFromGids: function(icon, gids) {\n const groupsStore = osparc.store.Groups.getInstance();\n const groupEveryone = groupsStore.getEveryoneGroup();\n const groupProductEveryone = groupsStore.getEveryoneProductGroup();\n const organizations = groupsStore.getOrganizations();\n const myGroupId = groupsStore.getMyGroupId();\n\n const sharedGrps = [];\n const groups = [];\n groups.push(groupEveryone);\n groups.push(groupProductEveryone);\n groups.push(...Object.values(organizations));\n groups.forEach(group => {\n const idx = gids.indexOf(group.getGroupId());\n if (idx > -1) {\n sharedGrps.push(group);\n gids.splice(idx, 1);\n }\n });\n\n const hint = new osparc.ui.hint.Hint(icon);\n icon.addListener(\"mouseover\", async () => {\n hint.show();\n\n // lazy load tooltip, this can be an expensive call\n\n // once the groups were removed, the remaining group ids are users' primary groups ids\n const usersStore = osparc.store.Users.getInstance();\n for (let i=0; i
\");\n if (hintText) {\n hint.setText(hintText);\n }\n }\n }, this);\n icon.addListener(\"mouseout\", () => hint.exclude(), this);\n },\n },\n\n properties: {\n appearance: {\n refine : true,\n init : \"pb-listitem\"\n },\n\n cardKey: {\n check: \"String\",\n nullable: true\n },\n\n selected: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeSelected\",\n },\n\n icon: {\n check: \"String\",\n init: null,\n nullable: true,\n apply: \"_applyIcon\",\n },\n\n thumbnail: {\n check: \"String\",\n init: null,\n nullable: true,\n apply: \"_applyThumbnail\",\n },\n\n resourceData: {\n check: \"Object\",\n nullable: false,\n init: null,\n apply: \"__applyResourceData\"\n },\n\n resourceType: {\n check: [\"study\", \"template\", \"service\"],\n init: true,\n nullable: true,\n event: \"changeResourceType\"\n },\n\n uuid: {\n check: \"String\",\n apply: \"__applyUuid\"\n },\n\n title: {\n check: \"String\",\n apply: \"_applyTitle\",\n nullable: true\n },\n\n description: {\n check: \"String\",\n apply: \"_applyDescription\",\n nullable: true\n },\n\n owner: {\n check: \"String\",\n apply: \"_applyOwner\",\n nullable: true\n },\n\n accessRights: {\n check: \"Object\",\n apply: \"_applyAccessRights\",\n nullable: true\n },\n\n lastChangeDate: {\n check: \"Date\",\n apply: \"_applyLastChangeDate\",\n nullable: true\n },\n\n trashedAt: {\n check: \"Date\",\n apply: \"_applyTrashedAt\",\n nullable: true\n },\n\n trashedBy: {\n check: \"Number\",\n apply: \"_applyTrashedBy\",\n nullable: true\n },\n\n classifiers: {\n check: \"Array\"\n },\n\n tags: {\n check: \"Array\",\n apply: \"_applyTags\"\n },\n\n quality: {\n check: \"Object\",\n nullable: true,\n apply: \"__applyQuality\"\n },\n\n workbench: {\n check: \"Object\",\n nullable: true,\n apply: \"__applyWorkbench\"\n },\n\n uiMode: {\n check: [\"workbench\", \"guided\", \"app\", \"standalone\"], // \"guided\" is no longer used\n nullable: true,\n apply: \"__applyUiMode\"\n },\n\n emptyWorkbench: {\n check: \"Boolean\",\n nullable: false,\n init: null,\n event: \"changeEmptyWorkbench\",\n apply: \"__applyEmptyWorkbench\"\n },\n\n updatable: {\n check: [null, \"retired\", \"deprecated\", \"updatable\"],\n nullable: false,\n init: null,\n event: \"changeUpdatable\",\n apply: \"__applyUpdatable\"\n },\n\n hits: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyHits\"\n },\n\n state: {\n check: \"Object\",\n nullable: false,\n apply: \"__applyState\"\n },\n\n debt: {\n check: \"Number\",\n nullable: true,\n init: 0,\n apply: \"__applyDebt\"\n },\n\n blocked: {\n check: [true, \"UNKNOWN_SERVICES\", \"IN_USE\", \"IN_DEBT\", false],\n init: false,\n nullable: false,\n apply: \"__applyBlocked\"\n },\n\n menu: {\n check: \"qx.ui.menu.Menu\",\n nullable: true,\n apply: \"_applyMenu\",\n event: \"changeMenu\"\n },\n\n multiSelectionMode: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"__applyMultiSelectionMode\"\n },\n\n fetching: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"_applyFetching\"\n },\n\n priority: {\n check: \"Number\",\n init: null,\n nullable: false\n }\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n isResourceType: function(resourceType) {\n return this.getResourceType() === resourceType;\n },\n\n isItemNotClickable: function() {\n const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n return (\n this.getBlocked() === true || // It could be blocked by IN_USE or UNKNOWN_SERVICE\n (this.isResourceType(\"study\") && (studyBrowserContext === \"trash\")) // It could a trashed study\n );\n },\n\n __applyResourceData: function(resourceData) {\n let uuid = null;\n let owner = null;\n let workbench = null;\n let defaultHits = null;\n let icon = null;\n switch (resourceData[\"resourceType\"]) {\n case \"study\":\n uuid = resourceData.uuid ? resourceData.uuid : null;\n owner = resourceData.prjOwner ? resourceData.prjOwner : \"\";\n workbench = resourceData.workbench ? resourceData.workbench : {};\n icon = osparc.study.Utils.guessIcon(resourceData);\n break;\n case \"template\":\n uuid = resourceData.uuid ? resourceData.uuid : null;\n owner = resourceData.prjOwner ? resourceData.prjOwner : \"\";\n workbench = resourceData.workbench ? resourceData.workbench : {};\n icon = osparc.study.Utils.guessIcon(resourceData);\n break;\n case \"service\":\n uuid = resourceData.key ? resourceData.key : null;\n owner = resourceData.owner ? resourceData.owner : resourceData.contact;\n icon = resourceData[\"icon\"] || osparc.dashboard.CardBase.PRODUCT_ICON;\n defaultHits = 0;\n break;\n }\n\n this.set({\n resourceType: resourceData.resourceType,\n uuid,\n title: resourceData.name,\n description: resourceData.description,\n owner,\n accessRights: resourceData.accessRights ? resourceData.accessRights : {},\n lastChangeDate: resourceData.lastChangeDate ? new Date(resourceData.lastChangeDate) : null,\n trashedAt: resourceData.trashedAt ? new Date(resourceData.trashedAt) : null,\n trashedBy: resourceData.trashedBy || null,\n icon,\n thumbnail: resourceData.thumbnail || this.self().PRODUCT_THUMBNAIL,\n state: resourceData.state ? resourceData.state : {},\n classifiers: resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [],\n quality: resourceData.quality ? resourceData.quality : null,\n uiMode: resourceData.ui && resourceData.ui.mode ? resourceData.ui.mode : null,\n hits: resourceData.hits ? resourceData.hits : defaultHits,\n workbench\n });\n },\n\n __applyMultiSelectionMode: function(value) {\n if (!value) {\n this.setSelected(false);\n }\n this.__evalSelectedButton();\n },\n\n __evalSelectedButton: function() {\n if (\n this.hasChildControl(\"menu-button\") &&\n this.hasChildControl(\"tick-selected\") &&\n this.hasChildControl(\"tick-unselected\")\n ) {\n const menuButton = this.getChildControl(\"menu-button\");\n const tick = this.getChildControl(\"tick-selected\");\n const untick = this.getChildControl(\"tick-unselected\");\n if (this.isResourceType(\"study\") && this.isMultiSelectionMode()) {\n const selected = this.getSelected();\n menuButton.setVisibility(\"excluded\");\n tick.setVisibility(selected ? \"visible\" : \"excluded\");\n untick.setVisibility(selected ? \"excluded\" : \"visible\");\n } else {\n menuButton.setVisibility(\"visible\");\n tick.setVisibility(\"excluded\");\n untick.setVisibility(\"excluded\");\n }\n }\n },\n\n __applyUuid: function(value, old) {\n const resourceType = this.getResourceType() || \"study\";\n osparc.utils.Utils.setIdToWidget(this, resourceType + \"BrowserListItem_\" + value);\n\n this.setCardKey(value);\n },\n\n _applyIcon: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyThumbnail: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyTitle: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyDescription: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyOwner: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyLastChangeDate: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyTrashedAt: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyTrashedBy: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyAccessRights: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyTags: function(tags) {\n throw new Error(\"Abstract method called!\");\n },\n\n __applyQuality: function(quality) {\n if (osparc.product.Utils.showQuality() && osparc.metadata.Quality.isEnabled(quality)) {\n const tsrRatingLayout = this.getChildControl(\"tsr-rating\");\n const tsrRating = tsrRatingLayout.getChildren()[1];\n tsrRating.set({\n nStars: 4,\n showScore: true\n });\n osparc.ui.basic.StarsRating.scoreToStarsRating(quality[\"tsr_current\"], quality[\"tsr_target\"], tsrRating);\n // Stop propagation of the pointer event in case the tag is inside a button that we don't want to trigger\n tsrRating.addListener(\"tap\", e => {\n e.stopPropagation();\n this.__openQualityEditor();\n }, this);\n tsrRating.addListener(\"pointerdown\", e => e.stopPropagation());\n }\n },\n\n __applyUiMode: function(uiMode) {\n switch (uiMode) {\n case \"guided\":\n case \"app\": {\n const uiModeIcon = this.getChildControl(\"workbench-mode\");\n uiModeIcon.set({\n source: osparc.dashboard.CardBase.MODE_APP,\n toolTipText: this.tr(\"App mode\"),\n });\n break;\n }\n }\n },\n\n __applyHits: function(hits) {\n if (hits !== null) {\n const hitsLabel = this.getChildControl(\"hits-service\");\n hitsLabel.setValue(this.tr(\"Hits: \") + String(hits));\n }\n },\n\n __applyWorkbench: function(workbench) {\n if (workbench === null) {\n // it is a service\n return;\n }\n\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n this.setEmptyWorkbench(Object.keys(workbench).length === 0);\n }\n\n // Updatable study\n if (osparc.study.Utils.isWorkbenchRetired(workbench)) {\n this.setUpdatable(\"retired\");\n } else if (osparc.study.Utils.isWorkbenchDeprecated(workbench)) {\n this.setUpdatable(\"deprecated\");\n } else {\n const updatable = osparc.study.Utils.isWorkbenchUpdatable(workbench)\n if (updatable) {\n this.setUpdatable(\"updatable\");\n }\n }\n\n // Block card\n const unaccessibleServices = osparc.study.Utils.getInaccessibleServices(workbench)\n if (unaccessibleServices.length) {\n this.setBlocked(\"UNKNOWN_SERVICES\");\n let image = \"@FontAwesome5Solid/ban/\";\n let toolTipText = this.tr(\"Service info missing\");\n unaccessibleServices.forEach(unSrv => {\n toolTipText += \"
\" + unSrv.key + \":\" + unSrv.version;\n });\n this.__showBlockedCard(image, toolTipText);\n }\n },\n\n __applyEmptyWorkbench: function(isEmpty) {\n const emptyWorkbench = this.getChildControl(\"empty-workbench\");\n emptyWorkbench.setVisibility(isEmpty ? \"visible\" : \"excluded\");\n },\n\n __applyUpdatable: function(updatable) {\n const updateStudy = this.getChildControl(\"update-study\");\n updateStudy.addListener(\"pointerdown\", e => e.stopPropagation());\n updateStudy.addListener(\"tap\", e => {\n e.stopPropagation();\n this.__openUpdateServices();\n }, this);\n\n let toolTipText = null;\n let textColor = null;\n switch (updatable) {\n case \"retired\":\n toolTipText = this.tr(\"Service(s) retired, please update\");\n textColor = osparc.service.StatusUI.getColor(\"retired\");\n break;\n case \"deprecated\":\n toolTipText = this.tr(\"Service(s) deprecated, please update\");\n textColor = osparc.service.StatusUI.getColor(\"deprecated\");\n break;\n case \"updatable\":\n toolTipText = this.tr(\"Update available\");\n textColor = \"text\";\n break;\n }\n if (toolTipText || textColor) {\n updateStudy.show();\n updateStudy.set({\n toolTipText,\n textColor\n });\n }\n },\n\n __applyState: function(state) {\n let lockInUse = false;\n if (\"locked\" in state && \"value\" in state[\"locked\"]) {\n lockInUse = state[\"locked\"][\"value\"];\n }\n this.setBlocked(lockInUse ? \"IN_USE\" : false);\n if (lockInUse) {\n this.__showBlockedCardFromStatus(\"IN_USE\", state[\"locked\"]);\n }\n\n const pipelineState = (\"state\" in state) ? state[\"state\"][\"value\"] : undefined;\n if (pipelineState) {\n this.__applyPipelineState(state[\"state\"][\"value\"]);\n }\n },\n\n __applyDebt: function(debt) {\n this.setBlocked(debt ? \"IN_DEBT\" : false);\n if (debt) {\n this.__showBlockedCardFromStatus(\"IN_DEBT\", debt);\n }\n },\n\n // pipelineState: [\"NOT_STARTED\", \"STARTED\", \"SUCCESS\", \"ABORTED\", \"FAILED\", \"UNKNOWN\"]\n __applyPipelineState: function(pipelineState) {\n let iconSource;\n let toolTipText;\n let borderColor;\n switch (pipelineState) {\n case \"STARTED\":\n iconSource = \"@FontAwesome5Solid/spinner/10\";\n toolTipText = this.tr(\"Running\");\n borderColor = \"info\";\n break;\n case \"SUCCESS\":\n iconSource = \"@FontAwesome5Solid/check/10\";\n toolTipText = this.tr(\"Ran successfully\");\n borderColor = \"success\";\n break;\n case \"ABORTED\":\n iconSource = \"@FontAwesome5Solid/exclamation/10\";\n toolTipText = this.tr(\"Run aborted\");\n borderColor = \"warning\";\n break;\n case \"FAILED\":\n iconSource = \"@FontAwesome5Solid/exclamation/10\";\n toolTipText = this.tr(\"Ran with error\");\n borderColor = \"error\";\n break;\n case \"UNKNOWN\":\n case \"NOT_STARTED\":\n default:\n iconSource = null;\n toolTipText = null;\n borderColor = null;\n break;\n }\n\n const border = new qx.ui.decoration.Decorator().set({\n radius: 10,\n width: 1,\n style: \"solid\",\n color: borderColor,\n backgroundColor: borderColor ? borderColor + \"-bg\" : null\n });\n\n const projectStatusLabel = this.getChildControl(\"project-status\");\n projectStatusLabel.set({\n decorator: border,\n textColor: borderColor,\n alignX: \"center\",\n alignY: \"middle\",\n height: 17,\n width: 17,\n padding: 3\n });\n\n projectStatusLabel.set({\n visibility: iconSource && toolTipText && borderColor ? \"visible\" : \"excluded\",\n source: iconSource,\n toolTipIcon: iconSource,\n toolTipText\n });\n },\n\n __showBlockedCardFromStatus: function(reason, moreInfo) {\n switch (reason) {\n case \"IN_USE\":\n this.__blockedInUse(moreInfo);\n break;\n case \"IN_DEBT\":\n this.__blockedInDebt(moreInfo);\n break;\n }\n },\n\n __blockedInUse: function(lockedStatus) {\n const status = lockedStatus[\"status\"];\n const owner = lockedStatus[\"owner\"];\n let toolTip = osparc.utils.Utils.firstsUp(owner[\"first_name\"] || this.tr(\"A user\"), owner[\"last_name\"] || \"\"); // it will be replaced by \"userName\"\n let image = null;\n switch (status) {\n case \"CLOSING\":\n image = \"@FontAwesome5Solid/key/\";\n toolTip += this.tr(\" is closing it...\");\n break;\n case \"CLONING\":\n image = \"@FontAwesome5Solid/clone/\";\n toolTip += this.tr(\" is cloning it...\");\n break;\n case \"EXPORTING\":\n image = osparc.task.Export.ICON+\"/\";\n toolTip += this.tr(\" is exporting it...\");\n break;\n case \"OPENING\":\n image = \"@FontAwesome5Solid/key/\";\n toolTip += this.tr(\" is opening it...\");\n break;\n case \"OPENED\":\n image = \"@FontAwesome5Solid/lock/\";\n toolTip += this.tr(\" is using it.\");\n break;\n default:\n image = \"@FontAwesome5Solid/lock/\";\n break;\n }\n this.__showBlockedCard(image, toolTip);\n },\n\n __blockedInDebt: function() {\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n const toolTip = studyAlias + \" \" + this.tr(\"Embargoed
Credits Required\");\n const image = \"@FontAwesome5Solid/lock/\";\n this.__showBlockedCard(image, toolTip);\n },\n\n __showBlockedCard: function(lockImageSrc, toolTipText) {\n this.getChildControl(\"lock-status\").set({\n opacity: 1.0,\n visibility: \"visible\"\n });\n\n const lockImage = this.getChildControl(\"lock-status\").getChildControl(\"image\");\n lockImageSrc += this.classname.includes(\"Grid\") ? \"32\" : \"22\";\n lockImage.setSource(lockImageSrc);\n\n if (toolTipText) {\n this.set({\n toolTipText\n });\n }\n },\n\n __applyBlocked: function(blocked) {\n const enabled = !blocked;\n if (enabled) {\n this.resetToolTipText();\n }\n\n this._getChildren().forEach(item => {\n if (item && \"setOpacity\" in item) {\n item.setOpacity(enabled ? 1.0 : 0.7);\n }\n });\n\n this.getChildControl(\"lock-status\").set({\n appearance: \"form-button-outlined/disabled\",\n textColor: \"text-disabled\",\n opacity: 1.0,\n visibility: enabled ? \"excluded\" : \"visible\"\n });\n\n // let the \"pointer\" cursor for IN_USE or UNKNOWN_SERVICE\n this.set({\n cursor: blocked === true ? \"not-allowed\" : \"pointer\"\n });\n\n [\n \"tick-selected\",\n \"tick-unselected\",\n // \"menu-button\"\n ].forEach(childName => {\n const child = this.getChildControl(childName);\n child.setEnabled(enabled);\n });\n\n this.evaluateMenuButtons();\n },\n\n evaluateMenuButtons: function() {\n if (this.getMenu()) {\n const menuButtons = this.getMenu().getChildren();\n const resourceData = this.getResourceData();\n\n const openButton = menuButtons.find(menuBtn => \"openResourceButton\" in menuBtn);\n if (openButton) {\n openButton.setEnabled(osparc.study.Utils.canBeOpened(resourceData));\n }\n const duplicateButton = menuButtons.find(menuBtn => \"duplicateButton\" in menuBtn);\n if (duplicateButton) {\n duplicateButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));\n }\n const convertToPipelineButton = menuButtons.find(menuBtn => \"convertToPipelineButton\" in menuBtn);\n if (convertToPipelineButton) {\n convertToPipelineButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));\n }\n const exportCMISButton = menuButtons.find(menuBtn => \"exportCMISButton\" in menuBtn);\n if (exportCMISButton) {\n exportCMISButton.setEnabled(osparc.study.Utils.canBeExported(resourceData));\n }\n const studyDataButton = menuButtons.find(menuBtn => \"studyDataButton\" in menuBtn);\n if (studyDataButton) {\n studyDataButton.setEnabled(osparc.study.Utils.canShowStudyData(resourceData));\n }\n const billingSettingsButton = menuButtons.find(menuBtn => \"billingSettingsButton\" in menuBtn);\n if (billingSettingsButton) {\n billingSettingsButton.setEnabled(osparc.study.Utils.canShowBillingOptions(resourceData));\n }\n const moveToButton = menuButtons.find(menuBtn => \"moveToButton\" in menuBtn);\n if (moveToButton) {\n moveToButton.setEnabled(osparc.study.Utils.canMoveTo(resourceData));\n }\n const trashButton = menuButtons.find(menuBtn => \"trashButton\" in menuBtn);\n if (trashButton) {\n trashButton.setEnabled(osparc.study.Utils.canBeDeleted(resourceData));\n }\n }\n },\n\n _applyFetching: function(value) {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyMenu: function(value, old) {\n throw new Error(\"Abstract method called!\");\n },\n\n _setStudyPermissions: function(accessRights) {\n const permissionIcon = this.getChildControl(\"permission-icon\");\n if (osparc.data.model.Study.canIWrite(accessRights)) {\n permissionIcon.exclude();\n } else {\n permissionIcon.show();\n }\n },\n\n __openMoreOptions: function() {\n const resourceData = this.getResourceData();\n const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);\n const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n [\n \"updateStudy\",\n \"updateTemplate\",\n \"updateService\"\n ].forEach(ev => {\n resourceDetails.addListener(ev, e => this.fireDataEvent(ev, e.getData()));\n });\n resourceDetails.addListener(\"publishTemplate\", e => {\n win.close();\n this.fireDataEvent(\"publishTemplate\", e.getData());\n });\n resourceDetails.addListener(\"openStudy\", e => {\n const openCB = () => win.close();\n const studyId = e.getData()[\"uuid\"];\n const isStudyCreation = false;\n this._startStudyById(studyId, openCB, null, isStudyCreation);\n });\n return resourceDetails;\n },\n\n _startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {\n osparc.dashboard.ResourceBrowserBase.startStudyById(studyId, openCB, cancelCB, isStudyCreation);\n },\n\n openData: function() {\n const resourceData = this.getResourceData();\n osparc.widget.StudyDataManager.popUpInWindow(resourceData[\"uuid\"]);\n },\n\n openBilling: function() {\n const moreOpts = this.__openMoreOptions();\n moreOpts.openBillingSettings();\n },\n\n openAccessRights: function() {\n const moreOpts = this.__openMoreOptions();\n moreOpts.openAccessRights();\n },\n\n openTags: function() {\n const moreOpts = this.__openMoreOptions();\n moreOpts.openTags();\n },\n\n __openQualityEditor: function() {\n const moreOpts = this.__openMoreOptions();\n moreOpts.openQuality();\n },\n\n __openUpdateServices: function() {\n const moreOpts = this.__openMoreOptions();\n moreOpts.openUpdateServices();\n },\n\n _getEmptyWorkbenchIcon: function() {\n let toolTipText = this.tr(\"Empty\") + \" \";\n if (this.isResourceType(\"study\")) {\n toolTipText += osparc.product.Utils.getStudyAlias();\n } else if (this.isResourceType(\"template\")) {\n toolTipText += osparc.product.Utils.getTemplateAlias();\n }\n const control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/times-circle/14\",\n alignY: \"bottom\",\n toolTipText\n });\n control.addListener(\"tap\", e => {\n e.stopPropagation();\n this.fireDataEvent(\"emptyStudyClicked\", this.getUuid());\n }, this);\n return control;\n },\n\n /**\n * Event handler for the pointer over event.\n */\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n /**\n * Event handler for the pointer out event.\n */\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n /**\n * Event handler for filtering events.\n */\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _filterText: function(text) {\n const checks = [\n this.getUuid(),\n this.getTitle(),\n this.getDescription(),\n this.getOwner()\n ];\n return this.self().filterText(checks, text);\n },\n\n _filterTags: function(tags) {\n const checks = this.getTags().map(tag => tag.getTagId());\n return this.self().filterTags(checks, tags);\n },\n\n _filterSharedWith: function(sharedWith) {\n const checks = this.getAccessRights();\n return this.self().filterSharedWith(checks, sharedWith);\n },\n\n _filterServiceType: function(serviceType) {\n const resourceType = this.getResourceType();\n const resourceData = this.getResourceData();\n return this.self().filterServiceType(resourceType, resourceData, serviceType);\n },\n\n _filterClassifiers: function(classifiers) {\n const checks = this.getClassifiers();\n return this.self().filterClassifiers(checks, classifiers);\n },\n\n _shouldApplyFilter: function(data) {\n let filterId = \"searchBarFilter\";\n if (this.isPropertyInitialized(\"resourceType\")) {\n filterId += \"-\" + this.getResourceType();\n }\n data = filterId in data ? data[filterId] : data;\n if (this._filterText(data.text)) {\n return true;\n }\n if (this._filterTags(data.tags)) {\n return true;\n }\n if (this._filterSharedWith(data.sharedWith)) {\n return true;\n }\n if (this._filterServiceType(data.serviceType)) {\n return true;\n }\n if (this._filterClassifiers(data.classifiers)) {\n return true;\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n let filterId = \"searchBarFilter\";\n if (this.isPropertyInitialized(\"resourceType\")) {\n filterId += \"-\" + this.getResourceType();\n }\n data = filterId in data ? data[filterId] : data;\n if (data.text && data.text.length > 1) {\n return true;\n }\n if (data.tags && data.tags.length) {\n return true;\n }\n if (data.sharedWith) {\n return true;\n }\n if (\"serviceType\" in data) {\n return true;\n }\n if (data.classifiers && data.classifiers.length) {\n return true;\n }\n return false;\n }\n },\n\n destruct: function() {\n this.removeListener(\"pointerover\", this._onPointerOver, this);\n this.removeListener(\"pointerout\", this._onPointerOut, this);\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Static class that provides localized date information (like names of week\n * days, AM/PM markers, start of week, etc.).\n *\n * @cldr()\n */\nqx.Class.define(\"qx.locale.Date\",\n{\n statics :\n {\n /**\n * Reference to the locale manager.\n *\n * @internal\n */\n __mgr : qx.locale.Manager.getInstance(),\n\n\n /**\n * Get AM marker for time definitions\n *\n * @param locale {String} optional locale to be used\n * @return {String} translated AM marker.\n */\n getAmMarker : function(locale) {\n return this.__mgr.localize(\"cldr_am\", [], locale);\n },\n\n\n /**\n * Get PM marker for time definitions\n *\n * @param locale {String} optional locale to be used\n * @return {String} translated PM marker.\n */\n getPmMarker : function(locale) {\n return this.__mgr.localize(\"cldr_pm\", [], locale);\n },\n\n\n /**\n * Return localized names of day names\n *\n * @param length {String} format of the day names.\n * Possible values: \"abbreviated\", \"narrow\", \"wide\"\n * @param locale {String} optional locale to be used\n * @param context {String} (default: \"format\") intended context.\n * Possible values: \"format\", \"stand-alone\"\n * @param withFallback {Boolean?} if true, the previous parameter's other value is tried\n * in order to find a localized name for the day\n * @return {String[]} array of localized day names starting with sunday.\n */\n getDayNames : function(length, locale, context, withFallback)\n {\n var context = context ? context : \"format\";\n\n if (qx.core.Environment.get(\"qx.debug\")) {\n qx.core.Assert.assertInArray(length, [\"abbreviated\", \"narrow\", \"wide\"]);\n qx.core.Assert.assertInArray(context, [\"format\", \"stand-alone\"]);\n }\n\n var days = [ \"sun\", \"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\" ];\n\n var names = [];\n\n for (var i=0; i
\n * // a simple text label without wrapping and markup support\n * var label1 = new qx.ui.basic.Label(\"Simple text label\");\n * this.getRoot().add(label1, {left:20, top:10});\n *\n * // a HTML label with automatic line wrapping\n * var label2 = new qx.ui.basic.Label().set({\n * value: \"A long label text with auto-wrapping. This also may contain rich HTML markup.\",\n * rich : true,\n * width: 120\n * });\n * this.getRoot().add(label2, {left:20, top:50});\n * \n *\n * The first label in this example is a basic text only label. As such no\n * automatic wrapping is supported. The second label is a long label containing\n * HTML markup with automatic line wrapping.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n * \n * NOTE: Instances of this class must be disposed of after use\n *\n */\nqx.Class.define(\"qx.ui.basic.Label\",\n{\n extend : qx.ui.core.Widget,\n implement : [qx.ui.form.IStringForm],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param value {String} Text or HTML content to use\n */\n construct : function(value)\n {\n this.base(arguments);\n\n if (value != null) {\n this.setValue(value);\n }\n\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().addListener(\"changeLocale\", this._onChangeLocale, this);\n }\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Switches between rich HTML and text content. The text mode (false) supports\n * advanced features like ellipsis when the available space is not\n * enough. HTML mode (true) supports multi-line content and all the\n * markup features of HTML content.\n */\n rich :\n {\n check : \"Boolean\",\n init : false,\n event : \"changeRich\",\n apply : \"_applyRich\"\n },\n\n\n /**\n * Controls whether text wrap is activated or not. But please note, that\n * this property works only in combination with the property {@link #rich}.\n * The {@link #wrap} has only an effect if the {@link #rich} property is\n * set to true, otherwise {@link #wrap} has no effect.\n */\n wrap :\n {\n check : \"Boolean\",\n init : true,\n apply : \"_applyWrap\"\n },\n \n \n /**\n * Controls whether line wrapping can occur in the middle of a word; this is\n * typically only useful when there is a restricted amount of horizontal space\n * and words would otherwise overflow beyond the width of the element. Words\n * are typically considered as separated by spaces, so \"abc/def/ghi\" is a 11 \n * character word that would not be split without `breakWithWords` set to true. \n */\n breakWithinWords :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyBreakWithinWords\"\n },\n\n\n /**\n * Contains the HTML or text content. Interpretation depends on the value\n * of {@link #rich}. In text mode entities and other HTML special content\n * is not supported. But it is possible to use unicode escape sequences\n * to insert symbols and other non ASCII characters.\n */\n value :\n {\n check : \"String\",\n apply : \"_applyValue\",\n event : \"changeValue\",\n nullable : true\n },\n\n\n /**\n * The buddy property can be used to connect the label to another widget.\n * That causes two things:\n * - \n *
- The label will always take the same enabled state as the buddy\n * widget.\n * \n *
- A tap on the label will focus the buddy widget. \n *
width and height keys\n */\n __computeContentSize : function(width)\n {\n var Label = qx.bom.Label;\n var font = this.getFont();\n\n var styles = font ? this.__font.getStyles() : qx.bom.Font.getDefaultStyles();\n var content = this.getValue() || \"A\";\n var rich = this.getRich();\n\n if (this.__webfontListenerId) {\n this.__fixEllipsis();\n }\n if (rich && this.getBreakWithinWords()) {\n styles.wordBreak = \"break-all\";\n }\n\n return rich ?\n Label.getHtmlSize(content, styles, width) :\n Label.getTextSize(content, styles);\n },\n\n\n\n /**\n * Firefox > 9 on OS X will draw an ellipsis on top of the label content even\n * though there is enough space for the text. Re-applying the content forces\n * a recalculation and fixes the problem. See qx bug #6293\n */\n __fixEllipsis : function()\n {\n if (!this.getContentElement()) {\n return;\n }\n if (qx.core.Environment.get(\"os.name\") == \"osx\" &&\n qx.core.Environment.get(\"engine.name\") == \"gecko\" &&\n parseInt(qx.core.Environment.get(\"engine.version\"), 10) < 16 &&\n parseInt(qx.core.Environment.get(\"engine.version\"), 10) > 9)\n {\n var domEl = this.getContentElement().getDomElement();\n if (domEl) {\n domEl.innerHTML = domEl.innerHTML;\n }\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLIER\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyBuddy : function(value, old)\n {\n if (old != null)\n {\n this.removeRelatedBindings(old);\n this.removeListenerById(this.__tapListenerId);\n this.__tapListenerId = null;\n }\n\n if (value != null)\n {\n value.bind(\"enabled\", this, \"enabled\");\n this.__tapListenerId = this.addListener(\"tap\", function() {\n // only focus focusable elements [BUG #3555]\n if (value.isFocusable()) {\n value.focus.apply(value);\n }\n // furthermore toggle if possible [BUG #6881]\n if (\"toggleValue\" in value && typeof value.toggleValue === \"function\") {\n value.toggleValue();\n }\n }, this);\n }\n },\n\n\n // property apply\n _applyRich : function(value)\n {\n // Sync with content element\n this.getContentElement().setRich(value);\n\n // Mark text size cache as invalid\n this.__invalidContentSize = true;\n\n // Update layout\n qx.ui.core.queue.Layout.add(this);\n },\n\n\n // property apply\n _applyWrap : function(value, old)\n {\n if (value && !this.isRich())\n {\n if (qx.core.Environment.get(\"qx.debug\")) {\n this.warn(\"Only rich labels support wrap.\");\n }\n }\n\n if (this.isRich()) {\n // apply the white space style to the label to force it not\n // to wrap if wrap is set to false [BUG #3732]\n var whiteSpace = value ? \"normal\" : \"nowrap\";\n this.getContentElement().setStyle(\"whiteSpace\", whiteSpace);\n }\n },\n \n // property apply\n _applyBreakWithinWords : function(value, old) {\n if (this.isRich()) {\n this.getContentElement().setStyle(\"wordBreak\", value ? \"break-all\" : \"normal\");\n }\n },\n\n\n /**\n * Locale change event handler\n *\n * @signature function(e)\n * @param e {Event} the change event\n */\n _onChangeLocale : qx.core.Environment.select(\"qx.dynlocale\",\n {\n \"true\" : function(e)\n {\n var content = this.getValue();\n if (content && content.translate) {\n this.setValue(content.translate());\n }\n },\n\n \"false\" : null\n }),\n\n\n /**\n * Triggers layout recalculation after a web font was loaded\n *\n * @param ev {qx.event.type.Data} \"changeStatus\" event\n */\n _onWebFontStatusChange : function(ev)\n {\n if (ev.getData().valid === true) {\n\n // safari has trouble resizing, adding it again fixed the issue [BUG #8786]\n if (qx.core.Environment.get(\"browser.name\") == \"safari\" &&\n parseFloat(qx.core.Environment.get(\"browser.version\")) >= 8) {\n window.setTimeout(function() {\n this.__invalidContentSize = true;\n qx.ui.core.queue.Layout.add(this);\n }.bind(this), 0);\n }\n\n this.__invalidContentSize = true;\n qx.ui.core.queue.Layout.add(this);\n }\n },\n\n\n // property apply\n _applyValue : qx.core.Environment.select(\"qx.dynlocale\", {\n \"true\" : function(value, old)\n {\n // Sync with content element\n if (value && value.translate) {\n this.getContentElement().setValue(value.translate());\n }\n else {\n this.getContentElement().setValue(value);\n }\n\n // Mark text size cache as invalid\n this.__invalidContentSize = true;\n\n // Update layout\n qx.ui.core.queue.Layout.add(this);\n },\n\n \"false\" : function(value, old)\n {\n this.getContentElement().setValue(value);\n\n // Mark text size cache as invalid\n this.__invalidContentSize = true;\n\n // Update layout\n qx.ui.core.queue.Layout.add(this);\n }\n })\n },\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function()\n {\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().removeListener(\"changeLocale\", this._onChangeLocale, this);\n }\n\n if (this.__font && this.__webfontListenerId) {\n this.__font.removeListenerById(this.__webfontListenerId);\n }\n\n this.__font = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * A Label with low optical impact presenting as a simple weblink\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * const link = new osparc.ui.basic.LinkLabel(this.tr(\"oSparc\"),\"https://osparc.io\");\n * this.getRoot().add(link);\n *\n */\n\nqx.Class.define(\"osparc.ui.basic.LinkLabel\", {\n extend: qx.ui.basic.Label,\n\n construct: function(label, url) {\n this.base(arguments, label);\n\n this.set({\n rich: true,\n allowGrowX: true\n });\n\n if (url) {\n this.setUrl(url);\n }\n },\n\n properties: {\n url: {\n check: \"String\",\n nullable: true,\n apply: \"__applyUrl\"\n }\n },\n\n members: {\n __applyUrl: function(url) {\n if (url) {\n this.set({\n cursor: \"pointer\",\n font: \"link-label-12\",\n });\n this.addListener(\"click\", this.__onClick);\n } else {\n this.resetCursor();\n this.resetFont();\n }\n },\n\n __onClick: function() {\n const link = this.getUrl();\n if (link) {\n window.open(link);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.VendorInfo\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n members: {\n __getFromStaticInfo: function(key, defaultValue) {\n const staticValue = osparc.store.StaticInfo.getInstance().getValue(key);\n if (staticValue) {\n return staticValue;\n }\n return defaultValue;\n },\n\n getSupportEmail: function() {\n return this.__getFromStaticInfo(\"supportEmail\", \"support@osparc.io\");\n },\n\n getVendor: function() {\n /*\n {\n \"name\": \"ACME\",\n \"copyright\": \"\\u00a9 ACME correcaminos\",\n \"url\": \"https://acme.com\",\n \"license_url\": \"http://docs.osparc.io/#/docs/support/license\"\n }\n */\n return this.__getFromStaticInfo(\"vendor\", {});\n },\n\n getManuals: function() {\n /*\n [{\n \"label\": \"main\",\n \"url\": \"doc.acme.com\"\n }]\n */\n return this.__getFromStaticInfo(\"manuals\", []);\n },\n\n getIssues: function() {\n /*\n [{\n \"label\": \"github\",\n \"login_url\": \"https://github.com/ITISFoundation/osparc-simcore\",\n \"new_url\": \"https://github.com/ITISFoundation/osparc-simcore/issues/new/choose\"\n }]\n */\n return this.__getFromStaticInfo(\"issues\", []);\n },\n\n getSupports: function() {\n /*\n [{\n \"kind\": \"forum\", // \"web\", \"email\", \"forum\"\n \"label\": \"forum\",\n \"url\": \"forum.acme.com\"\n }]\n */\n return this.__getFromStaticInfo(\"support\", []);\n }\n }\n});\n","\nqx.Class.define(\"osparc.store.Support\", {\n type: \"static\",\n\n statics: {\n getLicenseURL: function() {\n const vendor = osparc.store.VendorInfo.getInstance().getVendor();\n if (vendor) {\n if (\"license_url\" in vendor) {\n return vendor[\"license_url\"];\n } else if (\"url\" in vendor) {\n return vendor[\"url\"];\n }\n }\n return \"\";\n },\n\n getManuals: function() {\n return osparc.store.VendorInfo.getInstance().getManuals();\n },\n\n addQuickStartToMenu: function(menu) {\n const quickStart = osparc.product.quickStart.Utils.getQuickStart();\n if (quickStart) {\n const qsButton = new qx.ui.menu.Button(qx.locale.Manager.tr(\"Quick Start\"), \"@FontAwesome5Solid/graduation-cap/14\");\n qsButton.getChildControl(\"label\").set({\n rich: true\n });\n qsButton.addListener(\"execute\", () => {\n const tutorialWindow = quickStart.tutorial();\n tutorialWindow.center();\n tutorialWindow.open();\n });\n menu.add(qsButton);\n }\n },\n\n addGuidedToursToMenu: function(menu) {\n const guidedToursButton = new qx.ui.menu.Button(qx.locale.Manager.tr(\"Guided Tours\"), \"@FontAwesome5Solid/graduation-cap/14\");\n guidedToursButton.exclude();\n menu.add(guidedToursButton);\n const fetchTours = osparc.product.tours.Tours.getTours();\n if (fetchTours) {\n fetchTours\n .then(tours => {\n if (tours) {\n guidedToursButton.show();\n guidedToursButton.addListener(\"execute\", () => {\n const toursManager = new osparc.tours.Manager();\n toursManager.setTours(tours);\n toursManager.start();\n });\n }\n });\n }\n },\n\n addManualButtonsToMenu: function(menu, menuButton) {\n const manuals = osparc.store.Support.getManuals();\n if (menuButton) {\n menuButton.setVisibility(manuals && manuals.length ? \"visible\" : \"excluded\");\n }\n manuals.forEach(manual => {\n const manualBtn = new qx.ui.menu.Button(manual.label, \"@FontAwesome5Solid/book/14\");\n manualBtn.getChildControl(\"label\").set({\n rich: true\n });\n manualBtn.addListener(\"execute\", () => window.open(manual.url), this);\n menu.add(manualBtn);\n });\n },\n\n addSupportButtonsToMenu: function(menu, menuButton) {\n const issues = osparc.store.VendorInfo.getInstance().getIssues();\n const supports = osparc.store.VendorInfo.getInstance().getSupports();\n if (menuButton) {\n menuButton.setVisibility(issues.length || supports.length ? \"visible\" : \"excluded\");\n }\n issues.forEach(issueInfo => {\n const label = issueInfo[\"label\"];\n const issueButton = new qx.ui.menu.Button(label, \"@FontAwesome5Solid/comments/14\");\n issueButton.getChildControl(\"label\").set({\n rich: true\n });\n issueButton.addListener(\"execute\", () => {\n const issueConfirmationWindow = new osparc.ui.window.Dialog(label + \" \" + qx.locale.Manager.tr(\"Information\"), null,\n qx.locale.Manager.tr(\"To create an issue, you must have an account and be already logged-in.\")\n );\n const contBtn = new qx.ui.form.Button(qx.locale.Manager.tr(\"Continue\"), \"@FontAwesome5Solid/external-link-alt/14\");\n contBtn.addListener(\"execute\", () => {\n window.open(issueInfo[\"new_url\"]);\n issueConfirmationWindow.close();\n }, this);\n const loginBtn = new qx.ui.form.Button(qx.locale.Manager.tr(\"Log in in \") + label, \"@FontAwesome5Solid/external-link-alt/14\");\n loginBtn.addListener(\"execute\", () => window.open(issueInfo[\"login_url\"]), this);\n issueConfirmationWindow.addButton(contBtn);\n issueConfirmationWindow.addButton(loginBtn);\n issueConfirmationWindow.addCancelButton();\n issueConfirmationWindow.open();\n }, this);\n menu.add(issueButton);\n });\n\n if (issues.length && supports.length) {\n menu.addSeparator();\n }\n\n supports.forEach(supportInfo => {\n const supportBtn = new qx.ui.menu.Button(supportInfo[\"label\"]);\n supportBtn.getChildControl(\"label\").set({\n rich: true\n });\n let icon = null;\n let cb = null;\n switch (supportInfo[\"kind\"]) {\n case \"web\":\n icon = \"@FontAwesome5Solid/link/14\";\n cb = () => window.open(supportInfo[\"url\"]);\n break;\n case \"forum\":\n icon = \"@FontAwesome5Solid/comments/14\";\n cb = () => window.open(supportInfo[\"url\"]);\n break;\n case \"email\":\n icon = \"@FontAwesome5Solid/envelope/14\";\n cb = () => this.__openSendEmailFeedbackDialog(supportInfo[\"email\"]);\n break;\n }\n supportBtn.setIcon(icon);\n supportBtn.addListener(\"execute\", () => cb(), this);\n menu.add(supportBtn);\n });\n },\n\n addReleaseNotesToMenu: function(menu) {\n const releaseTag = osparc.utils.Utils.getReleaseTag();\n const releaseLink = osparc.utils.Utils.getReleaseLink();\n const releaseBtn = new qx.ui.menu.Button(qx.locale.Manager.tr(\"Release Notes\") + \" \" + releaseTag, \"@FontAwesome5Solid/book/14\");\n releaseBtn.addListener(\"execute\", () => window.open(releaseLink), this);\n menu.add(releaseBtn);\n },\n\n mailToLink: function(email, subject, centered = true) {\n const color = qx.theme.manager.Color.getInstance().resolve(\"text\");\n let textLink = `${email}`;\n if (centered) {\n textLink = `
\";\n message += qx.locale.Manager.tr(\"Please request access to \") + displayName + \":\";\n message += \"
\";\n createAccountWindow.setMessage(message);\n const linkLabel = new osparc.ui.basic.LinkLabel(vendor[\"invitation_url\"], vendor[\"invitation_url\"]);\n createAccountWindow.addWidget(linkLabel);\n } else {\n const message = osparc.utils.Utils.createAccountMessage();\n createAccountWindow.setMessage(message);\n }\n createAccountWindow.center();\n createAccountWindow.open();\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * Support for extended CSS color names\n */\nqx.Class.define(\"qx.util.ExtendedColor\",\n{\n statics :\n {\n /**\n * CSS 3 colors (http://www.w3.org/TR/css3-color/#svg-color)\n * This includes all classic HTML Color names (http://www.w3.org/TR/css3-color/#html4) and the
transparent keyword.\n */\n EXTENDED :\n {\n transparent : [ -1, -1, -1 ],\n aliceblue : [ 240, 248, 255 ],\n antiquewhite : [ 250, 235, 215 ],\n aqua : [ 0, 255, 255 ],\n aquamarine : [ 127, 255, 212 ],\n azure : [ 240, 255, 255 ],\n beige : [ 245, 245, 220 ],\n bisque : [ 255, 228, 196 ],\n black : [ 0, 0, 0 ],\n blanchedalmond : [ 255, 235, 205 ],\n blue : [ 0, 0, 255 ],\n blueviolet : [ 138, 43, 226 ],\n brown : [ 165, 42, 42 ],\n burlywood : [ 222, 184, 135 ],\n cadetblue : [ 95, 158, 160 ],\n chartreuse : [ 127, 255, 0 ],\n chocolate : [ 210, 105, 30 ],\n coral : [ 255, 127, 80 ],\n cornflowerblue : [ 100, 149, 237 ],\n cornsilk : [ 255, 248, 220 ],\n crimson : [ 220, 20, 60 ],\n cyan : [ 0, 255, 255 ],\n darkblue : [ 0, 0, 139 ],\n darkcyan : [ 0, 139, 139 ],\n darkgoldenrod : [ 184, 134, 11 ],\n darkgray : [ 169, 169, 169 ],\n darkgreen : [ 0, 100, 0 ],\n darkgrey : [ 169, 169, 169 ],\n darkkhaki : [ 189, 183, 107 ],\n darkmagenta : [ 139, 0, 139 ],\n darkolivegreen : [ 85, 107, 47 ],\n darkorange : [ 255, 140, 0 ],\n darkorchid : [ 153, 50, 204 ],\n darkred : [ 139, 0, 0 ],\n darksalmon : [ 233, 150, 122 ],\n darkseagreen : [ 143, 188, 143 ],\n darkslateblue : [ 72, 61, 139 ],\n darkslategray : [ 47, 79, 79 ],\n darkslategrey : [ 47, 79, 79 ],\n darkturquoise : [ 0, 206, 209 ],\n darkviolet : [ 148, 0, 211 ],\n deeppink : [ 255, 20, 147 ],\n deepskyblue : [ 0, 191, 255 ],\n dimgray : [ 105, 105, 105 ],\n dimgrey : [ 105, 105, 105 ],\n dodgerblue : [ 30, 144, 255 ],\n firebrick : [ 178, 34, 34 ],\n floralwhite : [ 255, 250, 240 ],\n forestgreen : [ 34, 139, 34 ],\n fuchsia : [ 255, 0, 255 ],\n gainsboro : [ 220, 220, 220 ],\n ghostwhite : [ 248, 248, 255 ],\n gold : [ 255, 215, 0 ],\n goldenrod : [ 218, 165, 32 ],\n gray : [ 128, 128, 128 ],\n green : [ 0, 128, 0 ],\n greenyellow : [ 173, 255, 47 ],\n grey : [ 128, 128, 128 ],\n honeydew : [ 240, 255, 240 ],\n hotpink : [ 255, 105, 180 ],\n indianred : [ 205, 92, 92 ],\n indigo : [ 75, 0, 130 ],\n ivory : [ 255, 255, 240 ],\n khaki : [ 240, 230, 140 ],\n lavender : [ 230, 230, 250 ],\n lavenderblush : [ 255, 240, 245 ],\n lawngreen : [ 124, 252, 0 ],\n lemonchiffon : [ 255, 250, 205 ],\n lightblue : [ 173, 216, 230 ],\n lightcoral : [ 240, 128, 128 ],\n lightcyan : [ 224, 255, 255 ],\n lightgoldenrodyellow : [ 250, 250, 210 ],\n lightgray : [ 211, 211, 211 ],\n lightgreen : [ 144, 238, 144 ],\n lightgrey : [ 211, 211, 211 ],\n lightpink : [ 255, 182, 193 ],\n lightsalmon : [ 255, 160, 122 ],\n lightseagreen : [ 32, 178, 170 ],\n lightskyblue : [ 135, 206, 250 ],\n lightslategray : [ 119, 136, 153 ],\n lightslategrey : [ 119, 136, 153 ],\n lightsteelblue : [ 176, 196, 222 ],\n lightyellow : [ 255, 255, 224 ],\n lime : [ 0, 255, 0 ],\n limegreen : [ 50, 205, 50 ],\n linen : [ 250, 240, 230 ],\n magenta : [ 255, 0, 255 ],\n maroon : [ 128, 0, 0 ],\n mediumaquamarine : [ 102, 205, 170 ],\n mediumblue : [ 0, 0, 205 ],\n mediumorchid : [ 186, 85, 211 ],\n mediumpurple : [ 147, 112, 219 ],\n mediumseagreen : [ 60, 179, 113 ],\n mediumslateblue : [ 123, 104, 238 ],\n mediumspringgreen : [ 0, 250, 154 ],\n mediumturquoise : [ 72, 209, 204 ],\n mediumvioletred : [ 199, 21, 133 ],\n midnightblue : [ 25, 25, 112 ],\n mintcream : [ 245, 255, 250 ],\n mistyrose : [ 255, 228, 225 ],\n moccasin : [ 255, 228, 181 ],\n navajowhite : [ 255, 222, 173 ],\n navy : [ 0, 0, 128 ],\n oldlace : [ 253, 245, 230 ],\n olive : [ 128, 128, 0 ],\n olivedrab : [ 107, 142, 35 ],\n orange : [ 255, 165, 0 ],\n orangered : [ 255, 69, 0 ],\n orchid : [ 218, 112, 214 ],\n palegoldenrod : [ 238, 232, 170 ],\n palegreen : [ 152, 251, 152 ],\n paleturquoise : [ 175, 238, 238 ],\n palevioletred : [ 219, 112, 147 ],\n papayawhip : [ 255, 239, 213 ],\n peachpuff : [ 255, 218, 185 ],\n peru : [ 205, 133, 63 ],\n pink : [ 255, 192, 203 ],\n plum : [ 221, 160, 221 ],\n powderblue : [ 176, 224, 230 ],\n purple : [ 128, 0, 128 ],\n red : [ 255, 0, 0 ],\n rosybrown : [ 188, 143, 143 ],\n royalblue : [ 65, 105, 225 ],\n saddlebrown : [ 139, 69, 19 ],\n salmon : [ 250, 128, 114 ],\n sandybrown : [ 244, 164, 96 ],\n seagreen : [ 46, 139, 87 ],\n seashell : [ 255, 245, 238 ],\n sienna : [ 160, 82, 45 ],\n silver : [ 192, 192, 192 ],\n skyblue : [ 135, 206, 235 ],\n slateblue : [ 106, 90, 205 ],\n slategray : [ 112, 128, 144 ],\n slategrey : [ 112, 128, 144 ],\n snow : [ 255, 250, 250 ],\n springgreen : [ 0, 255, 127 ],\n steelblue : [ 70, 130, 180 ],\n tan : [ 210, 180, 140 ],\n teal : [ 0, 128, 128 ],\n thistle : [ 216, 191, 216 ],\n tomato : [ 255, 99, 71 ],\n turquoise : [ 64, 224, 208 ],\n violet : [ 238, 130, 238 ],\n wheat : [ 245, 222, 179 ],\n white : [ 255, 255, 255 ],\n whitesmoke : [ 245, 245, 245 ],\n yellow : [ 255, 255, 0 ],\n yellowgreen : [ 154, 205, 50 ]\n },\n\n\n /**\n * Whether the incoming value is an extended named color.\n *\n * @param value {String} the color value to test\n * @return {Boolean} true if the color is an extended named color\n */\n isExtendedColor : function(value) {\n return this.EXTENDED[value] !== undefined;\n },\n\n\n /**\n * Converts an extended color to the RGB value\n *\n * @param value {String} The incoming string\n * @return {Array} the resulting RGB array\n */\n toRgb : function(value)\n {\n var ret = this.EXTENDED[value];\n\n if (ret) {\n return ret;\n }\n\n throw new Error(\"Could not convert other than extended colors to RGB: \" + value);\n },\n\n /**\n * Converts an extended color to a CSS RGB string\n *\n * @param value {String} The incoming string\n * @return {String} the resulting RGB string\n */\n toRgbString : function(value)\n {\n return qx.util.ColorUtil.rgbToRgbString(this.toRgb(value));\n }\n\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Singleton class that is used as entrypoint to the webserver.\n *\n * All data transfer communication goes through the osparc.store.Store.\n */\n\nqx.Class.define(\"osparc.store.Data\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.resetCache();\n\n this.getLocations();\n },\n\n events: {\n \"fileCopied\": \"qx.event.type.Data\",\n },\n\n members: {\n __locationsCached: null,\n __datasetsByLocationCached: null,\n __filesByLocationAndDatasetCached: null,\n\n resetCache: function() {\n this.__locationsCached = [];\n this.__datasetsByLocationCached = {};\n this.__filesByLocationAndDatasetCached = {};\n\n osparc.store.Store.getInstance().reset(\"storageLocations\");\n },\n\n getLocationsCached: function() {\n const cache = this.__locationsCached;\n if (cache && cache.length) {\n return cache;\n }\n return null;\n },\n\n getLocations: function() {\n return new Promise((resolve, reject) => {\n const cachedData = this.getLocationsCached();\n if (cachedData) {\n resolve(cachedData);\n } else {\n // Get available storage locations\n osparc.data.Resources.get(\"storageLocations\")\n .then(locations => {\n // Add them to cache\n this.__locationsCached = locations;\n resolve(locations);\n })\n .catch(err => {\n console.error(err);\n reject([]);\n });\n }\n });\n },\n\n getDatasetsByLocationCached: function(locationId) {\n const cache = this.__datasetsByLocationCached;\n if (locationId in cache && cache[locationId] && cache[locationId].length) {\n const data = {\n location: locationId,\n datasets: cache[locationId]\n };\n return data;\n }\n return null;\n },\n\n getDatasetsByLocation: function(locationId) {\n const emptyData = {\n location: locationId,\n datasets: []\n };\n return new Promise((resolve, reject) => {\n // Get list of datasets\n if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo(\"storage.datcore.read\")) {\n reject(emptyData);\n }\n\n const cachedData = this.getDatasetsByLocationCached(locationId);\n if (cachedData) {\n resolve(cachedData);\n } else {\n const params = {\n url: {\n locationId\n }\n };\n osparc.data.Resources.fetch(\"storageDatasets\", \"getByLocation\", params)\n .then(datasets => {\n const data = {\n location: locationId,\n datasets: []\n };\n if (datasets && datasets.length>0) {\n data.datasets = datasets;\n }\n // Add it to cache\n this.__datasetsByLocationCached[locationId] = data.datasets;\n resolve(data);\n })\n .catch(err => {\n console.error(err);\n reject(emptyData);\n });\n }\n });\n },\n\n getFilesByLocationAndDatasetCached: function(locationId, datasetId) {\n const cache = this.__filesByLocationAndDatasetCached;\n if (locationId in cache && datasetId in cache[locationId]) {\n const data = {\n location: locationId,\n dataset: datasetId,\n files: cache[locationId][datasetId]\n };\n return data;\n }\n return null;\n },\n\n getFilesByLocationAndDataset: function(locationId, datasetId) {\n const emptyData = {\n location: locationId,\n dataset: datasetId,\n files: []\n };\n return new Promise((resolve, reject) => {\n // Get list of file meta data\n if (locationId === 1 && !osparc.data.Permissions.getInstance().canDo(\"storage.datcore.read\")) {\n reject(emptyData);\n }\n\n const cachedData = this.getFilesByLocationAndDatasetCached(locationId, datasetId);\n if (cachedData) {\n resolve(cachedData);\n } else {\n const params = {\n url: {\n locationId,\n datasetId\n }\n };\n osparc.data.Resources.fetch(\"storageFiles\", \"getByLocationAndDataset\", params)\n .then(files => {\n const data = {\n location: locationId,\n dataset: datasetId,\n files: files && files.length>0 ? files : []\n };\n // Add it to cache\n if (!(locationId in this.__filesByLocationAndDatasetCached)) {\n this.__filesByLocationAndDatasetCached[locationId] = {};\n }\n this.__filesByLocationAndDatasetCached[locationId][datasetId] = data.files;\n resolve(data);\n })\n .catch(err => {\n console.error(err);\n reject(emptyData);\n });\n }\n });\n },\n\n getNodeFiles: function(nodeId) {\n return new Promise((resolve, reject) => {\n const params = {\n url: {\n nodeId: encodeURIComponent(nodeId)\n }\n };\n osparc.data.Resources.fetch(\"storageFiles\", \"getByNode\", params)\n .then(files => {\n console.log(\"Node Files\", files);\n if (files && files.length>0) {\n resolve(files);\n } else {\n resolve([]);\n }\n })\n .catch(err => {\n console.error(err);\n reject([]);\n });\n });\n },\n\n getPresignedLink: function(download = true, locationId, fileUuid, fileSize) {\n return new Promise((resolve, reject) => {\n if (download && !osparc.data.Permissions.getInstance().canDo(\"study.node.data.pull\", true)) {\n reject();\n }\n if (!download && !osparc.data.Permissions.getInstance().canDo(\"study.node.data.push\", true)) {\n reject();\n }\n\n // GET: Returns download link for requested file\n // PUT: Returns upload object link(s)\n const params = {\n url: {\n locationId,\n fileUuid: encodeURIComponent(fileUuid)\n }\n };\n if (!download && fileSize) {\n params.url[\"fileSize\"] = fileSize;\n }\n osparc.data.Resources.fetch(\"storageLink\", download ? \"getOne\" : \"put\", params)\n .then(data => {\n const presignedLinkData = {\n resp: data,\n locationId,\n fileUuid,\n fileSize\n };\n resolve(presignedLinkData);\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n });\n },\n\n copyFile: function(fromLoc, fileUuid, toLoc, pathId) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.node.data.push\", true)) {\n return false;\n }\n\n // \"/v0/locations/1/files/{}?user_id={}&extra_location={}&extra_source={}\".format(quote(datcore_uuid, safe=''),\n let fileName = fileUuid.split(\"/\");\n fileName = fileName[fileName.length-1];\n\n const params = {\n url: {\n toLoc,\n fileName: encodeURIComponent(pathId + \"/\" + fileName),\n fromLoc,\n fileUuid: encodeURIComponent(fileUuid)\n }\n };\n osparc.data.Resources.fetch(\"storageFiles\", \"put\", params)\n .then(files => {\n const data = {\n data: files,\n locationId: toLoc,\n fileUuid: pathId + \"/\" + fileName\n };\n this.fireDataEvent(\"fileCopied\", data);\n })\n .catch(err => {\n console.error(err);\n console.error(\"Failed copying file\", fileUuid, \"to\", pathId);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Failed copying file\"), \"ERROR\");\n this.fireDataEvent(\"fileCopied\", null);\n });\n\n return true;\n },\n\n // if folder path is provided as fileUuid, it can also be deleted\n deleteFile: function(locationId, fileUuid) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.node.data.delete\", true)) {\n return null;\n }\n\n // Deletes File\n const params = {\n url: {\n locationId,\n fileUuid: encodeURIComponent(fileUuid)\n }\n };\n return osparc.data.Resources.fetch(\"storageFiles\", \"delete\", params)\n .then(files => {\n const data = {\n data: files,\n locationId: locationId,\n fileUuid: fileUuid\n };\n return data;\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Failed deleting file\"), \"ERROR\");\n });\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2016 Visionet GmbH, http://www.visionet.de\n 2016 OETIKER+PARTNER AG, https://www.oetiker.ch\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Dietrich Streifert (level420)\n * Tobias Oetiker (oetiker)\n\n************************************************************************ */\n\n\n/**\n * Dynamically load non qx scripts. This class is aware of all scripts that have\n * been loaded using its instances, so if two instances load jquery, it will only\n * be loaded once, and the second instance will wait for the jquery to be loaded\n * before continuing to load additional scripts.\n *\n * Usage example:\n *\n * \n * ... assets ...\n * /**\n * * @asset(myapp/jquery/*)\n * * @asset(myapp/highcharts/*)\n * *\n * * @ignore(jQuery.*)\n * * @ignore(Highcharts.*)\n * ...\n *\n *\n * // in debug mode load the uncompressed unobfuscated scripts\n * var src = '';\n * var min = '.min';\n * if (qx.core.Environment.get(\"qx.debug\")) {\n * src = '.src';\n * min = '';\n * }\n *\n * // initialize the script loading\n * var dynLoader = new qx.util.DynamicScriptLoader([\n * \"myapp/jquery/jquery\"+min+\".js\",\n * \"myapp/highcharts/highcharts\"+src+\".js\",\n * \"myapp/highcharts/highcharts-more\"+src+\".js\",\n * \"myapp/highcharts/highcharts-modifications.js\"\n * ]);\n *\n *\n * dynLoader.addListenerOnce('ready',function(e){\n * console.log(\"all scripts have been loaded!\");\n * });\n *\n * dynLoader.addListener('failed',function(e){\n * var data = e.getData();\n * console.log(\"failed to load \"+data.script);\n * });\n *\n * dynLoader.start();\n * \n * \n */\nqx.Class.define(\"qx.util.DynamicScriptLoader\", {\n extend: qx.core.Object,\n\n /**\n * Create a loader for the given scripts.\n *\n * @param scriptArr {Array|String} the uri name(s) of the script(s) to load \n */\n\n construct: function (scriptArr) {\n this.base(arguments);\n this.__started = false;\n this.__QUEUE = (qx.lang.Type.isString(scriptArr)\n ? [ scriptArr ]\n : qx.lang.Array.clone(scriptArr));\n },\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events: {\n /**\n * fired when a script is loaded successfully. The data contains 'script' and 'status' keys.\n */\n loaded: 'qx.event.type.Data',\n\n /**\n * fired when a specific script fails loading. The data contains 'script' and 'status' keys.\n */\n failed: 'qx.event.type.Data',\n\n /**\n * fired when all given scripts are loaded, each time loadScriptsDynamic is called.\n */\n ready: 'qx.event.type.Event'\n },\n\n statics: {\n /**\n * Map of scripts being added at the present time. Key is script name; value is instance of this class which\n * is loading it.\n */\n __IN_PROGRESS: {},\n /**\n * Map of scripts that have fully loaded. Key is script name; value is true\n */\n __LOADED: {}\n },\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n\n members: {\n\n /**\n * Array of the scripts to be loaded\n */\n __QUEUE: null,\n\n /**\n * True if start has been called.\n */\n __started: null,\n\n\n\n /**\n * Start loading scripts. This may only be called once!\n * @return {Promise?} a promise which will be resolved after load of all scripts if promise support is enabled; nothing (undefined) if promises are not enabled.\n */\n start: qx.core.Environment.select('qx.promise', {\n \"true\": function() {\n return new qx.Promise(function (resolve, reject) {\n this.addListenerOnce(\"ready\", resolve, this);\n this.addListenerOnce(\"failed\", function (e) {\n reject(new Error(e.getData()));\n }, this);\n if (this.isDisposed()) {\n reject(new Error('disposed'));\n }\n if (this.__started) {\n reject(new Error('you can only call start once per instance'));\n }\n this.__started = true;\n this.__loadScripts();\n }, this);\n },\n \"false\": function () {\n if (this.isDisposed()) {\n return;\n }\n if (this.__started) {\n throw new Error('you can only call start once per instance');\n }\n this.__started = true;\n this.__loadScripts();\n }\n }),\n\n\n /**\n * Chain loading scripts.\n *\n * Recursively called until the array of scripts is consumed\n *\n */\n __loadScripts: function () {\n var DynamicScriptLoader = qx.util.DynamicScriptLoader;\n var script;\n var dynLoader;\n var id1, id2;\n var uri;\n var loader;\n\n script = this.__QUEUE.shift();\n if (!script){\n this.fireEvent(\"ready\")\n return;\n }\n\n if (DynamicScriptLoader.__LOADED[script]){\n this.fireDataEvent('loaded',{\n script: script,\n status: 'preloaded'\n });\n this.__loadScripts();\n return;\n } \n\n dynLoader = DynamicScriptLoader.__IN_PROGRESS[script];\n if (dynLoader){\n\n id1 = dynLoader.addListener('loaded',function (e) {\n if (this.isDisposed()) {\n return;\n }\n var data = e.getData();\n if (data.script === script){\n dynLoader.removeListenerById(id2);\n dynLoader.removeListenerById(id1);\n this.fireDataEvent('loaded',data);\n this.__loadScripts();\n }\n },this);\n\n id2 = dynLoader.addListener('failed',function (e) {\n if (this.isDisposed()) {\n return;\n }\n var data = e.getData();\n dynLoader.removeListenerById(id1);\n dynLoader.removeListenerById(id2); \n this.fireDataEvent('failed',{\n script: script,\n status: 'loading of ' + data.script + ' failed while waiting for ' + script\n });\n },this);\n\n return;\n }\n\n uri = qx.util.ResourceManager.getInstance().toUri(script);\n\n loader = new qx.bom.request.Script();\n\n loader.on(\"load\", function(request) {\n if (this.isDisposed()) {\n return;\n }\n DynamicScriptLoader.__LOADED[script] = true;\n delete DynamicScriptLoader.__IN_PROGRESS[script];\n this.fireDataEvent('loaded', {\n script: script,\n status: request.status\n });\n this.__loadScripts();\n },this);\n\n var onError = function(request) {\n if (this.isDisposed()) {\n return;\n }\n delete DynamicScriptLoader.__IN_PROGRESS[script];\n this.fireDataEvent('failed', {\n script: script,\n status: request.status\n });\n };\n\n loader.on(\"error\", onError,this);\n loader.on(\"timeout\", onError,this);\n\n // this.debug(\"Loading \" + script + \" started\");\n loader.open(\"GET\", uri);\n DynamicScriptLoader.__IN_PROGRESS[script] = this;\n loader.send();\n }\n },\n destruct : function() {\n var DynamicScriptLoader = qx.util.DynamicScriptLoader;\n for (var key in DynamicScriptLoader.__IN_PROGRESS){\n if (DynamicScriptLoader.__IN_PROGRESS[key] === this) {\n delete DynamicScriptLoader.__IN_PROGRESS[key];\n }\n }\n this.__QUEUE = undefined;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.announcement.AnnouncementUIFactory\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n events: {\n \"changeAnnouncements\": \"qx.event.type.Event\",\n },\n\n statics: {\n createLoginAnnouncement: function(title, description) {\n const loginAnnouncement = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n backgroundColor: \"strong-main\",\n alignX: \"center\",\n padding: 12,\n allowGrowX: true,\n maxWidth: osparc.auth.core.BaseAuthPage.FORM_WIDTH,\n decorator: \"rounded\",\n });\n\n if (title) {\n const titleLabel = new qx.ui.basic.Label().set({\n value: title,\n font: \"text-16\",\n alignX: \"center\",\n textAlign: \"center\",\n rich: true\n });\n loginAnnouncement.add(titleLabel);\n }\n\n if (description) {\n const descriptionLabel = new qx.ui.basic.Label().set({\n value: description,\n font: \"text-14\",\n alignX: \"center\",\n textAlign: \"center\",\n rich: true\n });\n loginAnnouncement.add(descriptionLabel);\n }\n\n return loginAnnouncement;\n },\n\n isValid: function(announcement, widgetType) {\n if (announcement) {\n const now = new Date();\n const validPeriod = now > announcement.getStart() && now < announcement.getEnd();\n const validProduct = announcement.getProducts().includes(osparc.product.Utils.getProductName());\n const validWidgetType = widgetType ? announcement.getWidgets().includes(widgetType) : true;\n return validPeriod && validProduct && validWidgetType;\n }\n return false;\n },\n },\n\n members: {\n __announcements: null,\n __ribbonAnnouncements: null,\n\n setAnnouncementsData: function(announcementsData) {\n this.__announcements = [];\n announcementsData.forEach(announcementData => {\n const announcement = new osparc.announcement.Announcement(announcementData);\n this.__announcements.push(announcement);\n });\n this.fireEvent(\"changeAnnouncements\");\n\n this.__addToRibbon();\n },\n\n __addToRibbon: function() {\n if (this.__ribbonAnnouncements && this.__ribbonAnnouncements.length) {\n this.__ribbonAnnouncements.forEach(ribbonAnnouncement => {\n osparc.notification.RibbonNotifications.getInstance().removeNotification(ribbonAnnouncement);\n });\n }\n this.__ribbonAnnouncements = [];\n this.__announcements.forEach(announcement => {\n if (this.self().isValid(announcement, \"ribbon\")) {\n const ribbonAnnouncement = this.__addRibbonAnnouncement(announcement);\n if (ribbonAnnouncement) {\n this.__ribbonAnnouncements.push(ribbonAnnouncement);\n }\n }\n });\n },\n\n hasLoginAnnouncement: function() {\n return this.__announcements && this.__announcements.some(announcement => this.self().isValid(announcement, \"login\"));\n },\n\n hasUserMenuAnnouncement: function() {\n return this.__announcements && this.__announcements.some(announcement => this.self().isValid(announcement, \"ribbon\") && announcement.getLink());\n },\n\n createLoginAnnouncements: function() {\n const loginAnnouncements = [];\n this.__announcements.forEach(announcement => {\n if (this.self().isValid(announcement, \"login\")) {\n const loginAnnouncement = this.self().createLoginAnnouncement(announcement.getTitle(), announcement.getDescription())\n loginAnnouncement.setWidth(osparc.auth.core.BaseAuthPage.FORM_WIDTH-5); // show 1-2 pixel of the nearby announcement\n loginAnnouncements.push(loginAnnouncement);\n }\n });\n if (loginAnnouncements.length === 1) {\n return loginAnnouncements[0];\n }\n const slideBar = new osparc.widget.SlideBar().set({\n allowGrowX: true,\n });\n slideBar.getChildControl(\"button-backward\").set({\n backgroundColor: \"transparent\"\n });\n slideBar.getChildControl(\"button-forward\").set({\n backgroundColor: \"transparent\"\n });\n loginAnnouncements.forEach(loginAnnouncement => slideBar.add(loginAnnouncement));\n return slideBar;\n },\n\n __addRibbonAnnouncement: function(announcement) {\n if (osparc.utils.Utils.localCache.isDontShowAnnouncement(announcement.getId())) {\n return null;\n }\n\n let text = \"\";\n if (announcement.getTitle()) {\n text += announcement.getTitle();\n }\n if (announcement.getTitle() && announcement.getDescription()) {\n text += \": \";\n }\n if (announcement.getDescription()) {\n text += announcement.getDescription();\n }\n const ribbonAnnouncement = new osparc.notification.RibbonNotification(text, \"announcement\", true);\n ribbonAnnouncement.announcementId = announcement.getId();\n osparc.notification.RibbonNotifications.getInstance().addNotification(ribbonAnnouncement);\n return ribbonAnnouncement;\n },\n\n createUserMenuAnnouncements: function() {\n const userMenuAnnouncements = [];\n this.__announcements.forEach(announcement => {\n if (this.self().isValid(announcement, \"user-menu\")) {\n const link = announcement.getLink();\n const userMenuAnnouncement = new qx.ui.menu.Button(announcement.getTitle() + \"...\");\n userMenuAnnouncement.addListener(\"execute\", () => window.open(link));\n userMenuAnnouncements.push(userMenuAnnouncement);\n }\n });\n return userMenuAnnouncements;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.RibbonNotification\", {\n extend: qx.core.Object,\n\n construct: function(text, type = \"maintenance\", closable = false) {\n this.base(arguments);\n\n if (text) {\n this.setText(text);\n }\n\n this.setType(type);\n this.setClosable(closable);\n },\n\n properties: {\n type: {\n check: [\"maintenance\", \"smallWindow\", \"announcement\"],\n init: null,\n nullable: false\n },\n\n text: {\n check: \"String\",\n init: \"\",\n nullable: false\n },\n\n closable: {\n check: \"Boolean\",\n init: true,\n nullable: false\n }\n },\n\n members: {\n getFullText: function(wLineBreak = false) {\n let fullText = \"\";\n switch (this.getType()) {\n case \"maintenance\": {\n fullText += qx.locale.Manager.tr(\"Maintenance scheduled.\");\n fullText += wLineBreak ? \"\" : \" \";\n fullText += this.getText() + \".\";\n fullText += wLineBreak ? \"
\" : \" \";\n fullText += qx.locale.Manager.tr(\"Please save your work and logout.\");\n break;\n }\n case \"smallWindow\": {\n fullText += qx.locale.Manager.tr(\"Oops, your window is a bit small!\");\n const longText = this.getText();\n if (longText) {\n fullText += \" \" + longText;\n }\n break;\n }\n case \"announcement\": {\n const longText = this.getText();\n if (longText) {\n fullText += \" \" + longText;\n }\n if (!wLineBreak) {\n fullText = fullText.replace(/
+ or - character.\n * Examples: Alt+F1, Control+C, Control+Alt+Delete\n */\n construct : function(shortcut)\n {\n this.base(arguments);\n this._shortcut = new qx.bom.Shortcut(shortcut);\n this._shortcut.addListener(\"execute\", this.execute, this);\n\n if (shortcut !== undefined) {\n this.setShortcut(shortcut);\n }\n },\n\n\n events :\n {\n /**\n * Fired when the command is executed. Sets the \"data\" property of the\n * event to the object that issued the command.\n */\n \"execute\" : \"qx.event.type.Data\"\n },\n\n\n properties :\n {\n /** Whether the command should be activated. If 'false' execute event\n * wouldn't fire. This property will be used by command groups when\n * activating/deactivating all commands of the group.*/\n active :\n {\n init : true,\n check : \"Boolean\",\n event : \"changeActive\",\n apply : \"_applyActive\"\n },\n\n\n /** Whether the command should be respected/enabled. If 'false' execute event\n * wouldn't fire. If value of property {@link qx.ui.command.Command#active}\n * is 'false', enabled value can be set but has no effect until\n * {@link qx.ui.command.Command#active} will be set to 'true'.*/\n enabled :\n {\n init : true,\n check : \"Boolean\",\n event : \"changeEnabled\",\n apply : \"_applyEnabled\"\n },\n\n\n /** The command shortcut as a string */\n shortcut :\n {\n check : \"String\",\n apply : \"_applyShortcut\",\n nullable : true\n },\n\n\n /** The label, which will be set in all connected widgets (if available) */\n label :\n {\n check : \"String\",\n nullable : true,\n event : \"changeLabel\"\n },\n\n\n /** The icon, which will be set in all connected widgets (if available) */\n icon :\n {\n check : \"String\",\n nullable : true,\n event : \"changeIcon\"\n },\n\n\n /**\n * The tooltip text, which will be set in all connected\n * widgets (if available)\n */\n toolTipText :\n {\n check : \"String\",\n nullable : true,\n event : \"changeToolTipText\"\n },\n\n\n /** The value of the connected widgets */\n value :\n {\n nullable : true,\n event : \"changeValue\"\n },\n\n\n /** The menu, which will be set in all connected widgets (if available) */\n menu :\n {\n check : \"qx.ui.menu.Menu\",\n nullable : true,\n event : \"changeMenu\"\n }\n },\n\n\n members :\n {\n _shortcut : null,\n\n\n // property apply\n _applyActive : function(value)\n {\n if (value === false) {\n this._shortcut.setEnabled(false);\n } else {\n // synchronize value with current \"enabled\" value of this command\n this._shortcut.setEnabled(this.getEnabled());\n }\n },\n\n\n // property apply\n _applyEnabled : function(value)\n {\n if (this.getActive()) {\n this._shortcut.setEnabled(value);\n }\n },\n\n\n // property apply\n _applyShortcut : function(value) {\n this._shortcut.setShortcut(value);\n },\n\n\n /**\n * Fire the \"execute\" event on this command. If property\n * active and enabled set to\n * true.\n * @param target {Object?} Object which issued the execute event\n */\n execute : function(target)\n {\n if (this.getActive() && this.getEnabled()) {\n this.fireDataEvent(\"execute\", target);\n }\n },\n\n\n /**\n * Returns the used shortcut as string using the currently selected locale.\n *\n * @return {String} shortcut\n */\n toString : function()\n {\n if (this._shortcut) {\n return this._shortcut.toString();\n }\n return this.base(arguments);\n }\n },\n\n\n destruct : function()\n {\n this._shortcut.removeListener(\"execute\", this.execute, this);\n this._disposeObjects(\"_shortcut\");\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A singleton window is a type of window that can only have one instance.\n */\nqx.Class.define(\"osparc.ui.window.SingletonWindow\", {\n extend: osparc.ui.window.Window,\n\n construct: function(id, caption, icon) {\n this.setId(id);\n const singletonWindows = qx.core.Init.getApplication().getRoot()\n .getChildren()\n .filter(child => child.classname === this.classname);\n const thisWindow = singletonWindows.find(win => win.getId() === id);\n if (thisWindow) {\n thisWindow.dispose();\n }\n this.base(arguments, caption, icon);\n },\n\n properties: {\n id: {\n check: \"String\",\n nullable: false\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.TooSmallDialog\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function() {\n this.base(arguments, \"too-small-logout\", this.tr(\"Window too small\"));\n\n this.set({\n layout: new qx.ui.layout.VBox(10),\n contentPadding: 15,\n modal: true,\n showMaximize: false,\n showMinimize: false,\n });\n\n this.__buildLayout();\n },\n\n statics: {\n openWindow: function() {\n const orgsWindow = new osparc.TooSmallDialog();\n orgsWindow.center();\n orgsWindow.open();\n return orgsWindow;\n }\n },\n\n members: {\n __buildLayout: function() {\n const message = this.__createMessage();\n this.add(message);\n\n // if the user is logged in, let them log out, the user menu might be unreachable\n const logoutButton = this.__createLogoutButton();\n this.add(logoutButton);\n },\n\n __createMessage: function() {\n const introText = this.tr(\"The application can't perform in such a small window.\");\n const introLabel = new qx.ui.basic.Label(introText);\n return introLabel;\n },\n\n __createLogoutButton: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"right\"\n }));\n\n const button = new qx.ui.form.Button().set({\n allowGrowX: false\n });\n button.addListener(\"execute\", () => qx.core.Init.getApplication().logout());\n layout.add(button);\n\n const authData = osparc.auth.Data.getInstance();\n authData.bind(\"loggedIn\", layout, \"visibility\", {\n converter: isLoggedIn => isLoggedIn ? \"visible\" : \"excluded\"\n });\n authData.bind(\"guest\", button, \"label\", {\n converter: isGuest => isGuest ? this.tr(\"Exit\") : this.tr(\"Log out\")\n });\n\n return layout;\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n * Christian Hagendorn (chris_schmidt)\n * Adrian Olaru (adrianolaru)\n\n************************************************************************ */\n\n/**\n * The stack container puts its child widgets on top of each other and only the\n * topmost widget is visible.\n *\n * This is used e.g. in the tab view widget. Which widget is visible can be\n * controlled by using the {@link #getSelection} method.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * // create stack container\n * var stack = new qx.ui.container.Stack();\n *\n * // add some children\n * stack.add(new qx.ui.core.Widget().set({\n * backgroundColor: \"red\"\n * }));\n * stack.add(new qx.ui.core.Widget().set({\n * backgroundColor: \"green\"\n * }));\n * stack.add(new qx.ui.core.Widget().set({\n * backgroundColor: \"blue\"\n * }));\n *\n * // select green widget\n * stack.setSelection([stack.getChildren()[1]]);\n *\n * this.getRoot().add(stack);\n * \n *\n * This example creates an stack with three children. Only the selected \"green\"\n * widget is visible.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.container.Stack\",\n{\n extend : qx.ui.core.Widget,\n implement : [\n qx.ui.form.IField,\n qx.ui.core.ISingleSelection\n ],\n include : [\n qx.ui.core.MSingleSelectionHandling,\n qx.ui.core.MChildrenHandling\n ],\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n\n construct : function()\n {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Grow);\n\n this.addListener(\"changeSelection\", this.__onChangeSelection, this);\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Whether the size of the widget depends on the selected child. When\n * disabled (default) the size is configured to the largest child.\n */\n dynamic :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyDynamic\"\n }\n },\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n\n members :\n {\n // property apply\n _applyDynamic : function(value)\n {\n var children = this._getChildren();\n var selected = this.getSelection()[0];\n var child;\n\n for (var i=0, l=children.length; ifalse otherwise.\n */\n _isAllowEmptySelection : function() {\n return true;\n },\n\n /**\n * Returns whether the given item is selectable.\n *\n * @param item {qx.ui.core.Widget} The item to be checked\n * @return {Boolean} Whether the given item is selectable\n */\n _isItemSelectable : function(item) {\n return true;\n },\n\n /**\n * Event handler for changeSelection.\n *\n * Shows the new selected widget and hide the old one.\n *\n * @param e {qx.event.type.Data} Data event.\n */\n __onChangeSelection : function(e)\n {\n var old = e.getOldData()[0];\n var value = e.getData()[0];\n\n if (old)\n {\n if (this.isDynamic()) {\n old.exclude();\n } else {\n old.hide();\n }\n }\n\n if (value) {\n value.show();\n }\n },\n\n\n //overridden\n _afterAddChild : function(child) {\n var selected = this.getSelection()[0];\n\n if (!selected) {\n this.setSelection([child]);\n } else if (selected !== child) {\n if (this.isDynamic()) {\n child.exclude();\n } else {\n child.hide();\n }\n }\n },\n\n\n //overridden\n _afterRemoveChild : function(child) {\n if (this.getSelection()[0] === child) {\n var first = this._getChildren()[0];\n\n if (first) {\n this.setSelection([first]);\n } else {\n this.resetSelection();\n }\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Go to the previous child in the children list.\n */\n previous : function()\n {\n var selected = this.getSelection()[0];\n var go = this._indexOf(selected)-1;\n var children = this._getChildren();\n\n if (go < 0) {\n go = children.length - 1;\n }\n\n var prev = children[go];\n this.setSelection([prev]);\n },\n\n /**\n * Go to the next child in the children list.\n */\n next : function()\n {\n var selected = this.getSelection()[0];\n var go = this._indexOf(selected)+1;\n var children = this._getChildren();\n\n var next = children[go] || children[0];\n\n this.setSelection([next]);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Singleton that contains a stack of two logos.\n *\n * If online the white logo will be selected, if the webserver gets disconnected, the logo will turn red\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let logo = osparc.navigation.LogoOnOff.getInstance();\n logo.online(true/false);\n *\n */\n\nqx.Class.define(\"osparc.navigation.LogoOnOff\", {\n extend: qx.ui.container.Stack,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.getChildControl(\"off-logo\");\n this.getChildControl(\"on-logo\");\n },\n\n properties: {\n online: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"__applyOnline\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"off-logo-container\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignX: \"center\"\n }));\n control.add(new qx.ui.core.Spacer(null, 8));\n this.add(control);\n break;\n }\n case \"off-logo\": {\n control = new qx.ui.basic.Image(\"osparc/offline.svg\");\n osparc.utils.Utils.setAltToImage(control, \"offline\");\n const container = this.getChildControl(\"off-logo-container\");\n container.add(control, {\n flex: 1\n });\n break;\n }\n case \"on-logo\": {\n control = new osparc.ui.basic.LogoWPlatform();\n control.setFont(\"text-9\");\n this.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __applyOnline: function(value) {\n this.setSelection([this.getSelectables()[value ? 1 : 0]]);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.Utils\", {\n type: \"static\",\n\n statics: {\n DANGER_ZONE: 25, // one hour consumption\n CREDITS_ICON: \"@FontAwesome5Solid/database/\",\n\n creditsUpdated: function(walletId, credits) {\n const store = osparc.store.Store.getInstance();\n const walletFound = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId));\n if (walletFound) {\n walletFound.setCreditsAvailable(parseFloat(credits));\n }\n },\n\n openBuyCredits: function(paymentMethods = []) {\n const buyView = new osparc.desktop.credits.BuyCreditsStepper(\n paymentMethods.map(({idr, cardHolderName, cardNumberMasked}) => ({\n label: `${cardHolderName} ${cardNumberMasked}`,\n id: idr\n }))\n );\n const win = osparc.ui.window.Window.popUpInWindow(buyView, \"Buy credits\", 400, 600).set({\n resizable: false,\n movable: false\n });\n buyView.addListener(\"completed\", () => win.close());\n buyView.addListener(\"cancelled\", () => win.close());\n win.addListener(\"close\", () => buyView.cancelPayment())\n return {\n window: win,\n buyCreditsWidget: buyView,\n };\n },\n\n\n areWalletsEnabled: function() {\n const statics = osparc.store.Store.getInstance().get(\"statics\");\n return Boolean(statics && statics[\"isPaymentEnabled\"]);\n },\n\n getNoWriteAccessInformationLabel: function() {\n return new qx.ui.basic.Label().set({\n value: qx.locale.Manager.tr(\"You can't access this information\"),\n font: \"text-14\",\n allowGrowX: true\n });\n },\n\n getNoWriteAccessOperationsLabel: function() {\n return new qx.ui.basic.Label().set({\n value: qx.locale.Manager.tr(\"You can't access these operations\"),\n font: \"text-14\",\n allowGrowX: true\n });\n },\n\n creditsToColor: function(credits, defaultColor = \"text\") {\n const preferencesSettings = osparc.Preferences.getInstance();\n let color = defaultColor;\n const dangerZone = this.DANGER_ZONE;\n if (credits <= dangerZone) {\n color = \"danger-red\";\n } else if (credits <= preferencesSettings.getCreditsWarningThreshold()) {\n color = \"warning-yellow\";\n }\n return color;\n },\n\n normalizeCredits: function(credits) {\n const logBase = (n, base) => Math.log(n) / Math.log(base);\n\n let normalized = logBase(credits, 10000) + 0.01;\n normalized = Math.min(Math.max(normalized, 0), 1);\n return normalized * 100;\n },\n\n creditsToFixed: function(credits) {\n if (credits < 10) {\n return (credits).toFixed(1);\n }\n return parseInt(credits);\n },\n\n createWalletSelector: function(accessRight = \"read\") {\n const store = osparc.store.Store.getInstance();\n\n const walletSelector = new qx.ui.form.SelectBox().set({\n maxWidth: 250\n });\n\n const populateSelectBox = selectBox => {\n selectBox.removeAll();\n\n const wallets = store.getWallets();\n wallets.forEach(wallet => {\n const found = wallet.getMyAccessRights();\n if (found && found[accessRight]) {\n const sbItem = new qx.ui.form.ListItem(`${wallet.getName()} (${wallet.getCreditsAvailable()} credits)`);\n sbItem.walletId = wallet.getWalletId();\n selectBox.add(sbItem);\n }\n });\n };\n\n populateSelectBox(walletSelector);\n store.addListener(\"changeWallets\", () => populateSelectBox(walletSelector));\n\n return walletSelector;\n },\n\n autoSelectActiveWallet: function(walletSelector) {\n // If there is only one active wallet, select it\n const store = osparc.store.Store.getInstance();\n const wallets = store.getWallets();\n const activeWallets = wallets.filter(wallet => wallet.getStatus() === \"ACTIVE\");\n if (activeWallets.length === 1) {\n const found = walletSelector.getSelectables().find(sbItem => sbItem.walletId === activeWallets[0].getWalletId());\n if (found) {\n walletSelector.setSelection([found]);\n return true;\n }\n }\n return false;\n },\n\n populatePaymentMethodSelector: function(wallet, paymentMethodSB) {\n paymentMethodSB.removeAll();\n return new Promise(resolve => {\n osparc.desktop.credits.Utils.getPaymentMethods(wallet.getWalletId())\n .then(paymentMethods => {\n paymentMethods.forEach(paymentMethod => {\n let label = paymentMethod.cardHolderName;\n label += \" \";\n label += paymentMethod.cardNumberMasked.substr(paymentMethod.cardNumberMasked.length - 9);\n const lItem = new qx.ui.form.ListItem(label, null, paymentMethod.idr);\n paymentMethodSB.add(lItem);\n });\n })\n .finally(() => resolve());\n });\n },\n\n getWallet: function(walletId) {\n const store = osparc.store.Store.getInstance();\n const wallets = store.getWallets();\n const foundWallet = wallets.find(wallet => wallet.getWalletId() === walletId);\n if (foundWallet) {\n return foundWallet;\n }\n return null;\n },\n\n getMyWallets: function() {\n const store = osparc.store.Store.getInstance();\n const wallets = store.getWallets();\n const myWallets = wallets.filter(wallet => wallet.getMyAccessRights()[\"write\"]);\n if (myWallets) {\n return myWallets;\n }\n return [];\n },\n\n getPaymentMethods: function(walletId) {\n return new Promise(resolve => {\n const promises = [];\n if (walletId) {\n const params = {\n url: {\n walletId\n }\n };\n promises.push(osparc.data.Resources.fetch(\"paymentMethods\", \"get\", params));\n } else {\n const myWallets = this.getMyWallets();\n myWallets.forEach(myWallet => {\n const params = {\n url: {\n walletId: myWallet.getWalletId()\n }\n };\n promises.push(osparc.data.Resources.fetch(\"paymentMethods\", \"get\", params));\n });\n }\n Promise.all(promises)\n .then(values => {\n let paymentMethods = [];\n values.forEach(value => paymentMethods = paymentMethods.concat(value));\n resolve(paymentMethods);\n });\n });\n },\n\n getPaymentMethod: function(paymentMethodId) {\n return new Promise(resolve => {\n this.getPaymentMethods()\n .then(paymentMethods => {\n const paymentMethodFound = paymentMethods.find(paymentMethod => paymentMethod[\"idr\"] === paymentMethodId);\n resolve(paymentMethodFound);\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.share.Collaborators\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n /**\n * @param serializedDataCopy {Object} Object containing the Serialized Data\n */\n construct: function(serializedDataCopy) {\n this.base(arguments);\n\n this._serializedDataCopy = serializedDataCopy;\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n this.set({\n padding: 5\n });\n\n this.__buildLayout();\n\n this._reloadCollaboratorsList();\n },\n\n events: {\n \"updateAccessRights\": \"qx.event.type.Data\"\n },\n\n statics: {\n sortByAccessRights: function(aAccessRights, bAccessRights) {\n if (aAccessRights[\"delete\"] !== bAccessRights[\"delete\"]) {\n return bAccessRights[\"delete\"] - aAccessRights[\"delete\"];\n }\n if (aAccessRights[\"write\"] !== bAccessRights[\"write\"]) {\n return bAccessRights[\"write\"] - aAccessRights[\"write\"];\n }\n if (aAccessRights[\"read\"] !== bAccessRights[\"read\"]) {\n return bAccessRights[\"read\"] - aAccessRights[\"read\"];\n }\n return 0;\n },\n\n sortStudyOrServiceCollabs: function(a, b) {\n const aAccessRights = a[\"accessRights\"];\n const bAccessRights = b[\"accessRights\"];\n let sorted = null;\n if (\"delete\" in aAccessRights) {\n // studies\n sorted = this.self().sortByAccessRights(aAccessRights, bAccessRights);\n } else if (\"execute\" in aAccessRights) {\n // services\n if (aAccessRights[\"write\"] !== bAccessRights[\"write\"]) {\n sorted = bAccessRights[\"write\"] - aAccessRights[\"write\"];\n } else if (aAccessRights[\"execute\"] !== bAccessRights[\"execute\"]) {\n sorted = bAccessRights[\"execute\"] - aAccessRights[\"execute\"];\n }\n }\n return sorted;\n },\n\n createStudyLinkSection: function(serializedData) {\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n const label = new qx.ui.basic.Label().set({\n value: qx.locale.Manager.tr(\"Any logged-in user with access to the \") + osparc.product.Utils.getStudyAlias() + qx.locale.Manager.tr(\" can open it\"),\n rich: true\n });\n vBox.add(label);\n\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n vBox.add(hBox, {\n flex: 1\n });\n\n const link = window.location.href + \"#/study/\" + serializedData[\"uuid\"];\n const linkField = new qx.ui.form.TextField(link);\n hBox.add(linkField, {\n flex: 1\n });\n\n const copyLinkBtn = new qx.ui.form.Button(qx.locale.Manager.tr(\"Copy link\"));\n copyLinkBtn.addListener(\"execute\", () => {\n if (osparc.utils.Utils.copyTextToClipboard(link)) {\n copyLinkBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n hBox.add(copyLinkBtn);\n\n return vBox;\n },\n\n createTemplateLinkSection: function(serializedData) {\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n if (\"permalink\" in serializedData) {\n const permalink = serializedData[\"permalink\"];\n\n const label = new qx.ui.basic.Label().set({\n rich: true\n });\n if (permalink[\"is_public\"]) {\n label.setValue(qx.locale.Manager.tr(\"Anyone on the internet with the link can open this \") + osparc.product.Utils.getTemplateAlias());\n } else {\n label.setValue(qx.locale.Manager.tr(\"Any logged-in user with the link can copy and open this \") + osparc.product.Utils.getTemplateAlias());\n }\n vBox.add(label);\n\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n vBox.add(hBox, {\n flex: 1\n });\n\n const link = permalink[\"url\"];\n const linkField = new qx.ui.form.TextField(link);\n hBox.add(linkField, {\n flex: 1\n });\n\n const copyLinkBtn = new qx.ui.form.Button(qx.locale.Manager.tr(\"Copy link\"));\n copyLinkBtn.addListener(\"execute\", () => {\n if (osparc.utils.Utils.copyTextToClipboard(link)) {\n copyLinkBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n hBox.add(copyLinkBtn);\n }\n\n return vBox;\n }\n },\n\n members: {\n _serializedDataCopy: null,\n _resourceType: null,\n __addCollaborators: null,\n __collaboratorsModel: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"add-collaborator\":\n control = this.__createAddCollaboratorSection();\n this._add(control);\n break;\n case \"collaborators-list\":\n control = this.__createCollaboratorsListSection();\n this._add(control, {\n flex: 1\n });\n break;\n case \"study-link\":\n control = this.self().createStudyLinkSection(this._serializedDataCopy);\n this._add(control);\n // excluded by default\n control.exclude();\n break;\n case \"template-link\":\n control = this.self().createTemplateLinkSection(this._serializedDataCopy);\n this._add(control);\n // excluded by default\n control.exclude();\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __canIShare: function() {\n if (this._resourceType === \"study\" && this._serializedDataCopy[\"workspaceId\"]) {\n // Access Rights are set at workspace level\n return false;\n }\n\n let canIShare = false;\n switch (this._resourceType) {\n case \"study\":\n case \"template\":\n canIShare = osparc.data.model.Study.canIWrite(this._serializedDataCopy[\"accessRights\"]);\n break;\n case \"service\":\n canIShare = osparc.service.Utils.canIWrite(this._serializedDataCopy[\"accessRights\"]);\n break;\n case \"workspace\":\n canIShare = osparc.share.CollaboratorsWorkspace.canIDelete(this._serializedDataCopy[\"myAccessRights\"]);\n break;\n case \"tag\":\n canIShare = osparc.share.CollaboratorsTag.canIWrite(this._serializedDataCopy[\"myAccessRights\"]);\n break;\n }\n return canIShare;\n },\n\n __canIChangePermissions: function() {\n if (this._resourceType === \"study\" && this._serializedDataCopy[\"workspaceId\"]) {\n // Access Rights are set at workspace level\n return false;\n }\n let fullOptions = false;\n switch (this._resourceType) {\n case \"study\":\n case \"template\":\n fullOptions = osparc.data.model.Study.canIDelete(this._serializedDataCopy[\"accessRights\"]);\n break;\n case \"service\":\n fullOptions = osparc.service.Utils.canIWrite(this._serializedDataCopy[\"accessRights\"]);\n break;\n case \"workspace\":\n fullOptions = osparc.share.CollaboratorsWorkspace.canIDelete(this._serializedDataCopy[\"myAccessRights\"]);\n break;\n case \"tag\":\n fullOptions = osparc.share.CollaboratorsTag.canIDelete(this._serializedDataCopy[\"myAccessRights\"]);\n break;\n }\n return fullOptions;\n },\n\n __createRolesLayout: function() {\n let rolesLayout = null;\n switch (this._resourceType) {\n case \"study\":\n case \"template\":\n rolesLayout = osparc.data.Roles.createRolesStudyInfo();\n break;\n case \"service\":\n rolesLayout = osparc.data.Roles.createRolesServicesInfo();\n break;\n case \"workspace\":\n rolesLayout = osparc.data.Roles.createRolesWorkspaceInfo();\n break;\n case \"tag\":\n rolesLayout = osparc.data.Roles.createRolesStudyInfo();\n break;\n }\n return rolesLayout;\n },\n\n __buildLayout: function() {\n if (this.__canIShare()) {\n this.__addCollaborators = this._createChildControlImpl(\"add-collaborator\");\n }\n this._createChildControlImpl(\"collaborators-list\");\n this._createChildControlImpl(\"study-link\");\n this._createChildControlImpl(\"template-link\");\n },\n\n __createAddCollaboratorSection: function() {\n const serializedDataCopy = osparc.utils.Utils.deepCloneObject(this._serializedDataCopy);\n // pass resourceType, so that, if it's a template testers can share it with product everyone\n serializedDataCopy[\"resourceType\"] = this._resourceType;\n const addCollaborators = new osparc.share.AddCollaborators(serializedDataCopy);\n addCollaborators.addListener(\"addCollaborators\", e => this._addEditors(e.getData()), this);\n return addCollaborators;\n },\n\n __createCollaboratorsListSection: function() {\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n const header = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n\n const label = new qx.ui.basic.Label(this.tr(\"Shared with\"));\n label.set({allowGrowX: true});\n header.add(label, {\n flex: 1\n });\n\n const rolesLayout = this.__createRolesLayout();\n const leaveButton = this.__getLeaveStudyButton();\n if (leaveButton) {\n rolesLayout.addAt(leaveButton, 0);\n }\n header.add(rolesLayout);\n vBox.add(header);\n\n const collaboratorsUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n width: 150,\n padding: 0\n });\n\n const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();\n const collaboratorsCtrl = new qx.data.controller.List(collaboratorsModel, collaboratorsUIList, \"name\");\n collaboratorsCtrl.setDelegate({\n createItem: () => new osparc.ui.list.CollaboratorListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"gid\", \"model\", null, item, id);\n ctrl.bindProperty(\"gid\", \"key\", null, item, id);\n ctrl.bindProperty(\"collabType\", \"collabType\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"label\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitleMD\", null, item, id);\n ctrl.bindProperty(\"resourceType\", \"resourceType\", null, item, id); // Resource type\n ctrl.bindProperty(\"accessRights\", \"accessRights\", null, item, id);\n ctrl.bindProperty(\"showOptions\", \"showOptions\", null, item, id);\n },\n configureItem: item => {\n item.getChildControl(\"thumbnail\").getContentElement()\n .setStyles({\n \"border-radius\": \"16px\"\n });\n item.addListener(\"promoteToEditor\", e => {\n const orgMember = e.getData();\n this._promoteToEditor(orgMember, item);\n });\n item.addListener(\"promoteToOwner\", e => {\n const orgMember = e.getData();\n this._promoteToOwner(orgMember, item);\n });\n item.addListener(\"demoteToUser\", e => {\n const orgMember = e.getData();\n this._demoteToUser(orgMember, item);\n });\n item.addListener(\"demoteToEditor\", e => {\n const orgMember = e.getData();\n this._demoteToEditor(orgMember, item);\n });\n item.addListener(\"removeMember\", e => {\n const orgMember = e.getData();\n this._deleteMember(orgMember, item);\n });\n }\n });\n vBox.add(collaboratorsUIList, {\n flex: 1\n });\n\n return vBox;\n },\n\n __getLeaveStudyButton: function() {\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n if (\n (this._resourceType === \"study\") &&\n // check if I'm part of the access rights (not through an organization)\n Object.keys(this._serializedDataCopy[\"accessRights\"]).includes(myGid.toString()) &&\n // check also user is not \"prjOwner\". Backend will silently not let the frontend remove that user.\n (this._serializedDataCopy[\"prjOwner\"] !== osparc.auth.Data.getInstance().getEmail())\n ) {\n const leaveText = this.tr(\"Leave\") + \" \" + osparc.product.Utils.getStudyAlias({\n firstUpperCase: true\n });\n const leaveButton = new qx.ui.form.Button(leaveText).set({\n allowGrowX: false,\n visibility: Object.keys(this._serializedDataCopy[\"accessRights\"]).includes(myGid.toString()) ? \"visible\" : \"excluded\"\n });\n leaveButton.addListener(\"execute\", () => {\n let msg = `\"${this._serializedDataCopy[\"name\"]}\" ` + this.tr(\"will no longer be listed.\");\n if (!osparc.share.CollaboratorsStudy.checkRemoveCollaborator(this._serializedDataCopy, myGid)) {\n msg += \"
\";\n msg += this.tr(\"If you remove yourself, there won't be any other Owners.\");\n }\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: leaveText,\n confirmText: this.tr(\"Leave\"),\n confirmAction: \"delete\"\n });\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n const collaborator = {\n gid: myGid,\n name: osparc.store.Groups.getInstance().getGroupMe().getLabel(),\n }\n this._deleteMember(collaborator)\n .then(() => {\n qx.event.message.Bus.dispatchByName(\"reloadStudies\");\n });\n }\n }, this);\n }, this);\n return leaveButton;\n }\n return null;\n },\n\n _reloadCollaboratorsList: async function() {\n // reload \"Share with...\" list\n if (this.__addCollaborators) {\n const serializedDataCopy = osparc.utils.Utils.deepCloneObject(this._serializedDataCopy);\n // pass resourceType, so that, if it's a template testers can share it with product everyone\n serializedDataCopy[\"resourceType\"] = this._resourceType;\n this.__addCollaborators.setSerializedData(serializedDataCopy);\n }\n\n // reload list\n this.__collaboratorsModel.removeAll();\n\n const groupsStore = osparc.store.Groups.getInstance();\n const everyoneGIds = [\n groupsStore.getEveryoneProductGroup().getGroupId(),\n groupsStore.getEveryoneGroup().getGroupId()\n ];\n const accessRights = this._serializedDataCopy[\"accessRights\"];\n const collaboratorsList = [];\n const showOptions = this.__canIChangePermissions();\n const allGroups = groupsStore.getAllGroups();\n const usersStore = osparc.store.Users.getInstance();\n for (let i=0; i
Please register using your university email address\");\n throw new qx.core.ValidationError(\"Validation Error\", errorMessage);\n }\n })\n }\n };\n },\n\n /** Finds parameters in the fragment\n *\n * Expected fragment format as https://osparc.io#page=reset-password;code=123546\n * where fragment is #page=reset-password;code=123546\n */\n findParameterInFragment: function(parameterName) {\n let result = null;\n const params = window.location.hash.substr(1).split(\";\");\n params.forEach(function(item) {\n const tmp = item.split(\"=\");\n if (tmp[0].includes(parameterName)) {\n result = decodeURIComponent(tmp[1]);\n }\n });\n return result;\n },\n\n removeParameterInFragment: function(parameterName) {\n let url = window.location.href;\n const value = osparc.auth.core.Utils.findParameterInFragment(parameterName);\n if (value) {\n const removeMe = parameterName + \"=\" + value;\n // In case the parameter has an ampersand in front\n url = url.replace(\";\" + removeMe, \"\");\n url = url.replace(removeMe, \"\");\n if (url.slice(-1) === \"#\") {\n // clean remaining character if all parameters were removed\n url = url.replace(\"#\", \"\");\n }\n window.history.replaceState(\"\", document.title, url);\n }\n },\n\n extractMessage: function(resp) {\n const defaultMessage = \"\";\n const retry = \"parameters\" in resp && \"message\" in resp[\"parameters\"] ? resp[\"parameters\"][\"message\"] : defaultMessage;\n return retry;\n },\n\n extractRetryAfter: function(resp) {\n const defaultRetry = 60;\n const retry = \"parameters\" in resp && \"expiration_2fa\" in resp[\"parameters\"] ? resp[\"parameters\"][\"expiration_2fa\"] : defaultRetry;\n return retry;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Singleton class for building Permission table and check doable operations.\n *\n * It implements HRBAC (Hierarchical Role Based Access Control) permission model.\n *\n * It is able to:\n * - add Actions to build a table of permissions\n * - load User's Role from the backend\n * - check whether a role can do a specific actions\n *\n * *Example*\n *\n * Here is a little example of how to use the class.\n *\n *
\n * osparc.data.Permissions.getInstance().canDo(\"study.start\", true)\n *\n */\n\nqx.Class.define(\"osparc.data.Permissions\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct() {\n const initPermissions = this.self().getInitPermissions();\n for (const role in initPermissions) {\n if (Object.prototype.hasOwnProperty.call(initPermissions, role)) {\n initPermissions[role].forEach(action => {\n this.addAction(role, action);\n }, this);\n }\n }\n },\n\n statics: {\n ACTIONS: {},\n\n ROLES_APP: {\n anonymous: {\n can: [],\n inherits: []\n },\n guest: {\n can: [],\n inherits: [\"anonymous\"]\n },\n user: {\n can: [],\n inherits: [\"guest\"]\n },\n tester: {\n can: [],\n inherits: [\"user\"]\n },\n \"product_owner\": {\n can: [],\n inherits: [\"tester\"]\n },\n admin: {\n can: [],\n inherits: [\"product_owner\"]\n }\n },\n\n getInitPermissions: function() {\n const initPermissions = {\n \"anonymous\": [],\n \"guest\": [\n \"studies.templates.read\",\n \"study.node.data.pull\",\n \"study.start\",\n \"study.stop\",\n \"study.update\"\n ],\n \"user\": [\n \"dashboard.read\",\n \"dashboard.templates.read\",\n \"dashboard.services.read\",\n \"dashboard.data.read\",\n \"studies.user.read\",\n \"studies.user.create\",\n \"studies.template.create\",\n \"studies.template.update\",\n \"studies.template.delete\",\n \"storage.datcore.read\",\n \"user.user.update\",\n \"user.apikey.create\",\n \"user.apikey.delete\",\n \"user.token.create\",\n \"user.token.delete\",\n \"user.tag\",\n \"user.organizations.create\",\n \"study.node.create\",\n \"study.node.delete\",\n \"study.node.update\",\n \"study.node.rename\",\n \"study.node.start\",\n \"study.node.data.push\",\n \"study.node.data.delete\",\n \"study.node.export\",\n \"study.node.bootOptions.read\",\n \"study.edge.create\",\n \"study.edge.delete\",\n \"study.classifier\",\n \"study.tag\",\n \"study.slides.edit\",\n \"study.slides.stop\",\n \"usage.all.read\"\n ],\n \"tester\": [\n \"studies.template.create.all\",\n \"studies.template.create.productAll\",\n \"services.all.read\",\n \"services.all.reupdate\",\n \"services.filePicker.read.all\",\n \"user.wallets.create\",\n \"study.everyone.share\",\n \"study.snapshot.read\",\n \"study.snapshot.create\",\n \"study.nodestree.uuid.read\",\n \"study.filestree.uuid.read\",\n \"study.logger.debug.read\",\n ],\n \"product_owner\": [\n \"user.invitation.generate\",\n \"user.users.search\",\n \"user.users.pre-register\"\n ],\n \"admin\": []\n };\n let fromUserToTester = [];\n if (osparc.product.Utils.isProduct(\"tis\") || osparc.product.Utils.isProduct(\"tiplite\")) {\n // \"templates\" and \"services\" tabs only for testers\n // start/stop/edit app mode only for testers\n fromUserToTester = [\n \"dashboard.templates.read\",\n \"dashboard.services.read\",\n \"study.node.bootOptions.read\",\n \"study.slides.edit\",\n \"study.slides.stop\"\n ];\n } else if (osparc.product.Utils.isProduct(\"s4llite\")) {\n // \"services\" tabs only for testers\n fromUserToTester = [\n \"dashboard.services.read\"\n ];\n }\n fromUserToTester.forEach(onlyTester => {\n const idx = initPermissions.user.indexOf(onlyTester);\n if (idx > -1) {\n initPermissions.user.splice(idx, 1);\n }\n initPermissions.tester.push(onlyTester);\n });\n return initPermissions;\n }\n },\n\n properties: {\n role: {\n check: [\"anonymous\", \"guest\", \"user\", \"tester\", \"product_owner\", \"admin\"],\n init: null,\n nullable: false,\n event: \"changeRole\"\n }\n },\n\n members: {\n arePermissionsReady() {\n return this.getRole() !== null;\n },\n\n getChildrenRoles(role) {\n role = role.toLowerCase();\n const childrenRoles = [];\n if (!this.self().ROLES_APP[role]) {\n return childrenRoles;\n }\n if (!childrenRoles.includes(role)) {\n childrenRoles.unshift(role);\n }\n const children = this.self().ROLES_APP[role].inherits;\n for (let i=0; i
\n * var container = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n * container.add(new qx.ui.core.Widget());\n * container.add(new qx.ui.core.Spacer(50));\n * container.add(new qx.ui.core.Widget());\n *\n *\n * This example places two widgets and a spacer into a container with a\n * horizontal box layout. In this scenario the spacer creates an empty area of\n * 50 pixel width between the two widgets.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.core.Spacer\",\n{\n extend : qx.ui.core.LayoutItem,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param width {Integer?null} the initial width\n * @param height {Integer?null} the initial height\n */\n construct : function(width, height)\n {\n this.base(arguments);\n\n // Initialize dimensions\n this.setWidth(width != null ? width : 0);\n this.setHeight(height != null ? height : 0);\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /**\n * Helper method called from the visibility queue to detect outstanding changes\n * to the appearance.\n *\n * @internal\n */\n checkAppearanceNeeds : function() {\n // placeholder to improve compatibility with Widget.\n },\n\n\n /**\n * Recursively adds all children to the given queue\n *\n * @param queue {Map} The queue to add widgets to\n */\n addChildrenToQueue : function(queue) {\n // placeholder to improve compatibility with Widget.\n },\n\n\n /**\n * Removes this widget from its parent and dispose it.\n *\n * Please note that the widget is not disposed synchronously. The\n * real dispose happens after the next queue flush.\n *\n */\n destroy : function()\n {\n if (this.$$disposed) {\n return;\n }\n\n var parent = this.$$parent;\n if (parent) {\n parent._remove(this);\n }\n\n qx.ui.core.queue.Dispose.add(this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * App/theme dependant logo\n */\nqx.Class.define(\"osparc.ui.basic.Logo\", {\n extend: qx.ui.basic.Image,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n scale: true,\n alignX: \"center\",\n padding: 3\n });\n\n this.__resetSourcePath();\n\n osparc.utils.Utils.setAltToImage(this, \"product-logo\");\n\n const themeManager = qx.theme.manager.Meta.getInstance();\n themeManager.addListener(\"changeTheme\", () => this.__resetSourcePath(), this);\n\n osparc.WindowSizeTracker.getInstance().addListener(\"changeCompactVersion\", () => this.__resetSourcePath(), this);\n },\n\n statics: {\n getHeightKeepingAspectRatio: function(logoPath, width) {\n const imgHeight = qx.util.ResourceManager.getInstance().getImageHeight(logoPath);\n const imgWidth = qx.util.ResourceManager.getInstance().getImageWidth(logoPath);\n const aspectRatio = imgWidth/imgHeight;\n return parseInt(width/aspectRatio);\n }\n },\n\n members: {\n __resetSourcePath: function() {\n const long = !osparc.WindowSizeTracker.getInstance().isCompactVersion();\n const sourcePath = osparc.product.Utils.getLogoPath(long);\n this.set({\n source: sourcePath\n });\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Generic window to prompt the user with useful information. Provides functions to add buttons.\n * extends\n */\nqx.Class.define(\"osparc.ui.window.Dialog\", {\n extend: osparc.ui.window.Window,\n /**\n * Constructor takes the same parameters as the Qooxdoo window widget, only adding a message that will\n * be displayed to the user.\n * @extends osparc.ui.window.Window\n * @param {String} message Message that will be displayed to the user.\n */\n construct: function(caption, icon, message) {\n this.base(arguments, caption, icon);\n\n this.set({\n autoDestroy: true,\n layout: new qx.ui.layout.VBox(15),\n showMinimize: false,\n showMaximize: false,\n contentPadding: 15,\n maxWidth: 350,\n resizable: false,\n modal: true\n });\n\n this.__buildLayout();\n if (message) {\n this.setMessage(message);\n }\n this.center();\n },\n\n properties: {\n message: {\n check: \"String\",\n apply: \"_applyMessage\"\n }\n },\n\n members: {\n __messageLabel: null,\n __extraWidgetsLayout: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\"\n }));\n this.add(control);\n break;\n case \"cancel-button\": {\n const btnsLayout = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n btnsLayout.addAt(control, 0);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.__messageLabel = new qx.ui.basic.Label().set({\n font: \"text-14\",\n selectable: true,\n rich: true\n });\n this.add(this.__messageLabel, {\n flex: 1\n });\n\n this.__extraWidgetsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({\n paddingTop: 10\n });\n this.__extraWidgetsLayout.exclude();\n this.add(this.__extraWidgetsLayout, {\n flex: 1\n });\n\n this.getChildControl(\"buttons-layout\");\n },\n\n _applyMessage: function(message) {\n this.__messageLabel.setValue(message);\n },\n\n addWidget: function(widget) {\n this.__extraWidgetsLayout.show();\n this.__extraWidgetsLayout.add(widget);\n },\n\n getExtraWidgetsLayout: function() {\n return this.__extraWidgetsLayout;\n },\n\n /**\n * Adds a button to the dialog.\n * @param {qx.ui.form.Button} button Button that will be added to the bottom bar of the dialog.\n */\n addButton: function(button) {\n const btnToolbar = this.getChildControl(\"buttons-layout\");\n button.set({\n appearance: \"form-button\"\n });\n btnToolbar.addAt(button, 1);\n },\n\n /**\n * Adds a default cancel button to the dialog.\n */\n addCancelButton: function() {\n const cancelButton = this.getChildControl(\"cancel-button\");\n cancelButton.set({\n center: true,\n minWidth: 100\n });\n cancelButton.addListener(\"execute\", () => this.close(), this);\n return cancelButton;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Jonathan Weiß (jonathan_rass)\n * Tristan Koch (tristankoch)\n\n************************************************************************ */\n\n/**\n * The TextField is a multi-line text input field.\n */\nqx.Class.define(\"qx.ui.form.TextArea\",\n{\n extend : qx.ui.form.AbstractField,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param value {String?\"\"} The text area's initial value\n */\n construct : function(value)\n {\n this.base(arguments, value);\n this.initWrap();\n\n this.addListener(\"roll\", this._onRoll, this);\n this.addListener(\"resize\", this._onResize, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** Controls whether text wrap is activated or not. */\n wrap :\n {\n check : \"Boolean\",\n init : true,\n apply : \"_applyWrap\"\n },\n\n // overridden\n appearance :\n {\n refine : true,\n init : \"textarea\"\n },\n\n /** Factor for scrolling the
TextArea with the mouse wheel. */\n singleStep :\n {\n check : \"Integer\",\n init : 20\n },\n\n /** Minimal line height. On default this is set to four lines. */\n minimalLineHeight :\n {\n check : \"Integer\",\n apply : \"_applyMinimalLineHeight\",\n init : 4\n },\n\n /**\n * Whether the TextArea should automatically adjust to\n * the height of the content.\n *\n * To set the initial height, modify {@link #minHeight}. If you wish\n * to set a minHeight below four lines of text, also set\n * {@link #minimalLineHeight}. In order to limit growing to a certain\n * height, set {@link #maxHeight} respectively. Please note that\n * autoSize is ignored when the {@link #height} property is in use.\n */\n autoSize :\n {\n check : \"Boolean\",\n apply : \"_applyAutoSize\",\n init : false\n }\n\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __areaClone : null,\n __areaHeight : null,\n __originalAreaHeight : null,\n\n // overridden\n setValue : function(value)\n {\n value = this.base(arguments, value);\n this.__autoSize();\n\n return value;\n },\n\n /**\n * Handles the roll for scrolling the TextArea.\n *\n * @param e {qx.event.type.Roll} roll event.\n */\n _onRoll : function(e) {\n // only wheel\n if (e.getPointerType() != \"wheel\") {\n return;\n }\n var contentElement = this.getContentElement();\n var scrollY = contentElement.getScrollY();\n\n contentElement.scrollToY(scrollY + (e.getDelta().y / 30) * this.getSingleStep());\n\n var newScrollY = contentElement.getScrollY();\n\n if (newScrollY != scrollY) {\n e.stop();\n }\n },\n\t\n\t\n /**\n * When the element resizes we throw away the clone and trigger autosize again, otherwise the clone would have\n * another width and the autosize calculation would be faulty.\n * \n * @param e {qx.event.type.Data} resize event.\n */\n _onResize : function(e) {\n if (this.__areaClone) {\n this.__areaClone.dispose();\n this.__areaClone = null;\n this.__autoSize();\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n AUTO SIZE\n ---------------------------------------------------------------------------\n */\n\n /**\n * Adjust height of TextArea so that content fits without scroll bar.\n *\n */\n __autoSize: function() {\n if (this.isAutoSize()) {\n var clone = this.__getAreaClone();\n\n if (clone && this.getBounds()) {\n\n // Remember original area height\n this.__originalAreaHeight = this.__originalAreaHeight || this._getAreaHeight();\n\n var scrolledHeight = this._getScrolledAreaHeight();\n\n // Show scroll-bar when above maxHeight, if defined\n if (this.getMaxHeight()) {\n var insets = this.getInsets();\n var innerMaxHeight = -insets.top + this.getMaxHeight() - insets.bottom;\n if (scrolledHeight > innerMaxHeight) {\n this.getContentElement().setStyle(\"overflowY\", \"auto\");\n } else {\n this.getContentElement().setStyle(\"overflowY\", \"hidden\");\n }\n }\n\n // Never shrink below original area height\n var desiredHeight = Math.max(scrolledHeight, this.__originalAreaHeight);\n\n // Set new height\n this._setAreaHeight(desiredHeight);\n\n // On init, the clone is not yet present. Try again on appear.\n } else {\n this.getContentElement().addListenerOnce(\"appear\", function() {\n this.__autoSize();\n }, this);\n }\n }\n },\n\n /**\n * Get actual height of TextArea\n *\n * @return {Integer} Height of TextArea\n */\n _getAreaHeight: function() {\n return this.getInnerSize().height;\n },\n\n /**\n * Set actual height of TextArea\n *\n * @param height {Integer} Desired height of TextArea\n */\n _setAreaHeight: function(height) {\n if (this._getAreaHeight() !== height) {\n this.__areaHeight = height;\n\n qx.ui.core.queue.Layout.add(this);\n\n // Apply height directly. This works-around a visual glitch in WebKit\n // browsers where a line-break causes the text to be moved upwards\n // for one line. Since this change appears instantly whereas the queue\n // is computed later, a flicker is visible.\n qx.ui.core.queue.Manager.flush();\n\n this.__forceRewrap();\n }\n },\n\n /**\n * Get scrolled area height. Equals the total height of the TextArea,\n * as if no scroll-bar was visible.\n *\n * @return {Integer} Height of scrolled area\n */\n _getScrolledAreaHeight: function() {\n var clone = this.__getAreaClone();\n var cloneDom = clone.getDomElement();\n\n if (cloneDom) {\n\n // Clone created but not yet in DOM. Try again.\n if (!cloneDom.parentNode) {\n qx.html.Element.flush();\n return this._getScrolledAreaHeight();\n }\n\n // In WebKit and IE8, \"wrap\" must have been \"soft\" on DOM level before setting\n // \"off\" can disable wrapping. To fix, make sure wrap is toggled.\n // Otherwise, the height of an auto-size text area with wrapping\n // disabled initially is incorrectly computed as if wrapping was enabled.\n if (qx.core.Environment.get(\"engine.name\") === \"webkit\" ||\n (qx.core.Environment.get(\"engine.name\") == \"mshtml\")) {\n clone.setWrap(!this.getWrap(), true);\n }\n\n clone.setWrap(this.getWrap(), true);\n\n // Webkit needs overflow \"hidden\" in order to correctly compute height\n if (qx.core.Environment.get(\"engine.name\") === \"webkit\" ||\n (qx.core.Environment.get(\"engine.name\") == \"mshtml\")) {\n cloneDom.style.overflow = \"hidden\";\n }\n\n // IE >= 8 needs overflow \"visible\" in order to correctly compute height\n if (qx.core.Environment.get(\"engine.name\") == \"mshtml\" &&\n qx.core.Environment.get(\"browser.documentmode\") >= 8) {\n cloneDom.style.overflow = \"visible\";\n cloneDom.style.overflowX = \"hidden\";\n }\n\n // Update value\n clone.setValue(this.getValue() || \"\");\n\n // Force IE > 8 to update size measurements\n if (qx.core.Environment.get(\"engine.name\") == \"mshtml\") {\n cloneDom.style.height = \"auto\";\n qx.html.Element.flush();\n cloneDom.style.height = \"0\";\n }\n\n // Recompute\n this.__scrollCloneToBottom(clone);\n\n if (qx.core.Environment.get(\"engine.name\") == \"mshtml\" &&\n qx.core.Environment.get(\"browser.documentmode\") == 8) {\n // Flush required for scrollTop to return correct value\n // when initial value should be taken into consideration\n if (!cloneDom.scrollTop) {\n qx.html.Element.flush();\n }\n }\n\n return cloneDom.scrollTop;\n }\n },\n\n /**\n * Returns the area clone.\n *\n * @return {Element|null} DOM Element or null if there is no\n * original element\n */\n __getAreaClone: function() {\n this.__areaClone = this.__areaClone || this.__createAreaClone();\n return this.__areaClone;\n },\n\n /**\n * Creates and prepares the area clone.\n *\n * @return {Element} Element\n */\n __createAreaClone: function() {\n var orig,\n clone,\n cloneDom,\n cloneHtml;\n\n orig = this.getContentElement();\n\n // An existing DOM element is required\n if (!orig.getDomElement()) {\n return null;\n }\n\n // Create DOM clone\n cloneDom = qx.bom.Element.clone(orig.getDomElement());\n\n // Convert to qx.html Element\n cloneHtml = new qx.html.Input(\"textarea\");\n cloneHtml.useElement(cloneDom);\n clone = cloneHtml;\n\n // Push out of view\n // Zero height (i.e. scrolled area equals height)\n clone.setStyles({\n position: \"absolute\",\n top: 0,\n left: \"-9999px\",\n height: 0,\n overflow: \"hidden\"\n }, true);\n\n // Fix attributes\n clone.removeAttribute('id');\n clone.removeAttribute('name');\n clone.setAttribute(\"tabIndex\", \"-1\");\n\n // Copy value\n clone.setValue(orig.getValue() || \"\");\n\n // Attach to DOM\n clone.insertBefore(orig);\n\n // Make sure scrollTop is actual height\n this.__scrollCloneToBottom(clone);\n\n return clone;\n },\n\n /**\n * Scroll TextArea to bottom. That way, scrollTop reflects the height\n * of the TextArea.\n *\n * @param clone {Element} The TextArea to scroll\n */\n __scrollCloneToBottom: function(clone) {\n clone = clone.getDomElement();\n if (clone) {\n clone.scrollTop = 10000;\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n FIELD API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createInputElement : function()\n {\n return new qx.html.Input(\"textarea\", {\n overflowX: \"auto\",\n overflowY: \"auto\"\n });\n },\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyWrap : function(value, old) {\n this.getContentElement().setWrap(value);\n if (this._placeholder) {\n var whiteSpace = value ? \"normal\" : \"nowrap\";\n this._placeholder.setStyle(\"whiteSpace\", whiteSpace);\n }\n this.__autoSize();\n },\n\n // property apply\n _applyMinimalLineHeight : function() {\n qx.ui.core.queue.Layout.add(this);\n },\n\n // property apply\n _applyAutoSize: function(value, old) {\n if (qx.core.Environment.get(\"qx.debug\")) {\n this.__warnAutoSizeAndHeight();\n }\n\n if (value) {\n this.__autoSize();\n this.addListener(\"input\", this.__autoSize, this);\n\n // This is done asynchronously on purpose. The style given would\n // otherwise be overridden by the DOM changes queued in the\n // property apply for wrap. See [BUG #4493] for more details.\n if (!this.getBounds()) {\n this.addListenerOnce(\"appear\", function() {\n this.getContentElement().setStyle(\"overflowY\", \"hidden\");\n });\n } else {\n this.getContentElement().setStyle(\"overflowY\", \"hidden\");\n }\n\n } else {\n this.removeListener(\"input\", this.__autoSize);\n this.getContentElement().setStyle(\"overflowY\", \"auto\");\n }\n },\n\n\n // property apply\n _applyDimension : function(value) {\n this.base(arguments);\n\n if (qx.core.Environment.get(\"qx.debug\")) {\n this.__warnAutoSizeAndHeight();\n }\n\n if (value === this.getMaxHeight()) {\n this.__autoSize();\n }\n },\n\n /**\n * Force rewrapping of text.\n *\n * The distribution of characters depends on the space available.\n * Unfortunately, browsers do not reliably (or not at all) rewrap text when\n * the size of the text area changes.\n *\n * This method is called on change of the area's size.\n */\n __forceRewrap : function() {\n var content = this.getContentElement();\n var element = content.getDomElement();\n\n // Temporarily increase width\n var width = content.getStyle(\"width\");\n content.setStyle(\"width\", parseInt(width, 10) + 1000 + \"px\", true);\n\n // Force browser to render\n if (element) {\n qx.bom.element.Dimension.getWidth(element);\n }\n\n // Restore width\n content.setStyle(\"width\", width, true);\n },\n\n /**\n * Warn when both autoSize and height property are set.\n *\n */\n __warnAutoSizeAndHeight: function() {\n if (this.isAutoSize() && this.getHeight()) {\n this.warn(\"autoSize is ignored when the height property is set. \" +\n \"If you want to set an initial height, use the minHeight \" +\n \"property instead.\");\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n LAYOUT\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _getContentHint : function()\n {\n var hint = this.base(arguments);\n\n // lines of text\n hint.height = hint.height * this.getMinimalLineHeight();\n\n // 20 character wide\n hint.width = this._getTextSize().width * 20;\n\n if (this.isAutoSize()) {\n hint.height = this.__areaHeight || hint.height;\n }\n\n return hint;\n }\n },\n\n\n destruct : function() {\n this.setAutoSize(false);\n if (this.__areaClone) {\n this.__areaClone.dispose();\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A Qooxdoo generated form using JSONSchema specification.\n *\n * @asset(object-path/object-path-0-11-4.min.js)\n * @asset(ajv/ajv-6-11-0.min.js)\n * @ignore(Ajv)\n * @ignore(objectPath)\n * @ignore(fetch)\n */\nqx.Class.define(\"osparc.form.json.JsonSchemaForm\", {\n extend: qx.ui.core.Widget,\n construct: function(schemaUrl, data) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.VBox());\n const ajvLoader = new qx.util.DynamicScriptLoader([\n \"/resource/ajv/ajv-6-11-0.min.js\",\n \"/resource/object-path/object-path-0-11-4.min.js\"\n ]);\n ajvLoader.addListener(\"ready\", e => {\n this.__ajv = new Ajv();\n if (schemaUrl) {\n osparc.utils.Utils.fetchJSON(schemaUrl)\n .then(schema => {\n if (this.__validate(schema.$schema, schema)) {\n // If schema is valid\n this.__schema = schema;\n if (data && this.__validate(this.__schema, data)) {\n // Data is valid\n this.__data = data;\n }\n return this.__schema;\n }\n return null;\n })\n .then(this.__render)\n .catch(err => {\n console.error(err);\n });\n }\n if (data) {\n this.setData(data);\n }\n this.fireEvent(\"ajvReady\");\n }, this);\n ajvLoader.addListener(\"failed\", console.error, this);\n this.__render = this.__render.bind(this);\n ajvLoader.start();\n },\n events: {\n \"ready\": \"qx.event.type.Event\",\n \"ajvReady\": \"qx.event.type.Event\",\n \"submit\": \"qx.event.type.Data\"\n },\n members: {\n __inputItems: null,\n __data: null,\n __validationManager: null,\n /**\n * Main function to render a form. It uses the data to prefill the form if it is present.\n *\n * @param {Object} schema JSONSchema used for this form\n */\n __render: function(schema) {\n this._removeAll();\n if (schema) {\n // Render function\n this.__inputItems = [];\n this.__validationManager = new qx.ui.form.validation.Manager();\n this._add(this.__expand(null, schema, this.__data));\n // Buttons\n const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n this.__submitBtn = new osparc.ui.form.FetchButton(this.tr(\"Submit\"));\n this.__submitBtn.addListener(\"execute\", () => {\n if (this.__isValidData()) {\n const formData = this.toObject(schema);\n if (this.__validate(schema, formData.json)) {\n this.fireDataEvent(\"submit\", formData);\n }\n }\n }, this);\n buttonContainer.add(this.__submitBtn);\n this._add(buttonContainer);\n } else {\n // Validation failed\n this._add(new qx.ui.basic.Label().set({\n value: this.tr(\"There was an error generating the form or one or more schemas failed to validate. Check your Javascript console for more details.\"),\n font: \"title-16\",\n textColor: \"service-window-hint\",\n rich: true,\n backgroundColor: \"material-button-background\",\n padding: 10,\n textAlign: \"center\"\n }));\n }\n this.fireEvent(\"ready\");\n },\n /**\n * Uses Ajv library to validate data against a schema.\n *\n * @param {Object} schema JSONSchema to validate against\n * @param {Object} data Data to be validated\n * @param {Boolean} showMessage Determines whether an error message is displayed to the user\n */\n __validate: function(schema, data, showMessage=true) {\n this.__ajv.validate(schema, data);\n const errors = this.__ajv.errors;\n if (errors) {\n console.error(errors);\n if (showMessage) {\n let message = `${errors[0].dataPath} ${errors[0].message}`;\n osparc.FlashMessenger.logAs(message, \"ERROR\");\n }\n return false;\n }\n return true;\n },\n /**\n * Function in charge of recursively building the form.\n *\n * @param {String} key Key of the entry in the schema. == null -> root / == -1 -> array item\n * @param {Object} schema Current schema being expanded.\n * @param {Integer} depth Increases as we go deeper into the schema.\n */\n __expand: function(key, schema, data, depth=0, validation) {\n const isArrayItem = key === -1;\n const container = new osparc.form.json.JsonSchemaFormItem(key, schema, depth);\n if (schema.type === \"object\" && schema.properties) {\n // Expanding object's properties\n container.add(this.__expandObject(schema, data, depth, isArrayItem));\n } else if (schema.type === \"array\") {\n // Arrays allow to create new items with a button\n const arrayContainer = this.__expandArray(schema, data, depth);\n container.add(arrayContainer);\n const addButton = new qx.ui.form.Button(`Add ${objectPath.get(schema, \"items.title\", schema.title || key)}`, \"@FontAwesome5Solid/plus-circle/14\");\n addButton.addListener(\"execute\", () => {\n // key = -1 for an array item. we let JsonSchemaFormArray manage the array keys\n arrayContainer.add(this.__expand(-1, schema.items, null, depth+1));\n }, this);\n container.getHeader().add(addButton);\n } else {\n // Leaf\n const input = container.addInput(validation, this.__validationManager);\n if (data) {\n const isNumber = [\"number\", \"integer\"].includes(schema.type);\n input.setValue(isNumber ? String(data) : data);\n }\n this.__inputItems.push(container);\n }\n return container;\n },\n /**\n * Function that expands an array if any data was provided.\n *\n * @param {Object} schema Schema for the array.\n * @param {Object} data Array's given data.\n * @param {Integer} depth Current depth into the schema (could be used for styling purposes).\n */\n __expandArray: function(schema, data, depth) {\n const container = new osparc.form.json.JsonSchemaFormArray();\n // Add array items\n if (data) {\n data.forEach(item => container.add(this.__expand(-1, schema.items, item, depth+1)));\n }\n return container;\n },\n /**\n * Expands an object property changing its style depending on certain parameters.\n *\n * @param {Object} schema Object's schema to be expanded.\n * @param {Integer} depth Current depth into the schema.\n * @param {Boolean} isArrayItem Used for different styling.\n */\n __expandObject: function(schema, data, depth, isArrayItem) {\n const container = new qx.ui.container.Composite();\n const layoutOptions = {};\n if (isArrayItem) {\n container.setLayout(new qx.ui.layout.Flow(10));\n layoutOptions.flex = 1;\n } else {\n container.setLayout(new qx.ui.layout.VBox());\n }\n Object.entries(schema.properties).forEach(([key, value], index) => {\n // const allProps = Object.values(schema.properties);\n // const nextProp = index < allProps.length - 1 ? allProps[index+1] : null;\n container.add(this.__expand(key, value, data ? data[key] : data, depth+1, {\n required: schema.required && schema.required.includes(key)\n }), {\n // \"lineBreak\" and \"stretch\" are not VBox's properties\n // lineBreak: nextProp && nextProp.type === \"array\" || value.type === \"array\",\n // stretch: value.type === \"array\"\n });\n });\n return container;\n },\n /**\n * Uses objectPath library to construct a JS object with the values from the inputs.\n */\n toObject: function(schema) {\n const obj = {\n json: schema.type === \"array\" ? [] : {}\n };\n const inputMap = {};\n // Retrieve paths\n this.__inputItems.forEach(item => {\n const path = item.getPath();\n if (!path.includes(\"orphan.osparc.form\")) {\n // Don't add orphans (from deleted array items)\n inputMap[path] = item;\n }\n });\n // Clean orphans\n this.__inputItems = this.__inputItems.filter(item => Object.values(inputMap).includes(item));\n // Construct object\n Object.entries(inputMap).forEach(([path, item]) => {\n const input = item.getInput();\n const type = item.getType();\n if (input instanceof osparc.ui.form.FileInput) {\n obj.files = obj.files || [];\n if (input.getFile()) {\n obj.files.push(input.getFile());\n }\n }\n const value = input.getValue();\n if (typeof value !== \"undefined\" && value !== null) {\n const isNumber = [\"number\", \"integer\"].includes(type);\n objectPath.set(obj.json, path, isNumber ? Number(input.getValue()) : input.getValue());\n }\n });\n return obj;\n },\n /**\n * Function that returns an appropriate widget fot the given type.\n *\n * @param {String} type Type of the input that will be used to determine the render behavior\n */\n __getInput: function(type) {\n let input;\n switch (type) {\n default:\n input = new qx.ui.form.TextField();\n }\n return input;\n },\n /**\n * Function for setting the fetching state of the submit button.\n */\n setFetching: function(isFetching) {\n this.__submitBtn.setFetching(isFetching);\n },\n /**\n * Validates fields' data and returns the result.\n */\n __isValidData: function() {\n // Clean garbage from validator (deleted inputs)\n const validatedItems = this.__validationManager.getItems();\n validatedItems.forEach(item => {\n if (!this.getContentElement().getDomElement().contains(item.getContentElement().getDomElement())) {\n this.__validationManager.remove(item);\n }\n });\n return this.__validationManager.validate();\n },\n setSchema: function(schema) {\n if (this.__validate(schema.$schema, schema)) {\n // If schema is valid\n this.__schema = schema;\n if (this.__data && !this.__validate(this.__schema, this.__data)) {\n // Data is invalid\n this.__data = null;\n }\n } else {\n this.__schema = null;\n }\n this.__render(this.__schema);\n },\n setData: function(data) {\n if (data && this.__validate(this.__schema, data)) {\n // Data is valid\n this.__data = data;\n this.__render(this.__schema);\n return;\n }\n if (this.__validate(this.__schema, this.__data)) {\n this.__render(this.__schema);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Container, which allows vertical and horizontal scrolling if the contents is\n * larger than the container.\n *\n * Note that this class can only have one child widget. This container has a\n * fixed layout, which cannot be changed.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * // create scroll container\n * var scroll = new qx.ui.container.Scroll().set({\n * width: 300,\n * height: 200\n * });\n *\n * // add a widget which is larger than the container\n * scroll.add(new qx.ui.core.Widget().set({\n * width: 600,\n * minWidth: 600,\n * height: 400,\n * minHeight: 400\n * }));\n *\n * this.getRoot().add(scroll);\n * \n *\n * This example creates a scroll container and adds a widget, which is larger\n * than the container. This will cause the container to display vertical\n * and horizontal toolbars.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.container.Scroll\",\n{\n extend : qx.ui.core.scroll.AbstractScrollArea,\n include : [qx.ui.core.MContentPadding],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param content {qx.ui.core.LayoutItem?null} The content widget of the scroll\n * container.\n */\n construct : function(content)\n {\n this.base(arguments);\n\n if (content) {\n this.add(content);\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /**\n * Sets the content of the scroll container. Scroll containers\n * may only have one child, so it always replaces the current\n * child with the given one.\n *\n * @param widget {qx.ui.core.Widget} Widget to insert\n */\n add : function(widget) {\n this.getChildControl(\"pane\").add(widget);\n },\n\n\n /**\n * Returns the content of the scroll area.\n *\n * @param widget {qx.ui.core.Widget} Widget to remove\n */\n remove : function(widget) {\n this.getChildControl(\"pane\").remove(widget);\n },\n\n\n /**\n * Returns the content of the scroll container.\n *\n * Scroll containers may only have one child. This\n * method returns an array containing the child or an empty array.\n *\n * @return {Object[]} The child array\n */\n getChildren : function() {\n return this.getChildControl(\"pane\").getChildren();\n },\n\n\n /**\n * Returns the element, to which the content padding should be applied.\n *\n * @return {qx.ui.core.Widget} The content padding target.\n */\n _getContentPaddingTarget : function() {\n return this.getChildControl(\"pane\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(osparc/ui_config.json\")\n * @asset(schemas/product-ui.json)\n * @asset(object-path/object-path-0-11-4.min.js)\n * @asset(ajv/ajv-6-11-0.min.js)\n * @ignore(Ajv)\n */\n\nqx.Class.define(\"osparc.store.Products\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n members: {\n __uiConfig: null,\n\n fetchUiConfig: function() {\n return new Promise(resolve => {\n if (osparc.auth.Data.getInstance().isGuest()) {\n this.__uiConfig = {};\n resolve(this.__uiConfig);\n }\n\n Promise.all([\n osparc.data.Resources.fetch(\"productMetadata\", \"getUiConfig\"),\n osparc.utils.Utils.fetchJSON(\"/resource/osparc/ui_config.json\"),\n osparc.utils.Utils.fetchJSON(\"/resource/schemas/product-ui.json\"),\n ])\n .then(values => {\n let uiConfig = {};\n const beUiConfig = values[0];\n const feUiConfig = values[1];\n const schema = values[2];\n if (beUiConfig && beUiConfig[\"ui\"] && Object.keys(beUiConfig[\"ui\"]).length) {\n uiConfig = beUiConfig[\"ui\"];\n } else {\n const product = osparc.product.Utils.getProductName();\n if (feUiConfig && product in feUiConfig) {\n uiConfig = feUiConfig[product];\n }\n }\n const ajvLoader = new qx.util.DynamicScriptLoader([\n \"/resource/ajv/ajv-6-11-0.min.js\",\n \"/resource/object-path/object-path-0-11-4.min.js\"\n ]);\n ajvLoader.addListener(\"ready\", () => {\n const ajv = new Ajv({\n allErrors: true,\n strictDefaults: true,\n useDefaults: true,\n strictTypes: true,\n });\n const validate = ajv.compile(schema);\n const valid = validate(uiConfig);\n if (valid) {\n this.__uiConfig = uiConfig;\n resolve(this.__uiConfig);\n } else {\n osparc.FlashMessenger.getInstance().logAs(\"Wrong product.ui config\", \"ERROR\");\n validate.errors.forEach(err => {\n console.error(`Error at ${err.dataPath}: ${err.message}`);\n });\n }\n });\n ajvLoader.addListener(\"failed\", console.error, this);\n ajvLoader.start();\n })\n .catch(console.error);\n });\n },\n\n getPlusButtonUiConfig: function() {\n return this.__uiConfig[\"plusButton\"];\n },\n\n getNewStudiesUiConfig: function() {\n return this.__uiConfig[\"newStudies\"];\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for studies\n */\n\nqx.Class.define(\"osparc.utils.DisabledPlugins\", {\n type: \"static\",\n\n statics: {\n EXPORT: \"WEBSERVER_EXPORTER\",\n IMPORT: \"WEBSERVER_EXPORTER\",\n SCICRUNCH: \"WEBSERVER_SCICRUNCH\",\n VERSION_CONTROL: \"WEBSERVER_VERSION_CONTROL\",\n META_MODELING: \"WEBSERVER_META_MODELING\",\n LICENSES: \"WEBSERVER_LICENSES\",\n\n isExportDisabled: function() {\n return this.__isPluginDisabled(this.EXPORT);\n },\n\n isImportDisabled: function() {\n // Import is disabled until an Export (full not cMIS only) function is implemented\n return true;\n // return this.__isPluginDisabled(this.EXPORT);\n },\n\n isVersionControlDisabled: function() {\n return this.__isPluginDisabled(this.VERSION_CONTROL);\n },\n\n isMetaModelingDisabled: function() {\n return this.__isPluginDisabled(this.META_MODELING);\n },\n\n isLicensesDisabled: function() {\n return this.__isPluginDisabled(this.LICENSES);\n },\n\n __isPluginDisabled: function(key) {\n const statics = osparc.store.Store.getInstance().get(\"statics\");\n if (statics) {\n if (\"pluginsDisabled\" in statics) {\n return statics[\"pluginsDisabled\"].includes(key);\n }\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.AppSummary\", {\n type: \"static\",\n\n statics: {\n getLatestUIFromBE: async function() {\n const params = {\n url: {\n productName: osparc.product.Utils.getProductName()\n }\n };\n const appSummary = await osparc.data.Resources.fetch(\"appSummary\", \"get\", params);\n if (appSummary && \"environment\" in appSummary && \"osparc.vcsRefClient\" in appSummary[\"environment\"]) {\n return appSummary[\"environment\"][\"osparc.vcsRefClient\"];\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n 2017 Martijn Evers, The Netherlands\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n * Martijn Evers (mever)\n\n************************************************************************ */\n/**\n * The resetter is responsible for managing a set of fields and resetting these\n * fields on a {@link #reset} call. It can handle all form field implementing IField.\n */\nqx.Class.define(\"qx.ui.form.Resetter\",\n{\n extend : qx.core.Object,\n\n\n construct : function()\n {\n this.base(arguments);\n\n this.__items = [];\n },\n\n members :\n {\n __items : null,\n\n /**\n * Adding a field to the resetter will get its current value and store\n * it for resetting.\n *\n * @param field {qx.ui.form.IField} The field which should be added.\n * @throws {TypeError} When given argument is not a field.\n */\n add : function(field) {\n this.__typeCheck(field);\n this.__items.push({item: field, init: field.getValue()});\n },\n\n\n /**\n * Removes a field from the resetter.\n *\n * @param field {qx.ui.form.IField} The field which should be removed.\n * @throws {TypeError} When given argument is not a field.\n * @return {Boolean} true, if the field has been removed.\n */\n remove : function(field) {\n this.__typeCheck(field);\n for (var i = 0; i < this.__items.length; i++) {\n var storedItem = this.__items[i];\n if (storedItem.item === field) {\n this.__items.splice(i, 1);\n return true;\n }\n }\n return false;\n },\n\n\n /**\n * Resets all added fields to their initial value. The initial value\n * is the value in the widget during the {@link #add}.\n *\n * @return {null|Error} Returns an error when some fields could not be reset.\n */\n reset: function() {\n var dataEntry, e, errors = [];\n for (var i = 0; i < this.__items.length; i++) {\n dataEntry = this.__items[i];\n e = dataEntry.item.setValue(dataEntry.init);\n if (e && e instanceof Error) {\n errors.push(e);\n }\n }\n\n if (errors.length) {\n return new Error(errors.join(', '));\n } else {\n return null;\n }\n },\n\n\n /**\n * Resets a single given field. The field has to be added to the resetter\n * instance before. Otherwise, an error is thrown.\n *\n * @param field {qx.ui.form.IField} The field, which should be reset.\n * @throws {TypeError} When given argument is not a field.\n * @return {null|Error} Returns an error when the field value could not be set.\n */\n resetItem : function(field) {\n this.__typeCheck(field);\n for (var i = 0; i < this.__items.length; i++) {\n var dataEntry = this.__items[i];\n if (dataEntry.item === field) {\n return field.setValue(dataEntry.init);\n }\n }\n\n throw new Error(\"The given field has not been added.\");\n },\n\n\n /**\n * Takes the current values of all added fields and uses these values as\n * init values for resetting.\n */\n redefine: function() {\n // go threw all added items\n for (var i = 0; i < this.__items.length; i++) {\n var item = this.__items[i].item;\n // set the new init value for the item\n this.__items[i].init = item.getValue();\n }\n },\n\n\n /**\n * Takes the current value of the given field and stores this value as init\n * value for resetting.\n *\n * @param field {qx.ui.form.IField} The field to redefine.\n * @throws {TypeError} When given argument is not a field.\n */\n redefineItem : function(field) {\n this.__typeCheck(field);\n\n // get the data entry\n var dataEntry;\n for (var i = 0; i < this.__items.length; i++) {\n if (this.__items[i].item === field) {\n dataEntry = this.__items[i];\n dataEntry.init = dataEntry.item.getValue();\n return;\n }\n }\n\n throw new Error(\"The given field has not been added.\");\n },\n\n\n /**\n * Assert when given argument is not a field.\n *\n * @param field {qx.ui.form.IField|var} Any argument that should be a field.\n * @throws {TypeError} When given argument is not a field.\n * @private\n */\n __typeCheck : function(field) {\n if (!qx.Class.hasInterface(field.constructor, qx.ui.form.IField)) {\n throw new TypeError(\"Field \" + field + \" not supported for resetting.\");\n }\n }\n },\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n destruct : function()\n {\n // holding references to widgets --> must set to null\n this.__items = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * App/Theme dependant logo with platform name\n */\nqx.Class.define(\"osparc.ui.basic.LogoWPlatform\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(-5));\n\n this.set({\n alignX: \"center\",\n alignY: \"middle\",\n padding: 3\n });\n\n this.getChildControl(\"logo\");\n this.getChildControl(\"platform\");\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"logo\": {\n control = new osparc.ui.basic.Logo();\n\n const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n logoContainer.add(control);\n\n this._add(logoContainer);\n break;\n }\n case \"platform\": {\n control = new qx.ui.basic.Label().set({\n alignX: \"right\",\n font: \"text-9\"\n });\n\n let platformName = osparc.store.StaticInfo.getInstance().getPlatformName();\n platformName = platformName.toUpperCase();\n if (osparc.utils.Utils.isInZ43()) {\n platformName = \"Z43 \" + platformName;\n }\n control.setValue(platformName);\n control.bind(\"value\", this, \"paddingTop\", {\n converter: value => value ? 3 : 7\n });\n this._add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n setSize: function(size) {\n this.set({\n maxWidth: size.width,\n maxHeight: size.height\n });\n this.getChildControl(\"logo\").set({\n width: size.width,\n height: parseInt(size.height*0.8)\n });\n },\n\n setFont: function(font) {\n const platform = this.getChildControl(\"platform\");\n platform.setFont(font);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/** Login page\n *\n * - Form with fields necessary to login\n * - Form data validation\n * - Adds links to register and reset pages. Transitions are fired as events.\n * - To execute login, it delegates on the auth.manager\n * - Minimal layout and appearance is delegated to the selected theme\n */\n\nqx.Class.define(\"osparc.auth.ui.LoginView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n construct: function() {\n this.__hideableItems = [];\n\n this.base(arguments);\n },\n\n events: {\n \"toRegister\": \"qx.event.type.Event\",\n \"toRequestAccount\": \"qx.event.type.Event\",\n \"toReset\": \"qx.event.type.Event\",\n \"toVerifyPhone\": \"qx.event.type.Data\",\n \"to2FAValidationCode\": \"qx.event.type.Data\"\n },\n\n members: {\n __loginBtn: null,\n __loginAnnouncements: null,\n __hideableItems: null,\n\n // overrides base\n _buildPage: function() {\n this.__addAnnouncements();\n this.__addLoginForms();\n this.__addExtraWidgets();\n },\n\n __addAnnouncements: function() {\n const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();\n const addAnnouncements = () => {\n if (this.__loginAnnouncements) {\n this.remove(this.__loginAnnouncements);\n }\n this.__loginAnnouncements = announcementUIFactory.createLoginAnnouncements();\n this.addAt(this.__loginAnnouncements, 0);\n };\n if (announcementUIFactory.hasLoginAnnouncement()) {\n addAnnouncements();\n } else {\n announcementUIFactory.addListenerOnce(\"changeAnnouncements\", () => addAnnouncements());\n }\n },\n\n __addLoginForms: function() {\n const email = new qx.ui.form.TextField().set({\n required: true\n });\n email.getContentElement().setAttribute(\"autocomplete\", \"username\");\n osparc.utils.Utils.setIdToWidget(email, \"loginUserEmailFld\");\n this._form.add(email, \" Your email address\", qx.util.Validate.email(), \"email\");\n this.addListener(\"appear\", () => {\n email.focus();\n email.activate();\n });\n\n const pass = new osparc.ui.form.PasswordField().set({\n required: true\n });\n pass.getChildControl(\"passwordField\").getContentElement().setAttribute(\"autocomplete\", \"current-password\");\n osparc.utils.Utils.setIdToWidget(pass.getChildControl(\"passwordField\"), \"loginPasswordFld\");\n this._form.add(pass, \" Your password\", null, \"password\");\n\n this.beautifyFormFields();\n const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);\n this.add(formRenderer);\n\n // buttons\n const loginBtn = this.__loginBtn = new osparc.ui.form.FetchButton(this.tr(\"Sign in\")).set({\n center: true,\n appearance: \"strong-button\"\n });\n loginBtn.addListener(\"execute\", () => this.__login(), this);\n osparc.utils.Utils.setIdToWidget(loginBtn, \"loginSubmitBtn\");\n this.add(loginBtn);\n\n\n // (create account/request account) | forgot password? links\n const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(20));\n\n const createAccountBtn = new osparc.ui.form.LinkButton(this.tr(\"Create Account\"));\n const createAccountAction = osparc.product.Utils.getCreateAccountAction();\n if ([\"REQUEST_ACCOUNT_FORM\", \"REQUEST_ACCOUNT_INSTRUCTIONS\"].includes(createAccountAction)) {\n createAccountBtn.setLabel(this.tr(\"Request Account\"));\n }\n createAccountBtn.addListener(\"execute\", () => {\n if (window.location.hostname === \"tip.itis.swiss\") {\n this.__openTipItisPhaseOutDialog();\n } else if (createAccountAction === \"REGISTER\") {\n this.fireEvent(\"toRegister\");\n } else if (createAccountAction === \"REQUEST_ACCOUNT_FORM\") {\n this.fireEvent(\"toRequestAccount\");\n } else if (createAccountAction === \"REQUEST_ACCOUNT_INSTRUCTIONS\") {\n osparc.store.Support.openInvitationRequiredDialog();\n }\n }, this);\n osparc.utils.Utils.setIdToWidget(createAccountBtn, \"loginCreateAccountBtn\");\n\n const forgotBtn = new osparc.ui.form.LinkButton(this.tr(\"Forgot Password?\"));\n forgotBtn.addListener(\"execute\", () => this.fireEvent(\"toReset\"), this);\n osparc.utils.Utils.setIdToWidget(forgotBtn, \"loginForgotPasswordBtn\");\n\n [createAccountBtn, forgotBtn].forEach(btn => {\n grp.add(btn.set({\n center: true,\n allowGrowX: true\n }), {\n width: \"50%\"\n });\n });\n\n this.add(grp);\n },\n\n __addExtraWidgets: function() {\n if (osparc.product.Utils.isProduct(\"tis\") || osparc.product.Utils.isProduct(\"tiplite\")) {\n let text = \"\";\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n text = \"The TIP tool is designed for research purposes only and is not intended for clinical use.\"\n } else {\n text = `\n 1) The TIP tool is designed for research purposes only and is not intended for clinical use.\n \n \n 2) Users are responsible for ensuring the anonymization and privacy protection of personal data.\n \n \n 3) The development, maintenance and usage of the TIP tool is fully sponsored by the IT’IS Foundation, with the exception of the 61 complex 3D electromagnetic simulations on the AWS cluster required for the personalized plans.\n `;\n }\n const disclaimer = osparc.announcement.AnnouncementUIFactory.createLoginAnnouncement(this.tr(\"Disclaimer\"), text);\n disclaimer.getChildren()[0].setFont(\"text-14\"); // title\n disclaimer.getChildren()[1].setFont(\"text-12\"); // description\n this.add(disclaimer);\n\n const poweredByLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n alignX: \"center\",\n allowGrowX: false,\n cursor: \"pointer\"\n });\n poweredByLayout.addListener(\"tap\", () => window.open(\"https://sim4life.swiss/\"));\n const label = new qx.ui.basic.Label(this.tr(\"powered by\"));\n poweredByLayout.add(label);\n const s4lLogo = new qx.ui.basic.Image(\"osparc/Sim4Life_full_logo_white.svg\");\n s4lLogo.set({\n width: osparc.auth.LoginWithDecorators.LOGO_WIDTH/2,\n height: osparc.auth.LoginWithDecorators.LOGO_HEIGHT/2,\n scale: true,\n alignX: \"center\"\n });\n poweredByLayout.add(s4lLogo);\n this.add(poweredByLayout);\n this.__hideableItems.push(poweredByLayout);\n }\n },\n\n getHideableItems: function() {\n return this.__hideableItems;\n },\n\n __openTipItisPhaseOutDialog: function() {\n const createAccountWindow = new osparc.ui.window.Dialog(this.tr(\"Request Account\")).set({\n maxWidth: 380\n });\n let message = \"This version of the planning tool will be phased out soon and no longer accepts new users.\";\n message += \"\";\n const tipLiteLabel = osparc.utils.Utils.createHTMLLink(\"TIP.lite\", \"https://tip-lite.science/\");\n const tipLabel = osparc.utils.Utils.createHTMLLink(\"TIP\", \"https://tip.science/\");\n const hereLabel = osparc.utils.Utils.createHTMLLink(\"here\", \"https://itis.swiss/tools-and-systems/ti-planning/overview/\");\n message += `Please visit ${tipLiteLabel} or ${tipLabel} instead. See ${hereLabel} for more information.`;\n createAccountWindow.setMessage(message);\n createAccountWindow.center();\n createAccountWindow.open();\n },\n\n getEmail: function() {\n const email = this._form.getItems().email;\n return email.getValue();\n },\n\n __login: function() {\n if (!this._form.validate()) {\n return;\n }\n\n this.__loginBtn.setFetching(true);\n\n const email = this._form.getItems().email;\n const pass = this._form.getItems().password;\n\n const loginFun = msg => {\n this.__loginBtn.setFetching(false);\n this.fireDataEvent(\"done\", msg);\n // we don't need the form any more, so remove it and mock-navigate-away\n // and thus tell the password manager to save the content\n this._form.dispose();\n window.history.replaceState(null, window.document.title, window.location.pathname);\n };\n\n const verifyPhoneCbk = () => {\n this.__loginBtn.setFetching(false);\n this.fireDataEvent(\"toVerifyPhone\", email.getValue());\n // we don't need the form any more, so remove it and mock-navigate-away\n // and thus tell the password manager to save the content\n this._form.dispose();\n window.history.replaceState(null, window.document.title, window.location.pathname);\n };\n\n const twoFactorAuthCbk = (nextStep, message, retryAfter) => {\n this.__loginBtn.setFetching(false);\n osparc.FlashMessenger.getInstance().logAs(message, \"INFO\");\n this.fireDataEvent(\"to2FAValidationCode\", {\n userEmail: email.getValue(),\n nextStep,\n message,\n retryAfter\n });\n // we don't need the form any more, so remove it and mock-navigate-away\n // and thus tell the password manager to save the content\n this._form.dispose();\n window.history.replaceState(null, window.document.title, window.location.pathname);\n };\n\n const failFun = msg => {\n this.__loginBtn.setFetching(false);\n // TODO: can get field info from response here\n msg = String(msg) || this.tr(\"Typed an invalid email or password\");\n [email, pass].forEach(item => {\n item.set({\n invalidMessage: msg,\n valid: false\n });\n });\n\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n };\n\n const manager = osparc.auth.Manager.getInstance();\n manager.login(email.getValue(), pass.getValue())\n .then(resp => {\n if (resp.status === 202) {\n if (resp.nextStep === \"PHONE_NUMBER_REQUIRED\") {\n verifyPhoneCbk();\n } else if ([\"SMS_CODE_REQUIRED\", \"EMAIL_CODE_REQUIRED\"].includes(resp.nextStep)) {\n twoFactorAuthCbk(resp.nextStep, resp.message, resp.retryAfter);\n }\n } else if (resp.status === 200) {\n loginFun(resp.message);\n }\n })\n .catch(err => failFun(err));\n },\n\n resetValues: function() {\n if (this._form.getGroups()) {\n // if there are no groups, getItems will fail\n const fieldItems = this._form.getItems();\n for (const key in fieldItems) {\n fieldItems[key].resetValue();\n }\n }\n },\n\n _onAppear: function() {\n // Listen to \"Enter\" key\n const command = new qx.ui.command.Command(\"Enter\");\n this.__loginBtn.setCommand(command);\n },\n\n _onDisappear: function() {\n this.__loginBtn.setCommand(null);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/**\n *\n * TODO: add a check to prevent bots to register users\n*/\n\nqx.Class.define(\"osparc.auth.ui.RegistrationView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members: {\n __submitBtn: null,\n __cancelBtn: null,\n\n // overrides base\n _buildPage: function() {\n this._addTitleHeader(this.tr(\"Registration\"));\n\n // form\n // email, password1 == password2\n const email = new qx.ui.form.TextField().set({\n required: true\n });\n osparc.utils.Utils.setIdToWidget(email, \"registrationEmailFld\");\n this._form.add(email, this.tr(\"Type your email\"), null, \"email\");\n this.addListener(\"appear\", () => {\n email.focus();\n email.activate();\n });\n\n const password1 = new osparc.ui.form.PasswordField().set({\n required: true\n });\n osparc.utils.Utils.setIdToWidget(password1.getChildControl(\"passwordField\"), \"registrationPass1Fld\");\n this._form.add(password1, this.tr(\"Type a password\"), null, \"password1\");\n\n const password2 = new osparc.ui.form.PasswordField().set({\n required: true\n });\n osparc.utils.Utils.setIdToWidget(password2.getChildControl(\"passwordField\"), \"registrationPass2Fld\");\n this._form.add(password2, this.tr(\"Retype the password\"), null, \"password2\");\n\n const urlFragment = osparc.utils.Utils.parseURLFragment();\n const invitationToken = urlFragment.params ? urlFragment.params.invitation || null : null;\n if (invitationToken) {\n osparc.auth.Manager.getInstance().checkInvitation(invitationToken)\n .then(data => {\n if (data && data.email) {\n email.set({\n value: data.email,\n enabled: false\n });\n }\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n }\n\n // validation\n const validator = new qx.ui.form.validation.Manager();\n validator.add(email, qx.util.Validate.email());\n validator.add(password1, osparc.auth.core.Utils.passwordLengthValidator);\n validator.add(password2, osparc.auth.core.Utils.passwordLengthValidator);\n validator.setValidator(() => osparc.auth.core.Utils.checkSamePasswords(password1, password2));\n\n this.beautifyFormFields();\n const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);\n this.add(formRenderer);\n\n // buttons\n const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const submitBtn = this.__submitBtn = new osparc.ui.form.FetchButton(this.tr(\"Submit\")).set({\n center: true,\n appearance: \"form-button\"\n });\n osparc.utils.Utils.setIdToWidget(submitBtn, \"registrationSubmitBtn\");\n grp.addAt(submitBtn, 1, {\n flex:1\n });\n\n const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n grp.addAt(cancelBtn, 0, {\n flex:1\n });\n\n // interaction\n submitBtn.addListener(\"execute\", () => {\n if (this._form.validate()) {\n const valid = validator.validate();\n if (valid) {\n this.__submit({\n email: email.getValue(),\n password: password1.getValue(),\n confirm: password2.getValue(),\n invitation: invitationToken ? invitationToken : \"\"\n }, submitBtn);\n }\n }\n }, this);\n\n cancelBtn.addListener(\"execute\", e => this.fireDataEvent(\"done\", null), this);\n\n this.add(grp);\n },\n\n __submit: function(userData, submitButton) {\n submitButton.setFetching(true);\n osparc.auth.Manager.getInstance().register(userData)\n .then(log => {\n this.fireDataEvent(\"done\", log.message);\n osparc.FlashMessenger.getInstance().log(log);\n })\n .catch(err => {\n const msg = err.message || this.tr(\"Cannot register user\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => submitButton.setFetching(false));\n },\n\n _onAppear: function() {\n // Listen to \"Enter\" key\n const commandEnter = new qx.ui.command.Command(\"Enter\");\n this.__submitBtn.setCommand(commandEnter);\n\n // Listen to \"Esc\" key\n const commandEsc = new qx.ui.command.Command(\"Esc\");\n this.__cancelBtn.setCommand(commandEsc);\n },\n\n _onDisappear: function() {\n this.__submitBtn.setCommand(null);\n this.__cancelBtn.setCommand(null);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(osparc/denylist.json\")\n */\n\nqx.Class.define(\"osparc.auth.ui.RequestAccount\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n members: {\n __captchaField: null,\n __requestButton: null,\n __cancelButton: null,\n\n // overrides base\n _buildPage: function() {\n this._addTitleHeader(this.tr(\"Request Account\"));\n\n const doubleSpaced = [];\n\n // form\n const firstName = new qx.ui.form.TextField().set({\n required: true\n });\n this._form.add(firstName, this.tr(\"First Name\"), null, \"firstName\");\n\n this.addListener(\"appear\", () => {\n firstName.focus();\n firstName.activate();\n });\n\n const lastName = new qx.ui.form.TextField().set({\n required: true\n });\n this._form.add(lastName, this.tr(\"Last Name\"), null, \"lastName\");\n\n\n const email = new qx.ui.form.TextField().set({\n required: true\n });\n switch (osparc.product.Utils.getProductName()) {\n case \"s4lacad\":\n case \"s4ldesktopacad\":\n case \"tiplite\": {\n this._form.add(email, this.tr(\"University Email\"), null, \"email\");\n let validator = qx.util.Validate.email();\n osparc.utils.Utils.fetchJSON(\"/resource/osparc/denylist.json\")\n .then(denylistData => {\n if (\"lite\" in denylistData) {\n const denylist = denylistData[\"lite\"];\n validator = osparc.auth.core.Utils.denylistEmailValidator(denylist);\n }\n })\n .catch(console.error)\n .finally(() => {\n this._form.getValidationManager().add(email, validator);\n });\n break;\n }\n default:\n this._form.add(email, this.tr(\"Email\"), qx.util.Validate.email(), \"email\");\n break;\n }\n\n const phone = new qx.ui.form.TextField();\n this._form.add(phone, this.tr(\"Phone Number\"), null, \"phone\");\n\n\n const organization = new qx.ui.form.TextField();\n doubleSpaced.push(organization);\n switch (osparc.product.Utils.getProductName()) {\n case \"s4l\":\n this._form.add(organization, this.tr(\"Company Name\"), null, \"company\");\n organization.setRequired(true);\n break;\n case \"s4lacad\":\n case \"s4ldesktopacad\":\n this._form.add(organization, this.tr(\"University\"), null, \"university\");\n organization.setRequired(true);\n break;\n case \"tiplite\":\n this._form.add(organization, this.tr(\"University\"), null, \"university\");\n break;\n case \"tis\":\n this._form.add(organization, this.tr(\"Organization\"), null, \"organization\");\n break;\n case \"osparc\":\n this._form.add(organization, this.tr(\"Research Group/Organization\"), null, \"organization\");\n break;\n }\n\n\n const address = new qx.ui.form.TextField().set({\n required: true\n });\n doubleSpaced.push(address);\n this._form.add(address, this.tr(\"Address\"), null, \"address\");\n\n\n const city = new qx.ui.form.TextField().set({\n required: true\n });\n this._form.add(city, this.tr(\"City\"), null, \"city\");\n\n const postalCode = new qx.ui.form.TextField().set({\n required: true\n });\n this._form.add(postalCode, this.tr(\"Postal code\"), null, \"postalCode\");\n\n\n const country = new qx.ui.form.SelectBox().set({\n required: true\n });\n doubleSpaced.push(country);\n const countries = osparc.store.StaticInfo.getInstance().getCountries();\n countries.forEach(c => {\n const cItem = new qx.ui.form.ListItem(c.name, null, c.alpha2).set({\n rich: true\n });\n country.add(cItem);\n });\n // preselect\n fetch(\"https://ipapi.co/json\")\n .then(res => res.json())\n .then(data => {\n const countryFound = country.getSelectables().find(c => c.getModel().toUpperCase() === data.country_code.toUpperCase());\n if (countryFound) {\n country.setSelection([countryFound])\n }\n })\n .catch(err => {\n console.error(err);\n const emptyItem = new qx.ui.form.ListItem(\"\", null, \"\");\n country.add(emptyItem);\n country.setSelection([emptyItem]);\n });\n this._form.add(country, this.tr(\"Country\"), null, \"country\");\n\n\n switch (osparc.product.Utils.getProductName()) {\n case \"s4l\":\n case \"s4lacad\":\n case \"s4ldesktopacad\": {\n const application = new qx.ui.form.SelectBox();\n [{\n id: \"Antenna_Design_for_Wireless_Communication\",\n label: \"Antenna Design for Wireless Communication\"\n }, {\n id: \"Bioelectronics,_Electroceuticals_and_Neuroprosthetics\",\n label: \"Bioelectronics, Electroceuticals & Neuroprosthetics\"\n }, {\n id: \"Safety_and_Efficacy_Assessment\",\n label: \"Safety & Efficacy Assessment\"\n }, {\n id: \"Exposure_and_Compliance\",\n label: \"Exposure & Compliance\"\n }, {\n id: \"Focused_Ultrasound\",\n label: \"Focused Ultrasound\"\n }, {\n id: \"In_Silico_Trials\",\n label: \"In Silico Trials\"\n }, {\n id: \"Implant_Design\",\n label: \"Implant Design\"\n }, {\n id: \"Magnetic_Resonance_Imaging\",\n label: \"Magnetic Resonance Imaging\"\n }, {\n id: \"Neurostimulation\",\n label: \"Neurostimulation\"\n }, {\n id: \"Personalized_Medicine\",\n label: \"Personalized Medicine\"\n }, {\n id: \"Thermal_Therapies\",\n label: \"Thermal Therapies\"\n }, {\n id: \"Wireless_Power_Transfer_Systems\",\n label: \"Wireless Power Transfer Systems\"\n }, {\n id: \"Vascular_Flow_and_Perfusion\",\n label: \"Vascular Flow & Perfusion\"\n }].forEach(appData => {\n const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({\n rich: true\n });\n application.add(lItem);\n });\n doubleSpaced.push(application);\n this._form.add(application, this.tr(\"Application\"), null, \"application\");\n\n const description = new qx.ui.form.TextField();\n doubleSpaced.push(description);\n this._form.add(description, this.tr(\"Description\"), null, \"description\");\n break;\n }\n case \"osparc\": {\n const application = new qx.ui.form.SelectBox();\n [{\n id: \"other\",\n label: \"Other\"\n }, {\n id: \"Reuse_Existing_Services_And_Models\",\n label: \"Reuse Existing Services And Models\"\n }, {\n id: \"Data_Analysis\",\n label: \"Data Analysis\"\n }, {\n id: \"Personalized_Medicine\",\n label: \"Personalized Medicine\"\n }, {\n id: \"Neurostimulation\",\n label: \"Neurostimulation\"\n }, {\n id: \"Safety_And_Efficacy_Assessment\",\n label: \"Safety & Efficacy Assessment\"\n }, {\n id: \"Device_Design_And_Optimization\",\n label: \"Device Design & Optimization\"\n }, {\n id: \"Magnetic_Resonance_Imaging\",\n label: \"Magnetic Resonance Imaging\"\n }, {\n id: \"Bioelectromagnetics\",\n label: \"Bioelectromagnetics\"\n }, {\n id: \"In_Silico_Trials\",\n label: \"In Silico Trials\"\n }, {\n id: \"Image_based_Modeling\",\n label: \"Image-based Modeling\"\n }].forEach(appData => {\n const lItem = new qx.ui.form.ListItem(appData.label, null, appData.id).set({\n rich: true\n });\n application.add(lItem);\n });\n doubleSpaced.push(application);\n this._form.add(application, this.tr(\"Application\"), null, \"application\");\n break;\n }\n }\n\n\n const hear = new qx.ui.form.SelectBox();\n let hearOptions = [];\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n hearOptions = [{\n id: \"Other\",\n label: \"Other\"\n }, {\n id: \"SPARC_Portal_Or_Event\",\n label: \"SPARC Portal Or Event\"\n }, {\n id: \"Search_Engine\",\n label: \"Search Engine\"\n }, {\n id: \"Conference\",\n label: \"Conference\"\n }, {\n id: \"Publication\",\n label: \"Publication\"\n }, {\n id: \"Social_Media\",\n label: \"Social Media\"\n }];\n break;\n default:\n hearOptions = [{\n id: \"Search_Engine\",\n label: \"Search Engine\"\n }, {\n id: \"Conference\",\n label: \"Conference\"\n }, {\n id: \"Publication\",\n label: \"Publication\"\n }, {\n id: \"Social_Media\",\n label: \"Social Media\"\n }, {\n id: \"Other\",\n label: \"Other\"\n }];\n break;\n }\n hearOptions.forEach(hearData => {\n const lItem = new qx.ui.form.ListItem(hearData.label, null, hearData.id);\n hear.add(lItem);\n });\n doubleSpaced.push(hear);\n this._form.add(hear, this.tr(\"How did you hear about us?\"), null, \"hear\");\n\n\n // accept links\n // Privacy Policy link\n let ppLink = \"\";\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n case \"tis\":\n case \"tiplite\":\n ppLink = osparc.CookiePolicy.getITISPrivacyPolicyLink(\"our privacy policy\");\n break;\n default:\n ppLink = osparc.CookiePolicy.getS4LPrivacyPolicyLink(\"our privacy policy\");\n break;\n }\n const ppText = this.tr(\"I acknowledge that data will be processed in accordance to \") + ppLink;\n const privacyPolicy = new qx.ui.form.CheckBox().set({\n required: true,\n value: false\n });\n doubleSpaced.push(privacyPolicy);\n this._form.add(privacyPolicy, ppText, null, \"privacyPolicy\")\n\n // Eula link\n if (osparc.product.Utils.getProductName() !== \"osparc\") {\n const eulaLink = osparc.CookiePolicy.getZMTEULALink(\"end-users license agreement (EULA)\");\n const eulaText = \"I accept the \" + eulaLink + \" and I will use the product in accordance with it\";\n const eula = new qx.ui.form.CheckBox().set({\n required: true,\n value: false\n });\n doubleSpaced.push(eula);\n this._form.add(eula, eulaText, null, \"eula\");\n }\n\n\n const content = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n const formRenderer = new osparc.ui.form.renderer.DoubleV(this._form, doubleSpaced);\n content.add(formRenderer);\n const captchaLayout = this.__createCaptchaLayout();\n this._form.getValidationManager().add(this.__captchaField);\n content.add(captchaLayout);\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(content);\n this.add(scrollView, {\n flex: 1\n });\n\n // buttons\n const grp = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));\n const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const submitBtn = this.__requestButton = new qx.ui.form.Button(this.tr(\"Request\")).set({\n center: true,\n appearance: \"form-button\"\n });\n osparc.utils.Utils.setIdToWidget(submitBtn, \"registrationSubmitBtn\");\n buttons.addAt(submitBtn, 1, {\n flex:1\n });\n\n const cancelBtn = this.__cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n buttons.addAt(cancelBtn, 0, {\n flex:1\n });\n\n grp.add(buttons)\n\n // interaction\n submitBtn.addListener(\"execute\", () => this.__requestPressed(), this);\n cancelBtn.addListener(\"execute\", () => this.fireDataEvent(\"done\", null), this);\n\n this.add(grp);\n },\n\n __requestPressed: function() {\n const validForm = this._form.validate();\n if (validForm) {\n const formData = {};\n Object.entries(this._form.getItems()).forEach(([key, field]) => {\n const val = field.getValue();\n if (val && (typeof val === \"object\") && (\"classname\" in val)) {\n formData[key] = val.getModel();\n } else {\n formData[key] = val;\n }\n });\n this.__submit(formData, this.__captchaField.getValue());\n }\n },\n\n __submit: function(formData, captchaValue) {\n const params = {\n data: {\n \"form\": formData,\n \"captcha\": captchaValue\n }\n };\n osparc.data.Resources.fetch(\"auth\", \"postRequestAccount\", params)\n .then(() => {\n const msg = this.tr(\"The request is being processed, you will hear from us in the coming hours\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this.fireDataEvent(\"done\");\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n this.__restartCaptcha();\n });\n },\n\n __createCaptchaLayout: function() {\n const captchaGrid = new qx.ui.layout.Grid(5, 5);\n captchaGrid.setColumnAlign(0, \"center\", \"bottom\");\n captchaGrid.setColumnFlex(2, 1);\n const captchaLayout = new qx.ui.container.Composite(captchaGrid);\n\n const captchaImage = this.__captchaImage = new qx.ui.basic.Image().set({\n allowShrinkX: true,\n allowShrinkY: true,\n scale: true,\n width: 140,\n height: 45\n });\n captchaLayout.add(captchaImage, {\n column: 0,\n row: 0,\n rowSpan: 2\n });\n\n const restartCaptcha = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/sync-alt/12\",\n toolTipText: this.tr(\"Reload Captcha\")\n });\n restartCaptcha.addListener(\"tap\", () => this.__restartCaptcha(), this);\n captchaLayout.add(restartCaptcha, {\n column: 1,\n row: 1\n });\n\n const label = new qx.ui.basic.Label(this.tr(\"Type the 6 digits:\")).set({\n font: \"text-12\"\n });\n captchaLayout.add(label, {\n column: 2,\n row: 0\n });\n\n const captchaField = this.__captchaField = new qx.ui.form.TextField().set({\n backgroundColor: \"transparent\",\n required: true\n });\n captchaLayout.add(captchaField, {\n column: 2,\n row: 1\n });\n\n return captchaLayout;\n },\n\n __restartCaptcha: function() {\n this.__captchaImage.setSource(null);\n let url = osparc.data.Resources.resources[\"auth\"].endpoints[\"captcha\"].url;\n // Since the url doesn't change, this dummy query parameter will force the frontend to make a new request\n url += \"?\" + new Date().getTime();\n this.__captchaImage.setSource(url);\n\n this.__captchaField.resetValue();\n },\n\n _onAppear: function() {\n this.__restartCaptcha();\n\n // Listen to \"Enter\" key\n const commandEnter = new qx.ui.command.Command(\"Enter\");\n this.__requestButton.setCommand(commandEnter);\n\n // Listen to \"Esc\" key\n const commandEsc = new qx.ui.command.Command(\"Esc\");\n this.__cancelButton.setCommand(commandEsc);\n },\n\n _onDisappear: function() {\n this.__requestButton.setCommand(null);\n this.__cancelButton.setCommand(null);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.auth.ui.VerifyPhoneNumberView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n properties: {\n userEmail: {\n check: \"String\",\n init: \"foo@mymail.com\",\n nullable: false\n }\n },\n\n events: {\n \"skipPhoneRegistration\": \"qx.event.type.Data\"\n },\n\n members: {\n __itiInput: null,\n __verifyPhoneNumberBtn: null,\n __validateCodeField: null,\n __validateCodeBtn: null,\n __sendViaEmail: null,\n\n _buildPage: function() {\n this.__buildVerificationLayout();\n const validationLayout = this.__createValidationLayout().set({\n zIndex: 1 // the countries list that goes on top has a z-index of 2\n });\n this.add(validationLayout);\n const sendViaEmailBtn = this.__createSendViaEmailButton().set({\n zIndex: 1 // the countries list that goes on top has a z-index of 2\n });\n this.add(sendViaEmailBtn);\n this.__attachHandlers();\n },\n\n __buildVerificationLayout: function() {\n const verificationInfoTitle = new qx.ui.basic.Label().set({\n value: this.tr(\"Two-Factor Authentication (2FA)\"),\n allowGrowX: true,\n rich: true,\n font: \"text-16\"\n });\n this.add(verificationInfoTitle);\n\n const verificationInfoDesc = new qx.ui.basic.Label().set({\n value: this.tr(\"We will send you a text message to your mobile phone to authenticate you each time you log in.\"),\n rich: true,\n wrap: true\n });\n this.add(verificationInfoDesc);\n\n const phoneNumberVerifyLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n phoneNumberVerifyLayout.getContentElement().setStyles({\n \"overflow\": \"visible\" // needed for countries dropdown menu\n });\n\n const itiInput = this.__itiInput = new osparc.widget.IntlTelInput();\n phoneNumberVerifyLayout.add(itiInput, {\n flex: 1\n });\n\n const verifyPhoneNumberBtn = this.__verifyPhoneNumberBtn = new osparc.ui.form.FetchButton(this.tr(\"Send SMS\")).set({\n appearance: \"strong-button\",\n center: true,\n minWidth: 80\n });\n phoneNumberVerifyLayout.add(verifyPhoneNumberBtn);\n this.add(phoneNumberVerifyLayout);\n },\n\n __createValidationLayout: function() {\n const smsValidationLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const validateCodeTF = this.__validateCodeField = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"Type the SMS code\"),\n enabled: false\n });\n smsValidationLayout.add(validateCodeTF, {\n flex: 1\n });\n const validateCodeBtn = this.__validateCodeBtn = new osparc.ui.form.FetchButton(this.tr(\"Validate\")).set({\n appearance: \"strong-button\",\n center: true,\n minWidth: 80\n });\n validateCodeBtn.setEnabled(false);\n validateCodeTF.addListener(\"input\", e => validateCodeBtn.setEnabled(Boolean(e.getData())));\n smsValidationLayout.add(validateCodeBtn);\n return smsValidationLayout;\n },\n\n __createSendViaEmailButton: function() {\n const txt = this.tr(\"Skip phone registration and send code via email\");\n const sendViaEmail = this.__sendViaEmail = new osparc.ui.form.FetchButton(txt).set({\n textColor: \"text\",\n zIndex: 1 // the countries list that goes on top has a z-index of 2\n });\n return sendViaEmail;\n },\n\n __attachHandlers: function() {\n this.__verifyPhoneNumberBtn.addListener(\"execute\", () => this.__verifyPhoneNumber());\n this.__validateCodeBtn.addListener(\"execute\", () => this.__validateCodeRegister());\n this.__sendViaEmail.addListener(\"execute\", () => this.__requestCodeViaEmail(), this);\n },\n\n __verifyPhoneNumber: function() {\n this.__itiInput.verifyPhoneNumber();\n const isValid = this.__itiInput.isValidNumber();\n if (isValid) {\n this.__itiInput.setEnabled(false);\n this.__verifyPhoneNumberBtn.setFetching(true);\n osparc.auth.Manager.getInstance().verifyPhoneNumber(this.getUserEmail(), this.__itiInput.getNumber())\n .then(resp => {\n osparc.FlashMessenger.logAs(resp.message, \"INFO\");\n this.__verifyPhoneNumberBtn.setFetching(false);\n // enable, focus and listen to Enter\n this.__validateCodeField.setEnabled(true);\n this.__validateCodeField.focus();\n this.__validateCodeField.activate();\n this.__enableEnterCommand(this.__validateCodeBtn);\n })\n .catch(err => {\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n this.__verifyPhoneNumberBtn.setFetching(false);\n this.__itiInput.setEnabled(true);\n });\n }\n },\n\n __validateCodeRegister: function() {\n this.__validateCodeBtn.setFetching(true);\n\n const loginFun = log => {\n osparc.FlashMessenger.logAs(log.message, \"INFO\");\n this.__validateCodeBtn.setFetching(false);\n this.__validateCodeField.setEnabled(false);\n this.__validateCodeBtn.setEnabled(false);\n this.__validateCodeBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n this.fireDataEvent(\"done\", log.message);\n };\n\n const failFun = msg => {\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n this.__validateCodeBtn.setFetching(false);\n // TODO: can get field info from response here\n msg = String(msg) || this.tr(\"Invalid code\");\n this.__validateCodeField.set({\n invalidMessage: msg,\n valid: false\n });\n };\n\n const manager = osparc.auth.Manager.getInstance();\n manager.validateCodeRegister(this.getUserEmail(), this.__itiInput.getNumber(), this.__validateCodeField.getValue(), loginFun, failFun, this);\n },\n\n __requestCodeViaEmail: function() {\n this.__sendViaEmail.setFetching(true);\n osparc.auth.Manager.getInstance().resendCodeViaEmail(this.getUserEmail())\n .then(data => {\n const message = osparc.auth.core.Utils.extractMessage(data);\n const retryAfter = osparc.auth.core.Utils.extractRetryAfter(data)\n osparc.FlashMessenger.logAs(message, \"INFO\");\n this.fireDataEvent(\"skipPhoneRegistration\", {\n userEmail: this.getUserEmail(),\n message,\n retryAfter\n });\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"))\n .finally(() => this.__sendViaEmail.setFetching(false));\n },\n\n __enableEnterCommand: function(onBtn) {\n this.__disableCommands();\n\n const commandEnter = new qx.ui.command.Command(\"Enter\");\n onBtn.setCommand(commandEnter);\n },\n\n __disableCommands: function() {\n this.__verifyPhoneNumberBtn.setCommand(null);\n this.__validateCodeBtn.setCommand(null);\n },\n\n _onAppear: function() {\n this.__enableEnterCommand(this.__verifyPhoneNumberBtn);\n },\n\n _onDisappear: function() {\n this.__disableCommands();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/** Page to request password reset for a non-logged-in user\n *\n */\n\nqx.Class.define(\"osparc.auth.ui.ResetPassRequestView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members: {\n __submitBtn: null,\n __cancelBtn: null,\n\n // overrides base\n _buildPage: function() {\n this._addTitleHeader(this.tr(\"Reset Password\"));\n\n // form\n // email\n const email = new qx.ui.form.TextField().set({\n required: true\n });\n email.setRequired(true);\n this._form.add(email, this.tr(\"Type your registration email\"), qx.util.Validate.email(), \"email\");\n this.addListener(\"appear\", () => {\n email.focus();\n email.activate();\n });\n\n this.beautifyFormFields();\n const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);\n this.add(formRenderer);\n\n // buttons\n const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n\n const submitBtn = this.__submitBtn = new qx.ui.form.Button(this.tr(\"Submit\")).set({\n center: true,\n appearance: \"form-button\"\n });\n grp.addAt(submitBtn, 1, {\n flex:1\n });\n\n const cancelBtn = this.__cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n grp.addAt(cancelBtn, 0, {\n flex:1\n });\n\n // interaction\n submitBtn.addListener(\"execute\", () => {\n if (this._form.validate()) {\n this.__submit(email);\n }\n }, this);\n\n cancelBtn.addListener(\"execute\", () => this.fireDataEvent(\"done\", null), this);\n\n this.add(grp);\n },\n\n __submit: function(email) {\n const manager = osparc.auth.Manager.getInstance();\n\n const successFun = log => {\n this.fireDataEvent(\"done\", log.message);\n osparc.FlashMessenger.getInstance().log(log);\n };\n\n const failFun = msg => {\n msg = msg || this.tr(\"Could not request password reset\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n };\n\n manager.resetPasswordRequest(email.getValue(), successFun, failFun, this);\n },\n\n _onAppear: function() {\n // Listen to \"Enter\" key\n const commandEnter = new qx.ui.command.Command(\"Enter\");\n this.__submitBtn.setCommand(commandEnter);\n\n // Listen to \"Esc\" key\n const commandEsc = new qx.ui.command.Command(\"Esc\");\n this.__cancelBtn.setCommand(commandEsc);\n },\n\n _onDisappear: function() {\n this.__submitBtn.setCommand(null);\n this.__cancelBtn.setCommand(null);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/** Page to reset user's password\n *\n */\n\nqx.Class.define(\"osparc.auth.ui.ResetPassView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members: {\n // overrides base\n _buildPage: function() {\n this._addTitleHeader(this.tr(\"Reset Password\"));\n\n // form\n const password = new osparc.ui.form.PasswordField().set({\n required: true\n });\n this._form.add(password, this.tr(\"Your new password\"), null, \"password1\");\n this.add(password);\n\n const confirm = new osparc.ui.form.PasswordField().set({\n required: true\n });\n this._form.add(confirm, this.tr(\"Retype your new password\"), null, \"password2\");\n\n const urlFragment = osparc.utils.Utils.parseURLFragment();\n const resetCode = urlFragment.params ? urlFragment.params.code || null : null;\n const code = new qx.ui.form.TextField().set({\n visibility: \"excluded\",\n value: resetCode\n });\n this.add(code);\n\n const validator = new qx.ui.form.validation.Manager();\n validator.add(password, osparc.auth.core.Utils.passwordLengthValidator);\n validator.add(confirm, osparc.auth.core.Utils.passwordLengthValidator);\n validator.setValidator(function(_itemForms) {\n return osparc.auth.core.Utils.checkSamePasswords(password, confirm);\n });\n\n this.beautifyFormFields();\n const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);\n this.add(formRenderer);\n\n // buttons\n const grp = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n\n const submitBtn = new qx.ui.form.Button(this.tr(\"Submit\")).set({\n appearance: \"form-button\"\n });\n grp.addAt(submitBtn, 1, {\n flex:1\n });\n\n const cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n grp.addAt(cancelBtn, 0, {\n flex:1\n });\n\n // interaction\n submitBtn.addListener(\"execute\", () => {\n if (this._form.validate()) {\n const valid = validator.validate();\n if (valid) {\n this.__submit(password.getValue(), confirm.getValue(), code.getValue());\n }\n }\n }, this);\n\n cancelBtn.addListener(\"execute\", () => this.fireDataEvent(\"done\", null), this);\n\n this.add(grp);\n },\n\n __submit: function(password, confirm, code) {\n const successFun = log => {\n this.fireDataEvent(\"done\", log.message);\n osparc.FlashMessenger.getInstance().log(log);\n };\n\n const failFun = msg => {\n msg = msg || this.tr(\"Could not reset password\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n };\n\n const manager = osparc.auth.Manager.getInstance();\n manager.resetPassword(password, confirm, code, successFun, failFun, this);\n }\n\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.auth.ui.Login2FAValidationCodeView\", {\n extend: osparc.auth.core.BaseAuthPage,\n\n properties: {\n userEmail: {\n check: \"String\",\n init: \"foo@mymail.com\",\n nullable: false\n },\n\n smsEnabled: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeSmsEnabled\"\n },\n\n message: {\n check: \"String\",\n init: \"We just sent a 6-digit code\",\n nullable: false,\n event: \"changeMessage\"\n }\n },\n\n statics: {\n restartResendTimer: function(button, buttonText, count = 60) {\n const refreshIntervalId = setInterval(() => {\n if (count > 0) {\n count--;\n } else {\n clearInterval(refreshIntervalId);\n }\n button.set({\n label: count > 0 ? buttonText + ` (${count})` : buttonText,\n enabled: count === 0\n });\n }, 1000);\n }\n },\n\n members: {\n __validateCodeBtn: null,\n __resendCodeSMSBtn: null,\n __resendCodeEmailBtn: null,\n\n _buildPage: function() {\n const introText = new qx.ui.basic.Label().set({\n rich: true\n });\n this.bind(\"message\", introText, \"value\");\n this.add(introText);\n\n // form\n const validateCodeTF = new qx.ui.form.TextField().set({\n required: true\n });\n this._form.add(validateCodeTF, this.tr(\"Type code\"), null, \"validationCode\");\n this.addListener(\"appear\", () => {\n validateCodeTF.focus();\n validateCodeTF.activate();\n });\n\n this.beautifyFormFields();\n const formRenderer = new qx.ui.form.renderer.SinglePlaceholder(this._form);\n this.add(formRenderer);\n\n // buttons\n const validateCodeBtn = this.__validateCodeBtn = new osparc.ui.form.FetchButton(this.tr(\"Validate\")).set({\n center: true,\n appearance: \"strong-button\"\n });\n validateCodeBtn.setEnabled(false);\n validateCodeTF.addListener(\"input\", e => validateCodeBtn.setEnabled(Boolean(e.getData())));\n validateCodeBtn.addListener(\"execute\", () => this.__validateCodeLogin(), this);\n this.add(validateCodeBtn);\n\n const resendLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\"\n }));\n const resendCodeDesc = new qx.ui.basic.Label().set({\n value: this.tr(\"Didn't receive the code? Resend code\")\n });\n resendLayout.add(resendCodeDesc);\n\n const resendButtonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n resendLayout.add(resendButtonsLayout);\n\n const resendCodeSMSBtn = this.__resendCodeSMSBtn = new osparc.ui.form.FetchButton(this.tr(\"Via SMS\"));\n this.bind(\"smsEnabled\", resendCodeSMSBtn, \"visibility\", {\n converter: smsEnabled => smsEnabled ? \"visible\" : \"excluded\"\n });\n resendButtonsLayout.add(resendCodeSMSBtn, {\n flex: 1\n });\n resendCodeSMSBtn.addListener(\"execute\", () => {\n resendCodeSMSBtn.setFetching(true);\n osparc.auth.Manager.getInstance().resendCodeViaSMS(this.getUserEmail())\n .then(resp => {\n const message = osparc.auth.core.Utils.extractMessage(resp);\n const retryAfter = osparc.auth.core.Utils.extractRetryAfter(resp);\n osparc.FlashMessenger.logAs(message, \"INFO\");\n this.set({\n message\n });\n this.restartSMSButton(retryAfter);\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"))\n .finally(() => resendCodeSMSBtn.setFetching(false));\n }, this);\n\n const resendCodeEmailBtn = this.__resendCodeEmailBtn = new osparc.ui.form.FetchButton(this.tr(\"Via email\"));\n resendButtonsLayout.add(resendCodeEmailBtn, {\n flex: 1\n });\n resendCodeEmailBtn.addListener(\"execute\", () => {\n resendCodeEmailBtn.setFetching(true);\n osparc.auth.Manager.getInstance().resendCodeViaEmail(this.getUserEmail())\n .then(resp => {\n const message = osparc.auth.core.Utils.extractMessage(resp);\n const retryAfter = osparc.auth.core.Utils.extractRetryAfter(resp);\n osparc.FlashMessenger.logAs(message, \"INFO\");\n this.set({\n message\n });\n this.restartEmailButton(retryAfter);\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"))\n .finally(() => resendCodeEmailBtn.setFetching(false));\n }, this);\n this.add(resendLayout);\n },\n\n restartSMSButton: function(retryAfter) {\n // start SMS timer button\n this.self().restartResendTimer(this.__resendCodeSMSBtn, this.tr(\"Via SMS\"), retryAfter);\n // and reset email button\n this.__resendCodeEmailBtn.set({\n label: this.tr(\"Via email\"),\n enabled: true\n })\n },\n\n restartEmailButton: function(retryAfter) {\n // start Email timer button\n this.self().restartResendTimer(this.__resendCodeEmailBtn, this.tr(\"Via email\"), retryAfter);\n // and reset SMS button\n this.__resendCodeSMSBtn.set({\n label: this.tr(\"Via SMS\"),\n enabled: true\n })\n },\n\n __validateCodeLogin: function() {\n this.__validateCodeBtn.setFetching(true);\n\n const validationCodeTF = this._form.getItems()[\"validationCode\"];\n const validationCode = validationCodeTF.getValue();\n\n const loginFun = log => {\n this.__validateCodeBtn.setFetching(false);\n this.fireDataEvent(\"done\", log.message);\n };\n\n const failFun = msg => {\n this.__validateCodeBtn.setFetching(false);\n // TODO: can get field info from response here\n msg = String(msg) || this.tr(\"Invalid code\");\n validationCodeTF.setInvalidMessage(msg);\n\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n };\n\n if (this._form.validate()) {\n const manager = osparc.auth.Manager.getInstance();\n manager.validateCodeLogin(this.getUserEmail(), validationCode, loginFun, failFun, this);\n } else {\n this.__validateCodeBtn.setFetching(true);\n }\n },\n\n _onAppear: function() {\n const command = new qx.ui.command.Command(\"Enter\");\n this.__validateCodeBtn.setCommand(command);\n },\n\n _onDisappear: function() {\n this.__validateCodeBtn.setCommand(null);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2011 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tristan Koch (tristankoch)\n\n************************************************************************ */\n\n/**\n * Basic authentication.\n */\nqx.Class.define(\"qx.io.request.authentication.Basic\",\n{\n\n extend: qx.core.Object,\n\n implement: qx.io.request.authentication.IAuthentication,\n\n /**\n * @param username {var} The username to use.\n * @param password {var} The password to use.\n */\n construct : function(username, password)\n {\n this.__credentials = qx.util.Base64.encode(username + ':' + password);\n },\n\n members :\n {\n __credentials : null,\n\n /**\n * Headers to include for basic authentication.\n * @return {Map} Map containing the authentication credentials\n */\n getAuthHeaders: function() {\n return [\n {key: \"Authorization\", value: \"Basic \" + this.__credentials}\n ];\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.io.request.authentication.Token\", {\n extend: qx.core.Object,\n\n implement: qx.io.request.authentication.IAuthentication,\n\n construct: function(token) {\n this.__token = token;\n },\n\n members: {\n __token: null,\n\n getAuthHeaders: function() {\n return [{\n key: \"Authorization\",\n value: \"Bearer \" + this.__token\n }];\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * A FlashMessage provides brief messages about the app processes. It is used and handled by osparc.FlashMessenger.\n */\nqx.Class.define(\"osparc.ui.message.FlashMessage\", {\n extend: qx.ui.core.Widget,\n\n /**\n * Constructor for the FlashMessage.\n *\n * @param {String} message Message that the user will read.\n * @param {String=\"INFO\",\"DEBUG\",\"WARNING\",\"ERROR\"} level Logging level of the message. Each level has different, distinct color.\n * @param {Number} duration\n */\n construct: function(message, level, duration) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.VBox(15));\n\n this.set({\n padding: 18,\n maxWidth: 400,\n allowStretchX: false,\n alignX: \"center\",\n backgroundColor: this.self().LOG_LEVEL_COLOR_MAP[level].backgroundColor,\n decorator: `flash-${this.self().LOG_LEVEL_COLOR_MAP[level].color}`\n });\n\n const badge = this.getChildControl(\"badge\");\n badge.set({\n source: this.self().LOG_LEVEL_COLOR_MAP[level].icon+\"16\",\n textColor: this.self().LOG_LEVEL_COLOR_MAP[level].color\n });\n\n if (message) {\n this.setMessage(message);\n }\n\n // also support duration 0: the message won't be automatically removed\n if (duration != null) {\n this.setDuration(duration);\n }\n\n this.getChildControl(\"closebutton\");\n },\n\n properties: {\n appearance: {\n init: \"flash\",\n refine: true\n },\n\n message: {\n check: \"String\",\n nullable: true,\n apply: \"__applyMessage\"\n },\n\n duration: {\n check: \"Number\",\n nullable: true\n }\n },\n\n statics: {\n LOG_LEVEL_COLOR_MAP: {\n \"INFO\": {\n color: \"info\",\n icon: \"@FontAwesome5Solid/check/\",\n backgroundColor: \"flash_message_bg\"\n },\n \"DEBUG\": {\n color: \"warning\",\n icon: \"@FontAwesome5Solid/info/\",\n backgroundColor: \"flash_message_bg\"\n },\n \"WARNING\": {\n color: \"warning\",\n icon: \"@FontAwesome5Solid/exclamation-triangle/\",\n backgroundColor: \"flash_message_bg\"\n },\n \"ERROR\": {\n color: \"error\",\n icon: \"@FontAwesome5Solid/exclamation/\",\n backgroundColor: \"flash_message_bg\"\n }\n }\n },\n\n events: {\n \"closeMessage\": \"qx.event.type.Event\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"message-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(15));\n this._add(control);\n break;\n case \"badge\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\"\n });\n this.getChildControl(\"message-layout\").addAt(control, 0);\n break;\n case \"message\":\n control = new qx.ui.basic.Label().set({\n font: \"text-16\",\n selectable: true,\n rich: true\n });\n this.getChildControl(\"message-layout\").addAt(control, 1, {\n flex: 1\n });\n break;\n case \"closebutton\":\n control = new osparc.ui.basic.IconButton(\"@MaterialIcons/close/16\", () => this.fireEvent(\"closeMessage\")).set({\n alignY: \"middle\"\n });\n this.getChildControl(\"message-layout\").addAt(control, 2);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyMessage: function(value) {\n const label = this.getChildControl(\"message\");\n if (label) {\n label.setValue(value);\n }\n },\n\n addWidget: function(widget) {\n this._add(widget);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget containing:\n * - LogoOnOff\n * - Dashboard (button)\n * - List of buttons for node navigation (only study editing)\n * - User menu\n * - Preferences\n * - Help\n * - About\n * - Logout\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n *
\n * let navBar = new osparc.navigation.NavigationBar();\n * this.getRoot().add(navBar);\n *\n */\n\nqx.Class.define(\"osparc.navigation.NavigationBar\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(20).set({\n alignY: \"middle\"\n }));\n\n this.set({\n paddingLeft: 10,\n paddingRight: 10,\n height: this.self().HEIGHT,\n backgroundColor: \"background-main-1\",\n });\n\n osparc.utils.Utils.setIdToWidget(this, \"navigationBar\");\n },\n\n events: {\n \"backToDashboardPressed\": \"qx.event.type.Event\",\n \"openLogger\": \"qx.event.type.Event\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n nullable: true,\n init: null,\n event: \"changeStudy\",\n apply: \"__applyStudy\"\n }\n },\n\n statics: {\n HEIGHT: 50,\n SMALL_SCREEN_BREAKPOINT: 800,\n\n BUTTON_OPTIONS: {\n font: \"text-14\",\n allowGrowY: false,\n minWidth: 30,\n minHeight: 30\n },\n },\n\n members: {\n __tabButtons: null,\n\n populateLayout: function() {\n this.__buildLayout();\n osparc.WindowSizeTracker.getInstance().addListener(\"changeCompactVersion\", () => this.__navBarResized(), this);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"left-items\");\n this.getChildControl(\"center-items\");\n this.getChildControl(\"right-items\");\n\n // left-items\n this.getChildControl(\"logo\");\n if (!osparc.product.Utils.isProduct(\"osparc\")) {\n this.getChildControl(\"logo-powered\");\n }\n\n const dashboardBtn = this.getChildControl(\"dashboard-button\");\n this.bind(\"study\", dashboardBtn, \"visibility\", {\n converter: s => s ? \"visible\" : \"excluded\"\n });\n\n const studyTitleOptions = this.getChildControl(\"study-title-options\");\n this.bind(\"study\", studyTitleOptions, \"visibility\", {\n converter: s => s ? \"visible\" : \"excluded\"\n });\n\n // center-items\n this.getChildControl(\"read-only-info\");\n\n // right-items\n this.getChildControl(\"tasks-button\");\n this.getChildControl(\"notifications-button\");\n this.getChildControl(\"expiration-icon\");\n this.getChildControl(\"help\");\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n this.getChildControl(\"credits-button\");\n }\n this.getChildControl(\"log-in-button\");\n this.getChildControl(\"user-menu\");\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"left-items\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(20).set({\n alignY: \"middle\",\n alignX: \"left\"\n }));\n this._addAt(control, 0);\n break;\n case \"center-items\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n alignX: \"center\"\n }));\n this._addAt(control, 1, {\n flex: 1\n });\n break;\n case \"right-items\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n alignX: \"right\"\n }));\n this._addAt(control, 2);\n break;\n case \"logo\":\n control = osparc.navigation.LogoOnOff.getInstance().set({\n alignY: \"middle\"\n });\n control.getChildControl(\"off-logo\").set({\n width: 92,\n height: 35,\n scale: true\n })\n control.getChildControl(\"on-logo\").setSize({\n width: osparc.product.Utils.isS4LProduct() ? 150 : 100,\n height: osparc.navigation.NavigationBar.HEIGHT\n });\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n control.set({\n cursor: \"pointer\",\n toolTipText: this.tr(\"This is TIP.lite, a light version of TIP.
Request access to TIP.\")\n });\n control.addListener(\"tap\", () => osparc.product.TIPTeaser.getInstance().open());\n }\n this.getChildControl(\"left-items\").add(control);\n break;\n case \"logo-powered\":\n control = new osparc.ui.basic.PoweredByOsparc().set({\n padding: 3,\n paddingTop: 2,\n maxHeight: this.self().HEIGHT - 5\n });\n this.getChildControl(\"left-items\").add(control);\n break;\n case \"dashboard-button\":\n control = new osparc.ui.form.FetchButton(this.tr(\"Dashboard\"), \"@FontAwesome5Solid/home/16\").set({\n ...this.self().BUTTON_OPTIONS\n });\n control.set({\n appearance: \"fab-button\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"dashboardBtn\");\n control.addListener(\"execute\", () => this.fireEvent(\"backToDashboardPressed\"), this);\n this.getChildControl(\"left-items\").add(control);\n break;\n case \"study-title-options\":\n control = new osparc.navigation.StudyTitleWOptions();\n control.addListener(\"openLogger\", () => this.fireEvent(\"openLogger\"));\n this.getChildControl(\"left-items\").add(control);\n break;\n case \"read-only-info\": {\n control = new qx.ui.basic.Atom().set({\n label: this.tr(\"Read only\"),\n icon: \"@FontAwesome5Solid/eye/22\",\n gap: 10,\n font: \"text-14\",\n visibility: \"excluded\"\n });\n const hint = new osparc.ui.hint.Hint(control, osparc.desktop.StudyEditor.READ_ONLY_TEXT).set({\n active: false\n });\n hint.getLabel().set({\n maxWidth: 300,\n font: \"text-14\"\n });\n control.addListenerOnce(\"appear\", () => hint.attachShowHideHandlers());\n this.getChildControl(\"center-items\").add(control);\n break;\n }\n case \"credits-button\":\n control = new osparc.desktop.credits.CreditsIndicatorButton();\n this.getChildControl(\"right-items\").add(control);\n break;\n case \"tasks-button\":\n control = new osparc.task.TasksButton();\n this.getChildControl(\"right-items\").add(control);\n break;\n case \"notifications-button\":\n control = new osparc.notification.NotificationsButton();\n this.getChildControl(\"right-items\").add(control);\n break;\n case \"expiration-icon\": {\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/hourglass-end/22\").set({\n visibility: \"excluded\",\n textColor: \"danger-red\",\n cursor: \"pointer\"\n });\n control.addListener(\"tap\", () => osparc.desktop.account.MyAccountWindow.openWindow(), this);\n const authData = osparc.auth.Data.getInstance();\n authData.bind(\"expirationDate\", control, \"visibility\", {\n converter: expirationDay => {\n if (expirationDay && !authData.isGuest()) {\n const now = new Date();\n const today = new Date(now.toISOString().slice(0, 10));\n const daysToExpiration = osparc.utils.Utils.daysBetween(today, expirationDay);\n if (daysToExpiration < 7) {\n const msg = osparc.utils.Utils.expirationMessage(daysToExpiration);\n control.setToolTipText(msg);\n return \"visible\";\n }\n }\n return \"excluded\";\n }\n });\n this.getChildControl(\"right-items\").add(control);\n break;\n }\n case \"help\":\n control = this.__createHelpMenuBtn();\n control.set(this.self().BUTTON_OPTIONS);\n osparc.utils.Utils.setIdToWidget(control, \"helpNavigationBtn\");\n this.getChildControl(\"right-items\").add(control);\n break;\n case \"log-in-button\": {\n control = this.__createLoginBtn().set({\n visibility: \"excluded\"\n });\n control.set(this.self().BUTTON_OPTIONS);\n const authData = osparc.auth.Data.getInstance();\n authData.bind(\"guest\", control, \"visibility\", {\n converter: isGuest => isGuest ? \"visible\" : \"excluded\"\n });\n this.getChildControl(\"right-items\").add(control);\n break;\n }\n case \"user-menu\":\n control = new osparc.navigation.UserMenuButton();\n control.populateMenu();\n control.set(this.self().BUTTON_OPTIONS);\n this.getChildControl(\"right-items\").add(control);\n break;\n case \"user-menu-compact\":\n control = new osparc.navigation.UserMenuButton();\n control.populateMenuCompact();\n control.set(this.self().BUTTON_OPTIONS);\n this.getChildControl(\"right-items\").add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __createHelpMenuBtn: function() {\n const menu = new qx.ui.menu.Menu().set({\n position: \"top-right\",\n appearance: \"menu-wider\",\n });\n const menuButton = new qx.ui.form.MenuButton(null, \"@FontAwesome5Regular/question-circle/22\", menu).set({\n backgroundColor: \"transparent\"\n });\n\n osparc.utils.Utils.setIdToWidget(menu, \"helpNavigationMenu\");\n\n // quick starts and manuals\n osparc.store.Support.addQuickStartToMenu(menu);\n osparc.store.Support.addGuidedToursToMenu(menu);\n osparc.store.Support.addManualButtonsToMenu(menu, menuButton);\n menu.addSeparator();\n\n // feedback\n osparc.store.Support.addSupportButtonsToMenu(menu, menuButton);\n osparc.store.Support.addReleaseNotesToMenu(menu);\n\n return menuButton;\n },\n\n __createLoginBtn: function() {\n const registerButton = new qx.ui.form.Button(this.tr(\"Log in\"), \"@FontAwesome5Solid/edit/14\");\n registerButton.addListener(\"execute\", () => window.open(window.location.href, \"_blank\"));\n return registerButton;\n },\n\n addDashboardTabButtons: function(tabButtons) {\n this.__tabButtons = tabButtons;\n this.getChildControl(\"center-items\").add(tabButtons);\n this.bind(\"study\", this.__tabButtons, \"visibility\", {\n converter: s => s ? \"excluded\" : \"visible\"\n });\n this.__navBarResized();\n },\n\n __applyStudy: function(study) {\n const readOnlyInfo = this.getChildControl(\"read-only-info\")\n if (study) {\n this.getChildControl(\"study-title-options\").setStudy(study);\n study.bind(\"readOnly\", readOnlyInfo, \"visibility\", {\n converter: value => value ? \"visible\" : \"excluded\"\n });\n } else {\n readOnlyInfo.exclude();\n }\n },\n\n __navBarResized: function() {\n let tabButtons = [];\n if (this.__tabButtons) {\n tabButtons = this.__tabButtons.getChildControl(\"content\").getChildren();\n }\n if (osparc.WindowSizeTracker.getInstance().isCompactVersion()) {\n // left-items\n this.getChildControl(\"logo\").getChildControl(\"on-logo\").setSize({\n width: 100,\n height: osparc.navigation.NavigationBar.HEIGHT\n });\n if (!osparc.product.Utils.isProduct(\"osparc\")) {\n this.getChildControl(\"logo-powered\").exclude();\n }\n\n // center-items\n tabButtons.forEach(tabButton => {\n tabButton.getChildControl(\"icon\").show();\n tabButton.getChildControl(\"label\").exclude();\n tabButton.setToolTipText(tabButton.ttt);\n });\n\n // right-items\n this.getChildControl(\"user-menu\").exclude();\n this.getChildControl(\"help\").exclude();\n this.getChildControl(\"user-menu-compact\").show();\n } else {\n // left-items\n this.getChildControl(\"logo\").getChildControl(\"on-logo\").setSize({\n width: osparc.product.Utils.isS4LProduct() ? 150 : 100,\n height: osparc.navigation.NavigationBar.HEIGHT\n });\n if (!osparc.product.Utils.isProduct(\"osparc\")) {\n this.getChildControl(\"logo-powered\").show();\n }\n\n // center-items\n tabButtons.forEach(tabButton => {\n tabButton.getChildControl(\"label\").show();\n tabButton.getChildControl(\"icon\").exclude();\n tabButton.resetToolTipText();\n });\n\n // right-items\n this.getChildControl(\"user-menu-compact\").exclude();\n this.getChildControl(\"help\").show();\n this.getChildControl(\"user-menu\").show();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Tags\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.tagsCached = [];\n },\n\n events: {\n \"tagsChanged\": \"qx.event.type.Data\",\n },\n\n members: {\n tagsCached: null,\n\n fetchTags: function() {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n return osparc.data.Resources.get(\"tags\")\n .then(tagsData => {\n const tags = [];\n tagsData.forEach(tagData => {\n const tag = this.__addToCache(tagData);\n tags.push(tag);\n });\n return tags;\n });\n },\n\n getTags: function() {\n return this.tagsCached;\n },\n\n getTag: function(tagId = null) {\n return this.tagsCached.find(f => f.getTagId() === tagId);\n },\n\n postTag: function(newTagData) {\n const params = {\n data: newTagData\n };\n return osparc.data.Resources.getInstance().fetch(\"tags\", \"post\", params)\n .then(tagData => {\n const tag = this.__addToCache(tagData);\n this.fireDataEvent(\"tagsChanged\", tag);\n return tag;\n });\n },\n\n deleteTag: function(tagId) {\n const params = {\n url: {\n tagId\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"tags\", \"delete\", params)\n .then(() => {\n const tag = this.getTag(tagId);\n if (tag) {\n this.__deleteFromCache(tagId);\n this.fireDataEvent(\"tagsChanged\", tag);\n }\n })\n .catch(console.error);\n },\n\n patchTag: function(tagId, updateData) {\n const params = {\n url: {\n tagId\n },\n data: updateData\n };\n return osparc.data.Resources.getInstance().fetch(\"tags\", \"patch\", params)\n .then(tagData => {\n if (\"accessRights\" in tagData) {\n // accessRights are not patched in this endpoint\n delete tagData[\"accessRights\"];\n }\n return this.__addToCache(tagData);\n })\n .catch(console.error);\n },\n\n fetchAccessRights: function(tag, reload = false) {\n if (reload === false && tag.getAccessRights() !== null) {\n return new Promise(resolve => resolve());\n }\n\n const params = {\n url: {\n \"tagId\": tag.getTagId()\n }\n };\n return osparc.data.Resources.fetch(\"tags\", \"getAccessRights\", params)\n .then(accessRightsArray => {\n const accessRights = {};\n accessRightsArray.forEach(ar => accessRights[ar.gid] = ar);\n tag.setAccessRights(accessRights)\n })\n .catch(err => console.error(err));\n },\n\n addCollaborators: function(tagId, newCollaborators) {\n const promises = [];\n Object.keys(newCollaborators).forEach(groupId => {\n const params = {\n url: {\n tagId,\n groupId,\n },\n data: newCollaborators[groupId]\n };\n promises.push(osparc.data.Resources.fetch(\"tags\", \"postAccessRights\", params));\n });\n return Promise.all(promises)\n .then(() => {\n const tag = this.getTag(tagId);\n const newAccessRights = tag.getAccessRights();\n Object.keys(newCollaborators).forEach(gid => {\n newAccessRights[gid] = newCollaborators[gid];\n });\n tag.set({\n accessRights: newAccessRights,\n });\n })\n .catch(console.error);\n },\n\n removeCollaborator: function(tagId, groupId) {\n const params = {\n url: {\n tagId,\n groupId,\n }\n };\n return osparc.data.Resources.fetch(\"tags\", \"deleteAccessRights\", params)\n .then(() => {\n const tag = this.getTag(tagId);\n const newAccessRights = tag.getAccessRights();\n delete newAccessRights[groupId];\n tag.set({\n accessRights: newAccessRights,\n });\n })\n .catch(console.error);\n },\n\n updateCollaborator: function(tagId, groupId, newPermissions) {\n const params = {\n url: {\n tagId,\n groupId,\n },\n data: newPermissions\n };\n return osparc.data.Resources.fetch(\"tags\", \"putAccessRights\", params)\n .then(() => {\n const tag = this.getTag(tagId);\n const newAccessRights = tag.getAccessRights();\n newAccessRights[groupId] = newPermissions;\n tag.set({\n accessRights: tag.newAccessRights,\n });\n })\n .catch(console.error);\n },\n\n __addToCache: function(tagData) {\n let tag = this.tagsCached.find(f => f.getTagId() === tagData[\"id\"]);\n if (tag) {\n const props = Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Tag));\n // put\n Object.keys(tagData).forEach(key => {\n if (props.includes(key)) {\n tag.set(key, tagData[key]);\n }\n });\n } else {\n // get and post\n tag = new osparc.data.model.Tag(tagData);\n this.tagsCached.unshift(tag);\n }\n return tag;\n },\n\n __deleteFromCache: function(tagId) {\n const idx = this.tagsCached.findIndex(f => f.getTagId() === tagId);\n if (idx > -1) {\n this.tagsCached.splice(idx, 1);\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.window.TabbedView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this.set({\n padding: 20,\n paddingLeft: 10\n });\n\n this.getChildControl(\"tabs-view\");\n },\n\n statics: {\n /**\n * Common layout of section's box\n * @param {page section's name} sectionName\n */\n createSectionBox: function(sectionName) {\n const box = new qx.ui.groupbox.GroupBox(sectionName);\n box.getChildControl(\"legend\").set({\n font: \"text-14\"\n });\n box.getChildControl(\"frame\").set({\n backgroundColor: \"transparent\"\n });\n box.setLayout(new qx.ui.layout.VBox(10));\n return box;\n },\n\n /**\n * Common layout for tooltip label\n */\n createHelpLabel: function(message=null, font=\"text-13\") {\n const label = new qx.ui.basic.Label().set({\n value: message,\n alignX: \"left\",\n rich: true,\n font: font\n });\n return label;\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tabs-view\":\n control = new qx.ui.tabview.TabView().set({\n barPosition: \"left\",\n contentPadding: 0\n });\n this._add(control, {\n flex: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n addWidgetToTabs: function(widget) {\n this.getChildControl(\"tabs-view\").getChildControl(\"bar\").add(widget);\n },\n\n __widgetToPage: function(title, iconSrc, widget) {\n const page = new osparc.desktop.preferences.pages.BasePage(title, iconSrc);\n widget.set({\n margin: 10\n });\n const scroll = new qx.ui.container.Scroll();\n scroll.add(widget);\n page.add(scroll, {\n flex: 1\n });\n return page;\n },\n\n addTab: function(title, iconSrc, widget) {\n const page = this.__widgetToPage(title, iconSrc, widget);\n this.getChildControl(\"tabs-view\").add(page);\n return page;\n },\n\n _openPage: function(page) {\n if (page) {\n this.getChildControl(\"tabs-view\").setSelection([page]);\n return true;\n }\n return false;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.BillingCenter\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function() {\n this.base(arguments);\n\n const miniWallet = this.self().createMiniWalletView().set({\n paddingRight: 10\n });\n this.addWidgetToTabs(miniWallet);\n\n this.__walletsPage = this.__addWalletsPage();\n this.__paymentMethodsPage = this.__addPaymentMethodsPage();\n this.__transactionsPage = this.__addTransactionsPage();\n\n if (osparc.data.Permissions.getInstance().canDo(\"usage.all.read\")) {\n this.__usagePage = this.__addUsagePage();\n }\n\n if (osparc.product.Utils.showS4LStore()) {\n this.__addPurchasesPage();\n // For now, do not add checkouts page\n // this.__addCheckoutsPage();\n }\n },\n\n statics: {\n createMiniWalletView: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({\n alignX: \"center\",\n minWidth: 120,\n maxWidth: 150\n });\n\n const walletName = new qx.ui.basic.Label().set({\n alignX: \"center\"\n });\n layout.add(walletName);\n const creditsIndicator = new osparc.desktop.credits.CreditsIndicator();\n layout.add(creditsIndicator);\n const store = osparc.store.Store.getInstance();\n store.bind(\"contextWallet\", walletName, \"value\", {\n converter: wallet => wallet.getName()\n });\n store.bind(\"contextWallet\", walletName, \"toolTipText\", {\n converter: wallet => wallet.getName()\n });\n store.bind(\"contextWallet\", creditsIndicator, \"wallet\");\n\n layout.add(new qx.ui.core.Spacer(15, 15));\n\n return layout;\n }\n },\n\n members: {\n __walletsPage: null,\n __paymentMethodsPage: null,\n __transactionsPage: null,\n __usagePage: null,\n __paymentMethods: null,\n __transactionsTable: null,\n\n __addWalletsPage: function() {\n const title = this.tr(\"Credit Accounts\");\n const iconSrc = \"@MaterialIcons/account_balance_wallet/22\";\n const walletsView = new osparc.desktop.wallets.WalletsView();\n walletsView.addListener(\"buyCredits\", () => this.__openBuyCredits());\n const page = this.addTab(title, iconSrc, walletsView);\n return page;\n },\n\n __addPaymentMethodsPage: function() {\n const title = this.tr(\"Payment Methods\");\n const iconSrc = \"@FontAwesome5Solid/credit-card/22\";\n const paymentMethods = this.__paymentMethods = new osparc.desktop.paymentMethods.PaymentMethods();\n const page = this.addTab(title, iconSrc, paymentMethods);\n return page;\n },\n\n __addTransactionsPage: function() {\n const title = this.tr(\"Payments\");\n const iconSrc = \"@FontAwesome5Solid/exchange-alt/22\";\n const transactions = this.__transactionsTable = new osparc.desktop.credits.Transactions();\n const page = this.addTab(title, iconSrc, transactions);\n return page;\n },\n\n __addUsagePage: function() {\n const title = this.tr(\"Usage\");\n const iconSrc = \"@FontAwesome5Solid/list/22\";\n const usage = new osparc.desktop.credits.Usage();\n const page = this.addTab(title, iconSrc, usage);\n return page;\n },\n\n __addPurchasesPage: function() {\n const title = this.tr(\"Purchases\");\n const iconSrc = \"@FontAwesome5Solid/shopping-bag/22\";\n const purchases = new osparc.desktop.credits.Purchases();\n const page = this.addTab(title, iconSrc, purchases);\n return page;\n },\n\n __addCheckoutsPage: function() {\n const title = this.tr(\"Checkouts\");\n const iconSrc = \"@FontAwesome5Solid/list/22\";\n const purchases = new osparc.desktop.credits.Checkouts();\n const page = this.addTab(title, iconSrc, purchases);\n return page;\n },\n\n openWallets: function() {\n if (this.__walletsPage) {\n return this._openPage(this.__walletsPage);\n }\n return false;\n },\n\n __openBuyCredits: function() {\n if (this.__paymentMethods) {\n const paymentMethods = this.__paymentMethods.getPaymentMethods();\n osparc.desktop.credits.Utils.openBuyCredits(paymentMethods);\n }\n },\n\n openPaymentMethods: function() {\n this._openPage(this.__paymentMethodsPage);\n },\n\n openTransactions: function(fetchTransactions = false) {\n if (fetchTransactions) {\n this.__transactionsTable.refresh();\n this._openPage(this.__transactionsPage);\n } else {\n this._openPage(this.__transactionsPage);\n }\n },\n\n openUsage: function() {\n this._openPage(this.__usagePage);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * A mix between the Billing Center and My Account\n */\n\nqx.Class.define(\"osparc.desktop.credits.DesktopCenter\", {\n extend: osparc.desktop.credits.BillingCenter,\n\n construct: function() {\n this.base(arguments);\n\n const page = new osparc.desktop.account.ProfilePage();\n const profilePos = 2; // 0: Miniview, 1: Summary\n this.getChildControl(\"tabs-view\").addAt(page, profilePos);\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * Generic confirmation window.\n * Provides \"Cancel\" and \"Yes\" buttons as well as boolean Confirmed property.\n */\nqx.Class.define(\"osparc.ui.window.Confirmation\", {\n extend: osparc.ui.window.Dialog,\n\n /**\n * @extends osparc.ui.window.Dialog\n * @param {String} message Message that will be displayed to the user.\n */\n construct: function(message) {\n this.base(arguments, this.tr(\"Confirmation\"));\n\n if (message) {\n this.setMessage(message);\n }\n\n const confirmButton = this.__confirmButton = new qx.ui.form.Button();\n confirmButton.set({\n center: true,\n minWidth: 100\n });\n this.bind(\"confirmText\", confirmButton, \"label\");\n confirmButton.addListener(\"execute\", () => {\n this.setConfirmed(true);\n this.close(1);\n }, this);\n const command = new qx.ui.command.Command(\"Enter\");\n confirmButton.setCommand(command);\n this.addButton(confirmButton);\n this.addCancelButton();\n },\n\n properties: {\n confirmText: {\n check: \"String\",\n init: \"Yes\",\n event: \"changeConfirmText\"\n },\n\n confirmAction: {\n check: [null, \"create\", \"warning\", \"delete\"],\n init: null,\n nullable: true,\n apply: \"__applyConfirmAppearance\"\n },\n\n confirmed: {\n check: \"Boolean\",\n init: false\n }\n },\n\n members: {\n __confirmButton: null,\n\n getConfirmButton: function() {\n return this.__confirmButton;\n },\n\n getCancelButton: function() {\n return this.getChildControl(\"cancel-button\");\n },\n\n __applyConfirmAppearance: function(confirmationAction) {\n const confBtn = this.__confirmButton;\n switch (confirmationAction) {\n case \"create\":\n confBtn.setAppearance(\"strong-button\");\n break;\n case \"warning\":\n confBtn.setAppearance(\"warning-button\");\n break;\n case \"delete\":\n confBtn.setAppearance(\"danger-button\");\n break;\n default:\n confBtn.resetAppearance();\n break;\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.MainPageHandler\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n members: {\n __stack: null,\n __loadingPage: null,\n __dashboard: null,\n __studyEditor: null,\n\n setStack: function(stack) {\n this.__stack = stack;\n },\n\n addLoadingPage: function(loadingPage) {\n this.__loadingPage = loadingPage;\n this.__stack.add(loadingPage);\n },\n\n addDashboard: function(dashboard) {\n this.__dashboard = dashboard;\n this.__stack.add(dashboard);\n },\n\n addStudyEditor: function(studyEditor) {\n this.__studyEditor = studyEditor;\n this.__stack.add(studyEditor);\n },\n\n showLoadingPage: function() {\n this.__stack.setSelection([this.__loadingPage]);\n },\n\n showDashboard: function() {\n this.__stack.setSelection([this.__dashboard]);\n },\n\n showStudyEditor: function() {\n this.__stack.setSelection([this.__studyEditor]);\n },\n\n setLoadingPageHeader: function(msg) {\n this.__loadingPage.setHeader(msg);\n },\n\n startStudy: function(studyId) {\n this.setLoadingPageHeader(qx.locale.Manager.tr(\"Loading \") + osparc.product.Utils.getStudyAlias());\n this.showLoadingPage();\n\n const params = {\n url: {\n \"studyId\": studyId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(studyData => {\n if (!studyData) {\n const msg = qx.locale.Manager.tr(\"Study not found\");\n throw new Error(msg);\n }\n this.loadStudy(studyData);\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n this.showDashboard();\n return;\n });\n },\n\n loadStudy: function(studyData) {\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n // check if it's locked\n let locked = false;\n let lockedBy = false;\n if (\"state\" in studyData && \"locked\" in studyData[\"state\"]) {\n locked = studyData[\"state\"][\"locked\"][\"value\"];\n lockedBy = studyData[\"state\"][\"locked\"][\"owner\"];\n }\n if (locked && lockedBy[\"user_id\"] !== osparc.auth.Data.getInstance().getUserId()) {\n const msg = `${studyAlias} ${qx.locale.Manager.tr(\"is already open by\")} ${ // it will be replaced \"userName\"\n \"first_name\" in lockedBy && lockedBy[\"first_name\"] != null ?\n lockedBy[\"first_name\"] :\n qx.locale.Manager.tr(\"another user.\")\n }`;\n throw new Error(msg);\n }\n\n // check if it's corrupt\n if (osparc.study.Utils.isCorrupt(studyData)) {\n const msg = `${qx.locale.Manager.tr(\"We encountered an issue with the\")} ${studyAlias}
${qx.locale.Manager.tr(\"Please contact support.\")}`;\n throw new Error(msg);\n }\n\n this.setLoadingPageHeader(qx.locale.Manager.tr(\"Loading \") + studyData.name);\n this.showLoadingPage();\n const inaccessibleServices = osparc.study.Utils.getInaccessibleServices(studyData[\"workbench\"])\n if (inaccessibleServices.length) {\n const msg = osparc.study.Utils.getInaccessibleServicesMsg(inaccessibleServices, studyData[\"workbench\"]);\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n this.showDashboard();\n return;\n }\n this.showStudyEditor();\n this.__studyEditor.setStudyData(studyData);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * The loading page\n *\n * -----------------------\n * | [] |\n * | |\n * | oSparc/service logo |\n * | spinner + header |\n * | - msg_1 |\n * | - msg_2 |\n * | - msg_n |\n * -----------------------\n *\n */\nqx.Class.define(\"osparc.ui.message.Loading\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid(20, 20);\n layout.setRowFlex(this.self().GRID_POS.SPACER_TOP, 1);\n layout.setRowFlex(this.self().GRID_POS.SPACER_BOTTOM, 1);\n layout.setColumnFlex(0, 1);\n layout.setColumnMaxWidth(1, 400);\n layout.setColumnAlign(1, \"center\", \"middle\");\n layout.setColumnFlex(2, 1);\n layout.setColumnAlign(2, \"right\", \"middle\");\n this._setLayout(layout);\n\n this.__buildLayout();\n },\n\n properties: {\n logo: {\n check: \"String\",\n init: null,\n nullable: true,\n apply: \"__applyLogo\"\n },\n\n header: {\n check: \"String\",\n nullable: true,\n apply: \"__applyHeader\"\n },\n\n messages: {\n check: \"Array\",\n nullable: true,\n apply: \"__applyMessages\"\n },\n\n /**\n * Show Restart-Maximize Toolbar\n */\n showToolbar: {\n check: \"Boolean\",\n init: false,\n event: \"changeShowToolbar\",\n }\n },\n\n events: {\n \"restore\" : \"qx.event.type.Event\",\n \"maximize\" : \"qx.event.type.Event\",\n },\n\n statics: {\n ICON_WIDTH: 190,\n LOGO_HEIGHT: 100,\n ICON_HEIGHT: 220,\n STATUS_ICON_SIZE: 20,\n\n GRID_POS: {\n TOOLBAR: 0,\n SPACER_TOP: 1,\n LOGO: 2,\n WAITING: 3,\n MESSAGES: 4,\n EXTRA_WIDGETS: 5,\n SPACER_BOTTOM: 6,\n }\n },\n\n members: {\n __thumbnail: null,\n __header: null,\n __messagesContainer: null,\n __extraWidgets: null,\n __maxButton: null,\n\n __buildLayout: function() {\n this._add(new qx.ui.core.Widget(), {\n column: 0,\n row: 0\n });\n\n const maxLayout = this.__createMaximizeToolbar();\n this._add(maxLayout, {\n column: 2,\n row: this.self().GRID_POS.TOOLBAR\n });\n\n this._add(new qx.ui.core.Spacer(), {\n column: 1,\n row: this.self().GRID_POS.SPACER_TOP\n });\n\n const productLogoPath = osparc.product.Utils.getLogoPath();\n const thumbnail = this.__thumbnail = new osparc.ui.basic.Thumbnail(productLogoPath, this.self().ICON_WIDTH, this.self().LOGO_HEIGHT).set({\n alignX: \"center\"\n });\n let logoHeight = this.self().LOGO_HEIGHT;\n if (qx.util.ResourceManager.getInstance().getImageFormat(productLogoPath) === \"png\") {\n logoHeight = osparc.ui.basic.Logo.getHeightKeepingAspectRatio(productLogoPath, this.self().ICON_WIDTH);\n thumbnail.getChildControl(\"image\").set({\n width: this.self().ICON_WIDTH,\n height: logoHeight\n });\n } else {\n thumbnail.getChildControl(\"image\").set({\n width: this.self().ICON_WIDTH,\n height: logoHeight\n });\n }\n this._add(thumbnail, {\n column: 1,\n row: this.self().GRID_POS.LOGO\n });\n\n const waitingHeader = this.__header = new qx.ui.basic.Atom().set({\n icon: \"@FontAwesome5Solid/circle-notch/\"+this.self().STATUS_ICON_SIZE,\n font: \"title-18\",\n alignX: \"center\",\n rich: true,\n gap: 15,\n allowGrowX: false\n });\n const icon = waitingHeader.getChildControl(\"icon\");\n osparc.service.StatusUI.updateCircleAnimation(icon);\n const label = waitingHeader.getChildControl(\"label\");\n label.set({\n rich: true,\n wrap: true,\n alignX: \"center\",\n });\n this._add(waitingHeader, {\n column: 1,\n row: this.self().GRID_POS.WAITING\n });\n\n const messages = this.__messagesContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({\n alignX: \"center\"\n }));\n this._add(messages, {\n column: 1,\n row: this.self().GRID_POS.MESSAGES\n });\n\n const extraWidgets = this.__extraWidgets = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({\n alignX: \"center\"\n }));\n this._add(extraWidgets, {\n column: 1,\n row: this.self().GRID_POS.EXTRA_WIDGETS\n });\n\n this._add(new qx.ui.core.Spacer(), {\n column: 1,\n row: this.self().GRID_POS.SPACER_BOTTOM\n });\n },\n\n maximizeIFrame: function(maximize) {\n if (maximize) {\n this.fireEvent(\"maximize\");\n this.addState(\"maximized\");\n } else {\n this.fireEvent(\"restore\");\n this.removeState(\"maximized\");\n }\n const maxButton = this.__maxButton;\n maxButton.set({\n label: osparc.widget.PersistentIframe.getZoomLabel(maximize),\n icon: osparc.widget.PersistentIframe.getZoomIcon(maximize)\n });\n osparc.utils.Utils.setIdToWidget(maxButton, osparc.widget.PersistentIframe.getMaximizeWidgetId(maximize));\n qx.event.message.Bus.getInstance().dispatchByName(\"maximizeIframe\", this.hasState(\"maximized\"));\n },\n\n __createMaximizeToolbar: function() {\n const maximize = false;\n const maxButton = this.__maxButton = osparc.widget.PersistentIframe.createToolbarButton(maximize).set({\n maxHeight: 25,\n label: osparc.widget.PersistentIframe.getZoomLabel(maximize),\n icon: osparc.widget.PersistentIframe.getZoomIcon(maximize),\n });\n osparc.utils.Utils.setIdToWidget(maxButton, osparc.widget.PersistentIframe.getMaximizeWidgetId(maximize));\n maxButton.addListener(\"execute\", () => this.maximizeIFrame(!this.hasState(\"maximized\")), this);\n\n const toolbarLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"right\",\n }));\n this.bind(\"showToolbar\", toolbarLayout, \"visibility\", {\n converter: showToolbar => showToolbar ? \"visible\" : \"hidden\"\n });\n toolbarLayout.add(maxButton);\n return toolbarLayout;\n },\n\n __applyLogo: function(newLogo) {\n const productLogoPath = osparc.product.Utils.getLogoPath();\n if (newLogo !== productLogoPath) {\n this.__thumbnail.set({\n maxHeight: this.self().ICON_HEIGHT,\n height: this.self().ICON_HEIGHT,\n });\n this.__thumbnail.getChildControl(\"image\").set({\n maxHeight: this.self().ICON_HEIGHT,\n height: this.self().ICON_HEIGHT,\n });\n }\n this.__thumbnail.setSource(newLogo);\n },\n\n __applyHeader: function(value) {\n this.__header.setLabel(value);\n const words = value.split(\" \");\n if (words.length) {\n const state = words[0];\n const iconSource = osparc.service.StatusUI.getIconSource(state.toLowerCase(), this.self().STATUS_ICON_SIZE);\n if (iconSource) {\n this.__header.setIcon(iconSource);\n osparc.service.StatusUI.updateCircleAnimation(this.__header.getChildControl(\"icon\"));\n }\n }\n },\n\n __applyMessages: function(msgs) {\n this.clearMessages();\n if (msgs) {\n msgs.forEach(msg => {\n const text = new qx.ui.basic.Label(msg.toString()).set({\n font: \"text-18\",\n rich: true,\n wrap: true\n });\n this.__messagesContainer.add(text);\n });\n this.__messagesContainer.show();\n } else {\n this.__messagesContainer.exclude();\n }\n },\n\n clearMessages: function() {\n this.__messagesContainer.removeAll();\n },\n\n getMessageLabels: function() {\n return this.__messagesContainer.getChildren();\n },\n\n addWidgetToMessages: function(widget) {\n if (widget) {\n this.__messagesContainer.add(widget);\n this.__messagesContainer.show();\n } else {\n this.__messagesContainer.exclude();\n }\n },\n\n addExtraWidget: function(widget) {\n this.__extraWidgets.add(widget);\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Martin Wittemann (martinwittemann)\n * Jonathan Weiß (jonathan_rass)\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n\n/**\n * A tab view is a multi page view where only one page is visible\n * at each moment. It is possible to switch the pages using the\n * buttons rendered by each page.\n * \n * Note that prior to v6.0, when changing the currently selected tab via code\n * (ie changing the selection property) TabView would automatically set the \n * focus to that tab; this is undesirable (and inconsistent with other parts\n * of the framework) and is no longer done automatically.\n *\n * @childControl bar {qx.ui.container.SlideBar} slidebar for all tab buttons\n * @childControl pane {qx.ui.container.Stack} stack container to show one tab page\n */\nqx.Class.define(\"qx.ui.tabview.TabView\",\n{\n extend : qx.ui.core.Widget,\n implement : qx.ui.core.ISingleSelection,\n include : [qx.ui.core.MContentPadding],\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n\n /**\n * @param barPosition {String} Initial bar position ({@link #barPosition})\n */\n construct : function(barPosition)\n {\n this.base(arguments);\n\n this.__barPositionToState = {\n top : \"barTop\",\n right : \"barRight\",\n bottom : \"barBottom\",\n left : \"barLeft\"\n };\n\n this._createChildControl(\"bar\");\n this._createChildControl(\"pane\");\n\n // Create manager\n var mgr = this.__radioGroup = this._createRadioGroupInstance();\n mgr.setWrap(false);\n mgr.addListener(\"changeSelection\", this._onChangeSelection, this);\n\n // Initialize bar position\n if (barPosition != null) {\n this.setBarPosition(barPosition);\n } else {\n this.initBarPosition();\n }\n },\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n\n events :\n {\n /** Fires after the selection was modified */\n \"changeSelection\" : \"qx.event.type.Data\",\n\n /** Fires after the value was modified */\n \"changeValue\" : \"qx.event.type.Data\"\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"tabview\"\n },\n\n /**\n * This property defines on which side of the TabView the bar should be positioned.\n */\n barPosition :\n {\n check : [\"left\", \"right\", \"top\", \"bottom\"],\n init : \"top\",\n apply : \"_applyBarPosition\"\n }\n },\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n\n members :\n {\n /** @type {qx.ui.form.RadioGroup} instance containing the radio group */\n __radioGroup : null,\n\n\n /**\n * setValue implements part of the {@link qx.ui.form.IField} interface.\n *\n * @param item {null|qx.ui.tabview.Page} Page to set as selected value.\n * @returns {null|TypeError} The status of this operation.\n */\n setValue : function(item) {\n if (null === item) {\n this.resetSelection();\n return null;\n }\n\n if (item instanceof qx.ui.tabview.Page) {\n this.setSelection([item]);\n return null;\n\n } else {\n return new TypeError(\"Given argument is not null or a {qx.ui.tabview.Page}.\");\n }\n },\n\n\n /**\n * getValue implements part of the {@link qx.ui.form.IField} interface.\n *\n * @returns {null|qx.ui.tabview.Page} The currently selected page or null if there is none.\n */\n getValue : function() {\n var pages = this.getSelection();\n if (pages.length) {\n return pages[0];\n } else {\n return null;\n }\n },\n\n\n /**\n * resetValue implements part of the {@link qx.ui.form.IField} interface.\n */\n resetValue : function() {\n this.resetSelection();\n },\n\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"bar\":\n control = new qx.ui.container.SlideBar();\n control.setZIndex(10);\n this._add(control);\n break;\n\n case \"pane\":\n control = new qx.ui.container.Stack;\n control.setZIndex(5);\n this._add(control, {flex:1});\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n /**\n * Creates the radio group manager instance.\n * \n * Allows override customizations of the instance \n * \n * @return {qx.ui.form.RadioGroup} \n */\n _createRadioGroupInstance : function() {\n return new qx.ui.form.RadioGroup;\n },\n \n /**\n * Returns the element, to which the content padding should be applied.\n *\n * @return {qx.ui.core.Widget} The content padding target.\n */\n _getContentPaddingTarget : function() {\n return this.getChildControl(\"pane\");\n },\n\n\n /*\n ---------------------------------------------------------------------------\n CHILDREN HANDLING\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Adds a page to the tabview including its needed button\n * (contained in the page).\n *\n * @param page {qx.ui.tabview.Page} The page which should be added.\n */\n add : function(page)\n {\n if (qx.core.Environment.get(\"qx.debug\"))\n {\n if (!(page instanceof qx.ui.tabview.Page)) {\n throw new Error(\"Incompatible child for TabView: \" + page);\n }\n }\n\n var button = page.getButton();\n var bar = this.getChildControl(\"bar\");\n var pane = this.getChildControl(\"pane\");\n\n // Exclude page\n page.exclude();\n\n // Add button and page\n bar.add(button);\n pane.add(page);\n\n // Register button\n this.__radioGroup.add(button);\n\n // Add state to page\n page.addState(this.__barPositionToState[this.getBarPosition()]);\n\n // Update states\n page.addState(\"lastTab\");\n var children = this.getChildren();\n if (children[0] == page) {\n page.addState(\"firstTab\");\n } else {\n children[children.length-2].removeState(\"lastTab\");\n }\n\n page.addListener(\"close\", this._onPageClose, this);\n },\n\n /**\n * Adds a page to the tabview including its needed button\n * (contained in the page).\n *\n * @param page {qx.ui.tabview.Page} The page which should be added.\n * @param index {Integer?null} Optional position where to add the page.\n */\n addAt : function(page, index)\n {\n if (qx.core.Environment.get(\"qx.debug\"))\n {\n if (!(page instanceof qx.ui.tabview.Page)) {\n throw new Error(\"Incompatible child for TabView: \" + page);\n }\n }\n var children = this.getChildren();\n if(!(index == null) && index > children.length) {\n throw new Error(\"Index should be less than : \" + children.length);\n }\n\n if(index == null) {\n index = children.length;\n }\n\n var button = page.getButton();\n var bar = this.getChildControl(\"bar\");\n var pane = this.getChildControl(\"pane\");\n\n // Exclude page\n page.exclude();\n\n // Add button and page\n bar.addAt(button, index);\n pane.addAt(page, index);\n\n // Register button\n this.__radioGroup.add(button);\n\n // Add state to page\n page.addState(this.__barPositionToState[this.getBarPosition()]);\n\n // Update states\n children = this.getChildren();\n if(index == children.length-1) {\n page.addState(\"lastTab\");\n }\n\n if (children[0] == page) {\n page.addState(\"firstTab\");\n } else {\n children[children.length-2].removeState(\"lastTab\");\n }\n\n page.addListener(\"close\", this._onPageClose, this);\n },\n\n /**\n * Removes a page (and its corresponding button) from the TabView.\n *\n * @param page {qx.ui.tabview.Page} The page to be removed.\n */\n remove : function(page)\n {\n var pane = this.getChildControl(\"pane\");\n var bar = this.getChildControl(\"bar\");\n var button = page.getButton();\n var children = pane.getChildren();\n\n // Try to select next page\n if (this.getSelection()[0] == page)\n {\n var index = children.indexOf(page);\n if (index == 0)\n {\n if (children[1]) {\n this.setSelection([children[1]]);\n } else {\n this.resetSelection();\n }\n }\n else\n {\n this.setSelection([children[index-1]]);\n }\n }\n\n // Remove the button and page\n bar.remove(button);\n pane.remove(page);\n\n // Remove the button from the radio group\n this.__radioGroup.remove(button);\n\n // Remove state from page\n page.removeState(this.__barPositionToState[this.getBarPosition()]);\n\n // Update states\n if (page.hasState(\"firstTab\"))\n {\n page.removeState(\"firstTab\");\n if (children[0]) {\n children[0].addState(\"firstTab\");\n }\n }\n\n if (page.hasState(\"lastTab\"))\n {\n page.removeState(\"lastTab\");\n if (children.length > 0) {\n children[children.length-1].addState(\"lastTab\");\n }\n }\n\n page.removeListener(\"close\", this._onPageClose, this);\n },\n\n /**\n * Returns TabView's children widgets.\n *\n * @return {qx.ui.tabview.Page[]} List of children.\n */\n getChildren : function() {\n return this.getChildControl(\"pane\").getChildren();\n },\n\n /**\n * Returns the position of the given page in the TabView.\n *\n * @param page {qx.ui.tabview.Page} The page to query for.\n * @return {Integer} Position of the page in the TabView.\n */\n indexOf : function(page) {\n return this.getChildControl(\"pane\").indexOf(page);\n },\n\n /**\n * Returns the radio group manager.\n *\n * @return {qx.ui.form.RadioGroup} the radio group.\n */\n getRadioGroup : function() {\n return this.__radioGroup;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n\n /** @type {Map} Maps the bar position to an appearance state */\n __barPositionToState : null,\n\n /**\n * Apply method for the placeBarOnTop-Property.\n *\n * Passes the desired value to the layout of the tabview so\n * that the layout can handle it.\n * It also sets the states to all buttons so they know the\n * position of the bar.\n *\n * @param value {Boolean} The new value.\n * @param old {Boolean} The old value.\n */\n _applyBarPosition : function(value, old)\n {\n var bar = this.getChildControl(\"bar\");\n var pane = this.getChildControl(\"pane\");\n\n var horizontal = value == \"left\" || value == \"right\";\n var reversed = value == \"right\" || value == \"bottom\";\n\n var layoutClass = horizontal ? qx.ui.layout.HBox : qx.ui.layout.VBox;\n\n var layout = this._getLayout();\n if (layout && layout instanceof layoutClass) {\n // pass\n } else {\n this._setLayout(layout = new layoutClass);\n }\n\n // Update reversed\n layout.setReversed(reversed);\n\n // Sync orientation to bar\n bar.setOrientation(horizontal ? \"vertical\" : \"horizontal\");\n\n // Read children\n var children = this.getChildren();\n\n var i, l;\n // Toggle state to bar\n if (old)\n {\n var oldState = this.__barPositionToState[old];\n\n // Update bar\n bar.removeState(oldState);\n\n // Update pane\n pane.removeState(oldState);\n\n // Update pages\n for (i=0, l=children.length; i
beforeChangeSelection.\n *\n * @param e {qx.event.type.Event} Data event.\n */\n _onBeforeChangeSelection : function(e)\n {\n if (!this.fireNonBubblingEvent(\"beforeChangeSelection\",\n qx.event.type.Event, [false, true])) {\n e.preventDefault();\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Event handler for the change of the selected item of the radio group.\n * @param e {qx.event.type.Data} The data event\n */\n _onRadioChangeSelection : function(e) {\n var element = e.getData()[0];\n if (element) {\n this.setSelection([element.getUserData(\"page\")]);\n } else {\n this.resetSelection();\n }\n },\n\n\n /**\n * Removes the Page widget on which the close button was tapped.\n *\n * @param e {qx.event.type.Pointer} pointer event\n */\n _onPageClose : function(e)\n {\n // reset the old close button states, before remove page\n // see http://bugzilla.qooxdoo.org/show_bug.cgi?id=3763 for details\n var page = e.getTarget();\n var closeButton = page.getButton().getChildControl(\"close-button\");\n closeButton.reset();\n\n this.remove(page);\n }\n },\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n\n destruct : function() {\n this._disposeObjects(\"__radioGroup\");\n this.__barPositionToState = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget containing a TabView including:\n * - StudyBrowser\n * - TemplateBrowser\n * - ServiceBrowser\n * - DataBrowser\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let dashboard = new osparc.dashboard.Dashboard();\n * this.getRoot().add(dashboard);\n *\n */\n\nqx.Class.define(\"osparc.dashboard.Dashboard\", {\n extend: qx.ui.tabview.TabView,\n\n construct: function() {\n this.base(arguments);\n\n osparc.utils.Utils.setIdToWidget(this.getChildControl(\"bar\"), \"dashboardTabs\");\n osparc.utils.Utils.setIdToWidget(this, \"dashboard\");\n\n this.set({\n contentPadding: this.self().PADDING,\n contentPaddingBottom: 0,\n barPosition: \"top\"\n });\n\n // osparc.wrapper.Plotly.getInstance().init();\n // osparc.wrapper.Three.getInstance().init();\n osparc.wrapper.Svg.getInstance().init();\n osparc.wrapper.JsonDiffPatch.getInstance().init();\n osparc.wrapper.JsonTreeViewer.getInstance().init();\n osparc.wrapper.DOMPurify.getInstance().init();\n osparc.wrapper.RadialMenu.getInstance().init()\n .then(loaded => {\n if (loaded) {\n // hack to trigger fonts loading\n const menu = osparc.wrapper.RadialMenu.getInstance().createMenu();\n menu.show();\n menu.hide();\n }\n });\n this.__createMainViewLayout();\n },\n\n properties: {\n appearance: {\n init: \"dashboard\",\n refine: true\n }\n },\n\n statics: {\n PADDING: 15\n },\n\n members: {\n __studyBrowser: null,\n __templateBrowser: null,\n __serviceBrowser: null,\n __dataBrowser: null,\n\n getStudyBrowser: function() {\n return this.__studyBrowser;\n },\n\n getTemplateBrowser: function() {\n return this.__templateBrowser;\n },\n\n getServiceBrowser: function() {\n return this.__serviceBrowser;\n },\n\n __createMainViewLayout: function() {\n const permissions = osparc.data.Permissions.getInstance();\n const tabIconSize = 20;\n const tabs = [{\n id: \"studiesTab\",\n buttonId: \"studiesTabBtn\",\n label: osparc.product.Utils.getStudyAlias({\n plural: true,\n allUpperCase: true\n }),\n icon: \"@FontAwesome5Solid/file/\"+tabIconSize,\n buildLayout: this.__createStudyBrowser\n }];\n if (permissions.canDo(\"dashboard.templates.read\")) {\n tabs.push({\n id: \"templatesTab\",\n buttonId: \"templatesTabBtn\",\n label: osparc.product.Utils.getTemplateAlias({\n plural: true,\n allUpperCase: true\n }),\n icon: \"@FontAwesome5Solid/copy/\"+tabIconSize,\n buildLayout: this.__createTemplateBrowser\n });\n }\n if (permissions.canDo(\"dashboard.services.read\")) {\n tabs.push({\n id: \"servicesTab\",\n buttonId: \"servicesTabBtn\",\n label: this.tr(\"SERVICES\"),\n icon: \"@FontAwesome5Solid/cogs/\"+tabIconSize,\n buildLayout: this.__createServiceBrowser\n });\n }\n if (permissions.canDo(\"dashboard.data.read\") && osparc.product.Utils.isProduct(\"osparc\")) {\n tabs.push({\n id: \"dataTab\",\n buttonId: \"dataTabBtn\",\n label: this.tr(\"DATA\"),\n icon: \"@FontAwesome5Solid/folder/\"+tabIconSize,\n buildLayout: this.__createDataBrowser\n });\n }\n tabs.forEach(({id, buttonId, label, icon, buildLayout}) => {\n const tabPage = new qx.ui.tabview.Page(label, icon).set({\n appearance: \"dashboard-page\"\n });\n tabPage.id = id;\n const tabButton = tabPage.getChildControl(\"button\");\n tabButton.set({\n minWidth: 50,\n maxHeight: 36,\n });\n tabButton.ttt = label;\n tabButton.getChildControl(\"label\").set({\n font: \"text-16\"\n });\n tabButton.getChildControl(\"icon\").set({\n visibility: \"excluded\"\n });\n osparc.utils.Utils.centerTabIcon(tabPage);\n osparc.utils.Utils.setIdToWidget(tabButton, buttonId);\n tabPage.setLayout(new qx.ui.layout.Grow());\n\n const viewLayout = buildLayout.call(this);\n tabButton.addListener(\"execute\", () => {\n if (viewLayout.resetSelection) {\n viewLayout.resetSelection();\n }\n }, this);\n viewLayout.addListener(\"changeTab\", e => {\n const activeTab = e.getData();\n const tabFound = this.getSelectables().find(s => s.id === activeTab);\n if (tabFound) {\n this.setSelection([tabFound]);\n }\n }, this);\n const scrollerMainView = new qx.ui.container.Scroll();\n scrollerMainView.add(viewLayout);\n tabPage.add(scrollerMainView);\n\n this.add(tabPage);\n }, this);\n\n const preResourcePromises = [];\n const groupsStore = osparc.store.Groups.getInstance();\n preResourcePromises.push(groupsStore.fetchGroupsAndMembers());\n preResourcePromises.push(osparc.store.Services.getServicesLatest(false));\n Promise.all(preResourcePromises)\n .then(() => {\n [\n this.__studyBrowser,\n this.__templateBrowser,\n this.__serviceBrowser,\n this.__dataBrowser\n ].forEach(resourceBrowser => {\n if (resourceBrowser) {\n resourceBrowser.initResources();\n }\n });\n })\n .catch(err => console.error(err));\n },\n\n __createStudyBrowser: function() {\n const studiesView = this.__studyBrowser = new osparc.dashboard.StudyBrowser();\n return studiesView;\n },\n\n __createTemplateBrowser: function() {\n const templatesView = this.__templateBrowser = new osparc.dashboard.TemplateBrowser();\n return templatesView;\n },\n\n __createServiceBrowser: function() {\n const servicesView = this.__serviceBrowser = new osparc.dashboard.ServiceBrowser();\n return servicesView;\n },\n\n __createDataBrowser: function() {\n const dataManagerView = this.__dataBrowser = new osparc.dashboard.DataBrowser();\n return dataManagerView;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Study\", {\n type: \"static\",\n\n statics: {\n patchStudyData: function(studyData, fieldKey, value) {\n if (osparc.data.model.Study.OwnPatch.includes(fieldKey)) {\n console.error(fieldKey, \"has it's own PATCH path\");\n return null;\n }\n\n const patchData = {};\n patchData[fieldKey] = value;\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"]\n },\n data: patchData\n };\n return osparc.data.Resources.fetch(\"studies\", \"patch\", params)\n .then(() => {\n studyData[fieldKey] = value;\n // A bit hacky, but it's not sent back to the backend\n studyData[\"lastChangeDate\"] = new Date().toISOString();\n });\n },\n\n patchNodeData: function(studyData, nodeId, patchData) {\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"],\n \"nodeId\": nodeId\n },\n data: patchData\n };\n return osparc.data.Resources.fetch(\"studies\", \"patchNode\", params)\n .then(() => {\n Object.keys(patchData).forEach(key => {\n studyData[\"workbench\"][nodeId][key] = patchData[key];\n });\n // A bit hacky, but it's not sent back to the backend\n studyData[\"lastChangeDate\"] = new Date().toISOString();\n });\n },\n\n addCollaborators: function(studyData, newCollaborators) {\n const promises = [];\n Object.keys(newCollaborators).forEach(gid => {\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"],\n \"gId\": gid\n },\n data: newCollaborators[gid]\n };\n promises.push(osparc.data.Resources.fetch(\"studies\", \"postAccessRights\", params));\n });\n return Promise.all(promises)\n .then(() => {\n Object.keys(newCollaborators).forEach(gid => {\n studyData[\"accessRights\"][gid] = newCollaborators[gid];\n });\n studyData[\"lastChangeDate\"] = new Date().toISOString();\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"));\n },\n\n removeCollaborator: function(studyData, gid) {\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"],\n \"gId\": gid\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"deleteAccessRights\", params)\n .then(() => {\n delete studyData[\"accessRights\"][gid];\n studyData[\"lastChangeDate\"] = new Date().toISOString();\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"));\n },\n\n updateCollaborator: function(studyData, gid, newPermissions) {\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"],\n \"gId\": gid\n },\n data: newPermissions\n };\n return osparc.data.Resources.fetch(\"studies\", \"putAccessRights\", params)\n .then(() => {\n studyData[\"accessRights\"][gid] = newPermissions;\n studyData[\"lastChangeDate\"] = new Date().toISOString();\n })\n .catch(err => osparc.FlashMessenger.logAs(err.message, \"ERROR\"));\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Abstract widget that handles the loading page + main widget\n */\nqx.Class.define(\"osparc.ui.basic.LoadingPageHandler\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n const stack = this.__stack = new qx.ui.container.Stack();\n this._add(stack, {\n flex: 1\n });\n\n this._loadingPage = new osparc.ui.message.Loading();\n stack.add(this._loadingPage);\n\n this.__mainLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox())\n stack.add(this.__mainLayout);\n },\n\n members: {\n __stack: null,\n _loadingPage: null,\n __mainLayout: null,\n\n _showLoadingPage: function(label) {\n if (label) {\n this._loadingPage.setHeader(label);\n }\n this.__stack.setSelection([this._loadingPage]);\n },\n\n _showMainLayout: function() {\n this.__stack.setSelection([this.__mainLayout]);\n },\n\n _hideLoadingPage: function() {\n this._showMainLayout();\n },\n\n _addToMainLayout: function(widget, props = {}) {\n this.__mainLayout.add(widget, props);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.StudyEditor\", {\n extend: osparc.ui.basic.LoadingPageHandler,\n\n construct: function() {\n this.base(arguments);\n\n const viewsStack = this.__viewsStack = new qx.ui.container.Stack();\n const workbenchView = this.__workbenchView = new osparc.desktop.WorkbenchView();\n viewsStack.add(workbenchView);\n const slideshowView = this.__slideshowView = new osparc.desktop.SlideshowView();\n viewsStack.add(slideshowView);\n\n [\n \"collapseNavBar\",\n \"expandNavBar\",\n \"backToDashboardPressed\"\n ].forEach(signalName => {\n workbenchView.addListener(signalName, () => this.fireEvent(signalName));\n slideshowView.addListener(signalName, () => this.fireEvent(signalName));\n });\n\n workbenchView.addListener(\"slidesEdit\", () => this.__editSlides(), this);\n\n workbenchView.addListener(\"takeSnapshot\", () => this.__takeSnapshot(), this);\n workbenchView.addListener(\"takeSnapshot\", () => this.__takeSnapshot(), this);\n workbenchView.addListener(\"showSnapshots\", () => this.__showSnapshots(), this);\n workbenchView.addListener(\"createIterations\", () => this.__createIterations(), this);\n workbenchView.addListener(\"showIterations\", () => this.__showIterations(), this);\n\n workbenchView.addListener(\"changeSelectedNode\", e => {\n if (this.__nodesSlidesTree) {\n const nodeId = e.getData();\n this.__nodesSlidesTree.changeSelectedNode(nodeId);\n }\n });\n\n\n const wbAppear = new Promise(resolve => workbenchView.addListenerOnce(\"appear\", resolve, false));\n const ssAppear = new Promise(resolve => slideshowView.addListenerOnce(\"appear\", resolve, false));\n Promise.all([wbAppear, ssAppear]).then(() => {\n // both are ready\n workbenchView.getCollapseWithUserMenu().bind(\"collapsed\", slideshowView.getCollapseWithUserMenu(), \"collapsed\");\n slideshowView.getCollapseWithUserMenu().bind(\"collapsed\", workbenchView.getCollapseWithUserMenu(), \"collapsed\");\n });\n\n slideshowView.addListener(\"startPartialPipeline\", e => {\n const partialPipeline = e.getData();\n this.__startPipeline(partialPipeline);\n }, this);\n slideshowView.addListener(\"stopPipeline\", this.__stopPipeline, this);\n\n\n const startStopButtons = workbenchView.getStartStopButtons();\n startStopButtons.addListener(\"startPipeline\", () => this.__startPipeline([]), this);\n startStopButtons.addListener(\"startPartialPipeline\", () => {\n const partialPipeline = this.getStudy().getUi().getMode() === \"app\" ? this.__slideshowView.getSelectedNodeIDs() : this.__workbenchView.getSelectedNodeIDs();\n this.__startPipeline(partialPipeline);\n }, this);\n startStopButtons.addListener(\"stopPipeline\", () => this.__stopPipeline(), this);\n\n\n this._addToMainLayout(viewsStack, {\n flex: 1\n });\n\n this.__updatingStudy = 0;\n },\n\n events: {\n \"forceBackToDashboard\": \"qx.event.type.Event\",\n \"backToDashboardPressed\": \"qx.event.type.Event\",\n \"userIdled\": \"qx.event.type.Event\",\n \"collapseNavBar\": \"qx.event.type.Event\",\n \"expandNavBar\": \"qx.event.type.Event\",\n \"startSnapshot\": \"qx.event.type.Data\",\n \"startIteration\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: true,\n apply: \"__applyStudy\",\n event: \"changeStudy\"\n },\n },\n\n statics: {\n AUTO_SAVE_INTERVAL: 3000,\n READ_ONLY_TEXT: qx.locale.Manager.tr(\"You do not have writing permissions.
Your changes will not be saved.\"),\n },\n\n members: {\n __settingStudy: null,\n __viewsStack: null,\n __workbenchView: null,\n __slideshowView: null,\n __autoSaveTimer: null,\n __studyEditorIdlingTracker: null,\n __studyDataInBackend: null,\n __updatingStudy: null,\n __updateThrottled: null,\n __nodesSlidesTree: null,\n\n setStudyData: function(studyData) {\n if (this.__settingStudy) {\n return;\n }\n this.__settingStudy = true;\n\n this._showLoadingPage(this.tr(\"Starting\") + \" \" + studyData.name);\n\n // Before starting a study, make sure the latest version is fetched\n const params = {\n url: {\n \"studyId\": studyData.uuid\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(latestStudyData => {\n const study = new osparc.data.model.Study(latestStudyData);\n this.setStudy(study);\n });\n },\n\n __applyStudy: function(study) {\n this.__settingStudy = false;\n\n this._showLoadingPage(this.tr(\"Opening \") + (study.getName() || osparc.product.Utils.getStudyAlias({firstUpperCase: true})));\n\n const store = osparc.store.Store.getInstance();\n store.setCurrentStudy(study);\n\n this.__reloadSnapshotsAndIterations();\n\n study.openStudy()\n .then(studyData => {\n this.__setStudyDataInBackend(studyData);\n\n this.__workbenchView.setStudy(study);\n this.__slideshowView.setStudy(study);\n\n // wait until the workbench is deserialized to move to the next step\n if (study.getWorkbench().isDeserialized()) {\n this.__initStudy(study);\n } else {\n study.getWorkbench().addListener(\"changeDeserialized\", e => {\n if (e.getData()) {\n this.__initStudy(study);\n }\n }, this);\n }\n\n study.getUi().addListener(\"changeMode\", e => {\n this.__uiModeChanged(e.getData(), e.getOldData());\n });\n })\n .catch(err => {\n console.error(err);\n let msg = \"\";\n if (\"status\" in err && err[\"status\"]) {\n if (err[\"status\"] == 402) {\n msg = err[\"message\"];\n // The backend might have thrown a 402 because the wallet was negative\n const match = msg.match(/last transaction of\\s([-]?\\d+(\\.\\d+)?)\\sresulted/);\n let debt = null;\n if (\"debtAmount\" in err) {\n // the study has some debt that needs to be paid\n debt = err[\"debtAmount\"];\n } else if (match) {\n // the study has some debt that needs to be paid\n debt = parseFloat(match[1]); // Convert the captured string to a number\n }\n if (debt) {\n // if get here, it means that the 402 was thrown due to the debt\n osparc.store.Store.getInstance().setStudyDebt(study.getUuid(), debt);\n }\n } else if (err[\"status\"] == 409) { // max_open_studies_per_user\n msg = err[\"message\"];\n } else if (err[\"status\"] == 423) { // Locked\n msg = study.getName() + this.tr(\" is already opened\");\n }\n }\n if (!msg) {\n msg = this.tr(\"Error opening study\");\n if (\"message\" in err) {\n msg += \"
\" + err[\"message\"];\n }\n }\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n this.fireEvent(\"forceBackToDashboard\");\n })\n .finally(() => this._hideLoadingPage());\n\n this.__updatingStudy = 0;\n },\n\n __initStudy: function(study) {\n this.__attachSocketEventHandlers();\n\n study.initStudy();\n\n if (osparc.product.Utils.hasIdlingTrackerEnabled()) {\n this.__startIdlingTracker();\n }\n\n // Count dynamic services.\n // If it is larger than PROJECTS_MAX_NUM_RUNNING_DYNAMIC_NODES, dynamics won't start -> Flash Message\n const maxNumber = osparc.store.StaticInfo.getInstance().getMaxNumberDyNodes();\n const dontCheck = study.getDisableServiceAutoStart();\n if (maxNumber && !dontCheck) {\n const nodes = study.getWorkbench().getNodes();\n const nDynamics = Object.values(nodes).filter(node => node.isDynamic()).length;\n if (nDynamics > maxNumber) {\n let msg = this.tr(\"The Study contains more than \") + maxNumber + this.tr(\" Interactive services.\");\n msg += \"
\";\n msg += this.tr(\"Please start them manually.\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n }\n }\n\n if (osparc.data.model.Study.canIWrite(study.getAccessRights())) {\n this.__startAutoSaveTimer();\n } else {\n const msg = this.self().READ_ONLY_TEXT;\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n }\n\n\n const uiMode = study.getUi().getMode();\n this.__uiModeChanged(uiMode);\n\n const workbench = study.getWorkbench();\n workbench.addListener(\"retrieveInputs\", e => {\n const data = e.getData();\n const node = data[\"node\"];\n const portKey = data[\"portKey\"];\n this.__updatePipelineAndRetrieve(node, portKey);\n }, this);\n\n workbench.addListener(\"openNode\", e => {\n const nodeId = e.getData();\n this.nodeSelected(nodeId);\n }, this);\n\n workbench.addListener(\"updateStudyDocument\", () => this.updateStudyDocument());\n workbench.addListener(\"restartAutoSaveTimer\", () => this.__restartAutoSaveTimer());\n },\n\n __setStudyDataInBackend: function(studyData) {\n this.__studyDataInBackend = osparc.data.model.Study.deepCloneStudyObject(studyData, true);\n\n // remove the runHash, this.__studyDataInBackend is only used for diff comparison and the frontend doesn't keep it\n Object.keys(this.__studyDataInBackend[\"workbench\"]).forEach(nodeId => {\n if (\"runHash\" in this.__studyDataInBackend[\"workbench\"][nodeId]) {\n delete this.__studyDataInBackend[\"workbench\"][nodeId][\"runHash\"];\n }\n });\n },\n\n __attachSocketEventHandlers: function() {\n // Listen to socket events\n this.__listenToLogger();\n this.__listenToProgress();\n this.__listenToNodeUpdated();\n this.__listenToNodeProgress();\n this.__listenToNoMoreCreditsEvents();\n this.__listenToEvent();\n this.__listenToServiceStatus();\n this.__listenToStatePorts();\n },\n\n __listenToLogger: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n if (!socket.slotExists(\"logger\")) {\n socket.on(\"logger\", data => {\n if (Object.prototype.hasOwnProperty.call(data, \"project_id\") && this.getStudy()) {\n if (this.getStudy().getUuid() !== data[\"project_id\"]) {\n // Filter out logs from other studies\n return;\n }\n const nodeId = data[\"node_id\"];\n const messages = data.messages;\n const logLevelMap = osparc.widget.logger.LoggerView.LOG_LEVEL_MAP;\n const logLevel = (\"log_level\" in data) ? logLevelMap[data[\"log_level\"]] : \"INFO\";\n\n if (this.__workbenchView) {\n this.__workbenchView.logsToLogger(nodeId, messages, logLevel);\n }\n }\n }, this);\n }\n socket.emit(\"logger\");\n },\n\n __listenToProgress: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n const slotName2 = \"progress\";\n if (!socket.slotExists(slotName2)) {\n socket.on(slotName2, jsonString => {\n const data = JSON.parse(jsonString);\n if (Object.prototype.hasOwnProperty.call(data, \"project_id\") && this.getStudy()) {\n if (this.getStudy().getUuid() !== data[\"project_id\"]) {\n // Filter out logs from other studies\n return;\n }\n const nodeId = data[\"node_id\"];\n const progress = Number.parseFloat(data[\"progress\"]).toFixed(4);\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n node.getStatus().setProgress(progress);\n } else if (osparc.data.Permissions.getInstance().isTester()) {\n console.log(\"Ignored ws 'progress' msg\", data);\n }\n }\n }, this);\n }\n },\n\n __listenToNodeUpdated: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n if (!socket.slotExists(\"nodeUpdated\")) {\n socket.on(\"nodeUpdated\", data => {\n this.getStudy().nodeUpdated(data);\n }, this);\n }\n },\n\n __listenToNodeProgress: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n if (!socket.slotExists(\"nodeProgress\")) {\n socket.on(\"nodeProgress\", data => {\n this.getStudy().nodeNodeProgressSequence(data);\n }, this);\n }\n },\n\n __listenToNoMoreCreditsEvents: function() {\n const slotName = \"serviceNoMoreCredits\";\n const flashMessageDisplayDuration = 10000;\n\n const socket = osparc.wrapper.WebSocket.getInstance();\n const ttlMap = new osparc.data.TTLMap(flashMessageDisplayDuration);\n const store = osparc.store.Store.getInstance();\n\n if (!socket.slotExists(slotName)) {\n socket.on(slotName, noMoreCredits => {\n // stop service\n const nodeId = noMoreCredits[\"node_id\"];\n const workbench = this.getStudy().getWorkbench();\n workbench.getNode(nodeId).requestStopNode();\n\n // display flash message if not showing\n const walletId = noMoreCredits[\"wallet_id\"];\n if (ttlMap.hasRecentEntry(walletId)) {\n return;\n }\n ttlMap.addOrUpdateEntry(walletId);\n const usedWallet = store.getWallets().find(wallet => wallet.getWalletId() === walletId);\n const walletName = usedWallet.getName();\n const text = `Wallet \"${walletName}\", running your service(s) has run out of credits. Stopping service(s) gracefully.`;\n osparc.FlashMessenger.getInstance().logAs(this.tr(text), \"ERROR\", flashMessageDisplayDuration);\n }, this);\n }\n },\n\n __listenToEvent: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n // callback for events\n if (!socket.slotExists(\"event\")) {\n socket.on(\"event\", data => {\n const { action, \"node_id\": nodeId } = data\n if (Object.prototype.hasOwnProperty.call(data, \"project_id\") && this.getStudy()) {\n if (this.getStudy().getUuid() !== data[\"project_id\"]) {\n // Filter out logs from other studies\n return;\n }\n if (action == \"RELOAD_IFRAME\") {\n // TODO: maybe reload iframe in the future\n // for now a message is displayed to the user\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n const label = node.getLabel();\n const text = `New inputs for service ${label}. Please reload to refresh service.`;\n osparc.FlashMessenger.getInstance().logAs(text, \"INFO\");\n }\n }\n }, this);\n }\n },\n\n __listenToServiceStatus: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n // callback for events\n if (!socket.slotExists(\"serviceStatus\")) {\n socket.on(\"serviceStatus\", data => {\n const nodeId = data[\"service_uuid\"];\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n if (node.getIframeHandler()) {\n node.getIframeHandler().onNodeState(data);\n }\n } else if (osparc.data.Permissions.getInstance().isTester()) {\n console.log(\"Ignored ws 'progress' msg\", data);\n }\n }, this);\n }\n },\n\n __listenToStatePorts: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n if (!socket.slotExists(\"stateInputPorts\")) {\n socket.on(\"stateInputPorts\", data => {\n this.__statePortReceived(data, \"stateInputPorts\");\n }, this);\n }\n if (!socket.slotExists(\"stateOutputPorts\")) {\n socket.on(\"stateOutputPorts\", data => {\n this.__statePortReceived(data, \"stateOutputPorts\");\n }, this);\n }\n },\n\n __statePortReceived: function(socketData, msgName) {\n const studyId = socketData[\"project_id\"];\n if (this.getStudy().getUuid() !== studyId) {\n return;\n }\n\n const nodeId = socketData[\"node_id\"];\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (!node) {\n if (osparc.data.Permissions.getInstance().isTester()) {\n console.log(\"Ignored ws 'stateInputPorts' msg\", socketData);\n }\n return;\n }\n\n const propsForm = node.getPropsForm();\n if (msgName === \"stateInputPorts\" && propsForm) {\n const portId = socketData[\"port_key\"];\n const status = socketData[\"status\"];\n switch (status) {\n case \"DOWNLOAD_STARTED\":\n propsForm.retrievingPortData(\n portId,\n osparc.form.renderer.PropForm.RETRIEVE_STATUS.downloading\n );\n break;\n case \"DOWNLOAD_FINISHED_SUCCESSFULLY\":\n propsForm.retrievedPortData(portId, true);\n break;\n case \"DOWNLOAD_WAS_ABORTED\":\n case \"DOWNLOAD_FINISHED_WITH_ERROR\":\n propsForm.retrievedPortData(portId, false);\n break;\n }\n }\n\n const outputsForm = node.getOutputsForm();\n if (msgName === \"stateOutputPorts\" && outputsForm) {\n const portId = socketData[\"port_key\"];\n const status = socketData[\"status\"];\n switch (status) {\n case \"UPLOAD_STARTED\":\n outputsForm.setRetrievingStatus(\n portId,\n osparc.form.renderer.PropForm.RETRIEVE_STATUS.uploading\n );\n break;\n case \"UPLOAD_FINISHED_SUCCESSFULLY\":\n outputsForm.setRetrievingStatus(\n portId,\n osparc.form.renderer.PropForm.RETRIEVE_STATUS.succeed\n );\n break;\n case \"UPLOAD_WAS_ABORTED\":\n case \"UPLOAD_FINISHED_WITH_ERROR\":\n outputsForm.setRetrievingStatus(\n portId,\n osparc.form.renderer.PropForm.RETRIEVE_STATUS.failed\n );\n break;\n }\n }\n },\n\n __reloadSnapshotsAndIterations: function() {\n const isVCDisabled = osparc.utils.DisabledPlugins.isVersionControlDisabled();\n if (!isVCDisabled) {\n const store = osparc.store.Store.getInstance();\n store.invalidate(\"snapshots\");\n store.invalidate(\"iterations\");\n\n const study = this.getStudy();\n study.getSnapshots()\n .then(snapshots => {\n store.setSnapshots(snapshots);\n if (snapshots.length) {\n const isMMDisabled = osparc.utils.DisabledPlugins.isMetaModelingDisabled();\n if (!isMMDisabled) {\n study.getIterations()\n .then(iterations => {\n store.setIterations(iterations);\n });\n }\n }\n });\n }\n },\n\n __editSlides: function() {\n if (this.getStudy().getUi().getMode() !== \"workbench\") {\n // if the user is not in \"workbench\" mode, return\n return;\n }\n\n const study = this.getStudy();\n const nodesSlidesTree = this.__nodesSlidesTree = new osparc.widget.NodesSlidesTree(study);\n const title = this.tr(\"Edit App Mode\");\n const nNodes = Object.keys(study.getWorkbench().getNodes()).length;\n const win = osparc.ui.window.Window.popUpInWindow(nodesSlidesTree, title, 370, Math.min(350, 200+(30*nNodes))).set({\n modal: false,\n clickAwayClose: false\n });\n nodesSlidesTree.addListener(\"changeSelectedNode\", e => {\n const nodeId = e.getData();\n this.__workbenchView.getNodesTree().nodeSelected(nodeId);\n this.__workbenchView.getWorkbenchUI().nodeSelected(nodeId);\n });\n nodesSlidesTree.addListener(\"finished\", () => {\n const slideshow = study.getUi().getSlideshow();\n slideshow.fireEvent(\"changeSlideshow\");\n this.__nodesSlidesTree = null;\n win.close();\n });\n },\n\n\n // ------------------ START/STOP PIPELINE ------------------\n __startPipeline: function(partialPipeline = []) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.start\", true)) {\n return;\n }\n\n this.getStudy().setPipelineRunning(true);\n this.updateStudyDocument()\n .then(() => {\n this.__requestStartPipeline(this.getStudy().getUuid(), partialPipeline);\n })\n .catch(() => {\n this.getStudyLogger().error(null, \"Run failed\");\n this.getStudy().setPipelineRunning(false);\n });\n },\n\n __requestStartPipeline: function(studyId, partialPipeline = [], forceRestart = false) {\n const url = \"/computations/\" + encodeURIComponent(studyId) + \":start\";\n const req = new osparc.io.request.ApiRequest(url, \"POST\");\n req.addListener(\"success\", this.__onPipelineSubmitted, this);\n req.addListener(\"error\", () => {\n this.getStudyLogger().error(null, \"Error submitting pipeline\");\n this.getStudy().setPipelineRunning(false);\n }, this);\n req.addListener(\"fail\", async e => {\n if (e.getTarget().getStatus() == \"409\") {\n this.getStudyLogger().error(null, \"Pipeline is already running\");\n } else if (e.getTarget().getStatus() == \"422\") {\n this.getStudyLogger().info(null, \"The pipeline is up-to-date\");\n const msg = this.tr(\"The pipeline is up-to-date. Do you want to re-run it?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Re-run\"),\n confirmText: this.tr(\"Run\"),\n confirmAction: \"create\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__requestStartPipeline(studyId, partialPipeline, true);\n }\n }, this);\n } else if (e.getTarget().getStatus() == \"402\") {\n const msg = await e.getTarget().getResponse().error.errors[0].message;\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n } else {\n this.getStudyLogger().error(null, \"Failed submitting pipeline\");\n }\n this.getStudy().setPipelineRunning(false);\n }, this);\n\n const requestData = {\n \"subgraph\": partialPipeline,\n \"force_restart\": forceRestart\n };\n req.setRequestData(requestData);\n req.send();\n if (partialPipeline.length) {\n this.getStudyLogger().info(null, \"Starting partial pipeline\");\n } else {\n this.getStudyLogger().info(null, \"Starting pipeline\");\n }\n\n return true;\n },\n\n __onPipelineSubmitted: function(e) {\n const resp = e.getTarget().getResponse();\n const pipelineId = resp.data[\"pipeline_id\"];\n const iterationRefIds = resp.data[\"ref_ids\"];\n this.getStudyLogger().debug(null, \"Pipeline ID \" + pipelineId);\n const notGood = [null, undefined, -1];\n if (notGood.includes(pipelineId)) {\n this.getStudyLogger().error(null, \"Submission failed\");\n } else {\n if (iterationRefIds) {\n this.__reloadSnapshotsAndIterations();\n }\n this.getStudyLogger().info(null, \"Pipeline started\");\n /* If no projectStateUpdated comes in 60 seconds, client must\n check state of pipeline and update button accordingly. */\n const timer = setTimeout(() => {\n osparc.store.Store.getInstance().getStudyState(pipelineId);\n }, 60000);\n const socket = osparc.wrapper.WebSocket.getInstance();\n socket.getSocket().once(\"projectStateUpdated\", ({ \"project_uuid\": projectUuid }) => {\n if (projectUuid === pipelineId) {\n clearTimeout(timer);\n }\n });\n }\n },\n\n __stopPipeline: function() {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.stop\", true)) {\n return;\n }\n\n this.__requestStopPipeline(this.getStudy().getUuid());\n },\n\n __requestStopPipeline: function(studyId) {\n const url = \"/computations/\" + encodeURIComponent(studyId) + \":stop\";\n const req = new osparc.io.request.ApiRequest(url, \"POST\");\n req.addListener(\"success\", () => this.getStudyLogger().debug(null, \"Pipeline aborting\"), this);\n req.addListener(\"error\", () => this.getStudyLogger().error(null, \"Error stopping pipeline\"), this);\n req.addListener(\"fail\", () => this.getStudyLogger().error(null, \"Failed stopping pipeline\"), this);\n req.send();\n\n this.getStudyLogger().info(null, \"Stopping pipeline\");\n return true;\n },\n // ------------------ START/STOP PIPELINE ------------------\n\n __updatePipelineAndRetrieve: function(node, portKey = null) {\n this.updateStudyDocument()\n .then(() => {\n if (node) {\n this.getStudyLogger().debug(node.getNodeId(), \"Retrieving inputs\");\n node.retrieveInputs(portKey);\n } else {\n this.getStudyLogger().debug(null, \"Retrieving inputs\");\n }\n });\n this.getStudyLogger().debug(null, \"Updating pipeline\");\n },\n\n nodeSelected: function(nodeId) {\n this.__workbenchView.nodeSelected(nodeId);\n this.__slideshowView.nodeSelected(nodeId);\n },\n\n getStudyLogger: function() {\n return this.__workbenchView.getLogger();\n },\n\n __uiModeChanged: function(newUIMode, oldUIMode) {\n switch (newUIMode) {\n case \"guided\":\n case \"app\":\n this.__viewsStack.setSelection([this.__slideshowView]);\n this.__slideshowView.startSlides();\n break;\n case \"standalone\": {\n this.__viewsStack.setSelection([this.__workbenchView]);\n this.__workbenchView.openFirstNode();\n break;\n }\n case \"workbench\":\n default: {\n this.__viewsStack.setSelection([this.__workbenchView]);\n if (oldUIMode === \"standalone\") {\n // in this transition, show workbenchUI\n this.__workbenchView.setMaximized(false);\n // uncomment this when we release the osparc<->s4l integration\n // this.__workbenchView.showPipeline();\n } else {\n const currentNodeId = this.getStudy().getUi().getCurrentNodeId();\n if (currentNodeId && this.getStudy().getWorkbench().getNode(currentNodeId)) {\n const node = this.getStudy().getWorkbench().getNode(currentNodeId);\n if (node && node.isDynamic()) {\n this.__workbenchView.fullscreenNode(currentNodeId);\n } else {\n this.__workbenchView.nodeSelected(currentNodeId);\n }\n } else {\n this.__workbenchView.openFirstNode();\n }\n }\n break;\n }\n }\n },\n\n __takeSnapshot: function() {\n const editSnapshotView = new osparc.snapshots.EditSnapshotView();\n const tagCtrl = editSnapshotView.getChildControl(\"tags\");\n const study = this.getStudy();\n study.getSnapshots()\n .then(snapshots => {\n tagCtrl.setValue(\"V\"+snapshots.length);\n });\n const title = this.tr(\"Take Snapshot\");\n const win = osparc.ui.window.Window.popUpInWindow(editSnapshotView, title, 400, 180);\n editSnapshotView.addListener(\"takeSnapshot\", () => {\n const tag = editSnapshotView.getTag();\n const message = editSnapshotView.getMessage();\n const params = {\n url: {\n \"studyId\": study.getUuid()\n },\n data: {\n \"tag\": tag,\n \"message\": message\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"takeSnapshot\", params)\n .then(data => {\n const store = osparc.store.Store.getInstance();\n store.getSnapshots().push(data);\n })\n .catch(err => osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\"));\n\n win.close();\n }, this);\n editSnapshotView.addListener(\"cancel\", () => win.close(), this);\n },\n\n __showSnapshots: function() {\n const study = this.getStudy();\n const snapshots = new osparc.snapshots.SnapshotsView(study);\n const title = this.tr(\"Checkpoints\");\n const win = osparc.ui.window.Window.popUpInWindow(snapshots, title, 1000, 500);\n snapshots.addListener(\"openSnapshot\", e => {\n win.close();\n const snapshotId = e.getData();\n this.fireDataEvent(\"startSnapshot\", snapshotId);\n });\n },\n\n __createIterations: function() {\n console.log(\"createIterations not implemented yet\");\n },\n\n __showIterations: function() {\n const study = this.getStudy();\n const iterations = new osparc.snapshots.IterationsView(study);\n const title = this.tr(\"Iterations\");\n const win = osparc.ui.window.Window.popUpInWindow(iterations, title, 1000, 500);\n iterations.addListener(\"openIteration\", e => {\n win.close();\n const studyId = e.getData();\n this.fireDataEvent(\"startIteration\", studyId);\n });\n win.addListener(\"close\", () => {\n iterations.unlistenToNodeUpdated();\n this.__listenToNodeUpdated();\n }, this);\n },\n\n __startIdlingTracker: function() {\n if (this.__studyEditorIdlingTracker) {\n this.__studyEditorIdlingTracker.stop();\n this.__studyEditorIdlingTracker = null;\n }\n const studyEditorIdlingTracker = this.__studyEditorIdlingTracker = new osparc.desktop.StudyEditorIdlingTracker(this.getStudy().getUuid());\n studyEditorIdlingTracker.addListener(\"userIdled\", () => this.fireEvent(\"userIdled\"));\n studyEditorIdlingTracker.start();\n },\n\n __stopIdlingTracker: function() {\n if (this.__studyEditorIdlingTracker) {\n this.__studyEditorIdlingTracker.stop();\n this.__studyEditorIdlingTracker = null;\n }\n },\n\n __startAutoSaveTimer: function() {\n // Save every 3 seconds\n const timer = this.__autoSaveTimer = new qx.event.Timer(this.self().AUTO_SAVE_INTERVAL);\n timer.addListener(\"interval\", () => {\n if (!osparc.wrapper.WebSocket.getInstance().isConnected()) {\n return;\n }\n this.__checkStudyChanges();\n }, this);\n timer.start();\n },\n\n __stopAutoSaveTimer: function() {\n if (this.__autoSaveTimer && this.__autoSaveTimer.isEnabled()) {\n this.__autoSaveTimer.stop();\n this.__autoSaveTimer.setEnabled(false);\n }\n },\n\n __restartAutoSaveTimer: function() {\n if (this.__autoSaveTimer && this.__autoSaveTimer.isEnabled()) {\n this.__autoSaveTimer.restart();\n }\n },\n\n __stopTimers: function() {\n this.__stopIdlingTracker();\n this.__stopAutoSaveTimer();\n },\n\n __getStudyDiffs: function() {\n const newObj = this.getStudy().serialize();\n const delta = osparc.wrapper.JsonDiffPatch.getInstance().diff(this.__studyDataInBackend, newObj);\n if (delta) {\n // lastChangeDate and creationDate should not be taken into account as data change\n delete delta[\"creationDate\"];\n delete delta[\"lastChangeDate\"];\n return delta;\n }\n return {};\n },\n\n didStudyChange: function() {\n const studyDiffs = this.__getStudyDiffs();\n return Boolean(Object.keys(studyDiffs).length);\n },\n\n __checkStudyChanges: function() {\n if (this.didStudyChange()) {\n if (this.__updatingStudy > 0) {\n // throttle update\n this.__updateThrottled = true;\n } else {\n this.updateStudyDocument();\n }\n }\n },\n\n updateStudyDocument: function() {\n if (!osparc.data.model.Study.canIWrite(this.getStudy().getAccessRights())) {\n return new Promise(resolve => {\n resolve();\n });\n }\n\n this.__updatingStudy++;\n const studyDiffs = this.__getStudyDiffs();\n return this.getStudy().patchStudyDelayed(studyDiffs)\n .then(studyData => this.__setStudyDataInBackend(studyData))\n .catch(error => {\n if (\"status\" in error && error.status === 409) {\n console.log(\"Flash message blocked\"); // Workaround for osparc-issues #1189\n } else {\n console.error(error);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Error saving the study\"), \"ERROR\");\n }\n this.getStudyLogger().error(null, \"Error updating pipeline\");\n // Need to throw the error to be able to handle it later\n throw error;\n })\n .finally(() => {\n this.__updatingStudy--;\n if (this.__updateThrottled && this.__updatingStudy === 0) {\n this.__updateThrottled = false;\n this.updateStudyDocument();\n }\n });\n },\n\n __closeStudy: function() {\n const params = {\n url: {\n \"studyId\": this.getStudy().getUuid()\n },\n data: osparc.utils.Utils.getClientSessionID()\n };\n osparc.data.Resources.fetch(\"studies\", \"close\", params)\n .catch(err => console.error(err));\n },\n\n closeEditor: function() {\n this.__stopTimers();\n if (this.getStudy()) {\n this.getStudy().stopStudy();\n this.__closeStudy();\n }\n osparc.utils.Utils.closeHangingWindows();\n },\n\n /**\n * Destructor\n */\n destruct: function() {\n osparc.store.Store.getInstance().setCurrentStudy(null);\n this.__stopTimers();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - an entry point to oSparc\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.viewer.NavigationBar\", {\n extend: osparc.navigation.NavigationBar,\n\n members: {\n buildLayout: function() {\n this.getChildControl(\"logo\");\n\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n this.getChildControl(\"help\");\n this.getChildControl(\"theme-switch\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - an entry point to oSparc\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n// Used for \"anonymous\" or \"guest\" users\n\nqx.Class.define(\"osparc.viewer.NodeViewer\", {\n extend: qx.ui.core.Widget,\n\n construct: function(studyId, nodeId) {\n this.base();\n\n this._setLayout(new qx.ui.layout.VBox());\n\n const params = {\n url: {\n studyId\n },\n data: osparc.utils.Utils.getClientSessionID()\n };\n osparc.data.Resources.fetch(\"studies\", \"open\", params)\n .then(studyData => {\n // create study\n const study = new osparc.data.model.Study(studyData);\n this.setStudy(study);\n\n if (study.getWorkbench().isDeserialized()) {\n this.__initStudy(study, nodeId);\n } else {\n study.getWorkbench().addListener(\"changeDeserialized\", e => {\n if (e.getData()) {\n this.__initStudy(study, nodeId);\n }\n }, this);\n }\n })\n .catch(err => console.error(err));\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false\n }\n },\n\n members: {\n __initStudy: function(study, nodeId) {\n const node = study.getWorkbench().getNode(nodeId);\n this.setNode(node);\n\n node.addListener(\"retrieveInputs\", e => {\n const data = e.getData();\n const portKey = data[\"portKey\"];\n node.retrieveInputs(portKey);\n }, this);\n\n node.initIframeHandler();\n\n const iframeHandler = node.getIframeHandler();\n if (iframeHandler) {\n iframeHandler.checkState();\n iframeHandler.addListener(\"iframeChanged\", () => this.__iFrameChanged(), this);\n iframeHandler.getIFrame().addListener(\"load\", () => this.__iFrameChanged(), this);\n this.__iFrameChanged();\n\n this.__attachSocketEventHandlers();\n } else {\n console.error(node.getLabel() + \" iframe handler not ready\");\n }\n },\n\n __iFrameChanged: function() {\n this._removeAll();\n\n if (this.getNode() && this.getNode().getIframeHandler()) {\n const iframeHandler = this.getNode().getIframeHandler();\n const loadingPage = iframeHandler.getLoadingPage();\n const iFrame = iframeHandler.getIFrame();\n const src = iFrame.getSource();\n const iFrameView = (src === null || src === \"about:blank\") ? loadingPage : iFrame;\n this._add(iFrameView, {\n flex: 1\n });\n }\n },\n\n __attachSocketEventHandlers: function() {\n this.__listenToNodeUpdated();\n this.__listenToNodeProgress();\n this.__listenToServiceStatus();\n },\n\n __listenToNodeUpdated: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n if (!socket.slotExists(\"nodeUpdated\")) {\n socket.on(\"nodeUpdated\", data => {\n this.getStudy().nodeUpdated(data);\n }, this);\n }\n },\n\n __listenToNodeProgress: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n if (!socket.slotExists(\"nodeProgress\")) {\n socket.on(\"nodeProgress\", data => {\n this.getStudy().nodeNodeProgressSequence(data);\n }, this);\n }\n },\n\n __listenToServiceStatus: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n\n // callback for events\n if (!socket.slotExists(\"serviceStatus\")) {\n socket.on(\"serviceStatus\", data => {\n const nodeId = data[\"service_uuid\"];\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n if (node.getIframeHandler()) {\n node.getIframeHandler().onNodeState(data);\n }\n } else if (osparc.data.Permissions.getInstance().isTester()) {\n console.log(\"Ignored ws 'progress' msg\", data);\n }\n }, this);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(fetch)\n */\n\nqx.Class.define(\"osparc.data.PollTask\", {\n extend: qx.core.Object,\n\n construct: function(taskData, interval) {\n this.base(arguments);\n\n interval ? this.setPollInterval(interval) : this.initPollInterval();\n\n if (taskData && \"task_id\" in taskData) {\n this.set({\n taskId: taskData[\"task_id\"],\n statusHref: taskData[\"status_href\"],\n resultHref: taskData[\"result_href\"]\n });\n\n if (\"abort_href\" in taskData) {\n this.set({\n abortHref: taskData[\"abort_href\"]\n });\n }\n\n this.__retries = 3;\n this.__pollTaskState();\n }\n },\n\n events: {\n \"updateReceived\": \"qx.event.type.Data\",\n \"resultReceived\": \"qx.event.type.Data\",\n \"taskAborted\": \"qx.event.type.Event\",\n \"pollingError\": \"qx.event.type.Data\"\n },\n\n properties: {\n pollInterval: {\n check: \"Number\",\n nullable: false,\n init: 1000\n },\n\n taskId: {\n check: \"String\",\n nullable: false\n },\n\n statusHref: {\n check: \"String\",\n nullable: false\n },\n\n resultHref: {\n check: \"String\",\n nullable: false\n },\n\n abortHref: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeAbortHref\"\n },\n\n done: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n event: \"changeDone\",\n apply: \"__fetchResults\"\n }\n },\n\n statics: {\n extractPathname: function(href) {\n // For the long running tasks, only the pathname is relevant to the frontend\n const url = new URL(href);\n return url.pathname;\n }\n },\n\n members: {\n __retries: null,\n __aborting: null,\n\n __pollTaskState: function() {\n const statusPath = this.self().extractPathname(this.getStatusHref());\n fetch(statusPath)\n .then(resp => {\n if (this.__aborting || this.getDone()) {\n return null;\n }\n if (resp.status === 200) {\n return resp.json();\n }\n const errMsg = qx.locale.Manager.tr(\"Failed polling status\");\n const err = new Error(errMsg);\n this.fireDataEvent(\"pollingError\", err);\n throw err;\n })\n .then(data => {\n if (data === null) {\n return;\n }\n const response = data[\"data\"];\n const done = response[\"done\"];\n this.setDone(done);\n if (done === false) {\n this.fireDataEvent(\"updateReceived\", response);\n // keep polling\n setTimeout(() => this.__pollTaskState(), this.getPollInterval());\n }\n })\n .catch(err => {\n if (this.__retries > 0) {\n this.__retries--;\n this.__pollTaskState();\n return;\n }\n this.fireDataEvent(\"pollingError\", err);\n throw err;\n });\n },\n\n __fetchResults: function() {\n if (this.isDone()) {\n const resultPath = this.self().extractPathname(this.getResultHref());\n fetch(resultPath)\n .then(res => res.json())\n .then(result => {\n if (\"error\" in result && result[\"error\"]) {\n throw new Error(result[\"error\"][\"message\"]);\n }\n if (\"data\" in result && result[\"data\"]) {\n const resultData = result[\"data\"];\n this.fireDataEvent(\"resultReceived\", resultData);\n return;\n }\n throw new Error(\"Missing result data\");\n })\n .catch(err => {\n this.fireDataEvent(\"pollingError\", err);\n throw err;\n });\n }\n },\n\n abortRequested: function() {\n const abortHref = this.getAbortHref();\n if (abortHref) {\n this.__aborting = true;\n const abortPath = this.self().extractPathname(abortHref);\n fetch(abortPath, {\n method: \"DELETE\"\n })\n .then(() => this.fireEvent(\"taskAborted\"))\n .catch(err => {\n throw err;\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2007 Christian Boulanger\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Boulanger\n\n************************************************************************ */\n\n/**\n * A message to be dispatched on the message bus.\n */\nqx.Class.define(\"qx.event.message.Message\",\n{\n extend : qx.core.Object,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param name {String} The name of the message\n * @param data {var} Any type of data to attach\n */\n construct : function(name, data)\n {\n this.base(arguments);\n\n if (name != null) {\n this.setName(name);\n }\n\n if (data != null) {\n this.setData(data);\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Event name of the message. Based on this name the message is dispatched\n * to the event listeners.\n */\n name :\n {\n check : \"String\"\n },\n\n /**\n * Any data the sender wants to pass with the event.\n */\n data :\n {\n init : null,\n nullable : true\n },\n\n /**\n * A reference to the sending object.\n */\n sender :\n {\n check : \"Object\",\n nullable : true\n }\n },\n\n destruct : function()\n {\n this.setData(null);\n this.setSender(null);\n }\n});\n\n\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Grid layout that shows an element well centered\n * ___________________________________\n * |flex Spacer|flex Spacer|flex Spacer|\n * |flex Spacer| element |flex Spacer|\n * |flex Spacer|flex Spacer|flex Spacer|\n */\nqx.Class.define(\"osparc.ui.layout.CenteredGrid\", {\n extend: qx.ui.container.Composite,\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid();\n layout.setRowFlex(0, 1);\n layout.setRowFlex(2, 1);\n layout.setColumnFlex(0, 1);\n layout.setColumnFlex(2, 1);\n this._setLayout(layout);\n\n [\n [0, 0],\n [0, 1],\n [0, 2],\n [1, 0],\n [1, 2],\n [2, 0],\n [2, 1],\n [2, 2]\n ].forEach(quad => {\n const empty = new qx.ui.core.Spacer();\n this._add(empty, {\n row: quad[0],\n column: quad[1]\n });\n });\n },\n\n members: {\n addCenteredWidget: function(widget) {\n this._add(widget, {\n row: 1,\n column: 1\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows an image well centered and scaled.\n * ___________________________________\n * | x |flex Spacer| x |\n * |flex Spacer| Image |flex Spacer|\n * |_____x_____|flex Spacer|_____x_____|\n */\nqx.Class.define(\"osparc.ui.basic.Thumbnail\", {\n extend: osparc.ui.layout.CenteredGrid,\n\n /**\n * @param {String} source Source of the Image\n * @param {Number} maxWidth Maximum Width\n * @param {Number} maxHeight Maximum Height\n */\n construct: function(source, maxWidth, maxHeight) {\n this.base(arguments);\n\n if (source) {\n this.setSource(source);\n }\n const image = this.getChildControl(\"image\");\n if (maxWidth) {\n image.setMaxWidth(maxWidth);\n }\n if (maxHeight) {\n image.setMaxHeight(maxHeight);\n }\n\n [\n \"appear\",\n \"loaded\"\n ].forEach(eventName => {\n image.addListener(eventName, () => this.recheckSize(), this);\n });\n },\n\n properties: {\n source: {\n check : \"String\",\n init : null,\n nullable : true,\n event : \"changeSource\",\n apply : \"__applySource\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"image\":\n control = new qx.ui.basic.Image().set({\n scale: true,\n allowStretchX: true,\n allowStretchY: true,\n alignX: \"center\",\n alignY: \"middle\",\n });\n this.addCenteredWidget(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applySource: function(val) {\n const image = this.getChildControl(\"image\");\n if (val) {\n image.setSource(val);\n }\n },\n\n recheckSize: function() {\n const image = this.getChildControl(\"image\");\n const source = image.getSource();\n if (source) {\n const srcWidth = qx.io.ImageLoader.getWidth(source);\n const srcHeight = qx.io.ImageLoader.getHeight(source);\n if (srcWidth && srcHeight) {\n const aspectRatio = srcWidth/srcHeight;\n if (this.getBounds() && this.getBounds().width < image.getMaxWidth()) {\n image.set({\n minWidth: parseInt(this.getBounds().width),\n maxWidth: parseInt(this.getBounds().width),\n });\n }\n if (this.getBounds() && this.getBounds().height < image.getMaxHeight()) {\n image.set({\n minHeight: parseInt(this.getBounds().height),\n maxHeight: parseInt(this.getBounds().height),\n });\n }\n const maxWidth = image.getMaxWidth();\n const maxHeight = image.getMaxHeight();\n\n if (maxWidth && maxHeight) {\n const newMaxHeight = maxWidth/aspectRatio;\n if (newMaxHeight < maxHeight) {\n image.set({\n minHeight: parseInt(newMaxHeight),\n maxHeight: parseInt(newMaxHeight),\n });\n return;\n }\n const newMaxWidth = maxHeight*aspectRatio;\n if (newMaxWidth < maxWidth) {\n image.set({\n minWidth: parseInt(newMaxWidth),\n maxWidth: parseInt(newMaxWidth),\n });\n return;\n }\n return;\n }\n\n if (maxWidth) {\n const newMaxHeight = maxWidth/aspectRatio;\n image.set({\n minHeight: parseInt(newMaxHeight),\n maxHeight: parseInt(newMaxHeight),\n });\n return;\n }\n\n if (maxHeight) {\n const newMaxWidth = maxHeight*aspectRatio;\n image.set({\n minWidth: parseInt(newMaxWidth),\n maxWidth: parseInt(newMaxWidth),\n });\n return;\n }\n }\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that displays a score in form of stars.\n * It can also show the score with the max score next to it \"87/100\"\n */\nqx.Class.define(\"osparc.ui.basic.StarsRating\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n },\n\n properties: {\n score: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeScore\",\n apply: \"__render\"\n },\n\n targetScore: {\n check: \"Number\",\n init: null,\n nullable: true,\n event: \"changeTargetScore\",\n apply: \"__render\"\n },\n\n maxScore: {\n check: \"Number\",\n init: 4,\n nullable: false,\n apply: \"__render\"\n },\n\n nStars: {\n check: \"Number\",\n init: 4,\n nullable: false,\n apply: \"__render\"\n },\n\n showEmptyStars: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"__render\"\n },\n\n showScore: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"__render\"\n },\n\n mode: {\n check: [\"display\", \"edit\"],\n init: \"display\",\n nullable: false,\n apply: \"__render\"\n }\n },\n\n statics: {\n StarFull: \"@FontAwesome5Solid/star/12\",\n StarHalf: \"@FontAwesome5Solid/star-half/12\", // Todo: upgrade FontAwesome for star-half-alt\n StarEmpty: \"@FontAwesome5Regular/star/12\",\n\n scoreToStarsRating: function(currentTSR, targetTSR, starsRating) {\n const {\n score,\n targetScore,\n maxScore\n } = osparc.metadata.Quality.computeTSRScore(currentTSR, targetTSR);\n\n starsRating.set({\n score,\n targetScore,\n maxScore\n });\n }\n },\n\n members: {\n // overridden\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"stars-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(0).set({\n alignY: \"middle\"\n }));\n this._add(control);\n break;\n case \"score-text\": {\n control = new qx.ui.basic.Label().set({\n rich: true,\n font: \"text-12\"\n });\n this._add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n isEditMode() {\n return this.getMode() === \"edit\";\n },\n\n __checkValues: function() {\n const score = this.getScore();\n const maxScore = this.getMaxScore();\n if (score >= 0 && score <= maxScore) {\n return true;\n }\n return false;\n },\n\n __render: function() {\n if (this.__checkValues()) {\n this.__renderStars();\n this.__renderScore();\n }\n },\n\n __renderStars: function() {\n const starsLayout = this.getChildControl(\"stars-layout\");\n starsLayout.removeAll();\n\n const score = this.getScore();\n const maxScore = this.getTargetScore() || this.getMaxScore();\n const maxStars = this.getNStars();\n const normScore = score/maxScore;\n\n const fullStars = Math.floor(normScore/(1.0/maxStars));\n let currentScore = 1;\n for (let i=0; i
\n * const study = new osparc.data.model.Study(studyData);\n * const studyEditor = new osparc.desktop.StudyEditor();\n * studyEditor.setStudy(study);\n *\n */\n\nqx.Class.define(\"osparc.data.model.Study\", {\n extend: qx.core.Object,\n\n /**\n * @param studyData {Object} Object containing the serialized Study Data\n */\n construct: function(studyData) {\n this.base(arguments);\n\n this.set({\n uuid: studyData.uuid || this.getUuid(),\n workspaceId: studyData.workspaceId || null,\n folderId: studyData.folderId || null,\n name: studyData.name || this.getName(),\n description: studyData.description || this.getDescription(),\n thumbnail: studyData.thumbnail || this.getThumbnail(),\n prjOwner: studyData.prjOwner || this.getPrjOwner(),\n accessRights: studyData.accessRights || this.getAccessRights(),\n creationDate: studyData.creationDate ? new Date(studyData.creationDate) : this.getCreationDate(),\n lastChangeDate: studyData.lastChangeDate ? new Date(studyData.lastChangeDate) : this.getLastChangeDate(),\n classifiers: studyData.classifiers || this.getClassifiers(),\n tags: studyData.tags || this.getTags(),\n state: studyData.state || this.getState(),\n quality: studyData.quality || this.getQuality(),\n permalink: studyData.permalink || this.getPermalink(),\n dev: studyData.dev || this.getDev(),\n trashedAt: studyData.trashedAt ? new Date(studyData.trashedAt) : this.getTrashedAt(),\n trashedBy: studyData.trashedBy || null,\n });\n\n const wbData = studyData.workbench || this.getWorkbench();\n const workbench = new osparc.data.model.Workbench(wbData, studyData.ui);\n this.setWorkbench(workbench);\n workbench.setStudy(this);\n\n const workbenchUi = new osparc.data.model.StudyUI(studyData.ui);\n this.setUi(workbenchUi);\n\n this.getWorkbench().buildWorkbench();\n },\n\n properties: {\n uuid: {\n check: \"String\",\n nullable: false,\n event: \"changeUuid\",\n init: \"\"\n },\n\n workspaceId: {\n check: \"Number\",\n init: null,\n nullable: true,\n event: \"changeWorkspaceId\"\n },\n\n folderId: {\n check: \"Number\",\n init: null,\n nullable: true,\n event: \"changeFolderId\"\n },\n\n name: {\n check: \"String\",\n nullable: false,\n event: \"changeName\",\n init: \"New Study\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n event: \"changeDescription\",\n init: null\n },\n\n prjOwner: {\n check: \"String\",\n nullable: false,\n event: \"changePrjOwner\",\n init: \"\"\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n event: \"changeAccessRights\",\n apply: \"__applyAccessRights\",\n init: {}\n },\n\n creationDate: {\n check: \"Date\",\n nullable: false,\n event: \"changeCreationDate\",\n init: new Date()\n },\n\n lastChangeDate: {\n check: \"Date\",\n nullable: false,\n event: \"changeLastChangeDate\",\n init: new Date()\n },\n\n thumbnail: {\n check: \"String\",\n nullable: false,\n event: \"changeThumbnail\",\n init: \"\"\n },\n\n workbench: {\n check: \"osparc.data.model.Workbench\",\n nullable: false,\n event: \"changeWorkbench\",\n init: {}\n },\n\n ui: {\n check: \"osparc.data.model.StudyUI\",\n nullable: true\n },\n\n tags: {\n check: \"Array\",\n init: [],\n event: \"changeTags\",\n nullable: true\n },\n\n classifiers: {\n check: \"Array\",\n init: [],\n event: \"changeClassifiers\",\n nullable: true\n },\n\n quality: {\n check: \"Object\",\n init: {},\n event: \"changeQuality\",\n nullable: true\n },\n\n permalink: {\n check: \"Object\",\n nullable: true,\n init: {}\n },\n\n dev: {\n check: \"Object\",\n nullable: true,\n init: {}\n },\n\n // ------ ignore for serializing ------\n state: {\n check: \"Object\",\n nullable: true,\n event: \"changeState\",\n apply: \"__applyState\"\n },\n\n pipelineRunning: {\n check: \"Boolean\",\n nullable: true,\n init: false,\n event: \"changePipelineRunning\"\n },\n\n readOnly: {\n check: \"Boolean\",\n nullable: true,\n event: \"changeReadOnly\",\n init: true\n },\n\n trashedAt: {\n check: \"Date\",\n nullable: true,\n init: null,\n },\n\n trashedBy: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeTrashedBy\",\n },\n // ------ ignore for serializing ------\n },\n\n statics: {\n IgnoreSerializationProps: [\n \"permalink\",\n \"state\",\n \"pipelineRunning\",\n \"readOnly\",\n \"trashedAt\",\n ],\n\n IgnoreModelizationProps: [\n \"dev\"\n ],\n\n OwnPatch: [\n \"accessRights\",\n \"workbench\"\n ],\n\n createMinStudyObject: function() {\n let myNewStudyObject = {};\n const props = qx.util.PropertyUtil.getProperties(osparc.data.model.Study);\n for (let key in props) {\n const prop = props[key];\n if (!prop.nullable) {\n if (typeof prop.init === \"object\") {\n myNewStudyObject[key] = osparc.utils.Utils.deepCloneObject(prop.init);\n } else {\n myNewStudyObject[key] = prop.init;\n }\n }\n }\n return myNewStudyObject;\n },\n\n getProperties: function() {\n return Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Study));\n },\n\n // deep clones object with study-only properties\n deepCloneStudyObject: function(obj, ignoreExtra = false) {\n const studyObject = osparc.utils.Utils.deepCloneObject(obj);\n const studyPropKeys = osparc.data.model.Study.getProperties();\n Object.keys(studyObject).forEach(key => {\n if (!studyPropKeys.includes(key)) {\n delete studyObject[key];\n }\n if (ignoreExtra && osparc.data.model.Study.IgnoreSerializationProps.includes(key)) {\n delete studyObject[key];\n }\n });\n return studyObject;\n },\n\n canIWrite: function(studyAccessRights) {\n const groupsStore = osparc.store.Groups.getInstance();\n const orgIDs = groupsStore.getOrganizationIds();\n orgIDs.push(groupsStore.getMyGroupId());\n if (orgIDs.length) {\n return osparc.share.CollaboratorsStudy.canGroupsWrite(studyAccessRights, (orgIDs));\n }\n return false;\n },\n\n canIDelete: function(studyAccessRights) {\n const groupsStore = osparc.store.Groups.getInstance();\n const orgIDs = groupsStore.getOrganizationIds();\n orgIDs.push(groupsStore.getMyGroupId());\n if (orgIDs.length) {\n return osparc.share.CollaboratorsStudy.canGroupsDelete(studyAccessRights, (orgIDs));\n }\n return false;\n },\n\n getOutputValue: function(studyData, nodeId, portId) {\n if (\"workbench\" in studyData &&\n nodeId in studyData[\"workbench\"] &&\n \"outputs\" in studyData[\"workbench\"][nodeId] &&\n portId in studyData[\"workbench\"][nodeId][\"outputs\"]\n ) {\n return studyData[\"workbench\"][nodeId][\"outputs\"][portId];\n }\n return null;\n },\n\n computeStudyProgress: function(studyData) {\n const nodes = studyData[\"workbench\"];\n let nCompNodes = 0;\n let overallProgress = 0;\n Object.values(nodes).forEach(node => {\n const metadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n if (metadata && osparc.data.model.Node.isComputational(metadata)) {\n const progress = \"progress\" in node ? node[\"progress\"] : 0;\n overallProgress += progress;\n nCompNodes++;\n }\n });\n if (nCompNodes === 0) {\n return null;\n }\n return overallProgress/nCompNodes;\n },\n\n isRunning: function(state) {\n return [\n \"PUBLISHED\",\n \"PENDING\",\n \"WAITING_FOR_RESOURCES\",\n \"WAITING_FOR_CLUSTER\",\n \"STARTED\",\n \"RETRY\"\n ].includes(state);\n },\n },\n\n members: {\n serialize: function(clean = true) {\n let jsonObject = {};\n const propertyKeys = this.self().getProperties();\n propertyKeys.forEach(key => {\n if (this.self().IgnoreSerializationProps.includes(key)) {\n return;\n }\n if (key === \"workbench\") {\n jsonObject[key] = this.getWorkbench().serialize(clean);\n return;\n }\n if (key === \"ui\") {\n jsonObject[key] = this.getUi().serialize();\n return;\n }\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n },\n\n initStudy: function() {\n this.getWorkbench().initWorkbench();\n },\n\n isSnapshot: function() {\n return false;\n },\n\n getSnapshots: function() {\n return new Promise((resolve, reject) => {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.snapshot.read\")) {\n reject();\n return;\n }\n const params = {\n url: {\n \"studyId\": this.getUuid()\n }\n };\n osparc.data.Resources.getInstance().getAllPages(\"snapshots\", params)\n .then(snapshots => {\n resolve(snapshots);\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n });\n },\n\n getCurrentSnapshot: function() {\n return new Promise((resolve, reject) => {\n const params = {\n url: {\n \"studyId\": this.getUuid()\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"currentCommit\", params)\n .then(currentSnapshot => {\n resolve(currentSnapshot);\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n });\n },\n\n getIterations: function() {\n return new Promise((resolve, reject) => {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.snapshot.read\")) {\n reject();\n return;\n }\n this.getCurrentSnapshot()\n .then(snapshot => {\n const params = {\n url: {\n studyId: this.getUuid(),\n snapshotId: snapshot[\"id\"]\n }\n };\n osparc.data.Resources.get(\"iterations\", params)\n .then(iterations => {\n resolve(iterations);\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n });\n },\n\n __getFoldersPath: function(childId, foldersPath = []) {\n foldersPath.unshift(childId);\n const childFolder = osparc.store.Folders.getInstance().getFolder(childId);\n if (childFolder) {\n const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());\n if (parentFolder) {\n this.__getFoldersPath(parentFolder.getFolderId(), foldersPath);\n }\n }\n return foldersPath;\n },\n\n getLocationString: function() {\n const location = [];\n\n if (this.getWorkspaceId()) {\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getWorkspaceId());\n location.push(workspace.getName());\n } else {\n location.push(qx.locale.Manager.tr(\"My Workspace\"));\n }\n\n const foldersPathIds = this.__getFoldersPath(this.getFolderId());\n foldersPathIds.forEach(folderId => {\n const folder = osparc.store.Folders.getInstance().getFolder(folderId);\n if (folder) {\n location.push(folder.getName());\n }\n });\n\n return location.join(\" / \");\n },\n\n // Used for updating some node data through the \"nodeUpdated\" websocket event\n nodeUpdated: function(nodeUpdatedData) {\n const studyId = nodeUpdatedData[\"project_id\"];\n if (studyId !== this.getUuid()) {\n return;\n }\n const nodeId = nodeUpdatedData[\"node_id\"];\n const nodeData = nodeUpdatedData[\"data\"];\n const workbench = this.getWorkbench();\n const node = workbench.getNode(nodeId);\n // Do not listen to output related backend updates if the node is a frontend node.\n // The frontend controls its output values, progress and states.\n // If a File Picker is uploading a file, the backend could override the current state with some older state.\n if (node && nodeData && !osparc.data.model.Node.isFrontend(node.getMetaData())) {\n node.setOutputData(nodeData.outputs);\n if (\"progress\" in nodeData) {\n const progress = Number.parseInt(nodeData[\"progress\"]);\n node.getStatus().setProgress(progress);\n }\n node.populateStates(nodeData);\n }\n if (node && \"errors\" in nodeUpdatedData) {\n const errors = nodeUpdatedData[\"errors\"];\n node.setErrors(errors);\n } else {\n node.setErrors([]);\n }\n },\n\n nodeNodeProgressSequence: function(nodeProgressData) {\n const studyId = nodeProgressData[\"project_id\"];\n if (studyId !== this.getUuid()) {\n return;\n }\n const nodeId = nodeProgressData[\"node_id\"];\n const workbench = this.getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n const progressType = nodeProgressData[\"progress_type\"];\n const progressReport = nodeProgressData[\"progress_report\"];\n node.setNodeProgressSequence(progressType, progressReport);\n }\n },\n\n isLocked: function() {\n if (this.getState() && \"locked\" in this.getState()) {\n return this.getState()[\"locked\"][\"value\"];\n }\n return false;\n },\n\n isPipelineEmpty: function() {\n return Object.keys(this.getWorkbench().getNodes()).length === 0;\n },\n\n isPipelineMononode: function() {\n return Object.keys(this.getWorkbench().getNodes()).length === 1;\n },\n\n __applyAccessRights: function(accessRights) {\n if (this.isSnapshot()) {\n this.setReadOnly(true);\n } else {\n const canIWrite = osparc.data.model.Study.canIWrite(accessRights);\n this.setReadOnly(!canIWrite);\n }\n },\n\n __applyState: function(value) {\n if (value && \"state\" in value) {\n const isRunning = this.self().isRunning(value[\"state\"][\"value\"]);\n this.setPipelineRunning(isRunning);\n } else {\n this.setPipelineRunning(false);\n }\n },\n\n getDisableServiceAutoStart: function() {\n if (\"disableServiceAutoStart\" in this.getDev()) {\n return this.getDev()[\"disableServiceAutoStart\"];\n }\n return null;\n },\n\n openStudy: function() {\n const params = {\n url: {\n \"studyId\": this.getUuid()\n },\n data: osparc.utils.Utils.getClientSessionID()\n };\n if (this.getDisableServiceAutoStart() !== null) {\n params[\"url\"][\"disableServiceAutoStart\"] = this.getDisableServiceAutoStart();\n return osparc.data.Resources.fetch(\"studies\", \"openDisableAutoStart\", params);\n }\n return osparc.data.Resources.fetch(\"studies\", \"open\", params);\n },\n\n stopStudy: function() {\n this.__stopRequestingStatus();\n this.__stopFileUploads();\n this.__removeIFrames();\n },\n\n __stopRequestingStatus: function() {\n const nodes = this.getWorkbench().getNodes();\n for (const node of Object.values(nodes)) {\n node.stopRequestingStatus();\n }\n },\n\n __stopFileUploads: function() {\n const nodes = this.getWorkbench().getNodes();\n for (const node of Object.values(nodes)) {\n if (node.isFilePicker()) {\n node.requestFileUploadAbort();\n }\n }\n },\n\n __removeIFrames: function() {\n const nodes = this.getWorkbench().getNodes();\n for (const node of Object.values(nodes)) {\n node.removeIFrame();\n }\n },\n\n getParameters: function() {\n const parameters = [];\n const nodes = this.getWorkbench().getNodes();\n Object.values(nodes).forEach(node => {\n if (node.isParameter()) {\n parameters.push(node);\n }\n });\n return parameters;\n },\n\n getNonFrontendNodes: function() {\n const nodes = this.getWorkbench().getNodes();\n return Object.values(nodes).filter(node => node.isComputational() || node.isDynamic());\n },\n\n isOnlyNodeDynamic: function() {\n const validNodes = this.getNonFrontendNodes();\n if (validNodes.length === 1) {\n return validNodes[0].isDynamic();\n }\n return null;\n },\n\n hasSlideshow: function() {\n return !this.getUi().getSlideshow().isEmpty();\n },\n\n sendMessageToIframe: function(nodeId, msg) {\n if (nodeId) {\n const node = this.getWorkbench().getNode(nodeId);\n if (node && node.getIFrame()) {\n node.getIFrame().sendMessageToIframe(msg);\n return true;\n }\n }\n return false;\n },\n\n patchStudy: function(studyChanges) {\n const matches = this.self().OwnPatch.filter(el => Object.keys(studyChanges).indexOf(el) !== -1);\n if (matches.length) {\n console.error(matches, \"has it's own PATCH path\");\n return null;\n }\n\n return new Promise((resolve, reject) => {\n const params = {\n url: {\n \"studyId\": this.getUuid()\n },\n data: studyChanges\n };\n osparc.data.Resources.fetch(\"studies\", \"patch\", params)\n .then(() => {\n Object.keys(studyChanges).forEach(fieldKey => {\n const upKey = qx.lang.String.firstUp(fieldKey);\n const setter = \"set\" + upKey;\n this[setter](studyChanges[fieldKey]);\n })\n // A bit hacky, but it's not sent back to the backend\n this.set({\n lastChangeDate: new Date()\n });\n const studyData = this.serialize();\n resolve(studyData);\n })\n .catch(err => reject(err));\n });\n },\n\n /**\n * Call patch Study, but the changes were already applied on the frontend\n * @param studyDiffs {Object} Diff Object coming from the JsonDiffPatch lib. Use only the keys, not the changes.\n */\n patchStudyDelayed: function(studyDiffs) {\n const promises = [];\n let workbenchDiffs = {};\n if (\"workbench\" in studyDiffs) {\n workbenchDiffs = studyDiffs[\"workbench\"];\n promises.push(this.getWorkbench().patchWorkbenchDelayed(workbenchDiffs));\n delete studyDiffs[\"workbench\"];\n }\n const fieldKeys = Object.keys(studyDiffs);\n if (fieldKeys.length) {\n const patchData = {};\n const params = {\n url: {\n \"studyId\": this.getUuid()\n },\n data: patchData\n };\n fieldKeys.forEach(fieldKey => {\n if (fieldKey === \"ui\") {\n patchData[fieldKey] = this.getUi().serialize();\n } else {\n const upKey = qx.lang.String.firstUp(fieldKey);\n const getter = \"get\" + upKey;\n patchData[fieldKey] = this[getter](studyDiffs[fieldKey]);\n }\n promises.push(osparc.data.Resources.fetch(\"studies\", \"patch\", params))\n });\n }\n return Promise.all(promises)\n .then(() => {\n // A bit hacky, but it's not sent back to the backend\n this.set({\n lastChangeDate: new Date()\n });\n const studyData = this.serialize();\n return studyData;\n });\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\n/**\n * @asset(hint/hint.css)\n */\n\nqx.Class.define(\"osparc.ui.basic.FloatingHelper\", {\n extend: qx.ui.core.Widget,\n include: [qx.ui.core.MRemoteChildrenHandling, qx.ui.core.MRemoteLayoutHandling],\n\n construct: function(element, caretSize) {\n this.base(arguments);\n this.set({\n backgroundColor: \"transparent\",\n visibility: \"excluded\",\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX\n });\n\n if (caretSize) {\n this.setCaretSize(caretSize);\n }\n\n const hintCssUri = qx.util.ResourceManager.getInstance().toUri(\"hint/hint.css\");\n qx.module.Css.includeStylesheet(hintCssUri);\n\n this.__buildWidget();\n qx.core.Init.getApplication().getRoot().add(this);\n\n if (element) {\n if (element.getContentElement().getDomElement() == null) {\n element.addListenerOnce(\"appear\", () => this.setElement(element), this);\n } else {\n this.setElement(element);\n }\n }\n\n this.setLayout(new qx.ui.layout.Basic());\n },\n\n statics: {\n ORIENTATION: {\n TOP: 0,\n RIGHT: 1,\n BOTTOM: 2,\n LEFT: 3\n },\n\n textToOrientation: function(text) {\n if (Object.keys(osparc.ui.basic.FloatingHelper.ORIENTATION).includes(text.toUpperCase())) {\n return osparc.ui.basic.FloatingHelper.ORIENTATION[text.toUpperCase()];\n }\n return null;\n }\n },\n\n properties: {\n element: {\n check: \"qx.ui.core.Widget\",\n init: null,\n apply: \"__applyElement\"\n },\n\n orientation: {\n check: \"Integer\",\n nullable: false,\n init: 2,\n apply: \"__applyOrientation\"\n },\n\n caretSize: {\n check: [\"small\", \"large\"],\n nullable: false,\n init: \"small\"\n },\n\n active: {\n check: \"Boolean\",\n nullable: false,\n init: false\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"hint-container\":\n control = new qx.ui.container.Composite().set({\n appearance: \"hint\"\n });\n break;\n case \"caret\": {\n control = new qx.ui.container.Composite().set({\n backgroundColor: \"transparent\"\n });\n const classPrefix = this.getCaretSize() === \"large\" ? \"hint-large\" : \"hint-small\";\n control.getContentElement().addClass(classPrefix);\n const colorManager = qx.theme.manager.Color.getInstance();\n // override the css defined caret color depending on theme\n const overrideCaretColor = () => {\n const hintBg = colorManager.resolve(\"hint-background\");\n document.documentElement.style.setProperty(\"--hint-caret-color\", hintBg);\n };\n colorManager.addListener(\"changeTheme\", () => overrideCaretColor(), this);\n overrideCaretColor();\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildWidget: function() {\n this._removeAll();\n\n const classPrefix = this.getCaretSize() === \"large\" ? \"hint-large\" : \"hint-small\";\n\n const hintContainer = this.getChildControl(\"hint-container\");\n const caret = this.getChildControl(\"caret\");\n caret.getContentElement().removeClass(classPrefix+\"-top\");\n caret.getContentElement().removeClass(classPrefix+\"-right\");\n caret.getContentElement().removeClass(classPrefix+\"-bottom\");\n caret.getContentElement().removeClass(classPrefix+\"-left\");\n let caretClass = null;\n switch (this.getOrientation()) {\n case this.self().ORIENTATION.TOP:\n case this.self().ORIENTATION.LEFT: {\n caretClass = this.getOrientation() === this.self().ORIENTATION.LEFT ? classPrefix+\"-left\" : classPrefix+\"-top\";\n this._setLayout(this.getOrientation() === this.self().ORIENTATION.LEFT ? new qx.ui.layout.HBox() : new qx.ui.layout.VBox());\n this._add(hintContainer, {\n flex: 1\n });\n this._add(caret);\n break;\n }\n case this.self().ORIENTATION.RIGHT:\n case this.self().ORIENTATION.BOTTOM: {\n caretClass = this.getOrientation() === this.self().ORIENTATION.RIGHT ? classPrefix+\"-right\" : classPrefix+\"-bottom\";\n this._setLayout(this.getOrientation() === this.self().ORIENTATION.RIGHT ? new qx.ui.layout.HBox() : new qx.ui.layout.VBox());\n this._add(caret);\n this._add(hintContainer, {\n flex: 1\n });\n break;\n }\n }\n caret.getContentElement().addClass(caretClass);\n const caretSize = this.getCaretSize() === \"large\" ? 10 : 5;\n switch (this.getOrientation()) {\n case this.self().ORIENTATION.RIGHT:\n case this.self().ORIENTATION.LEFT:\n caret.setHeight(0);\n caret.setWidth(caretSize);\n break;\n case this.self().ORIENTATION.TOP:\n case this.self().ORIENTATION.BOTTOM:\n caret.setWidth(0);\n caret.setHeight(caretSize);\n break;\n }\n },\n\n updatePosition: function() {\n if (this.getElement() && this.getElement().getContentElement()) {\n const element = this.getElement().getContentElement()\n .getDomElement();\n const {\n top,\n left\n } = qx.bom.element.Location.get(element);\n const {\n width,\n height\n } = qx.bom.element.Dimension.getSize(element);\n const selfBounds = this.getHintBounds();\n let properties = {};\n switch (this.getOrientation()) {\n case this.self().ORIENTATION.TOP:\n properties.top = top - selfBounds.height;\n properties.left = Math.floor(left + (width - selfBounds.width) / 2);\n break;\n case this.self().ORIENTATION.RIGHT:\n properties.top = Math.floor(top + (height - selfBounds.height) / 2);\n properties.left = left + width;\n break;\n case this.self().ORIENTATION.BOTTOM:\n properties.top = top + height;\n properties.left = Math.floor(left + (width - selfBounds.width) / 2);\n break;\n case this.self().ORIENTATION.LEFT:\n properties.top = Math.floor(top + (height - selfBounds.height) / 2);\n properties.left = left - selfBounds.width;\n break;\n }\n this.setLayoutProperties(properties);\n }\n },\n\n moveToTheCenter: function() {\n const properties = {};\n const selfBounds = this.getHintBounds();\n properties.top = Math.floor((window.innerHeight - selfBounds.height) / 2);\n properties.left = Math.floor((window.innerWidth - selfBounds.width) / 2);\n this.setLayoutProperties(properties);\n },\n\n getHintBounds: function() {\n return this.getBounds() || this.getSizeHint();\n },\n\n __applyOrientation: function() {\n this.__buildWidget();\n this.updatePosition();\n },\n\n // overwritten\n getChildrenContainer: function() {\n return this.getChildControl(\"hint-container\");\n },\n\n __applyElement: function(element, oldElement) {\n if (oldElement) {\n oldElement.removeListener(\"appear\", this._elementAppearDisappearHandler);\n oldElement.removeListener(\"disappear\", this._elementAppearDisappearHandler);\n this.__removeListeners([\"move\", \"resize\"]);\n this.__removeListeners([\"scrollX\", \"scrollY\"], true);\n }\n if (element) {\n const isElementVisible = qx.ui.core.queue.Visibility.isVisible(element);\n if (isElementVisible && this.isActive()) {\n this.show();\n }\n element.addListener(\"appear\", this._elementAppearDisappearHandler, this);\n element.addListener(\"disappear\", this._elementAppearDisappearHandler, this);\n this.__addListeners([\"move\", \"resize\"]);\n this.__addListeners([\"scrollX\", \"scrollY\"], true);\n } else {\n this.exclude();\n }\n },\n\n __addListeners: function(events, skipThis = false) {\n let widget = skipThis ? this.getElement().getLayoutParent() : this.getElement();\n while (widget && widget !== qx.core.Init.getApplication().getRoot()) {\n events.forEach(e => {\n if (qx.util.OOUtil.supportsEvent(widget, e)) {\n widget.addListener(e, this.__elementVisibilityHandler, this);\n }\n });\n widget = widget.getLayoutParent();\n }\n },\n\n __removeListeners: function(events, skipThis = false) {\n let widget = skipThis ? this.getElement().getLayoutParent() : this.getElement();\n while (widget && widget !== qx.core.Init.getApplication().getRoot()) {\n events.forEach(e => {\n if (qx.util.OOUtil.supportsEvent(widget, e)) {\n widget.removeListener(e, this.__elementVisibilityHandler);\n }\n });\n widget = widget.getLayoutParent();\n }\n },\n\n _elementAppearDisappearHandler: function(e) {\n this.__elementVisibilityHandler(e);\n },\n\n __elementVisibilityHandler: function(e) {\n switch (e.getType()) {\n case \"appear\":\n if (this.isActive()) {\n this.show();\n }\n this.updatePosition();\n break;\n case \"disappear\":\n this.exclude();\n break;\n case \"move\":\n case \"resize\":\n case \"scrollX\":\n case \"scrollY\":\n setTimeout(() => this.updatePosition(), 20); // Hacky: Execute async and give some time for the relevant properties to be set\n break;\n }\n },\n\n // overridden\n _applyVisibility: function(ne, old) {\n this.base(arguments, ne, old);\n this.updatePosition();\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A basic layout, which supports positioning of child widgets by absolute\n * left/top coordinates. This layout is very simple but should also\n * perform best.\n *\n * *Features*\n *\n * * Basic positioning using
left and top properties\n * * Respects minimum and maximum dimensions without shrinking/growing\n * * Margins for top and left side (including negative ones)\n * * Respects right and bottom margins in the size hint\n * * Auto-sizing\n *\n * *Item Properties*\n *\n * - \n *
- left (Integer): The left coordinate in pixel \n *
- top (Integer): The top coordinate in pixel \n *
left and top.\n *\n * *Example*\n *\n * Here is a little example of how to use the basic layout.\n *\n * \n * var container = new qx.ui.container.Composite(new qx.ui.layout.Basic());\n *\n * // simple positioning\n * container.add(new qx.ui.core.Widget(), {left: 10, top: 10});\n * container.add(new qx.ui.core.Widget(), {left: 100, top: 50});\n * \n *\n * *External Documentation*\n *\n * \n * Extended documentation and links to demos of this layout in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.layout.Basic\",\n{\n extend : qx.ui.layout.Abstract,\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n LAYOUT INTERFACE\n ---------------------------------------------------------------------------\n */\n\n // overridden\n verifyLayoutProperty : qx.core.Environment.select(\"qx.debug\",\n {\n \"true\" : function(item, name, value)\n {\n this.assert(name == \"left\" || name == \"top\", \"The property '\"+name+\"' is not supported by the Basic layout!\");\n this.assertInteger(value);\n },\n\n \"false\" : null\n }),\n\n\n // overridden\n renderLayout : function(availWidth, availHeight, padding)\n {\n var children = this._getLayoutChildren();\n var child, size, props, left, top;\n\n // Render children\n for (var i=0, l=children.length; i\");\n Object.values(workbench).forEach(node => {\n const inaccessibleService = inaccessibleServices.find(srv => srv.key === node.key && srv.version === node.version);\n if (inaccessibleService) {\n const n = inaccessibleService.key.lastIndexOf(\"/\");\n const friendlyKey = inaccessibleService.key.substring(n + 1);\n msg += `- ${node.label} (${friendlyKey}:${inaccessibleService.version})
`;\n }\n });\n return msg;\n },\n\n isWorkbenchUpdatable: function(workbench) {\n const services = new Set(this.extractUniqueServices(workbench));\n const isUpdatable = Array.from(services).some(srv => osparc.service.Utils.isUpdatable(srv));\n return isUpdatable;\n },\n\n isWorkbenchRetired: function(workbench) {\n const allServices = osparc.store.Services.servicesCached;\n const services = new Set(this.extractUniqueServices(workbench));\n const isRetired = Array.from(services).some(srv => {\n if (srv.key in allServices && srv.version in allServices[srv.key]) {\n const serviceMD = allServices[srv.key][srv.version];\n if (serviceMD[\"retired\"]) {\n const retirementDate = new Date(serviceMD[\"retired\"]);\n const currentDate = new Date();\n return retirementDate < currentDate;\n }\n return false;\n }\n return false;\n });\n return isRetired;\n },\n\n isWorkbenchDeprecated: function(workbench) {\n const allServices = osparc.store.Services.servicesCached;\n const services = new Set(this.extractUniqueServices(workbench));\n const isRetired = Array.from(services).some(srv => {\n if (srv.key in allServices && srv.version in allServices[srv.key]) {\n const serviceMD = allServices[srv.key][srv.version];\n if (\"retired\" in serviceMD && serviceMD[\"retired\"]) {\n const retirementDate = new Date(serviceMD[\"retired\"]);\n const currentDate = new Date();\n return retirementDate > currentDate;\n }\n return false;\n }\n return false;\n });\n return isRetired;\n },\n\n createStudyFromService: function(key, version, existingStudies, newStudyLabel, contextProps = {}) {\n return new Promise((resolve, reject) => {\n osparc.store.Services.getService(key, version)\n .then(metadata => {\n const newUuid = osparc.utils.Utils.uuidV4();\n // context props, otherwise Study will be created in the root folder of my personal workspace\n const minStudyData = Object.assign(osparc.data.model.Study.createMinStudyObject(), contextProps);\n if (newStudyLabel === undefined) {\n newStudyLabel = metadata[\"name\"];\n }\n if (existingStudies) {\n const existingNames = existingStudies.map(study => study[\"name\"]);\n const title = osparc.utils.Utils.getUniqueName(newStudyLabel, existingNames);\n minStudyData[\"name\"] = title;\n } else {\n minStudyData[\"name\"] = newStudyLabel;\n }\n if (metadata[\"thumbnail\"]) {\n minStudyData[\"thumbnail\"] = metadata[\"thumbnail\"];\n }\n minStudyData[\"workbench\"][newUuid] = {\n \"key\": metadata[\"key\"],\n \"version\": metadata[\"version\"],\n \"label\": metadata[\"name\"]\n };\n if (!(\"ui\" in minStudyData)) {\n minStudyData[\"ui\"] = {};\n }\n if (!(\"workbench\" in minStudyData[\"ui\"])) {\n minStudyData[\"ui\"][\"workbench\"] = {};\n }\n minStudyData[\"ui\"][\"workbench\"][newUuid] = {\n \"position\": {\n \"x\": 250,\n \"y\": 100\n }\n };\n // maybe check it's dynamic\n if (!(\"mode\" in minStudyData[\"ui\"])) {\n minStudyData[\"ui\"][\"mode\"] = \"standalone\";\n }\n const inaccessibleServices = this.getInaccessibleServices(minStudyData[\"workbench\"])\n if (inaccessibleServices.length) {\n const msg = this.getInaccessibleServicesMsg(inaccessibleServices, minStudyData[\"workbench\"]);\n reject({\n message: msg\n });\n return;\n }\n const params = {\n data: minStudyData\n };\n osparc.study.Utils.createStudyAndPoll(params)\n .then(studyData => resolve(studyData[\"uuid\"]))\n .catch(err => reject(err));\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n });\n },\n\n createStudyAndPoll: function(params) {\n return new Promise((resolve, reject) => {\n const options = {\n pollTask: true\n };\n const fetchPromise = osparc.data.Resources.fetch(\"studies\", \"postNewStudy\", params, options);\n const pollTasks = osparc.data.PollTasks.getInstance();\n const interval = 1000;\n pollTasks.createPollingTask(fetchPromise, interval)\n .then(task => {\n task.addListener(\"resultReceived\", e => {\n const resultData = e.getData();\n resolve(resultData);\n });\n task.addListener(\"pollingError\", e => {\n const err = e.getData();\n reject(err);\n });\n })\n .catch(err => reject(err));\n });\n },\n\n createStudyFromTemplate: function(templateData, loadingPage, contextProps = {}) {\n return new Promise((resolve, reject) => {\n const inaccessibleServices = this.getInaccessibleServices(templateData[\"workbench\"]);\n if (inaccessibleServices.length) {\n const msg = this.getInaccessibleServicesMsg(inaccessibleServices, templateData[\"workbench\"]);\n reject({\n message: msg\n });\n return;\n }\n // context props, otherwise Study will be created in the root folder of my personal workspace\n const minStudyData = Object.assign(osparc.data.model.Study.createMinStudyObject(), contextProps);\n minStudyData[\"name\"] = templateData[\"name\"];\n minStudyData[\"description\"] = templateData[\"description\"];\n minStudyData[\"thumbnail\"] = templateData[\"thumbnail\"];\n const params = {\n url: {\n templateId: templateData[\"uuid\"]\n },\n data: minStudyData\n };\n const options = {\n pollTask: true\n };\n const fetchPromise = osparc.data.Resources.fetch(\"studies\", \"postNewStudyFromTemplate\", params, options);\n const pollTasks = osparc.data.PollTasks.getInstance();\n const interval = 1000;\n pollTasks.createPollingTask(fetchPromise, interval)\n .then(task => {\n const title = qx.locale.Manager.tr(\"CREATING \") + osparc.product.Utils.getStudyAlias({allUpperCase: true}) + \" ...\";\n const progressSequence = new osparc.widget.ProgressSequence(title).set({\n minHeight: 180 // four tasks\n });\n progressSequence.addOverallProgressBar();\n loadingPage.clearMessages();\n loadingPage.addWidgetToMessages(progressSequence);\n task.addListener(\"updateReceived\", e => {\n const updateData = e.getData();\n if (\"task_progress\" in updateData && loadingPage) {\n const progress = updateData[\"task_progress\"];\n const message = progress[\"message\"];\n const percent = progress[\"percent\"] ? parseFloat(progress[\"percent\"].toFixed(3)) : progress[\"percent\"];\n progressSequence.setOverallProgress(percent);\n const existingTask = progressSequence.getTask(message);\n if (existingTask) {\n // update task\n osparc.widget.ProgressSequence.updateTaskProgress(existingTask, {\n value: percent,\n progressLabel: parseFloat((percent*100).toFixed(2)) + \"%\"\n });\n } else {\n // new task\n // all the previous steps to 100%\n progressSequence.getTasks().forEach(tsk => osparc.widget.ProgressSequence.updateTaskProgress(tsk, {\n value: 1,\n progressLabel: \"100%\"\n }));\n // and move to the next new task\n const subTask = progressSequence.addNewTask(message);\n osparc.widget.ProgressSequence.updateTaskProgress(subTask, {\n value: percent,\n progressLabel: \"0%\"\n });\n }\n }\n }, this);\n task.addListener(\"resultReceived\", e => {\n const studyData = e.getData();\n resolve(studyData);\n }, this);\n task.addListener(\"pollingError\", e => {\n const err = e.getData();\n reject(err);\n }, this);\n })\n .catch(err => reject(err));\n });\n },\n\n isInDebt: function(studyData) {\n return Boolean(\"debt\" in studyData && studyData[\"debt\"] < 0);\n },\n\n getUiMode: function(studyData) {\n if (\"ui\" in studyData && \"mode\" in studyData[\"ui\"]) {\n return studyData[\"ui\"][\"mode\"];\n }\n return null;\n },\n\n __getBlockedState: function(studyData) {\n if (studyData[\"workbench\"]) {\n const unaccessibleServices = osparc.study.Utils.getInaccessibleServices(studyData[\"workbench\"])\n if (unaccessibleServices.length) {\n return \"UNKNOWN_SERVICES\";\n }\n }\n if (studyData[\"state\"] && studyData[\"state\"][\"locked\"] && studyData[\"state\"][\"locked\"][\"value\"]) {\n return \"IN_USE\";\n }\n if (this.isInDebt(studyData)) {\n return \"IN_DEBT\";\n }\n return false;\n },\n\n canBeOpened: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [false].includes(blocked);\n },\n\n canShowBillingOptions: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [\"IN_DEBT\", false].includes(blocked);\n },\n\n canShowServiceUpdates: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [false].includes(blocked);\n },\n\n canShowServiceBootOptions: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [false].includes(blocked);\n },\n\n canShowStudyData: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [\"UNKNOWN_SERVICES\", false].includes(blocked);\n },\n\n canShowPreview: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [false].includes(blocked);\n },\n\n canBeDeleted: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [\"UNKNOWN_SERVICES\", false].includes(blocked);\n },\n\n canBeDuplicated: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [false].includes(blocked);\n },\n\n canBeExported: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [\"UNKNOWN_SERVICES\", false].includes(blocked);\n },\n\n canMoveTo: function(studyData) {\n const blocked = this.__getBlockedState(studyData);\n return [\"UNKNOWN_SERVICES\", false].includes(blocked);\n },\n\n getNonFrontendNodes: function(studyData) {\n return Object.values(studyData[\"workbench\"]).filter(nodeData => !osparc.data.model.Node.isFrontend(nodeData));\n },\n\n guessIcon: function(studyData) {\n if (osparc.product.Utils.isProduct(\"tis\") || osparc.product.Utils.isProduct(\"tiplite\")) {\n return this.__guessTIPIcon(studyData);\n }\n return this.__guessIcon(studyData);\n },\n\n __guessIcon: function(studyData) {\n // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline\n const wbServices = this.self().getNonFrontendNodes(studyData);\n if (wbServices.length === 1) {\n const wbService = wbServices[0];\n const allServices = osparc.store.Services.servicesCached;\n if (wbService.key in allServices && wbService.version in allServices[wbService.key]) {\n const serviceMetadata = allServices[wbService.key][wbService.version];\n if (serviceMetadata[\"icon\"]) {\n return serviceMetadata[\"icon\"];\n }\n }\n }\n if (wbServices.length > 1) {\n return \"osparc/icons/diagram.png\";\n }\n return osparc.dashboard.CardBase.PRODUCT_ICON;\n },\n\n __guessTIPIcon: function(studyData) {\n // the was to guess the TI type is to check the boot mode of the ti-postpro in the pipeline\n const tiPostpro = Object.values(studyData[\"workbench\"]).find(srv => srv.key.includes(\"ti-postpro\"));\n if (tiPostpro && tiPostpro[\"bootOptions\"]) {\n switch (tiPostpro[\"bootOptions\"][\"boot_mode\"]) {\n case \"0\":\n // classic TI\n return \"osparc/icons/TI.png\";\n case \"1\":\n // multichannel\n return \"osparc/icons/MC.png\";\n case \"2\":\n // phase-modulation\n return \"osparc/icons/PM.png\";\n case \"3\":\n // personalized TI\n return \"osparc/icons/pTI.png\";\n case \"4\":\n // personalized multichannel\n return \"osparc/icons/pMC.png\";\n case \"5\":\n // personalized phase-modulation\n return \"osparc/icons/pPM.png\";\n default:\n return \"osparc/icons/TI.png\";\n }\n }\n return \"osparc/icons/TI.png\";\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for dealing status decorators.\n *\n */\n\nqx.Class.define(\"osparc.service.StatusUI\", {\n type: \"static\",\n\n statics: {\n setupFilePickerIcon: function(fpNode, icon) {\n fpNode.bind(\"outputs\", icon, \"source\", {\n converter: outputs => {\n if (osparc.file.FilePicker.getOutput(outputs)) {\n return \"@FontAwesome5Solid/check/12\";\n }\n return \"@FontAwesome5Solid/file/12\";\n },\n onUpdate: (source, target) => {\n if (osparc.file.FilePicker.getOutput(source.getOutputs())) {\n target.setTextColor(\"ready-green\");\n } else {\n target.resetTextColor();\n }\n }\n });\n },\n\n getIconSource: function(state, size = 12) {\n switch (state) {\n // computationals\n case \"UNKNOWN\":\n case \"NOT_STARTED\":\n return \"\";\n case \"PUBLISHED\":\n case \"PENDING\":\n case \"WAITING_FOR_RESOURCES\":\n case \"WAITING_FOR_CLUSTER\":\n case \"STARTED\":\n case \"RETRY\":\n return \"@FontAwesome5Solid/circle-notch/\"+size;\n case \"SUCCESS\":\n return \"@FontAwesome5Solid/check/\"+size;\n case \"FAILED\":\n case \"ABORTED\":\n return \"@FontAwesome5Solid/exclamation-circle/\"+size;\n\n // dynamics\n case \"idle\":\n return \"@FontAwesome5Solid/hourglass-end/\"+size;\n case \"ready\":\n return \"@FontAwesome5Solid/check/\"+size;\n case \"starting\":\n case \"stopping\":\n case \"pending\":\n case \"pulling\":\n case \"connecting\":\n return \"@FontAwesome5Solid/circle-notch/\"+size;\n case \"deprecated\":\n return \"@FontAwesome5Solid/exclamation-triangle/\"+size;\n case \"retired\":\n case \"failed\":\n return \"@FontAwesome5Solid/exclamation-circle/\"+size;\n\n // ports\n case \"modified\":\n return \"@FontAwesome5Solid/exclamation-circle/\"+size;\n case \"up-to-date\":\n return \"@FontAwesome5Solid/check/\"+size;\n case \"running\":\n return \"@FontAwesome5Solid/circle-notch/\"+size;\n\n // outputs\n case \"busy\":\n return \"@FontAwesome5Solid/circle-notch/\"+size;\n case \"out-of-date\":\n return \"@FontAwesome5Solid/exclamation-circle/\"+size;\n\n default:\n return \"\";\n }\n },\n\n updateCircleAnimation: function(target) {\n const elem = target.getContentElement();\n if (target.getSource() && target.getSource().includes(\"circle-notch\")) {\n osparc.utils.Utils.addClass(elem, \"rotate\");\n } else {\n osparc.utils.Utils.removeClass(elem, \"rotate\");\n }\n },\n\n getStatusHalo: function(element, progressColor, progress) {\n const runnerColor = qx.theme.manager.Color.getInstance().resolve(\"haloProgressbar-runner\");\n const fillColor = qx.theme.manager.Color.getInstance().resolve(\"haloProgressbar-fill\");\n element.getContentElement().setStyles({\n \"border-radius\": `${element.getHeight() / 2}px`,\n \"background\": `radial-gradient(closest-side, ${fillColor} 75%, transparent 84% 100%), conic-gradient(${progressColor} ${progress}%, ${runnerColor} 0)`\n })\n },\n\n getLabelValue: function(state) {\n switch (state) {\n // computationals\n case \"STARTED\":\n return qx.locale.Manager.tr(\"Running\");\n case \"NOT_STARTED\":\n return qx.locale.Manager.tr(\"Idle\");\n case \"WAITING_FOR_RESOURCES\":\n return qx.locale.Manager.tr(\"Waiting for resources\");\n\n // dynamics\n case \"idle\":\n return qx.locale.Manager.tr(\"Idle\");\n case \"ready\":\n return qx.locale.Manager.tr(\"Ready\");\n case \"failed\":\n return qx.locale.Manager.tr(\"Failed\");\n case \"deprecated\":\n return qx.locale.Manager.tr(\"Deprecated\");\n case \"retired\":\n return qx.locale.Manager.tr(\"Retired\");\n case \"starting\":\n return qx.locale.Manager.tr(\"Starting...\");\n case \"stopping\":\n return qx.locale.Manager.tr(\"Stopping...\");\n case \"pending\":\n return qx.locale.Manager.tr(\"Pending...\");\n case \"pulling\":\n return qx.locale.Manager.tr(\"Pulling...\");\n case \"connecting\":\n return qx.locale.Manager.tr(\"Connecting...\");\n\n default:\n return state;\n }\n },\n\n getColor: function(state) {\n switch (state) {\n // computationals \"running\"\n case \"UNKNOWN\":\n case \"NOT_STARTED\":\n return \"text\";\n case \"SUCCESS\":\n return \"ready-green\";\n case \"PUBLISHED\":\n case \"PENDING\":\n case \"WAITING_FOR_RESOURCES\":\n case \"WAITING_FOR_CLUSTER\":\n case \"STARTED\":\n case \"RETRY\":\n return \"busy-orange\";\n case \"FAILED\":\n case \"ABORTED\":\n return \"failed-red\";\n\n // dynamics \"interactive\"\n case \"idle\":\n return \"text\";\n case \"ready\":\n return \"ready-green\";\n case \"starting\":\n case \"stopping\":\n case \"pulling\":\n case \"pending\":\n case \"connecting\":\n return \"busy-orange\";\n case \"deprecated\":\n return \"warning-yellow\";\n case \"retired\":\n case \"failed\":\n return \"failed-red\";\n\n // ports\n case \"modified\":\n return \"busy-orange\";\n case \"up-to-date\":\n return \"ready-green\";\n\n // output\n case \"busy\":\n case \"out-of-date\":\n return \"busy-orange\";\n /*\n case \"up-to-date\":\n return \"ready-green\";\n */\n\n default:\n return \"text\";\n }\n },\n\n getBorderDecorator: function(state) {\n switch (state) {\n case \"SUCCESS\":\n return \"border-ok\";\n case \"FAILED\":\n case \"ABORTED\":\n return \"border-error\";\n case \"PUBLISHED\":\n case \"PENDING\":\n case \"WAITING_FOR_RESOURCES\":\n case \"WAITING_FOR_CLUSTER\":\n case \"STARTED\":\n case \"RETRY\":\n return \"border-busy\";\n case \"UNKNOWN\":\n case \"NOT_STARTED\":\n return \"no-border\";\n\n default:\n return \"no-border\";\n }\n },\n\n createServiceDeprecatedChip: function() {\n const chip = new osparc.ui.basic.Chip().set({\n label: osparc.service.Utils.DEPRECATED_SERVICE_TEXT,\n icon: osparc.service.StatusUI.getIconSource(\"deprecated\"),\n textColor: \"text-on-warning\",\n backgroundColor: osparc.service.StatusUI.getColor(\"deprecated\"),\n allowGrowX: false\n });\n return chip;\n },\n\n createServiceRetiredChip: function() {\n const chip = new osparc.ui.basic.Chip().set({\n label: osparc.service.Utils.RETIRED_SERVICE_TEXT,\n icon: osparc.service.StatusUI.getIconSource(\"retired\"),\n textColor: \"text-on-warning\",\n backgroundColor: osparc.service.StatusUI.getColor(\"retired\"),\n allowGrowX: false\n });\n return chip;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.TaskUI\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n const grid = new qx.ui.layout.Grid(5, 5);\n grid.setColumnFlex(1, 1);\n this._setLayout(grid);\n\n this.set({\n padding: 5,\n maxWidth: this.self().MAX_WIDTH,\n backgroundColor: \"background-main-3\"\n });\n\n this._buildLayout();\n },\n\n properties: {\n task: {\n check: \"osparc.data.PollTask\",\n init: null,\n nullable: false,\n apply: \"__applyTask\"\n },\n\n title: {\n check: \"String\",\n init: \"\",\n nullable: true,\n event: \"changeTitle\"\n },\n\n subtitle: {\n check: \"String\",\n init: \"\",\n nullable: true,\n event: \"changeSubtitle\"\n }\n },\n\n statics: {\n MAX_WIDTH: 300\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\":\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/circle-notch/14\").set({\n width: 25,\n alignY: \"middle\"\n });\n control.getContentElement().addClass(\"rotate\");\n this._add(control, {\n column: 0,\n row: 0,\n rowSpan: 2\n });\n break;\n case \"title\":\n control = new qx.ui.basic.Label();\n this.bind(\"title\", control, \"value\");\n this._add(control, {\n column: 1,\n row: 0\n });\n break;\n case \"subtitle\":\n control = new qx.ui.basic.Label();\n this.bind(\"subtitle\", control, \"value\");\n this._add(control, {\n column: 1,\n row: 1\n });\n break;\n case \"stop\":\n control = new qx.ui.basic.Image(\"@MaterialIcons/close/16\").set({\n width: 25,\n cursor: \"pointer\",\n visibility: \"excluded\",\n alignY: \"middle\"\n });\n this._add(control, {\n column: 2,\n row: 0,\n rowSpan: 2\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyTask: function(task) {\n const stopButton = this.getChildControl(\"stop\");\n task.bind(\"abortHref\", stopButton, \"visibility\", {\n converter: abortHref => abortHref ? \"visible\" : \"excluded\"\n });\n stopButton.addListener(\"tap\", () => {\n const msg = this.tr(\"Are you sure you want to cancel the task?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Cancel Task\"),\n confirmText: this.tr(\"Cancel\"),\n confirmAction: \"delete\"\n });\n win.getCancelButton().setLabel(this.tr(\"Ignore\"));\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n task.abortRequested();\n }\n }, this);\n }, this);\n },\n\n start: function() {\n const tasks = osparc.task.Tasks.getInstance();\n tasks.addTask(this);\n },\n\n stop: function() {\n const tasks = osparc.task.Tasks.getInstance();\n tasks.removeTask(this);\n },\n\n setIcon: function(source) {\n this.getChildControl(\"icon\").getContentElement().removeClass(\"rotate\");\n this.getChildControl(\"icon\").setSource(source);\n },\n\n /**\n * @abstract\n */\n _buildLayout: function() {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.Export\", {\n extend: osparc.task.TaskUI,\n\n construct: function(study) {\n this.__study = study;\n\n this.base(arguments);\n },\n\n statics: {\n ICON: \"@FontAwesome5Solid/cloud-download-alt\"\n },\n\n members: {\n __study: null,\n\n // overridden\n _buildLayout: function() {\n this.setIcon(this.self().ICON+\"/14\");\n this.getChildControl(\"title\");\n this.getChildControl(\"subtitle\");\n this.getChildControl(\"stop\");\n\n this.setTitle(this.tr(\"Exporting \") + this.__study.name);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.ResourceDetails\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function(resourceData) {\n this.base(arguments);\n\n this.__resourceData = resourceData;\n\n this.__resourceModel = null;\n switch (resourceData[\"resourceType\"]) {\n case \"study\":\n case \"template\":\n this.__resourceModel = new osparc.data.model.Study(resourceData);\n break;\n case \"service\":\n this.__resourceModel = new osparc.data.model.Service(resourceData);\n break;\n }\n this.__resourceModel[\"resourceType\"] = resourceData[\"resourceType\"];\n\n this.__addPages();\n },\n\n events: {\n \"openStudy\": \"qx.event.type.Data\",\n \"openTemplate\": \"qx.event.type.Data\",\n \"openService\": \"qx.event.type.Data\",\n \"updateStudy\": \"qx.event.type.Data\",\n \"updateTemplate\": \"qx.event.type.Data\",\n \"updateService\": \"qx.event.type.Data\",\n \"publishTemplate\": \"qx.event.type.Data\"\n },\n\n\n statics: {\n WIDTH: 830,\n HEIGHT: 700,\n\n popUpInWindow: function(resourceDetails) {\n // eslint-disable-next-line no-underscore-dangle\n const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(resourceDetails.__resourceData[\"resourceType\"]);\n // eslint-disable-next-line no-underscore-dangle\n const title = `${resourceAlias} ${qx.locale.Manager.tr(\"Details\")} - ${resourceDetails.__resourceData.name}`;\n const win = osparc.ui.window.Window.popUpInWindow(resourceDetails, title, this.WIDTH, this.HEIGHT).set({\n layout: new qx.ui.layout.Grow(),\n });\n win.set(osparc.ui.window.TabbedWindow.DEFAULT_PROPS);\n win.set({\n width: this.WIDTH,\n height: this.HEIGHT,\n });\n return win;\n },\n\n createToolbar: function() {\n const toolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(20).set({\n alignX: \"right\",\n alignY: \"top\"\n })).set({\n maxHeight: 40\n });\n return toolbar;\n }\n },\n\n properties: {\n showOpenButton: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changeShowOpenButton\"\n }\n },\n\n members: {\n __resourceData: null,\n __resourceModel: null,\n __infoPage: null,\n __servicesUpdatePage: null,\n __permissionsPage: null,\n __tagsPage: null,\n __billingSettings: null,\n __classifiersPage: null,\n __qualityPage: null,\n\n __addOpenButton: function(page) {\n const resourceData = this.__resourceData;\n\n const toolbar = this.self().createToolbar();\n page.addToHeader(toolbar);\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const payDebtButton = new qx.ui.form.Button(this.tr(\"Credits required\"));\n page.payDebtButton = payDebtButton;\n osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(payDebtButton);\n payDebtButton.addListener(\"execute\", () => this.openBillingSettings());\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n payDebtButton.set({\n visibility: osparc.study.Utils.isInDebt(studyData) ? \"visible\" : \"excluded\"\n });\n }\n toolbar.add(payDebtButton);\n }\n\n if (osparc.utils.Resources.isService(resourceData)) {\n const serviceVersionSelector = this.__createServiceVersionSelector();\n toolbar.add(serviceVersionSelector);\n }\n\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n const openText = (this.__resourceData[\"resourceType\"] === \"study\") ? this.tr(\"Open\") : this.tr(\"New\") + \" \" + studyAlias;\n const openButton = new osparc.ui.form.FetchButton(openText).set({\n enabled: true\n });\n page.openButton = openButton;\n osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(openButton);\n osparc.utils.Utils.setIdToWidget(openButton, \"openResource\");\n const store = osparc.store.Store.getInstance();\n store.bind(\"currentStudy\", openButton, \"visibility\", {\n converter: study => (study === null && this.isShowOpenButton()) ? \"visible\" : \"excluded\"\n });\n this.bind(\"showOpenButton\", openButton, \"visibility\", {\n converter: show => (store.getCurrentStudy() === null && show) ? \"visible\" : \"excluded\"\n });\n openButton.addListener(\"execute\", () => this.__openTapped(openButton));\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n const canBeOpened = osparc.study.Utils.canBeOpened(studyData);\n openButton.setEnabled(canBeOpened);\n }\n\n toolbar.add(openButton);\n },\n\n __openTapped: function(openButton) {\n if (this.__resourceData[\"resourceType\"] !== \"study\") {\n // Template or Service, nothing to pre-check\n this.__openResource();\n return;\n }\n openButton.setFetching(true);\n const params = {\n url: {\n \"studyId\": this.__resourceData[\"uuid\"]\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(updatedStudyData => {\n openButton.setFetching(false);\n const updatableServices = osparc.metadata.ServicesInStudyUpdate.updatableNodeIds(updatedStudyData.workbench);\n if (updatableServices.length && osparc.data.model.Study.canIWrite(updatedStudyData[\"accessRights\"])) {\n this.__confirmUpdate();\n } else {\n this.__openResource();\n }\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n openButton.setFetching(false);\n });\n },\n\n __confirmUpdate: function() {\n const msg = this.tr(\"Some of your services are outdated. Please update to the latest version for better performance.\\n\\nDo you want to update now?\");\n const win = new osparc.dashboard.ResourceUpgradeHelper(msg).set({\n primaryAction: \"create\",\n secondaryAction: \"primary\"\n });\n win.center();\n win.open();\n win.addListener(\"changeConfirmed\", e => {\n if (win.getConfirmed()) {\n this.openUpdateServices();\n } else {\n this.__openResource();\n }\n win.close();\n });\n },\n\n __openResource: function() {\n switch (this.__resourceData[\"resourceType\"]) {\n case \"study\":\n this.fireDataEvent(\"openStudy\", this.__resourceData);\n break;\n case \"template\":\n this.fireDataEvent(\"openTemplate\", this.__resourceData);\n break;\n case \"service\":\n this.fireDataEvent(\"openService\", this.__resourceData);\n break;\n }\n },\n\n __openInfo: function() {\n this._openPage(this.__infoPage);\n },\n\n openUpdateServices: function() {\n this._openPage(this.__servicesUpdatePage);\n },\n\n openAccessRights: function() {\n this._openPage(this.__permissionsPage);\n },\n\n openTags: function() {\n this._openPage(this.__tagsPage);\n },\n\n openClassifiers: function() {\n this._openPage(this.__classifiersPage);\n },\n\n openQuality: function() {\n this._openPage(this.__qualityPage);\n },\n\n openBillingSettings: function() {\n this._openPage(this.__billingSettings);\n },\n\n __createServiceVersionSelector: function() {\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n\n const versionLabel = new qx.ui.basic.Label(this.tr(\"Version\")).set({\n font: \"text-14\"\n });\n hBox.add(versionLabel);\n const versionsBox = new osparc.ui.toolbar.SelectBox();\n osparc.utils.Utils.setIdToWidget(versionsBox, \"serviceSelectBox\");\n hBox.add(versionsBox);\n\n\n const versions = osparc.service.Utils.getVersions(this.__resourceData[\"key\"]);\n let selectedItem = null;\n\n // first setSelection\n versions.forEach(version => {\n selectedItem = osparc.service.Utils.versionToListItem(this.__resourceData[\"key\"], version);\n versionsBox.add(selectedItem);\n if (this.__resourceData[\"version\"] === version) {\n versionsBox.setSelection([selectedItem]);\n }\n });\n osparc.utils.Utils.growSelectBox(versionsBox, 200);\n\n // then listen to changes\n versionsBox.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const serviceVersion = selection[0].version;\n if (serviceVersion !== this.__resourceData[\"version\"]) {\n osparc.store.Services.getService(this.__resourceData[\"key\"], serviceVersion)\n .then(serviceData => {\n serviceData[\"resourceType\"] = \"service\";\n this.__resourceData = serviceData;\n this.__addPages();\n });\n }\n }\n }, this);\n\n return hBox;\n },\n\n __addPages: function() {\n const tabsView = this.getChildControl(\"tabs-view\");\n\n // keep selected page\n const selection = tabsView.getSelection();\n const selectedTabId = selection.length ? selection[0][\"tabId\"] : null;\n\n // removeAll\n osparc.utils.Utils.removeAllChildren(tabsView);\n\n // add Open service button\n [\n this.__getInfoPage,\n this.__getBillingPage,\n this.__getServicesUpdatePage,\n this.__getServicesBootOptionsPage,\n this.__getCommentsPage,\n this.__getPermissionsPage,\n this.__getSaveAsTemplatePage,\n this.__getTagsPage,\n this.__getQualityPage,\n this.__getClassifiersPage,\n this.__getPreviewPage\n ].forEach(pageCallee => {\n if (pageCallee) {\n const page = pageCallee.call(this);\n if (page) {\n tabsView.add(page);\n }\n }\n });\n\n const resourceData = this.__resourceData;\n if (!osparc.utils.Resources.isService(resourceData)) {\n const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(\" Files...\");\n const iconSrc = \"@FontAwesome5Solid/file/22\";\n const dataAccess = new qx.ui.basic.Atom().set({\n label: title,\n icon: iconSrc,\n font: \"text-14\",\n padding: 8,\n paddingLeft: 12,\n gap: 14,\n cursor: \"pointer\",\n });\n dataAccess.addListener(\"tap\", () => osparc.widget.StudyDataManager.popUpInWindow(resourceData[\"uuid\"]));\n this.addWidgetToTabs(dataAccess);\n\n if (resourceData[\"resourceType\"] === \"study\") {\n const canShowData = osparc.study.Utils.canShowStudyData(resourceData);\n dataAccess.setEnabled(canShowData);\n }\n }\n\n if (selectedTabId) {\n const pageFound = tabsView.getChildren().find(page => page.tabId === selectedTabId);\n if (pageFound) {\n tabsView.setSelection([pageFound]);\n }\n }\n },\n\n __getInfoPage: function() {\n const id = \"Information\";\n const title = this.tr(\"Overview\");\n const iconSrc = \"@FontAwesome5Solid/info/22\";\n const page = this.__infoPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const resourceData = this.__resourceData;\n const resourceModel = this.__resourceModel;\n let infoCard = null;\n if (osparc.utils.Resources.isService(resourceData)) {\n infoCard = new osparc.info.ServiceLarge(resourceData, null, false);\n infoCard.addListener(\"updateService\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isService(resourceData)) {\n this.fireDataEvent(\"updateService\", updatedData);\n }\n });\n } else {\n infoCard = new osparc.info.StudyLarge(resourceModel, false);\n infoCard.addListener(\"updateStudy\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n });\n infoCard.addListener(\"openTags\", () => this.openTags());\n }\n infoCard.addListener(\"openAccessRights\", () => this.openAccessRights());\n infoCard.addListener(\"openClassifiers\", () => this.openClassifiers());\n infoCard.addListener(\"openQuality\", () => this.openQuality());\n page.addToContent(infoCard);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getBillingPage: function() {\n if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {\n return null;\n }\n\n const resourceData = this.__resourceData;\n if (osparc.utils.Resources.isStudy(resourceData)) {\n const id = \"Billing\";\n const title = this.tr(\"Billing Settings\");\n const iconSrc = \"@FontAwesome5Solid/cogs/22\";\n const page = this.__billingSettings = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n if (resourceData[\"resourceType\"] === \"study\") {\n const canBeOpened = osparc.study.Utils.canShowBillingOptions(resourceData);\n page.setEnabled(canBeOpened);\n }\n\n const lazyLoadContent = () => {\n const billingSettings = new osparc.study.BillingSettings(resourceData);\n billingSettings.addListener(\"debtPayed\", () => {\n if (resourceData[\"resourceType\"] === \"study\") {\n page.payDebtButton.set({\n visibility: osparc.study.Utils.isInDebt(resourceData) ? \"visible\" : \"excluded\"\n });\n const canBeOpened = osparc.study.Utils.canBeOpened(resourceData);\n page.openButton.setEnabled(canBeOpened);\n }\n })\n const billingScroll = new qx.ui.container.Scroll(billingSettings);\n page.addToContent(billingScroll);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n } else if (osparc.utils.Resources.isService(resourceData)) {\n const id = \"Tiers\";\n const title = this.tr(\"Tiers\");\n const iconSrc = \"@FontAwesome5Solid/server/22\";\n const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const pricingUnitsList = new osparc.service.PricingUnitsList(resourceData);\n const pricingUnitsListScroll = new qx.ui.container.Scroll(pricingUnitsList);\n page.addToContent(pricingUnitsListScroll);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n }\n return null;\n },\n\n __getPreviewPage: function() {\n const resourceData = this.__resourceData;\n if (\n osparc.utils.Resources.isService(resourceData) ||\n !osparc.product.Utils.showStudyPreview() ||\n !osparc.study.Utils.getUiMode(resourceData) === \"workbench\"\n ) {\n // there is no pipelining or don't show it\n return null;\n }\n\n const id = \"Pipeline\";\n const title = this.tr(\"Pipeline View\");\n const iconSrc = \"@FontAwesome5Solid/eye/22\";\n const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n const canBeOpened = osparc.study.Utils.canShowPreview(studyData);\n page.setEnabled(canBeOpened);\n }\n\n const lazyLoadContent = () => {\n const resourceModel = this.__resourceModel;\n const preview = new osparc.study.StudyPreview(resourceModel);\n page.addToContent(preview);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getCommentsPage: function() {\n const resourceData = this.__resourceData;\n if (osparc.utils.Resources.isService(resourceData)) {\n return null;\n }\n\n const id = \"Comments\";\n const title = this.tr(\"Comments\");\n const iconSrc = \"@FontAwesome5Solid/comments/22\";\n const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const commentsList = new osparc.info.CommentsList(resourceData[\"uuid\"]);\n page.addToContent(commentsList);\n if (osparc.data.model.Study.canIWrite(resourceData[\"accessRights\"])) {\n const addComment = new osparc.info.CommentAdd(resourceData[\"uuid\"]);\n addComment.setPaddingLeft(10);\n addComment.addListener(\"commentAdded\", () => commentsList.fetchComments());\n page.addToFooter(addComment);\n }\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getPermissionsPage: function() {\n const id = \"Permissions\";\n const title = this.tr(\"Sharing\");\n const iconSrc = \"@FontAwesome5Solid/share-alt/22\";\n const page = this.__permissionsPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const resourceData = this.__resourceData;\n let permissionsView = null;\n if (osparc.utils.Resources.isService(resourceData)) {\n permissionsView = new osparc.share.CollaboratorsService(resourceData);\n permissionsView.addListener(\"updateAccessRights\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isService(resourceData)) {\n this.fireDataEvent(\"updateService\", updatedData);\n }\n }, this);\n } else {\n permissionsView = new osparc.share.CollaboratorsStudy(resourceData);\n if (osparc.utils.Resources.isStudy(resourceData)) {\n permissionsView.getChildControl(\"study-link\").show();\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n permissionsView.getChildControl(\"template-link\").show();\n }\n permissionsView.addListener(\"updateAccessRights\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n }, this);\n }\n page.addToContent(permissionsView);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getClassifiersPage: function() {\n if (!osparc.product.Utils.showClassifiers()) {\n return null;\n }\n const id = \"Classifiers\";\n if (!osparc.data.Permissions.getInstance().canDo(\"study.classifier\")) {\n return null;\n }\n const title = this.tr(\"Classifiers\");\n const iconSrc = \"@FontAwesome5Solid/search/22\";\n const page = this.__classifiersPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const resourceData = this.__resourceData;\n let classifiers = null;\n if (\n (osparc.utils.Resources.isStudy(resourceData) || osparc.utils.Resources.isTemplate(resourceData)) && osparc.data.model.Study.canIWrite(resourceData[\"accessRights\"]) ||\n osparc.utils.Resources.isService(resourceData) && osparc.service.Utils.canIWrite(resourceData[\"accessRights\"])\n ) {\n classifiers = new osparc.metadata.ClassifiersEditor(resourceData);\n classifiers.addListener(\"updateClassifiers\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n } else if (osparc.utils.Resources.isService(resourceData)) {\n this.fireDataEvent(\"updateService\", updatedData);\n }\n }, this);\n } else {\n classifiers = new osparc.metadata.ClassifiersViewer(resourceData);\n }\n page.addToContent(classifiers);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getQualityPage: function() {\n if (!osparc.product.Utils.showQuality()) {\n return null;\n }\n\n const resourceData = this.__resourceData;\n if (\n \"quality\" in resourceData &&\n (!osparc.utils.Resources.isService(resourceData) || osparc.data.model.Node.isComputational(resourceData))\n ) {\n const id = \"Quality\";\n const title = this.tr(\"Quality\");\n const iconSrc = \"@FontAwesome5Solid/star-half/22\";\n const page = this.__qualityPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const qualityEditor = new osparc.metadata.QualityEditor(resourceData);\n qualityEditor.addListener(\"updateQuality\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n });\n page.addToContent(qualityEditor);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n }\n return null;\n },\n\n __getTagsPage: function() {\n const resourceData = this.__resourceData;\n if (osparc.utils.Resources.isService(resourceData)) {\n return null;\n }\n if (!osparc.data.model.Study.canIWrite(resourceData[\"accessRights\"])) {\n return null;\n }\n\n const id = \"Tags\";\n const title = this.tr(\"Tags\");\n const iconSrc = \"@FontAwesome5Solid/tags/22\";\n const page = this.__tagsPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n const lazyLoadContent = () => {\n const tagManager = new osparc.form.tag.TagManager(resourceData);\n tagManager.addListener(\"updateTags\", e => {\n const updatedData = e.getData();\n tagManager.setStudyData(updatedData);\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n }, this);\n page.addToContent(tagManager);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getServicesUpdatePage: function() {\n const resourceData = this.__resourceData;\n if (osparc.utils.Resources.isService(resourceData)) {\n return null;\n }\n\n const id = \"ServicesUpdate\";\n const title = this.tr(\"Services Updates\");\n const iconSrc = \"@MaterialIcons/update/22\";\n const page = this.__servicesUpdatePage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n const canBeOpened = osparc.study.Utils.canShowServiceUpdates(studyData);\n page.setEnabled(canBeOpened);\n }\n\n const lazyLoadContent = () => {\n const servicesUpdate = new osparc.metadata.ServicesInStudyUpdate(resourceData);\n servicesUpdate.addListener(\"updateService\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n });\n page.addToContent(servicesUpdate);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getServicesBootOptionsPage: function() {\n const resourceData = this.__resourceData;\n if (\n osparc.utils.Resources.isService(resourceData) ||\n !osparc.data.Permissions.getInstance().canDo(\"study.node.bootOptions.read\")\n ) {\n return null;\n }\n\n const id = \"ServicesBootOptions\";\n const title = this.tr(\"Boot Options\");\n const iconSrc = \"@FontAwesome5Solid/play-circle/22\";\n const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n this.__addOpenButton(page);\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n const canBeOpened = osparc.study.Utils.canShowServiceBootOptions(studyData);\n page.setEnabled(canBeOpened);\n }\n\n const lazyLoadContent = () => {\n const servicesBootOpts = new osparc.metadata.ServicesInStudyBootOpts(resourceData);\n servicesBootOpts.addListener(\"updateService\", e => {\n const updatedData = e.getData();\n if (osparc.utils.Resources.isStudy(resourceData)) {\n this.fireDataEvent(\"updateStudy\", updatedData);\n } else if (osparc.utils.Resources.isTemplate(resourceData)) {\n this.fireDataEvent(\"updateTemplate\", updatedData);\n }\n });\n page.addToContent(servicesBootOpts);\n\n if (osparc.utils.Resources.isStudy(resourceData) || osparc.utils.Resources.isTemplate(resourceData)) {\n if (osparc.product.Utils.showDisableServiceAutoStart()) {\n const study = new osparc.data.model.Study(resourceData);\n const autoStartButton = osparc.info.StudyUtils.createDisableServiceAutoStart(study).set({\n enabled: osparc.data.model.Study.canIWrite(this.__resourceData[\"accessRights\"])\n });\n // eslint-disable-next-line no-underscore-dangle\n servicesBootOpts._add(new qx.ui.core.Spacer(null, 15));\n // eslint-disable-next-line no-underscore-dangle\n servicesBootOpts._add(autoStartButton);\n }\n }\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n },\n\n __getSaveAsTemplatePage: function() {\n if (!osparc.utils.Resources.isStudy(this.__resourceData)) {\n return null;\n }\n\n const canIWrite = osparc.data.model.Study.canIWrite(this.__resourceData[\"accessRights\"]);\n const canCreateTemplate = osparc.data.Permissions.getInstance().canDo(\"studies.template.create\");\n if (canIWrite && canCreateTemplate) {\n const id = \"SaveAsTemplate\";\n const iconSrc = \"@FontAwesome5Solid/copy/22\";\n const title = this.tr(\"Publish \") + osparc.product.Utils.getTemplateAlias({firstUpperCase: true});\n const page = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);\n\n if (this.__resourceData[\"resourceType\"] === \"study\") {\n const studyData = this.__resourceData;\n const canBeOpened = osparc.study.Utils.canBeDuplicated(studyData);\n page.setEnabled(canBeOpened);\n }\n\n const lazyLoadContent = () => {\n const saveAsTemplate = new osparc.study.SaveAsTemplate(this.__resourceData);\n saveAsTemplate.addListener(\"publishTemplate\", e => this.fireDataEvent(\"publishTemplate\", e.getData()));\n\n const publishTemplateButton = saveAsTemplate.getPublishTemplateButton();\n osparc.dashboard.resources.pages.BasePage.decorateHeaderButton(publishTemplateButton);\n const toolbar = this.self().createToolbar();\n toolbar.add(publishTemplateButton);\n page.addToHeader(toolbar);\n page.addToContent(saveAsTemplate);\n }\n page.addListenerOnce(\"appear\", lazyLoadContent, this);\n\n return page;\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget (base class) that shows some resources in the Dashboard.\n *\n * It used by the following tabbed elements in the main view:\n * - Study Browser\n * - Template Browser\n * - Service Browser\n */\n\nqx.Class.define(\"osparc.dashboard.ResourceBrowserBase\", {\n type: \"abstract\",\n extend: osparc.ui.basic.LoadingPageHandler,\n\n construct: function() {\n this.base(arguments);\n\n this._showLoadingPage(this.tr(\"Starting\") + \" \" + osparc.store.StaticInfo.getInstance().getDisplayName());\n\n const padding = osparc.dashboard.Dashboard.PADDING;\n const leftColumnWidth = this.self().SIDE_SPACER_WIDTH;\n const emptyColumnMinWidth = 50;\n const spacing = 20;\n const mainLayoutsScroll = 8;\n\n const mainLayoutWithSideSpacers = new qx.ui.container.Composite(new qx.ui.layout.HBox(spacing))\n this._addToMainLayout(mainLayoutWithSideSpacers);\n\n this._leftFilters = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({\n width: leftColumnWidth\n });\n mainLayoutWithSideSpacers.add(this._leftFilters);\n\n this.__centerLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));\n mainLayoutWithSideSpacers.add(this.__centerLayout);\n\n const rightColum = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n mainLayoutWithSideSpacers.add(rightColum, {\n flex: 1\n });\n\n const itemWidth = osparc.dashboard.GridButtonBase.ITEM_WIDTH + osparc.dashboard.GridButtonBase.SPACING;\n this.__centerLayout.setMinWidth(this.self().MIN_GRID_CARDS_PER_ROW * itemWidth + mainLayoutsScroll);\n const fitResourceCards = () => {\n const w = document.documentElement.clientWidth;\n const nStudies = Math.floor((w - 2*padding - 2*spacing - leftColumnWidth - emptyColumnMinWidth) / itemWidth);\n const newWidth = nStudies * itemWidth + 8;\n if (newWidth > this.__centerLayout.getMinWidth()) {\n this.__centerLayout.setWidth(newWidth);\n } else {\n this.__centerLayout.setWidth(this.__centerLayout.getMinWidth());\n }\n\n const compactVersion = w < this.__centerLayout.getMinWidth() + leftColumnWidth + emptyColumnMinWidth;\n rightColum.setVisibility(compactVersion ? \"excluded\" : \"visible\");\n };\n fitResourceCards();\n window.addEventListener(\"resize\", () => fitResourceCards());\n\n this.addListener(\"appear\", () => this._moreResourcesRequired());\n },\n\n events: {\n \"changeTab\": \"qx.event.type.Data\",\n \"publishTemplate\": \"qx.event.type.Data\"\n },\n\n statics: {\n PAGINATED_STUDIES: 5,\n MIN_GRID_CARDS_PER_ROW: 3,\n SIDE_SPACER_WIDTH: 200,\n\n checkLoggedIn: function() {\n const isLogged = osparc.auth.Manager.getInstance().isLoggedIn();\n if (!isLogged) {\n const msg = qx.locale.Manager.tr(\"You need to be logged in to create a study\");\n osparc.FlashMessenger.getInstance().logAs(msg);\n }\n return isLogged;\n },\n\n startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {\n if (!osparc.dashboard.ResourceBrowserBase.checkLoggedIn()) {\n return;\n }\n\n const openStudy = () => {\n if (openCB) {\n openCB();\n }\n osparc.desktop.MainPageHandler.getInstance().startStudy(studyId);\n };\n\n const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();\n if (walletsEnabled) {\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"getWallet\", params)\n .then(wallet => {\n if (\n isStudyCreation ||\n wallet === null ||\n osparc.desktop.credits.Utils.getWallet(wallet[\"walletId\"]) === null\n ) {\n // pop up study options if the study was just created or if it has no wallet assigned or user has no access to it\n const resourceSelector = new osparc.study.StudyOptions(studyId);\n if (isStudyCreation) {\n resourceSelector.getChildControl(\"open-button\").setLabel(qx.locale.Manager.tr(\"New\"));\n }\n const win = osparc.study.StudyOptions.popUpInWindow(resourceSelector);\n win.moveItUp();\n resourceSelector.addListener(\"startStudy\", () => {\n win.close();\n openStudy();\n });\n win.addListener(\"cancel\", () => {\n if (cancelCB) {\n cancelCB();\n }\n });\n resourceSelector.addListener(\"cancel\", () => {\n win.close();\n if (cancelCB) {\n cancelCB();\n }\n });\n // listen to \"tap\" instead of \"execute\": the \"execute\" is not propagated\n win.getChildControl(\"close-button\").addListener(\"tap\", () => {\n if (cancelCB) {\n cancelCB();\n }\n });\n } else {\n openStudy();\n }\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n } else {\n openStudy();\n }\n },\n\n isCardNewItem: function(card) {\n return (card instanceof osparc.dashboard.GridButtonNew || card instanceof osparc.dashboard.ListButtonNew);\n },\n\n isCardButtonItem: function(card) {\n return (card instanceof osparc.dashboard.GridButtonItem || card instanceof osparc.dashboard.ListButtonItem);\n },\n\n createToolbarRadioButton: function(label, icon, toolTipText, pos) {\n const rButton = new qx.ui.toolbar.RadioButton().set({\n label,\n icon,\n toolTipText,\n padding: 5,\n paddingLeft: 8,\n paddingRight: 8,\n margin: 0\n });\n rButton.getContentElement().setStyles({\n \"border-radius\": \"0px\"\n });\n if (pos === \"left\") {\n osparc.utils.Utils.addBorderLeftRadius(rButton);\n } else if (pos === \"right\") {\n osparc.utils.Utils.addBorderRightRadius(rButton);\n }\n return rButton;\n }\n },\n\n members: {\n _leftFilters: null,\n _resourceFilter: null,\n __centerLayout: null,\n _resourceType: null,\n _resourcesList: null,\n _toolbar: null,\n _searchBarFilter: null,\n __viewModeLayout: null,\n _resourcesContainer: null,\n _loadingResourcesBtn: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"resources-layout\": {\n const scroll = new qx.ui.container.Scroll();\n scroll.getChildControl(\"pane\").addListener(\"scrollY\", () => this._moreResourcesRequired(), this);\n control = this._createLayout();\n scroll.add(control);\n this._addToLayout(scroll, {\n flex: 1\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _addToLayout: function(widget, props = {}) {\n this.__centerLayout.add(widget, props)\n },\n\n initResources: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n reloadMoreResources: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _createLayout: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _createSearchBar: function() {\n const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType).set({\n marginRight: 22\n });\n const textField = searchBarFilter.getChildControl(\"text-field\");\n osparc.utils.Utils.setIdToWidget(textField, \"searchBarFilter-textField-\"+this._resourceType);\n\n this._addToLayout(searchBarFilter);\n },\n\n _createResourcesLayout: function(flatListId) {\n const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({\n backgroundColor: \"transparent\",\n spacing: 10,\n paddingRight: 8,\n alignY: \"middle\"\n });\n this._addToLayout(toolbar);\n\n this.__viewModeLayout = new qx.ui.toolbar.Part();\n\n const resourcesContainer = this._resourcesContainer = new osparc.dashboard.ResourceContainerManager(this._resourceType);\n if (flatListId) {\n const list = this._resourcesContainer.getFlatList();\n if (list) {\n osparc.utils.Utils.setIdToWidget(list, flatListId);\n }\n }\n if (this._resourceType === \"study\") {\n const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem(\"studiesViewMode\");\n if (viewMode) {\n this._resourcesContainer.setMode(viewMode);\n }\n }\n resourcesContainer.addListener(\"updateStudy\", e => this._updateStudyData(e.getData()));\n resourcesContainer.addListener(\"updateTemplate\", e => this._updateTemplateData(e.getData()));\n resourcesContainer.addListener(\"updateService\", e => this._updateServiceData(e.getData()));\n resourcesContainer.addListener(\"publishTemplate\", e => this.fireDataEvent(\"publishTemplate\", e.getData()));\n resourcesContainer.addListener(\"tagClicked\", e => this._searchBarFilter.addTagActiveFilter(e.getData()));\n resourcesContainer.addListener(\"emptyStudyClicked\", e => this._deleteResourceRequested(e.getData()));\n resourcesContainer.addListener(\"folderUpdated\", e => this._folderUpdated(e.getData()));\n resourcesContainer.addListener(\"moveFolderToRequested\", e => this._moveFolderToRequested(e.getData()));\n resourcesContainer.addListener(\"trashFolderRequested\", e => this._trashFolderRequested(e.getData()));\n resourcesContainer.addListener(\"untrashFolderRequested\", e => this._untrashFolderRequested(e.getData()));\n resourcesContainer.addListener(\"deleteFolderRequested\", e => this._deleteFolderRequested(e.getData()));\n resourcesContainer.addListener(\"studyToFolderRequested\", e => this._studyToFolderRequested(e.getData()));\n resourcesContainer.addListener(\"folderToFolderRequested\", e => this._folderToFolderRequested(e.getData()));\n resourcesContainer.addListener(\"folderSelected\", e => {\n const folderId = e.getData();\n this._folderSelected(folderId);\n }, this);\n resourcesContainer.addListener(\"workspaceSelected\", e => {\n const workspaceId = e.getData();\n this._workspaceSelected(workspaceId);\n }, this);\n resourcesContainer.addListener(\"changeContext\", e => {\n const {\n context,\n workspaceId,\n folderId,\n } = e.getData();\n this._changeContext(context, workspaceId, folderId);\n }, this);\n resourcesContainer.addListener(\"workspaceUpdated\", e => this._workspaceUpdated(e.getData()));\n resourcesContainer.addListener(\"trashWorkspaceRequested\", e => this._trashWorkspaceRequested(e.getData()));\n resourcesContainer.addListener(\"untrashWorkspaceRequested\", e => this._untrashWorkspaceRequested(e.getData()));\n resourcesContainer.addListener(\"deleteWorkspaceRequested\", e => this._deleteWorkspaceRequested(e.getData()));\n\n this._addToLayout(resourcesContainer);\n },\n\n __groupByChanged: function(groupBy) {\n // if cards are grouped they need to be in grid mode\n this._resourcesContainer.setMode(\"grid\");\n this.__viewModeLayout.setVisibility(groupBy ? \"excluded\" : \"visible\");\n this._resourcesContainer.setGroupBy(groupBy);\n this._reloadCards();\n },\n\n __viewModeChanged: function(viewMode) {\n this._resourcesContainer.setMode(viewMode);\n this._reloadCards();\n\n if (this._resourceType === \"study\") {\n osparc.utils.Utils.localCache.setLocalStorageItem(\"studiesViewMode\", viewMode);\n }\n },\n\n _addGroupByButton: function() {\n const groupByMenu = new qx.ui.menu.Menu().set({\n font: \"text-14\"\n });\n const groupByButton = new qx.ui.form.MenuButton(this.tr(\"Group\"), \"@FontAwesome5Solid/chevron-down/10\", groupByMenu);\n groupByButton.set({\n appearance: \"form-button-outlined\",\n marginRight: 14\n });\n osparc.utils.Utils.setIdToWidget(groupByButton, \"groupByButton\");\n\n const groupOptions = new qx.ui.form.RadioGroup();\n\n const dontGroup = new qx.ui.menu.RadioButton(this.tr(\"None\"));\n osparc.utils.Utils.setIdToWidget(dontGroup, \"groupByNone\");\n dontGroup.addListener(\"execute\", () => this.__groupByChanged(null));\n\n groupByMenu.add(dontGroup);\n groupOptions.add(dontGroup);\n\n if (this._resourceType === \"template\") {\n const tagByGroup = new qx.ui.menu.RadioButton(this.tr(\"Tags\"));\n tagByGroup.addListener(\"execute\", () => this.__groupByChanged(\"tags\"));\n groupByMenu.add(tagByGroup);\n groupOptions.add(tagByGroup);\n if (\n osparc.product.Utils.isProduct(\"s4l\") ||\n osparc.product.Utils.isProduct(\"s4lacad\") ||\n osparc.product.Utils.isProduct(\"s4llite\")\n ) {\n tagByGroup.execute();\n }\n }\n\n const groupByShared = new qx.ui.menu.RadioButton(this.tr(\"Shared with\"));\n groupByShared.addListener(\"execute\", () => this.__groupByChanged(\"shared\"));\n groupByMenu.add(groupByShared);\n groupOptions.add(groupByShared);\n\n this._toolbar.add(groupByButton);\n },\n\n _addViewModeButton: function() {\n const gridBtn = this.self().createToolbarRadioButton(null, \"@FontAwesome5Solid/th/14\", this.tr(\"Grid view\"), \"left\");\n gridBtn.addListener(\"execute\", () => this.__viewModeChanged(\"grid\"));\n\n const listBtn = this.self().createToolbarRadioButton(null, \"@FontAwesome5Solid/bars/14\", this.tr(\"List view\"), \"right\");\n listBtn.addListener(\"execute\", () => this.__viewModeChanged(\"list\"));\n\n const viewModeLayout = this.__viewModeLayout;\n const radioGroup = new qx.ui.form.RadioGroup();\n [\n gridBtn,\n listBtn\n ].forEach(btn => {\n viewModeLayout.add(btn);\n radioGroup.add(btn);\n });\n\n if (this._resourceType === \"study\") {\n const viewMode = osparc.utils.Utils.localCache.getLocalStorageItem(\"studiesViewMode\");\n if (viewMode) {\n if (viewMode === \"list\") {\n radioGroup.setSelection([listBtn]);\n }\n }\n }\n\n this._toolbar.add(viewModeLayout);\n },\n\n _addResourceFilter: function() {\n const resourceFilter = this._resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({\n marginTop: 20,\n maxWidth: this.self().SIDE_SPACER_WIDTH,\n width: this.self().SIDE_SPACER_WIDTH\n });\n\n resourceFilter.addListener(\"changeTab\", e => {\n const contextTab = e.getData();\n this.fireDataEvent(\"changeTab\", contextTab);\n }, this);\n\n resourceFilter.addListener(\"changeSharedWith\", e => {\n const sharedWith = e.getData();\n this._searchBarFilter.setSharedWithActiveFilter(sharedWith.id, sharedWith.label);\n }, this);\n\n resourceFilter.addListener(\"changeSelectedTags\", e => {\n const selectedTagIds = e.getData();\n this._searchBarFilter.setTagsActiveFilter(selectedTagIds);\n }, this);\n\n resourceFilter.addListener(\"changeServiceType\", e => {\n const serviceType = e.getData();\n this._searchBarFilter.setServiceTypeActiveFilter(serviceType.id, serviceType.label);\n }, this);\n\n this._searchBarFilter.addListener(\"filterChanged\", e => {\n const filterData = e.getData();\n resourceFilter.filterChanged(filterData);\n });\n\n this._leftFilters.add(resourceFilter, {\n flex: 1\n });\n },\n\n /**\n * Function that resets the selected item\n */\n resetSelection: function() {\n if (this._resourcesContainer) {\n this._resourcesContainer.resetSelection();\n }\n },\n\n _checkLoggedIn: function() {\n let isLogged = osparc.auth.Manager.getInstance().isLoggedIn();\n if (!isLogged) {\n const msg = this.tr(\"You need to be logged in to create a study\");\n osparc.FlashMessenger.getInstance().logAs(msg);\n }\n return isLogged;\n },\n\n _removeResourceCards: function() {\n const cards = this._resourcesContainer.getCards();\n for (let i=cards.length-1; i>=0; i--) {\n const card = cards[i];\n if (osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card)) {\n this._resourcesContainer.removeNonResourceCard(card);\n }\n }\n },\n\n _moreResourcesRequired: function() {\n if (this._resourcesContainer && this._resourcesContainer.areMoreResourcesRequired(this._loadingResourcesBtn)) {\n this.reloadMoreResources();\n }\n },\n\n _taskDataReceived: function(taskData) {\n throw new Error(\"Abstract method called!\");\n },\n\n _populateCardMenu: function(card) {\n throw new Error(\"Abstract method called!\");\n },\n\n _updateStudyData: function(studyData) {\n throw new Error(\"Abstract method called!\");\n },\n\n _updateTemplateData: function(templateData) {\n throw new Error(\"Abstract method called!\");\n },\n\n _updateServiceData: function(serviceData) {\n throw new Error(\"Abstract method called!\");\n },\n\n _startStudyById: function(studyId, openCB, cancelCB, isStudyCreation = false) {\n if (isStudyCreation) {\n this.fireDataEvent(\"changeTab\", \"studiesTab\");\n }\n this.self().startStudyById(studyId, openCB, cancelCB, isStudyCreation);\n },\n\n _createStudyFromTemplate: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _createStudyFromService: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _deleteResourceRequested: function(resourceId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _changeContext: function(context, workspaceId, folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _folderSelected: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _folderUpdated: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _moveFolderToRequested: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _trashFolderRequested: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _untrashFolderRequested: function(folder) {\n throw new Error(\"Abstract method called!\");\n },\n\n _deleteFolderRequested: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _studyToFolderRequested: function(studyId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _folderToFolderRequested: function(folderId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _workspaceSelected: function(workspaceId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _workspaceUpdated: function(workspaceId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _deleteWorkspaceRequested: function(workspaceId) {\n throw new Error(\"Abstract method called!\");\n },\n\n _getOpenMenuButton: function(resourceData) {\n const openButton = new qx.ui.menu.Button(this.tr(\"Open\"));\n openButton[\"openResourceButton\"] = true;\n openButton.addListener(\"execute\", () => {\n switch (resourceData[\"resourceType\"]) {\n case \"study\": {\n const isStudyCreation = false;\n this._startStudyById(resourceData[\"uuid\"], null, null, isStudyCreation);\n break;\n }\n case \"template\":\n this._createStudyFromTemplate(resourceData);\n break;\n case \"service\":\n this._createStudyFromService(resourceData[\"key\"], resourceData[\"version\"]);\n break;\n }\n }, this);\n return openButton;\n },\n\n _openResourceDetails: function(resourceData) {\n const resourceDetails = new osparc.dashboard.ResourceDetails(resourceData);\n const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n resourceDetails.addListener(\"updateStudy\", e => this._updateStudyData(e.getData()));\n resourceDetails.addListener(\"updateTemplate\", e => this._updateTemplateData(e.getData()));\n resourceDetails.addListener(\"updateService\", e => this._updateServiceData(e.getData()));\n resourceDetails.addListener(\"publishTemplate\", e => {\n win.close();\n this.fireDataEvent(\"publishTemplate\", e.getData());\n });\n resourceDetails.addListener(\"openStudy\", e => {\n const openCB = () => win.close();\n const studyId = e.getData()[\"uuid\"];\n const isStudyCreation = false;\n this._startStudyById(studyId, openCB, null, isStudyCreation);\n });\n resourceDetails.addListener(\"openTemplate\", e => {\n win.close();\n const templateData = e.getData();\n this._createStudyFromTemplate(templateData);\n });\n resourceDetails.addListener(\"openService\", e => {\n win.close();\n const openServiceData = e.getData();\n this._createStudyFromService(openServiceData[\"key\"], openServiceData[\"version\"]);\n });\n return resourceDetails;\n },\n\n _getShareMenuButton: function(card) {\n const resourceData = card.getResourceData();\n const isCurrentUserOwner = osparc.data.model.Study.canIWrite(resourceData[\"accessRights\"]);\n if (!isCurrentUserOwner) {\n return null;\n }\n\n const shareButton = new qx.ui.menu.Button(this.tr(\"Share...\"), \"@FontAwesome5Solid/share-alt/12\");\n shareButton.addListener(\"tap\", () => card.openAccessRights(), this);\n return shareButton;\n },\n\n _getTagsMenuButton: function(card) {\n const resourceData = card.getResourceData();\n const isCurrentUserOwner = osparc.data.model.Study.canIWrite(resourceData[\"accessRights\"]);\n if (!isCurrentUserOwner) {\n return null;\n }\n\n const tagsButton = new qx.ui.menu.Button(this.tr(\"Tags...\"), \"@FontAwesome5Solid/tags/12\");\n tagsButton.addListener(\"tap\", () => card.openTags(), this);\n return tagsButton;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that contains FilesTree showing:\n * - data generated by the node\n * and a FileLabelWithActions for letting the user download and/or remove files.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n *
\n * let dataManager = new osparc.widget.StudyDataManager(null, nodeId);\n * this.getRoot().add(dataManager);\n *\n */\n\nqx.Class.define(\"osparc.widget.StudyDataManager\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyId {String} StudyId\n * @param nodeId {String} NodeId\n */\n construct: function(studyId, nodeId) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n if (studyId) {\n this.set({\n studyId\n });\n }\n\n if (nodeId) {\n this.set({\n nodeId\n });\n }\n\n this.__buildLayout();\n this.__reloadTree();\n },\n\n statics: {\n popUpInWindow: function(studyId, nodeId, title) {\n const studyDataManager = new osparc.widget.StudyDataManager(studyId, nodeId);\n if (!title) {\n title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + qx.locale.Manager.tr(\" Files\");\n }\n return osparc.ui.window.Window.popUpInWindow(studyDataManager, title, osparc.dashboard.ResourceDetails.WIDTH, osparc.dashboard.ResourceDetails.HEIGHT);\n },\n },\n\n properties: {\n studyId: {\n check: \"String\",\n init: null,\n nullable: false\n },\n\n nodeId: {\n check: \"String\",\n init: null,\n nullable: false\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tree-folder-view\":\n control = new osparc.file.TreeFolderView();\n this._add(control, {\n flex: 1\n });\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n treeFolderView.getChildControl(\"folder-tree\").setBackgroundColor(\"window-popup-background\");\n\n const reloadButton = treeFolderView.getChildControl(\"reload-button\");\n reloadButton.addListener(\"execute\", () => this.__reloadTree(), this);\n\n const selectedFileLayout = treeFolderView.getChildControl(\"folder-viewer\").getChildControl(\"selected-file-layout\");\n selectedFileLayout.addListener(\"fileDeleted\", e => this.__fileDeleted(e.getData()), this);\n },\n\n __reloadTree: function() {\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n\n const foldersTree = treeFolderView.getChildControl(\"folder-tree\");\n foldersTree.resetCache();\n if (this.getStudyId()) {\n foldersTree.populateStudyTree(this.getStudyId());\n }\n if (this.getNodeId()) {\n foldersTree.populateNodeTree(this.getNodeId());\n }\n\n const folderViewer = treeFolderView.getChildControl(\"folder-viewer\");\n folderViewer.resetFolder();\n },\n\n __fileDeleted: function(fileMetadata) {\n // After deleting a file, try to keep the user in the same folder.\n // If the folder doesn't longer exist, open the closest available parent\n\n const path = fileMetadata[\"fileUuid\"].split(\"/\");\n\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n const foldersTree = treeFolderView.getChildControl(\"folder-tree\");\n foldersTree.resetCache();\n\n const openSameFolder = () => {\n if (!this.getStudyId()) {\n // drop first, which is the study id\n path.shift();\n }\n // drop last, which is the file\n path.pop();\n treeFolderView.openPath(path);\n };\n\n if (this.getStudyId()) {\n foldersTree.populateStudyTree(this.getStudyId())\n .then(() => openSameFolder())\n .catch(err => console.error(err));\n }\n if (this.getNodeId()) {\n foldersTree.populateNodeTree(this.getNodeId())\n .then(() => openSameFolder())\n .catch(err => console.error(err));\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Cross browser abstractions to work with labels.\n */\nqx.Bootstrap.define(\"qx.bom.Label\",\n{\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /** @type {Map} Contains all supported styles */\n __styles :\n {\n fontFamily : 1,\n fontSize : 1,\n fontWeight : 1,\n fontStyle : 1,\n lineHeight : 1,\n wordBreak : 1\n },\n\n\n /**\n * Generates the helper DOM element for text measuring\n *\n * @return {Element} Helper DOM element\n */\n __prepareText : function()\n {\n var el = this.__createMeasureElement(false);\n document.body.insertBefore(el, document.body.firstChild);\n\n return this._textElement = el;\n },\n\n\n /**\n * Generates the helper DOM element for HTML measuring\n *\n * @return {Element} Helper DOM element\n */\n __prepareHtml : function()\n {\n var el = this.__createMeasureElement(true);\n document.body.insertBefore(el, document.body.firstChild);\n\n return this._htmlElement = el;\n },\n\n\n /**\n * Creates the measure element\n *\n * @param html {Boolean?false} Whether HTML markup should be used.\n * @return {Element} The measure element\n */\n __createMeasureElement : function(html)\n {\n var el = qx.dom.Element.create(\"div\");\n var style = el.style;\n\n style.width = style.height = \"auto\";\n style.left = style.top = \"-1000px\";\n style.visibility = \"hidden\";\n style.position = \"absolute\";\n style.overflow = \"visible\";\n style.display = \"block\";\n\n if (html)\n {\n style.whiteSpace = \"normal\";\n }\n else\n {\n style.whiteSpace = \"nowrap\";\n\n if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n var inner = document.createElementNS(\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\", \"label\");\n\n // Force style inheritance for font styles to omit usage of\n // CSS \"label\" selector, See bug #1349 for details.\n var style = inner.style;\n style.padding = \"0\";\n style.margin = \"0\";\n style.width = \"auto\";\n\n for (var key in this.__styles) {\n style[key] = \"inherit\";\n }\n\n el.appendChild(inner);\n }\n }\n\n return el;\n },\n\n\n /**\n * Returns a map of all styles which should be applied as\n * a basic set.\n *\n * @param html {Boolean?false} Whether HTML markup should be used.\n * @return {Map} Initial styles which should be applied to a label element.\n */\n __getStyles : function(html)\n {\n var styles = {};\n\n styles.overflow = \"hidden\";\n if (html)\n {\n styles.whiteSpace = \"normal\";\n }\n else if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n styles.display = \"block\";\n }\n else\n {\n styles.whiteSpace = \"nowrap\";\n styles[qx.core.Environment.get(\"css.textoverflow\")] = \"ellipsis\";\n }\n\n return styles;\n },\n\n\n /**\n * Creates a label.\n *\n * The default mode is 'text' which means that the overlapping text is cut off\n * using ellipsis automatically. Text wrapping is disabled in this mode\n * as well. Spaces are normalized. Umlauts and other special symbols are only\n * allowed in unicode mode as normal characters.\n *\n * In the HTML mode you can insert any HTML, but loose the capability to cut\n * of overlapping text. Automatic text wrapping is enabled by default.\n *\n * It is not possible to modify the mode afterwards.\n *\n * @param content {String} Content of the label\n * @param html {Boolean?false} Whether HTML markup should be used.\n * @param win {Window?null} Window to create the element for\n * @return {Element} The created iframe node\n */\n create : function(content, html, win)\n {\n if (!win) {\n win = window;\n }\n\n var el = win.document.createElement(\"div\");\n\n if (html)\n {\n el.useHtml = true;\n }\n\n if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n // Gecko as of Firefox 2.x and 3.0 does not support ellipsis\n // for text overflow. We use this feature from XUL instead.\n var xulel = win.document.createElementNS(\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\", \"label\");\n\n var style = xulel.style;\n style.cursor = \"inherit\";\n style.color = \"inherit\";\n style.overflow = \"hidden\";\n style.maxWidth = \"100%\";\n style.padding = \"0\";\n style.margin = \"0\";\n style.width = \"auto\";\n\n // Force style inheritance for font styles to omit usage of\n // CSS \"label\" selector, See bug #1349 for details.\n for (var key in this.__styles) {\n xulel.style[key] = \"inherit\";\n }\n\n xulel.setAttribute(\"crop\", \"end\");\n\n el.appendChild(xulel);\n }\n else\n {\n qx.bom.element.Style.setStyles(el, this.__getStyles(html));\n }\n\n if (content) {\n this.setValue(el, content);\n }\n\n return el;\n },\n\n\n /** Sanitizer function */\n __sanitizer : null,\n\n\n /**\n * Sets a function to sanitize values. It will be used by {@link #setValue}.\n * The function to sanitize will get the
string value and\n * should return a sanitized / cleared string.\n *\n * @param func {Function | null} Function to sanitize / clean HTML code\n * from given string parameter\n */\n setSanitizer : function(func)\n {\n if (qx.core.Environment.get(\"qx.debug\")) {\n if (func) {\n qx.core.Assert.assertFunction(func);\n }\n }\n\n qx.bom.Label.__sanitizer = func;\n },\n\n\n /**\n * Sets the content of the element.\n *\n * The possibilities of the value depends on the mode\n * defined using {@link #create}.\n *\n * @param element {Element} DOM element to modify.\n * @param value {String} Content to insert.\n */\n setValue : function(element, value)\n {\n value = value || \"\";\n\n if (element.useHtml) {\n if (qx.bom.Label.__sanitizer && typeof(qx.bom.Label.__sanitizer) === \"function\") {\n value = qx.bom.Label.__sanitizer(value);\n }\n element.innerHTML = value;\n } else if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n element.firstChild.setAttribute(\"value\", value);\n } else {\n qx.bom.element.Attribute.set(element, \"text\", value);\n }\n },\n\n\n /**\n * Returns the content of the element.\n *\n * @param element {Element} DOM element to query.\n * @return {String} Content stored in the element.\n */\n getValue : function(element)\n {\n if (element.useHtml) {\n return element.innerHTML;\n } else if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n return element.firstChild.getAttribute(\"value\") || \"\";\n } else {\n return qx.bom.element.Attribute.get(element, \"text\");\n }\n },\n\n\n /**\n * Returns the preferred dimensions of the given HTML content.\n *\n * @param content {String} The HTML markup to measure\n * @param styles {Map?null} Optional styles to apply\n * @param width {Integer} To support width for height it is possible to limit the width\n * @return {Map} A map with preferred width and height.\n */\n getHtmlSize : function(content, styles, width)\n {\n var element = this._htmlElement || this.__prepareHtml();\n\n // apply width\n element.style.width = width != undefined ? width + \"px\" : \"auto\";\n // insert content\n element.innerHTML = content;\n\n return this.__measureSize(element, styles);\n },\n\n\n /**\n * Returns the preferred dimensions of the given text.\n *\n * @param text {String} The text to measure\n * @param styles {Map} Optional styles to apply\n * @return {Map} A map with preferred width and height.\n */\n getTextSize : function(text, styles)\n {\n var element = this._textElement || this.__prepareText();\n\n if (!qx.core.Environment.get(\"css.textoverflow\") &&\n qx.core.Environment.get(\"html.xul\"))\n {\n element.firstChild.setAttribute(\"value\", text);\n } else {\n qx.bom.element.Attribute.set(element, \"text\", text);\n }\n\n return this.__measureSize(element, styles);\n },\n\n\n /**\n * Measure the size of the given element\n *\n * @param element {Element} The element to measure\n * @param styles {Map?null} Optional styles to apply\n * @return {Map} A map with preferred width and height.\n */\n __measureSize : function(element, styles)\n {\n // sync styles\n var keys = this.__styles;\n\n if (!styles) {\n styles = {};\n }\n\n for (var key in keys) {\n element.style[key] = styles[key] || \"\";\n }\n\n // detect size\n var size = qx.bom.element.Dimension.getSize(element);\n\n // all modern browser are needing one more pixel for width\n size.width++;\n\n return size;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.Utils\", {\n type: \"static\",\n\n statics: {\n QUICK_START: {\n \"tis\": {\n localStorageStr: \"tiDontShowQuickStart\",\n tutorial: () => new osparc.product.quickStart.tis.Slides()\n },\n \"tiplite\": {\n localStorageStr: \"tipliteDontShowQuickStart\",\n tutorial: () => new osparc.product.quickStart.tis.Slides()\n },\n \"s4llite\": {\n localStorageStr: \"s4lliteDontShowQuickStart\",\n tutorial: () => new osparc.product.quickStart.s4llite.Slides()\n },\n \"s4l\": {\n localStorageStr: \"s4lDontShowQuickStart\",\n tutorial: () => new osparc.product.quickStart.s4l.Welcome()\n },\n \"s4lacad\": {\n localStorageStr: \"s4lacadDontShowQuickStart\",\n tutorial: () => new osparc.product.quickStart.s4lacad.Welcome()\n }\n },\n\n getQuickStart: function() {\n const quickStarts = this.QUICK_START;\n const pName = osparc.product.Utils.getProductName();\n if (Object.keys(quickStarts).includes(pName)) {\n return quickStarts[pName];\n }\n return null;\n },\n\n createTitle: function(title) {\n const label = new qx.ui.basic.Label(title).set({\n rich: true,\n font: \"text-14\"\n });\n if (title) {\n label.setValue(title);\n }\n return label;\n },\n\n createLabel: function(text) {\n const label = new qx.ui.basic.Label().set({\n rich: true,\n wrap: true,\n selectable: true,\n font: \"text-14\"\n });\n if (text) {\n label.setValue(text);\n }\n return label;\n },\n\n createDontShowAgain: function(localStorageStr) {\n const dontShowCB = new qx.ui.form.CheckBox(qx.locale.Manager.tr(\"Don't show again\")).set({\n value: osparc.utils.Utils.localCache.getLocalStorageItem(localStorageStr) === \"true\"\n });\n dontShowCB.addListener(\"changeValue\", e => {\n const dontShow = e.getData();\n osparc.utils.Utils.localCache.setLocalStorageItem(localStorageStr, Boolean(dontShow));\n });\n return dontShowCB;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * The real menu button class which supports a command and an icon. All\n * other features are inherited from the {@link qx.ui.menu.AbstractButton}\n * class.\n */\nqx.Class.define(\"qx.ui.menu.Button\",\n{\n extend : qx.ui.menu.AbstractButton,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param label {String} Initial label\n * @param icon {String} Initial icon\n * @param command {qx.ui.command.Command} Initial command (shortcut)\n * @param menu {qx.ui.menu.Menu} Initial sub menu\n */\n construct : function(label, icon, command, menu)\n {\n this.base(arguments);\n\n // Initialize with incoming arguments\n if (label != null) {\n this.setLabel(label);\n }\n\n if (icon != null) {\n this.setIcon(icon);\n }\n\n if (command != null) {\n this.setCommand(command);\n }\n\n if (menu != null) {\n this.setMenu(menu);\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"menu-button\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n EVENT HANDLER\n ---------------------------------------------------------------------------\n */\n\n\n // overridden\n _onTap : function(e)\n {\n if (e.isLeftPressed() && this.getMenu()) {\n this.execute();\n // don't close menus if the button is a sub menu button\n this.getMenu().open();\n return;\n }\n\n this.base(arguments, e);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(osparc/tours/s4llite_tours.json)\n * @asset(osparc/tours/s4l_tours.json)\n * @asset(osparc/tours/tis_tours.json)\n */\n\nqx.Class.define(\"osparc.product.tours.Tours\", {\n type: \"static\",\n\n statics: {\n TOURS: {\n \"osparc\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/osparc_tours.json\")\n },\n \"s4l\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/s4l_tours.json\")\n },\n \"s4lacad\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/s4l_tours.json\")\n },\n \"s4llite\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/s4llite_tours.json\")\n },\n \"tis\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/tis_tours.json\")\n },\n \"tiplite\": {\n fetchTours: () => osparc.product.tours.Tours.fetchTours(\"/resource/osparc/tours/tiplite_tours.json\")\n },\n },\n\n fetchTours: function(link) {\n return osparc.utils.Utils.fetchJSON(link)\n .then(Object.values)\n .catch(console.error);\n },\n\n // it returns a promise\n getTours: function() {\n const pName = osparc.product.Utils.getProductName();\n if (Object.keys(this.TOURS).includes(pName)) {\n return this.TOURS[pName].fetchTours();\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tours.Manager\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function() {\n this.base(arguments, \"guided-torus\", this.tr(\"Guided Tours\"));\n\n this.set({\n layout: new qx.ui.layout.VBox(20),\n contentPadding: 15,\n modal: true,\n width: 400,\n height: 300,\n showMaximize: false,\n showMinimize: false\n });\n\n this.__blankets = [];\n this.__buildLayout();\n },\n\n properties: {\n tours: {\n check: \"Array\",\n init: [],\n nullable: true,\n event: \"changeTours\"\n },\n\n tour: {\n check: \"Object\",\n init: null,\n nullable: true\n },\n\n steps: {\n check: \"Array\",\n init: [],\n nullable: true\n }\n },\n\n members: {\n __currentBubble: null,\n __currentIdx: null,\n __blankets: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"intro-text\":\n control = new qx.ui.basic.Label().set({\n value: this.tr(\"This collection of Guided Tours will show you how to use the platform:\"),\n rich: true,\n wrap: true,\n font: \"text-14\"\n });\n this.add(control);\n break;\n case \"guided-tours-list\": {\n control = new osparc.tours.List();\n control.addListener(\"tourSelected\", e => this.__selectTour(e.getData()));\n this.bind(\"tours\", control, \"tours\");\n this.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"intro-text\");\n this.getChildControl(\"guided-tours-list\");\n },\n\n start: function() {\n this.center();\n this.open();\n },\n\n stop: function() {\n this.setTour(null);\n this.__removeCurrentBubble();\n this.__removeBlankets();\n },\n\n __removeCurrentBubble: function() {\n if (this.__currentBubble) {\n qx.core.Init.getApplication().getRoot().remove(this.__currentBubble);\n this.__currentBubble.exclude();\n this.__currentBubble = null;\n }\n },\n\n __addBlankets: function(targetWidget) {\n // the plan is to surround the targetWidget with dark blankets so it gets highlighted\n const element = targetWidget.getContentElement().getDomElement();\n const {\n top,\n left\n } = qx.bom.element.Location.get(element);\n const {\n width,\n height\n } = qx.bom.element.Dimension.getSize(element);\n const windowW = window.innerWidth;\n const windowH = window.innerHeight;\n\n const addBlanket = (w, h, l, t) => {\n const blanket = new qx.ui.core.Widget().set({\n width: w,\n height: h,\n backgroundColor: \"black\",\n opacity: 0.4,\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX-1\n });\n qx.core.Init.getApplication().getRoot().add(blanket, {\n left: l,\n top: t\n });\n return blanket;\n };\n this.__blankets.push(addBlanket(left, windowH, 0, 0)); // left\n this.__blankets.push(addBlanket(width, top, left, 0)); // top\n this.__blankets.push(addBlanket(windowW-left-width, windowH, left+width, 0)); // right\n this.__blankets.push(addBlanket(width, windowH-top-height, left, top+height)); // bottom\n },\n\n __removeBlankets: function() {\n const nBlankets = this.__blankets.length;\n for (let i=nBlankets-1; i>=0; i--) {\n const blanket = this.__blankets[i];\n qx.core.Init.getApplication().getRoot().remove(blanket);\n this.__blankets.splice(i, 1);\n }\n },\n\n __selectTour: function(tour) {\n this.close();\n if (\"steps\" in tour) {\n this.setTour(tour);\n this.setSteps(tour.steps);\n this.__toStepCheck(0);\n }\n },\n\n __getVisibleElement: function(selector) {\n // get all elements...\n const elements = document.querySelectorAll(`[${selector}]`);\n // ...and use the first on screen match\n const element = [...elements].find(el => osparc.utils.Utils.isElementOnScreen(el));\n return element;\n },\n\n __toStepCheck: function(idx = 0) {\n const steps = this.getSteps();\n if (idx >= steps.length) {\n return;\n }\n\n this.__removeCurrentBubble();\n this.__removeBlankets();\n this.__currentIdx = idx;\n const step = steps[idx];\n if (step.beforeClick && step.beforeClick.selector) {\n let targetWidget = null;\n const element = this.__getVisibleElement(step.beforeClick.selector);\n if (element) {\n targetWidget = qx.ui.core.Widget.getWidgetByElement(element);\n }\n if (targetWidget) {\n if (step.beforeClick.action) {\n targetWidget[step.beforeClick.action]();\n } else if (step.beforeClick.event) {\n targetWidget.fireEvent(step.beforeClick.event);\n } else {\n targetWidget.execute();\n }\n setTimeout(() => this.__toStep(steps, idx), 150);\n } else {\n // target not found, move to the next step\n this.__toStepCheck(this.__currentIdx+1);\n return;\n }\n } else {\n this.__toStep(steps, idx);\n }\n },\n\n __createStep: function() {\n const tour = this.getTour();\n const stepWidget = new osparc.tours.Step(tour[\"name\"]).set({\n maxWidth: 400\n });\n [\n \"skipPressed\",\n \"endPressed\"\n ].forEach(evName => stepWidget.addListener(evName, () => this.stop(), this));\n stepWidget.addListener(\"nextPressed\", () => this.__toStepCheck(this.__currentIdx+1), this);\n stepWidget.addListener(\"toTours\", () => {\n this.stop();\n this.start();\n }, this);\n return stepWidget;\n },\n\n __toStep: async function(steps, idx) {\n const step = steps[idx];\n const stepWidget = this.__currentBubble = this.__createStep();\n if (step.anchorEl) {\n let targetWidget = null;\n const element = this.__getVisibleElement(step.anchorEl);\n if (element) {\n targetWidget = qx.ui.core.Widget.getWidgetByElement(element);\n }\n if (targetWidget) {\n stepWidget.setElement(targetWidget);\n if (step.placement) {\n stepWidget.setOrientation(osparc.ui.basic.FloatingHelper.textToOrientation(step.placement));\n }\n this.__addBlankets(targetWidget);\n } else {\n // target not found, move to the next step\n this.__toStepCheck(this.__currentIdx+1);\n return;\n }\n } else {\n // intro text, it will be centered\n stepWidget.getChildControl(\"caret\").exclude();\n }\n\n if (step.title) {\n stepWidget.setTitle(step.title);\n }\n if (step.text) {\n stepWidget.setText(step.text);\n }\n if (steps.length > 1) {\n stepWidget.set({\n stepIndex: idx+1,\n nSteps: steps.length\n });\n }\n\n stepWidget.show();\n setTimeout(() => {\n if (stepWidget.getElement()) {\n stepWidget.updatePosition();\n } else {\n stepWidget.moveToTheCenter();\n }\n }, 10);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2011 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tristan Koch (tristankoch)\n\n************************************************************************ */\n\n/**\n * Script loader with interface similar to\n * XmlHttpRequest.\n *\n * The script loader can be used to load scripts from arbitrary sources.\n * \n * For JSONP requests, consider the {@link qx.bom.request.Jsonp} transport\n * that derives from the script loader.\n * \n *\n * \n * var req = new qx.bom.request.Script();\n * req.onload = function() {\n * // Script is loaded and parsed and\n * // globals set are available\n * }\n *\n * req.open(\"GET\", url);\n * req.send();\n * \n * null if the request\n * is disposed\n */\n getResponseHeader: function(key) {\n if (this.__disposed) {\n return null;\n }\n\n if (this.__environmentGet(\"qx.debug\")) {\n qx.Bootstrap.debug(\"Response header cannot be determined for \" +\n \"requests made with script transport.\");\n }\n return \"unknown\";\n },\n\n /**\n * Get all response headers from response.\n *\n * Note: This method exists for compatibility reasons. The script\n * transport does not receive response headers.\n * @return {String|null} Warning message or null if the request\n * is disposed\n */\n getAllResponseHeaders: function() {\n if (this.__disposed) {\n return null;\n }\n\n if (this.__environmentGet(\"qx.debug\")) {\n qx.Bootstrap.debug(\"Response headers cannot be determined for\" +\n \"requests made with script transport.\");\n }\n\n return \"Unknown response headers\";\n },\n\n /**\n * Determine if loaded script has expected impact on global namespace.\n *\n * The function is called once the script was loaded and must return a\n * boolean indicating if the response is to be considered successful.\n *\n * @param check {Function} Function executed once the script was loaded.\n *\n */\n setDetermineSuccess: function(check) {\n this.__determineSuccess = check;\n },\n\n /**\n * Dispose object.\n */\n dispose: function() {\n var script = this.__scriptElement;\n\n if (!this.__disposed) {\n\n // Prevent memory leaks\n if (script) {\n script.onload = script.onreadystatechange = null;\n this.__disposeScriptElement();\n }\n\n if (this.__timeoutId) {\n window.clearTimeout(this.__timeoutId);\n }\n\n this.__disposed = true;\n }\n },\n\n\n /**\n * Check if the request has already beed disposed.\n * @return {Boolean} true, if the request has been disposed.\n */\n isDisposed : function() {\n return !!this.__disposed;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROTECTED\n ---------------------------------------------------------------------------\n */\n\n /**\n * Get URL of request.\n *\n * @return {String} URL of request.\n */\n _getUrl: function() {\n return this.__url;\n },\n\n /**\n * Get script element used for request.\n *\n * @return {Element} Script element.\n */\n _getScriptElement: function() {\n return this.__scriptElement;\n },\n\n /**\n * Handle timeout.\n */\n _onTimeout: function() {\n this.__failure();\n\n if (!this.__supportsErrorHandler()) {\n this._emit(\"error\");\n }\n\n this._emit(\"timeout\");\n\n if (!this.__supportsErrorHandler()) {\n this._emit(\"loadend\");\n }\n },\n\n /**\n * Handle native load.\n */\n _onNativeLoad: function() {\n var script = this.__scriptElement,\n determineSuccess = this.__determineSuccess,\n that = this;\n\n // Aborted request must not fire load\n if (this.__abort) {\n return;\n }\n\n // BUGFIX: IE < 9\n // When handling \"readystatechange\" event, skip if readyState\n // does not signal loaded script\n if (this.__environmentGet(\"engine.name\") === \"mshtml\" &&\n this.__environmentGet(\"browser.documentmode\") < 9) {\n if (!(/loaded|complete/).test(script.readyState)) {\n return;\n } else {\n if (this.__environmentGet(\"qx.debug.io\")) {\n qx.Bootstrap.debug(qx.bom.request.Script, \"Received native readyState: loaded\");\n }\n }\n }\n\n if (this.__environmentGet(\"qx.debug.io\")) {\n qx.Bootstrap.debug(qx.bom.request.Script, \"Received native load\");\n }\n\n // Determine status by calling user-provided check function\n if (determineSuccess) {\n\n // Status set before has higher precedence\n if (!this.status) {\n this.status = determineSuccess() ? 200 : 500;\n }\n\n }\n\n if (this.status === 500) {\n if (this.__environmentGet(\"qx.debug.io\")) {\n qx.Bootstrap.debug(qx.bom.request.Script, \"Detected error\");\n }\n }\n\n if (this.__timeoutId) {\n window.clearTimeout(this.__timeoutId);\n }\n\n window.setTimeout(function() {\n that._success();\n that._readyStateChange(4);\n that._emit(\"load\");\n that._emit(\"loadend\");\n });\n },\n\n /**\n * Handle native error.\n */\n _onNativeError: function() {\n this.__failure();\n this._emit(\"error\");\n this._emit(\"loadend\");\n },\n\n /*\n ---------------------------------------------------------------------------\n PRIVATE\n ---------------------------------------------------------------------------\n */\n\n /**\n * @type {Element} Script element\n */\n __scriptElement: null,\n\n /**\n * @type {Element} Head element\n */\n __headElement: null,\n\n /**\n * @type {String} URL\n */\n __url: \"\",\n\n /**\n * @type {Function} Bound _onNativeLoad handler.\n */\n __onNativeLoadBound: null,\n\n /**\n * @type {Function} Bound _onNativeError handler.\n */\n __onNativeErrorBound: null,\n\n /**\n * @type {Function} Bound _onTimeout handler.\n */\n __onTimeoutBound: null,\n\n /**\n * @type {Number} Timeout timer iD.\n */\n __timeoutId: null,\n\n /**\n * @type {Boolean} Whether request was aborted.\n */\n __abort: null,\n\n /**\n * @type {Boolean} Whether request was disposed.\n */\n __disposed: null,\n\n /*\n ---------------------------------------------------------------------------\n HELPER\n ---------------------------------------------------------------------------\n */\n\n /**\n * Initialize properties.\n */\n __initXhrProperties: function() {\n this.readyState = 0;\n this.status = 0;\n this.statusText = \"\";\n },\n\n /**\n * Change readyState.\n *\n * @param readyState {Number} The desired readyState\n */\n _readyStateChange: function(readyState) {\n this.readyState = readyState;\n this._emit(\"readystatechange\");\n },\n\n /**\n * Handle success.\n */\n _success: function() {\n this.__disposeScriptElement();\n this.readyState = 4;\n\n // By default, load is considered successful\n if (!this.status) {\n this.status = 200;\n }\n\n this.statusText = \"\" + this.status;\n },\n\n /**\n * Handle failure.\n */\n __failure: function() {\n this.__disposeScriptElement();\n this.readyState = 4;\n this.status = 0;\n this.statusText = null;\n },\n\n /**\n * Looks up whether browser supports error handler.\n *\n * @return {Boolean} Whether browser supports error handler.\n */\n __supportsErrorHandler: function() {\n var isLegacyIe = this.__environmentGet(\"engine.name\") === \"mshtml\" &&\n this.__environmentGet(\"browser.documentmode\") < 9;\n\n var isOpera = this.__environmentGet(\"engine.name\") === \"opera\";\n\n return !(isLegacyIe || isOpera);\n },\n\n /**\n * Create and configure script element.\n *\n * @return {Element} Configured script element.\n */\n __createScriptElement: function() {\n var script = this.__scriptElement = document.createElement(\"script\");\n\n script.src = this.__url;\n script.onerror = this.__onNativeErrorBound;\n script.onload = this.__onNativeLoadBound;\n\n // BUGFIX: IE < 9\n // Legacy IEs do not fire the \"load\" event for script elements.\n // Instead, they support the \"readystatechange\" event\n if (this.__environmentGet(\"engine.name\") === \"mshtml\" &&\n this.__environmentGet(\"browser.documentmode\") < 9) {\n script.onreadystatechange = this.__onNativeLoadBound;\n }\n\n return script;\n },\n\n /**\n * Remove script element from DOM.\n */\n __disposeScriptElement: function() {\n var script = this.__scriptElement;\n\n if (script && script.parentNode) {\n this.__headElement.removeChild(script);\n }\n },\n\n /**\n * Proxy Environment.get to guard against env not being present yet.\n *\n * @param key {String} Environment key.\n * @return {var} Value of the queried environment key\n * @lint environmentNonLiteralKey(key)\n */\n __environmentGet: function(key) {\n if (qx && qx.core && qx.core.Environment) {\n return qx.core.Environment.get(key);\n } else {\n if (key === \"engine.name\") {\n return qx.bom.client.Engine.getName();\n }\n\n if (key === \"browser.documentmode\") {\n return qx.bom.client.Browser.getDocumentMode();\n }\n\n if (key == \"qx.debug.io\") {\n return false;\n }\n\n throw new Error(\"Unknown environment key at this phase\");\n }\n }\n },\n\n defer: function() {\n if (qx && qx.core && qx.core.Environment) {\n qx.core.Environment.add(\"qx.debug.io\", false);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.announcement.Announcement\", {\n extend: qx.core.Object,\n\n construct: function(announcementData) {\n this.base(arguments);\n\n this.set({\n id: announcementData.id,\n products: announcementData.products,\n start: new Date(announcementData.start),\n end: new Date(announcementData.end),\n title: announcementData.title,\n description: announcementData.description,\n link: announcementData.link,\n widgets: announcementData.widgets\n });\n },\n\n properties: {\n id: {\n check: \"String\",\n init: null,\n nullable: false\n },\n\n products: {\n check: \"Array\",\n init: [],\n nullable: false\n },\n\n start: {\n check: \"Date\",\n init: null,\n nullable: false\n },\n\n end: {\n check: \"Date\",\n init: null,\n nullable: false\n },\n\n title: {\n check: \"String\",\n init: null,\n nullable: true\n },\n\n description: {\n check: \"String\",\n init: null,\n nullable: true\n },\n\n link: {\n check: \"String\",\n init: null,\n nullable: true\n },\n\n widgets: {\n check: \"Array\",\n init: [],\n nullable: true\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * Container, which provides scrolling in one dimension (vertical or horizontal).\n *\n * @childControl button-forward {qx.ui.form.RepeatButton} button to step forward\n * @childControl button-backward {qx.ui.form.RepeatButton} button to step backward\n * @childControl content {qx.ui.container.Composite} container to hold the content\n * @childControl scrollpane {qx.ui.core.scroll.ScrollPane} the scroll pane holds the content to enable scrolling\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * // create slide bar container\n * slideBar = new qx.ui.container.SlideBar().set({\n * width: 300\n * });\n *\n * // set layout\n * slideBar.setLayout(new qx.ui.layout.HBox());\n *\n * // add some widgets\n * for (var i=0; i<10; i++)\n * {\n * slideBar.add((new qx.ui.core.Widget()).set({\n * backgroundColor : (i % 2 == 0) ? \"red\" : \"blue\",\n * width : 60\n * }));\n * }\n *\n * this.getRoot().add(slideBar);\n * \n *\n * This example creates a SlideBar and add some widgets with alternating\n * background colors. Since the content is larger than the container, two\n * scroll buttons at the left and the right edge are shown.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.container.SlideBar\",\n{\n extend : qx.ui.core.Widget,\n\n include :\n [\n qx.ui.core.MRemoteChildrenHandling,\n qx.ui.core.MRemoteLayoutHandling\n ],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param orientation {String?\"horizontal\"} The slide bar orientation\n */\n construct : function(orientation)\n {\n this.base(arguments);\n\n var scrollPane = this.getChildControl(\"scrollpane\");\n this._add(scrollPane, {flex: 1});\n\n if (orientation != null) {\n this.setOrientation(orientation);\n } else {\n this.initOrientation();\n }\n\n this.addListener(\"roll\", this._onRoll, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"slidebar\"\n },\n\n /** Orientation of the bar */\n orientation :\n {\n check : [\"horizontal\", \"vertical\"],\n init : \"horizontal\",\n apply : \"_applyOrientation\"\n },\n\n /** The number of pixels to scroll if the buttons are pressed */\n scrollStep :\n {\n check : \"Integer\",\n init : 15,\n themeable : true\n }\n },\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /** Fired on scroll animation end invoked by 'scroll*' methods. */\n scrollAnimationEnd : \"qx.event.type.Event\"\n },\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n getChildrenContainer : function() {\n return this.getChildControl(\"content\");\n },\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"button-forward\":\n control = new qx.ui.form.RepeatButton;\n control.addListener(\"execute\", this._onExecuteForward, this);\n control.setFocusable(false);\n this._addAt(control, 2);\n break;\n\n case \"button-backward\":\n control = new qx.ui.form.RepeatButton;\n control.addListener(\"execute\", this._onExecuteBackward, this);\n control.setFocusable(false);\n this._addAt(control, 0);\n break;\n\n case \"content\":\n control = new qx.ui.container.Composite();\n\n this.getChildControl(\"scrollpane\").add(control);\n break;\n\n case \"scrollpane\":\n control = new qx.ui.core.scroll.ScrollPane();\n control.addListener(\"update\", this._onResize, this);\n control.addListener(\"scrollX\", this._onScroll, this);\n control.addListener(\"scrollY\", this._onScroll, this);\n control.addListener(\"scrollAnimationEnd\", this._onScrollAnimationEnd, this);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates :\n {\n barLeft : true,\n barTop : true,\n barRight : true,\n barBottom : true\n },\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC SCROLL API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Scrolls the element's content by the given amount.\n *\n * @param offset {Integer?0} Amount to scroll\n * @param duration {Number?} The time in milliseconds the scroll to should take.\n */\n scrollBy : function(offset, duration)\n {\n var pane = this.getChildControl(\"scrollpane\");\n if (this.getOrientation() === \"horizontal\") {\n pane.scrollByX(offset, duration);\n } else {\n pane.scrollByY(offset, duration);\n }\n },\n\n\n /**\n * Scrolls the element's content to the given coordinate\n *\n * @param value {Integer} The position to scroll to.\n * @param duration {Number?} The time in milliseconds the scroll to should take.\n */\n scrollTo : function(value, duration)\n {\n var pane = this.getChildControl(\"scrollpane\");\n if (this.getOrientation() === \"horizontal\") {\n pane.scrollToX(value, duration);\n } else {\n pane.scrollToY(value, duration);\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n // overridden\n _applyEnabled : function(value, old, name) {\n this.base(arguments, value, old, name);\n this._updateArrowsEnabled();\n },\n\n\n // property apply\n _applyOrientation : function(value, old)\n {\n var oldLayouts = [this.getLayout(), this._getLayout()];\n var buttonForward = this.getChildControl(\"button-forward\");\n var buttonBackward = this.getChildControl(\"button-backward\");\n\n // old can also be null, so we have to check both explicitly to set\n // the states correctly.\n if (old == \"vertical\" && value == \"horizontal\")\n {\n buttonForward.removeState(\"vertical\");\n buttonBackward.removeState(\"vertical\");\n buttonForward.addState(\"horizontal\");\n buttonBackward.addState(\"horizontal\");\n }\n else if (old == \"horizontal\" && value == \"vertical\")\n {\n buttonForward.removeState(\"horizontal\");\n buttonBackward.removeState(\"horizontal\");\n buttonForward.addState(\"vertical\");\n buttonBackward.addState(\"vertical\");\n }\n\n\n if (value == \"horizontal\")\n {\n this._setLayout(new qx.ui.layout.HBox());\n this.setLayout(new qx.ui.layout.HBox());\n }\n else\n {\n this._setLayout(new qx.ui.layout.VBox());\n this.setLayout(new qx.ui.layout.VBox());\n }\n\n if (oldLayouts[0]) {\n oldLayouts[0].dispose();\n }\n\n if (oldLayouts[1]) {\n oldLayouts[1].dispose();\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Scrolls pane on roll events\n *\n * @param e {qx.event.type.Roll} the roll event\n */\n _onRoll : function(e)\n {\n // only wheel and touch\n if (e.getPointerType() == \"mouse\") {\n return;\n }\n\n var delta = 0;\n var pane = this.getChildControl(\"scrollpane\");\n if (this.getOrientation() === \"horizontal\") {\n delta = e.getDelta().x;\n\n var position = pane.getScrollX();\n var max = pane.getScrollMaxX();\n var steps = parseInt(delta);\n\n // pass the event to the parent if both scrollbars are at the end\n if (!(\n steps < 0 && position <= 0 ||\n steps > 0 && position >= max ||\n delta == 0)\n ) {\n e.stop();\n } else {\n e.stopMomentum();\n }\n } else {\n delta = e.getDelta().y;\n\n var position = pane.getScrollY();\n var max = pane.getScrollMaxY();\n var steps = parseInt(delta);\n\n // pass the event to the parent if both scrollbars are at the end\n if (!(\n steps < 0 && position <= 0 ||\n steps > 0 && position >= max ||\n delta == 0\n )) {\n e.stop();\n } else {\n e.stopMomentum();\n }\n }\n this.scrollBy(parseInt(delta, 10));\n\n // block all momentum scrolling\n if (e.getMomentum()) {\n e.stop();\n }\n },\n\n\n /**\n * Update arrow enabled state after scrolling\n */\n _onScroll : function() {\n this._updateArrowsEnabled();\n },\n\n\n /**\n * Handler to fire the 'scrollAnimationEnd' event.\n */\n _onScrollAnimationEnd : function() {\n this.fireEvent(\"scrollAnimationEnd\");\n },\n\n\n /**\n * Listener for resize event. This event is fired after the\n * first flush of the element which leads to another queuing\n * when the changes modify the visibility of the scroll buttons.\n *\n * @param e {Event} Event object\n */\n _onResize : function(e)\n {\n var content = this.getChildControl(\"scrollpane\").getChildren()[0];\n if (!content) {\n return;\n }\n\n var innerSize = this.getInnerSize();\n var contentSize = content.getBounds();\n\n var overflow = (this.getOrientation() === \"horizontal\") ?\n contentSize.width > innerSize.width :\n contentSize.height > innerSize.height;\n\n if (overflow) {\n this._showArrows();\n this._updateArrowsEnabled();\n } else {\n this._hideArrows();\n }\n },\n\n\n /**\n * Scroll handler for left scrolling\n *\n */\n _onExecuteBackward : function() {\n this.scrollBy(-this.getScrollStep());\n },\n\n\n /**\n * Scroll handler for right scrolling\n *\n */\n _onExecuteForward : function() {\n this.scrollBy(this.getScrollStep());\n },\n\n\n /*\n ---------------------------------------------------------------------------\n UTILITIES\n ---------------------------------------------------------------------------\n */\n\n /**\n * Update arrow enabled state\n */\n _updateArrowsEnabled : function()\n {\n // set the disables state directly because we are overriding the\n // inheritance\n if (!this.getEnabled()) {\n this.getChildControl(\"button-backward\").setEnabled(false);\n this.getChildControl(\"button-forward\").setEnabled(false);\n return;\n }\n\n var pane = this.getChildControl(\"scrollpane\");\n\n if (this.getOrientation() === \"horizontal\")\n {\n var position = pane.getScrollX();\n var max = pane.getScrollMaxX();\n }\n else\n {\n var position = pane.getScrollY();\n var max = pane.getScrollMaxY();\n }\n\n this.getChildControl(\"button-backward\").setEnabled(position > 0);\n this.getChildControl(\"button-forward\").setEnabled(position < max);\n },\n\n\n /**\n * Show the arrows (Called from resize event)\n *\n */\n _showArrows : function()\n {\n this._showChildControl(\"button-forward\");\n this._showChildControl(\"button-backward\");\n },\n\n\n /**\n * Hide the arrows (Called from resize event)\n *\n */\n _hideArrows : function()\n {\n this._excludeChildControl(\"button-forward\");\n this._excludeChildControl(\"button-backward\");\n\n this.scrollTo(0);\n }\n }\n\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/*\n * A SlideBar that has the backward/forward buttons ON the content container.\n * Some transparency is given to the buttons to make the background container still visible.\n */\n\nqx.Class.define(\"osparc.widget.SlideBar\", {\n extend: qx.ui.container.SlideBar,\n\n construct: function(spacing) {\n this.base(arguments);\n\n const layout = new qx.ui.layout.HBox(spacing ? spacing : 5);\n this.setLayout(layout);\n\n this.__pimpLayout();\n },\n\n properties: {\n buttonsWidth: {\n check: \"Integer\",\n init: 30,\n nullable: false,\n apply: \"__updateElementSizes\"\n }\n },\n\n members: {\n __pimpLayout: function() {\n const buttonBackward = this.getChildControl(\"button-backward\");\n const buttonForward = this.getChildControl(\"button-forward\");\n [\n buttonBackward,\n buttonForward\n ].forEach(button => {\n button.set({\n alignY: \"middle\",\n opacity: 0.7,\n backgroundColor: \"background-main\",\n allowGrowY: true\n });\n });\n buttonBackward.setIcon(\"@FontAwesome5Solid/chevron-left/16\");\n buttonBackward.getContentElement().setStyles({\n \"border-top-left-radius\": \"0px\",\n \"border-bottom-left-radius\": \"0px\"\n });\n buttonForward.setIcon(\"@FontAwesome5Solid/chevron-right/16\");\n buttonForward.getContentElement().setStyles({\n \"border-top-right-radius\": \"0px\",\n \"border-bottom-right-radius\": \"0px\"\n });\n },\n\n // override\n _onResize: function() {\n this.base(arguments);\n this.__updateElementSizes();\n },\n\n __updateElementSizes: function() {\n const btnWidth = this.getButtonsWidth();\n const contentPane = this.getChildControl(\"scrollpane\");\n const padding = 3;\n contentPane.set({\n marginLeft: -btnWidth + padding,\n marginRight: -btnWidth + padding\n });\n const size = this.getInnerSize();\n if (size) {\n this.set({\n scrollStep: size.width\n });\n }\n const buttonBackward = this.getChildControl(\"button-backward\");\n const buttonForward = this.getChildControl(\"button-forward\");\n [\n buttonBackward,\n buttonForward\n ].forEach(button => {\n button.getChildControl(\"icon\").set({\n opacity: 1\n });\n });\n },\n\n // override\n _updateArrowsEnabled: function() {\n this.base(arguments);\n\n const buttonBackward = this.getChildControl(\"button-backward\");\n const buttonForward = this.getChildControl(\"button-forward\");\n [\n buttonBackward,\n buttonForward\n ].forEach(button => {\n button.setVisibility(button.getEnabled() ? \"visible\" : \"hidden\");\n });\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n\n/**\n * Responsible for the single selection management.\n *\n * The class manage a list of {@link qx.ui.core.Widget} which are returned from\n * {@link qx.ui.core.ISingleSelectionProvider#getItems}.\n *\n * @internal\n */\nqx.Class.define(\"qx.ui.core.SingleSelectionManager\",\n{\n extend : qx.core.Object,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n\n /**\n * Construct the single selection manager.\n *\n * @param selectionProvider {qx.ui.core.ISingleSelectionProvider} The provider\n * for selection.\n */\n construct : function(selectionProvider) {\n this.base(arguments);\n\n if (qx.core.Environment.get(\"qx.debug\")) {\n qx.core.Assert.assertInterface(selectionProvider,\n qx.ui.core.ISingleSelectionProvider,\n \"Invalid selectionProvider!\");\n }\n\n this.__selectionProvider = selectionProvider;\n },\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n\n events :\n {\n /** Fires after the selection was modified */\n \"changeSelected\" : \"qx.event.type.Data\"\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n\n properties :\n {\n /**\n * If the value is true the manager allows an empty selection,\n * otherwise the first selectable element returned from the\n * qx.ui.core.ISingleSelectionProvider will be selected.\n */\n allowEmptySelection :\n {\n check : \"Boolean\",\n init : true,\n apply : \"__applyAllowEmptySelection\"\n }\n },\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n\n members :\n {\n /** @type {qx.ui.core.Widget} The selected widget. */\n __selected : null,\n\n /** @type {qx.ui.core.ISingleSelectionProvider} The provider for selection management */\n __selectionProvider : null,\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Returns the current selected element.\n *\n * @return {qx.ui.core.Widget | null} The current selected widget or\n * null if the selection is empty.\n */\n getSelected : function() {\n return this.__selected;\n },\n\n /**\n * Selects the passed element.\n *\n * @param item {qx.ui.core.Widget} Element to select.\n * @throws {Error} if the element is not a child element.\n */\n setSelected : function(item) {\n if (!this.__isChildElement(item)) {\n throw new Error(\"Could not select \" + item +\n \", because it is not a child element!\");\n }\n\n this.__setSelected(item);\n },\n\n /**\n * Reset the current selection. If {@link #allowEmptySelection} is set to\n * true the first element will be selected.\n */\n resetSelected : function(){\n this.__setSelected(null);\n },\n\n /**\n * Return true if the passed element is selected.\n *\n * @param item {qx.ui.core.Widget} Element to check if selected.\n * @return {Boolean} true if passed element is selected,\n * false otherwise.\n * @throws {Error} if the element is not a child element.\n */\n isSelected : function(item) {\n if (!this.__isChildElement(item)) {\n throw new Error(\"Could not check if \" + item + \" is selected,\" +\n \" because it is not a child element!\");\n }\n return this.__selected === item;\n },\n\n /**\n * Returns true if selection is empty.\n *\n * @return {Boolean} true if selection is empty,\n * false otherwise.\n */\n isSelectionEmpty : function() {\n return this.__selected == null;\n },\n\n /**\n * Returns all elements which are selectable.\n *\n * @param all {Boolean} true for all selectables, false for the\n * selectables the user can interactively select\n * @return {qx.ui.core.Widget[]} The contained items.\n */\n getSelectables : function(all)\n {\n var items = this.__selectionProvider.getItems();\n var result = [];\n\n for (var i = 0; i < items.length; i++)\n {\n if (this.__selectionProvider.isItemSelectable(items[i])) {\n result.push(items[i]);\n }\n }\n\n // in case of an user selectable list, remove the enabled items\n if (!all) {\n for (var i = result.length -1; i >= 0; i--) {\n if (!result[i].getEnabled()) {\n result.splice(i, 1);\n }\n };\n }\n\n return result;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY METHODS\n ---------------------------------------------------------------------------\n */\n\n\n // apply method\n __applyAllowEmptySelection : function(value, old)\n {\n if (!value) {\n this.__setSelected(this.__selected);\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n HELPERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Set selected element.\n *\n * If passes value is null, the selection will be reseted.\n *\n * @param item {qx.ui.core.Widget | null} element to select, or\n * null to reset selection.\n */\n __setSelected : function(item) {\n var oldSelected = this.__selected;\n var newSelected = item;\n\n if (newSelected != null && oldSelected === newSelected) {\n return;\n }\n\n if (!this.isAllowEmptySelection() && newSelected == null) {\n var firstElement = this.getSelectables(true)[0];\n\n if (firstElement) {\n newSelected = firstElement;\n }\n }\n\n this.__selected = newSelected;\n this.fireDataEvent(\"changeSelected\", newSelected, oldSelected);\n },\n\n /**\n * Checks if passed element is a child element.\n *\n * @param item {qx.ui.core.Widget} Element to check if child element.\n * @return {Boolean} true if element is child element,\n * false otherwise.\n */\n __isChildElement : function(item)\n {\n var items = this.__selectionProvider.getItems();\n\n for (var i = 0; i < items.length; i++)\n {\n if (items[i] === item)\n {\n return true;\n }\n }\n return false;\n }\n },\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n destruct : function() {\n if (this.__selectionProvider.toHashCode) {\n this._disposeObjects(\"__selectionProvider\");\n } else {\n this.__selectionProvider = null;\n }\n\n this._disposeObjects(\"__selected\");\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.desktop.credits.BuyCreditsStepper\", {\n extend: qx.ui.container.Stack,\n construct(paymentMethods) {\n this.base(arguments);\n this.__paymentMethods = paymentMethods;\n const groupsStore = osparc.store.Groups.getInstance();\n const myGid = groupsStore.getMyGroupId()\n const store = osparc.store.Store.getInstance();\n this.__personalWallet = store.getWallets().find(wallet => wallet.getOwner() === myGid)\n this.__buildLayout()\n },\n events: {\n \"completed\": \"qx.event.type.Event\",\n \"cancelled\": \"qx.event.type.Event\",\n },\n properties: {\n paymentId: {\n check: \"String\",\n init: null,\n nullable: true\n }\n },\n members: {\n __buildLayout() {\n this.removeAll();\n this.__form = new osparc.desktop.credits.BuyCreditsForm(this.__paymentMethods);\n this.__form.addListener(\"submit\", e => {\n const {\n amountDollars: priceDollars,\n osparcCredits, paymentMethodId\n } = e.getData();\n const params = {\n url: {\n walletId: this.__personalWallet.getWalletId()\n },\n data: {\n priceDollars,\n osparcCredits\n }\n };\n this.__form.setFetching(true);\n if (paymentMethodId) {\n params.url.paymentMethodId = paymentMethodId;\n osparc.data.Resources.fetch(\"payments\", \"payWithPaymentMethod\", params)\n .then(data => {\n const { paymentId } = data\n osparc.wrapper.WebSocket.getInstance().getSocket().once(\"paymentCompleted\", paymentData => {\n if (paymentId === paymentData.paymentId) {\n this.__paymentCompleted(paymentData)\n this.__form.setFetching(false);\n }\n });\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n this.__form.setFetching(false);\n })\n } else {\n osparc.data.Resources.fetch(\"payments\", \"startPayment\", params)\n .then(data => {\n const { paymentId, paymentFormUrl } = data;\n this.setPaymentId(paymentId)\n this.__iframe = new qx.ui.embed.Iframe(paymentFormUrl).set({\n decorator: \"no-border-2\"\n });\n this.add(this.__iframe);\n this.setSelection([this.__iframe])\n osparc.wrapper.WebSocket.getInstance().getSocket().once(\"paymentCompleted\", paymentData => {\n if (paymentId === paymentData.paymentId) {\n this.__paymentCompleted(paymentData);\n }\n });\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => this.__form.setFetching(false));\n }\n });\n this.__form.addListener(\"cancel\", () => this.fireEvent(\"cancelled\"));\n this.add(this.__form);\n this.setSelection([this.__form])\n },\n __paymentCompleted(paymentData) {\n if (paymentData && paymentData.completedStatus) {\n const msg = this.tr(\"Payment \") + osparc.utils.Utils.onlyFirstsUp(paymentData.completedStatus);\n switch (paymentData.completedStatus) {\n case \"SUCCESS\":\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n break;\n case \"PENDING\":\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n break;\n case \"CANCELED\":\n case \"FAILED\":\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n break;\n default:\n console.error(\"completedStatus unknown\");\n break;\n }\n }\n this.fireEvent(\"completed\");\n },\n __isGatewaySelected() {\n const selection = this.getSelection()\n return selection.length === 1 && selection[0] === this.__iframe\n },\n cancelPayment: function() {\n if (this.__isGatewaySelected() && this.getPaymentId()) {\n osparc.data.Resources.fetch(\"payments\", \"cancelPayment\", {\n url: {\n walletId: this.__personalWallet.getWalletId(),\n paymentId: this.getPaymentId()\n }\n })\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Fabian Jakobs (fjakobs)\n * Adrian Olaru (adrianolaru)\n\n************************************************************************ */\n\n/**\n * The TextField is a single-line text input field.\n */\nqx.Class.define(\"qx.ui.form.TextField\",\n{\n extend : qx.ui.form.AbstractField,\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"textfield\"\n },\n\n // overridden\n allowGrowY :\n {\n refine : true,\n init : false\n },\n\n // overridden\n allowShrinkY :\n {\n refine : true,\n init : false\n }\n },\n\n members : {\n\n // overridden\n _renderContentElement : function(innerHeight, element) {\n if ((qx.core.Environment.get(\"engine.name\") == \"mshtml\") &&\n (parseInt(qx.core.Environment.get(\"engine.version\"), 10) < 9\n || qx.core.Environment.get(\"browser.documentmode\") < 9))\n {\n element.setStyles({\n \"line-height\" : innerHeight + 'px'\n });\n }\n },\n\n\n // overridden\n _createContentElement : function() {\n var el = this.base(arguments);\n var deviceType = qx.core.Environment.get(\"device.type\");\n if (deviceType == \"tablet\" || deviceType == \"mobile\") {\n el.addListener(\"keypress\", this._onKeyPress, this);\n }\n\n return el;\n },\n\n\n /**\n * Close the virtual keyboard if the Enter key is pressed.\n * @param evt {qx.event.type.KeySequence} the keypress event.\n */\n _onKeyPress : function(evt) {\n // On return\n if (evt.getKeyIdentifier() == \"Enter\") {\n if (this.isFocusable()) {\n this.blur();\n }\n else {\n // When the text field is not focusable, blur() will raise an exception on\n // touch devices and the virtual keyboard is not closed. To work around this\n // issue, we're enabling the focus just for the blur() call.\n this.setFocusable(true);\n this.blur();\n this.setFocusable(false);\n }\n }\n }\n },\n\n destruct : function() {\n this.getContentElement().removeListener(\"keypress\", this._onKeyPress, this);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for dealing with services data type conversions, extract\n * specific information.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let latestSrv = osparc.service.Utils.getLatest(key);\n *\n */\n\nqx.Class.define(\"osparc.service.Utils\", {\n type: \"static\",\n\n statics: {\n TYPES: {\n parameter: {\n label: qx.locale.Manager.tr(\"Parameter\"),\n icon: \"@FontAwesome5Solid/sliders-h/\",\n sorting: 0\n },\n file: {\n label: qx.locale.Manager.tr(\"File\"),\n icon: \"@FontAwesome5Solid/file/\",\n sorting: 1\n },\n iterator: {\n label: qx.locale.Manager.tr(\"Iterator\"),\n icon: \"@FontAwesome5Solid/copy/\",\n sorting: 2\n },\n computational: {\n label: qx.locale.Manager.tr(\"Computational\"),\n icon: \"@FontAwesome5Solid/cogs/\",\n sorting: 3\n },\n dynamic: {\n label: qx.locale.Manager.tr(\"Interactive\"),\n icon: \"@FontAwesome5Solid/mouse-pointer/\",\n sorting: 4\n },\n probe: {\n label: qx.locale.Manager.tr(\"Probe\"),\n icon: \"@FontAwesome5Solid/thermometer/\",\n sorting: 5\n }\n },\n\n getTypes: function() {\n return Object.keys(this.TYPES);\n },\n\n getType: function(type) {\n return this.TYPES[type.trim().toLowerCase()];\n },\n\n getIcon: function(type) {\n const typeInfo = this.getType(type);\n if (typeInfo) {\n return typeInfo[\"icon\"];\n }\n return null;\n },\n\n getSorting: function(type) {\n const typeInfo = this.getType(type);\n if (typeInfo) {\n return typeInfo[\"sorting\"];\n }\n return 0;\n },\n\n sortObjectsBasedOn: function(servicesArray, basedOn) {\n if (basedOn === undefined) {\n basedOn = {\n \"sort\": \"hits\",\n \"order\": \"down\"\n };\n }\n servicesArray.sort((a, b) => {\n if (basedOn.sort === \"hits\") {\n if (a[basedOn.sort] !== b[basedOn.sort]) {\n if (basedOn.order === \"down\") {\n return b[basedOn.sort] - a[basedOn.sort];\n }\n return a[basedOn.sort] - b[basedOn.sort];\n }\n return a[\"name\"].localeCompare(b[\"name\"]);\n } else if (basedOn.sort === \"name\") {\n if (basedOn.order === \"down\") {\n return a[\"name\"].localeCompare(b[\"name\"]);\n }\n return b[\"name\"].localeCompare(a[\"name\"]);\n }\n return 0;\n });\n },\n\n convertArrayToObject: function(servicesArray) {\n let services = {};\n for (let i = 0; i < servicesArray.length; i++) {\n const service = servicesArray[i];\n if (!Object.prototype.hasOwnProperty.call(services, service.key)) {\n services[service.key] = {};\n }\n if (!Object.prototype.hasOwnProperty.call(services[service.key], service.version)) {\n services[service.key][service.version] = {};\n }\n services[service.key][service.version] = service;\n }\n return services;\n },\n\n getVersions: function(key, filterDeprecated = true) {\n const services = osparc.store.Services.servicesCached;\n let versions = [];\n if (key in services) {\n const serviceVersions = services[key];\n versions = versions.concat(Object.keys(serviceVersions));\n if (filterDeprecated) {\n versions = versions.filter(version => {\n if (services[key][version][\"retired\"]) {\n return false;\n }\n return true;\n });\n }\n versions.sort(osparc.utils.Utils.compareVersionNumbers);\n }\n return versions.reverse();\n },\n\n getLatest: function(key) {\n const services = osparc.store.Services.servicesCached;\n if (key in services) {\n const versions = this.getVersions(key, true);\n if (versions.length) {\n return services[key][versions[0]];\n }\n }\n return null;\n },\n\n getLatestCompatible: function(key, version) {\n const services = osparc.store.Services.servicesCached;\n if (key in services && version in services[key]) {\n const serviceMD = services[key][version];\n if (serviceMD[\"compatibility\"] && serviceMD[\"compatibility\"][\"canUpdateTo\"]) {\n const canUpdateTo = serviceMD[\"compatibility\"][\"canUpdateTo\"];\n return {\n key: \"key\" in canUpdateTo ? canUpdateTo[\"key\"] : key, // key is optional\n version: canUpdateTo[\"version\"]\n }\n }\n // the provided key/version itself is the latest compatible\n return {\n key,\n version\n }\n }\n return null;\n },\n\n getVersionDisplay: function(key, version) {\n const services = osparc.store.Services.servicesCached;\n if (key in services && version in services[key]) {\n return this.extractVersionDisplay(services[key][version]);\n }\n return null;\n },\n\n extractVersionDisplay: function(metadata) {\n return metadata[\"versionDisplay\"] ? metadata[\"versionDisplay\"] : metadata[\"version\"];\n },\n\n getReleasedDate: function(key, version) {\n const services = osparc.store.Services.servicesCached;\n if (\n key in services &&\n version in services[key] &&\n \"released\" in services[key][version]\n ) {\n return services[key][version][\"released\"];\n }\n return null;\n },\n\n versionToListItem: function(key, version) {\n const versionDisplay = this.getVersionDisplay(key, version);\n const listItem = new qx.ui.form.ListItem(versionDisplay);\n osparc.utils.Utils.setIdToWidget(listItem, \"serviceVersionItem_\" + versionDisplay);\n listItem.version = version;\n return listItem;\n },\n\n canIWrite: function(serviceAccessRights) {\n const groupsStore = osparc.store.Groups.getInstance();\n const orgIDs = groupsStore.getOrganizationIds();\n orgIDs.push(groupsStore.getMyGroupId());\n return osparc.share.CollaboratorsService.canGroupsWrite(serviceAccessRights, orgIDs);\n },\n\n DEPRECATED_SERVICE_TEXT: qx.locale.Manager.tr(\"Service deprecated\"),\n DEPRECATED_DYNAMIC_INSTRUCTIONS: qx.locale.Manager.tr(\"Please go back to the dashboard and Update the Service or download its data and upload it to an updated version\"),\n DEPRECATED_COMPUTATIONAL_INSTRUCTIONS: qx.locale.Manager.tr(\"Please instantiate an updated version\"),\n RETIRED_SERVICE_TEXT: qx.locale.Manager.tr(\"Service retired\"),\n RETIRED_DYNAMIC_INSTRUCTIONS: qx.locale.Manager.tr(\"Please download the Service data and upload it to an updated version\"),\n RETIRED_COMPUTATIONAL_INSTRUCTIONS: qx.locale.Manager.tr(\"Please instantiate an updated version\"),\n DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr(\"Please Stop the Service and then Update it\"),\n RETIRED_AUTOUPDATABLE_INSTRUCTIONS: qx.locale.Manager.tr(\"Please Update the Service\"),\n\n isUpdatable: function(metadata) {\n const latestCompatible = this.getLatestCompatible(metadata[\"key\"], metadata[\"version\"]);\n return latestCompatible && (metadata[\"key\"] !== latestCompatible[\"key\"] || metadata[\"version\"] !== latestCompatible[\"version\"]);\n },\n\n isDeprecated: function(metadata) {\n if (metadata && \"retired\" in metadata && ![null, undefined].includes(metadata[\"retired\"])) {\n const deprecationTime = new Date(metadata[\"retired\"]);\n const now = new Date();\n return deprecationTime.getTime() > now.getTime();\n }\n return false;\n },\n\n isRetired: function(metadata) {\n if (metadata && \"retired\" in metadata && ![null, undefined].includes(metadata[\"retired\"])) {\n const deprecationTime = new Date(metadata[\"retired\"]);\n const now = new Date();\n return deprecationTime.getTime() < now.getTime();\n }\n return false;\n },\n\n getDeprecationDateText: function(metadata) {\n const deprecationTime = new Date(metadata[\"retired\"]);\n return qx.locale.Manager.tr(\"It will be Retired: \") + osparc.utils.Utils.formatDate(deprecationTime);\n },\n\n getFilePicker: function() {\n return this.self().getLatest(\"simcore/services/frontend/file-picker\");\n },\n\n getParametersMetadata: function() {\n const parametersMetadata = [];\n const services = osparc.store.Services.servicesCached;\n for (const key in services) {\n if (key.includes(\"simcore/services/frontend/parameter/\")) {\n const latest = this.self().getLatest(key);\n if (latest) {\n parametersMetadata.push(latest);\n }\n }\n }\n return parametersMetadata;\n },\n\n getParameterMetadata: function(type) {\n return this.self().getLatest(\"simcore/services/frontend/parameter/\"+type);\n },\n\n getProbeMetadata: function(type) {\n return this.self().getLatest(\"simcore/services/frontend/iterator-consumer/probe/\"+type);\n },\n\n removeFileToKeyMap: function(service) {\n [\n \"inputs\",\n \"outputs\"\n ].forEach(inOut => {\n if (inOut in service) {\n for (const key in service[inOut]) {\n if (\"fileToKeyMap\" in service[inOut][key]) {\n delete service[inOut][key][\"fileToKeyMap\"];\n }\n }\n }\n });\n },\n\n getUniqueServicesFromWorkbench: function(workbench) {\n const services = [];\n Object.values(workbench).forEach(node => {\n const service = {\n key: node[\"key\"],\n version: node[\"version\"]\n };\n const idx = services.findIndex(existingSrv => existingSrv.key === service.key && existingSrv.version === service.version);\n if (idx === -1) {\n services.push(service);\n }\n });\n return services;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.share.CollaboratorsWorkspace\", {\n extend: osparc.share.Collaborators,\n\n /**\n * @param workspace {osparc.data.model.Workspace}\n */\n construct: function(workspace) {\n this.__workspace = workspace;\n this._resourceType = \"workspace\";\n\n const workspaceDataCopy = workspace.serialize();\n this.base(arguments, workspaceDataCopy, []);\n },\n\n statics: {\n canIDelete: function(myAccessRights) {\n return myAccessRights[\"delete\"];\n },\n\n getViewerAccessRight: function() {\n return {\n \"read\": true,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getCollaboratorAccessRight: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": false\n };\n },\n\n getOwnerAccessRight: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": true\n };\n }\n },\n\n members: {\n __workspace: null,\n\n _addEditors: function(gids) {\n if (gids.length === 0) {\n return;\n }\n\n const newCollaborators = {};\n gids.forEach(gid => newCollaborators[gid] = this.self().getCollaboratorAccessRight());\n osparc.store.Workspaces.getInstance().addCollaborators(this.__workspace.getWorkspaceId(), newCollaborators)\n .then(() => {\n const text = this.tr(\"Workspace successfully shared\");\n osparc.FlashMessenger.getInstance().logAs(text);\n this.fireDataEvent(\"updateAccessRights\", this.__workspace.serialize());\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong sharing the Workspace\"), \"ERROR\");\n });\n },\n\n _deleteMember: function(collaborator, item) {\n if (item) {\n item.setEnabled(false);\n }\n\n osparc.store.Workspaces.getInstance().removeCollaborator(this.__workspace.getWorkspaceId(), collaborator[\"gid\"])\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this.__workspace.serialize());\n osparc.FlashMessenger.getInstance().logAs(collaborator[\"name\"] + this.tr(\" successfully removed\"));\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong removing \") + collaborator[\"name\"], \"ERROR\");\n })\n .finally(() => {\n if (item) {\n item.setEnabled(true);\n }\n });\n },\n\n __make: function(collaboratorGId, newAccessRights, successMsg, failureMsg, item) {\n item.setEnabled(false);\n\n osparc.store.Workspaces.getInstance().updateCollaborator(this.__workspace.getWorkspaceId(), collaboratorGId, newAccessRights)\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this.__workspace.serialize());\n osparc.FlashMessenger.getInstance().logAs(successMsg);\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(failureMsg, \"ERROR\");\n })\n .finally(() => {\n if (item) {\n item.setEnabled(true);\n }\n });\n },\n\n _promoteToEditor: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getCollaboratorAccessRight(),\n this.tr(`Successfully promoted to ${osparc.data.Roles.WORKSPACE[2].label}`),\n this.tr(`Something went wrong promoting to ${osparc.data.Roles.WORKSPACE[2].label}`),\n item\n );\n },\n\n _promoteToOwner: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getOwnerAccessRight(),\n this.tr(`Successfully promoted to ${osparc.data.Roles.WORKSPACE[3].label}`),\n this.tr(`Something went wrong promoting to ${osparc.data.Roles.WORKSPACE[3].label}`),\n item\n );\n },\n\n _demoteToUser: async function(collaborator, item) {\n const groupId = collaborator[\"gid\"];\n const demoteToUser = (gid, itm) => {\n this.__make(\n gid,\n this.self().getViewerAccessRight(),\n this.tr(`Successfully demoted to ${osparc.data.Roles.WORKSPACE[1].label}`),\n this.tr(`Something went wrong demoting to ${osparc.data.Roles.WORKSPACE[1].label}`),\n itm\n );\n };\n\n const group = osparc.store.Groups.getInstance().getOrganization(groupId);\n if (group) {\n const msg = this.tr(`Demoting to ${osparc.data.Roles.WORKSPACE[1].label} will remove write access to all the members of the Organization. Are you sure?`);\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Demote\"),\n confirmAction: \"delete\",\n confirmText: this.tr(\"Yes\")\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n demoteToUser(groupId, item);\n }\n }, this);\n } else {\n demoteToUser(groupId, item);\n }\n },\n\n _demoteToEditor: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getCollaboratorAccessRight(),\n this.tr(`Successfully demoted to ${osparc.data.Roles.WORKSPACE[2].label}`),\n this.tr(`Something went wrong demoting to ${osparc.data.Roles.WORKSPACE[2].label}`),\n item\n );\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.share.CollaboratorsTag\", {\n extend: osparc.share.Collaborators,\n\n /**\n * @param tag {osparc.data.model.Tag}\n */\n construct: function(tag) {\n this.__tag = tag;\n this._resourceType = \"tag\";\n\n const tagDataCopy = tag.serialize();\n this.base(arguments, tagDataCopy, []);\n },\n\n statics: {\n canIWrite: function(myAccessRights) {\n return myAccessRights[\"write\"];\n },\n\n canIDelete: function(myAccessRights) {\n return myAccessRights[\"delete\"];\n },\n\n getViewerAccessRight: function() {\n return {\n \"read\": true,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getCollaboratorAccessRight: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": false\n };\n },\n\n getOwnerAccessRight: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": true\n };\n }\n },\n\n members: {\n __tag: null,\n\n _addEditors: function(gids) {\n if (gids.length === 0) {\n return;\n }\n\n const newCollaborators = {};\n gids.forEach(gid => newCollaborators[gid] = this.self().getViewerAccessRight());\n osparc.store.Tags.getInstance().addCollaborators(this.__tag.getTagId(), newCollaborators)\n .then(() => {\n const text = this.tr(\"Tag successfully shared\");\n osparc.FlashMessenger.getInstance().logAs(text);\n this.fireDataEvent(\"updateAccessRights\", this.__tag.serialize());\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong sharing the Tag\"), \"ERROR\");\n });\n },\n\n _deleteMember: function(collaborator, item) {\n if (item) {\n item.setEnabled(false);\n }\n\n osparc.store.Tags.getInstance().removeCollaborator(this.__tag.getTagId(), collaborator[\"gid\"])\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this.__tag.serialize());\n osparc.FlashMessenger.getInstance().logAs(collaborator[\"name\"] + this.tr(\" successfully removed\"));\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong removing \") + collaborator[\"name\"], \"ERROR\");\n })\n .finally(() => {\n if (item) {\n item.setEnabled(true);\n }\n });\n },\n\n __make: function(collaboratorGId, newAccessRights, successMsg, failureMsg, item) {\n item.setEnabled(false);\n\n osparc.store.Tags.getInstance().updateCollaborator(this.__tag.getTagId(), collaboratorGId, newAccessRights)\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this.__tag.serialize());\n osparc.FlashMessenger.getInstance().logAs(successMsg);\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(failureMsg, \"ERROR\");\n })\n .finally(() => {\n if (item) {\n item.setEnabled(true);\n }\n });\n },\n\n _promoteToEditor: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getCollaboratorAccessRight(),\n this.tr(`Successfully promoted to ${osparc.data.Roles.STUDY[2].label}`),\n this.tr(`Something went wrong promoting to ${osparc.data.Roles.STUDY[2].label}`),\n item\n );\n },\n\n _promoteToOwner: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getOwnerAccessRight(),\n this.tr(`Successfully promoted to ${osparc.data.Roles.STUDY[3].label}`),\n this.tr(`Something went wrong promoting to ${osparc.data.Roles.STUDY[3].label}`),\n item\n );\n },\n\n _demoteToUser: async function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getViewerAccessRight(),\n this.tr(`Successfully demoted to ${osparc.data.Roles.STUDY[1].label}`),\n this.tr(`Something went wrong demoting to ${osparc.data.Roles.STUDY[1].label}`),\n item\n );\n },\n\n _demoteToEditor: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getCollaboratorAccessRight(),\n this.tr(`Successfully demoted to ${osparc.data.Roles.STUDY[2].label}`),\n this.tr(`Something went wrong demoting to ${osparc.data.Roles.STUDY[2].label}`),\n item\n );\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.data.Roles\", {\n type: \"static\",\n\n statics: {\n ORG: {\n 0: {\n id: \"noRead\",\n label: qx.locale.Manager.tr(\"Restricted Member\"),\n longLabel: qx.locale.Manager.tr(\"Restricted member: no Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can access content shared within the Organization\")\n ]\n },\n 1: {\n id: \"read\",\n label: qx.locale.Manager.tr(\"Member\"),\n longLabel: qx.locale.Manager.tr(\"Member: Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can see other members\"),\n qx.locale.Manager.tr(\"- can share with other members\")\n ]\n },\n 2: {\n id: \"write\",\n label: qx.locale.Manager.tr(\"Manager\"),\n longLabel: qx.locale.Manager.tr(\"Manager: Read/Write access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can Add/Delete members\"),\n qx.locale.Manager.tr(\"- can Promote/Demote members\"),\n qx.locale.Manager.tr(\"- can Edit Organization details\")\n ]\n },\n 3: {\n id: \"delete\",\n label: qx.locale.Manager.tr(\"Administrator\"),\n longLabel: qx.locale.Manager.tr(\"Admin: Read/Write/Delete access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can Delete the Organization\")\n ]\n }\n },\n\n // study & templates\n STUDY: {\n 1: {\n id: \"read\",\n label: qx.locale.Manager.tr(\"User\"),\n longLabel: qx.locale.Manager.tr(\"User: Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can open it\")\n ]\n },\n 2: {\n id: \"write\",\n label: qx.locale.Manager.tr(\"Editor\"),\n longLabel: qx.locale.Manager.tr(\"Editor: Read/Write access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can make changes\"),\n qx.locale.Manager.tr(\"- can share it\")\n ]\n },\n 3: {\n id: \"delete\",\n label: qx.locale.Manager.tr(\"Owner\"),\n longLabel: qx.locale.Manager.tr(\"Owner: Read/Write/Delete access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can delete it\")\n ]\n }\n },\n // services\n SERVICES: {\n 1: {\n id: \"read\",\n label: qx.locale.Manager.tr(\"User\"),\n longLabel: qx.locale.Manager.tr(\"User: Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can use it\")\n ]\n },\n 2: {\n id: \"write\",\n label: qx.locale.Manager.tr(\"Editor\"),\n longLabel: qx.locale.Manager.tr(\"Editor: Read/Write access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can make changes\"),\n qx.locale.Manager.tr(\"- can share it\")\n ]\n },\n 3: {\n id: \"delete\",\n label: qx.locale.Manager.tr(\"Owner\"),\n longLabel: qx.locale.Manager.tr(\"Owner: Read/Write/Delete access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can delete it\")\n ]\n }\n },\n\n WALLET: {\n 1: {\n id: \"read\",\n label: qx.locale.Manager.tr(\"User\"),\n longLabel: qx.locale.Manager.tr(\"User: Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can use the credits\")\n ]\n },\n 2: {\n id: \"write\",\n label: qx.locale.Manager.tr(\"Accountant\"),\n longLabel: qx.locale.Manager.tr(\"Accountant: Read/Write access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can Add/Delete members\"),\n qx.locale.Manager.tr(\"- can Edit Credit Account details\")\n ]\n }\n },\n\n WORKSPACE: {\n 1: {\n id: \"read\",\n label: qx.locale.Manager.tr(\"Viewer\"),\n longLabel: qx.locale.Manager.tr(\"Viewer: Read access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can inspect the content and open \") + osparc.product.Utils.getStudyAlias({plural: true})\n ]\n },\n 2: {\n id: \"write\",\n label: qx.locale.Manager.tr(\"Editor\"),\n longLabel: qx.locale.Manager.tr(\"Editor: Read/Write access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can add \") + osparc.product.Utils.getStudyAlias({plural: true}),\n qx.locale.Manager.tr(\"- can add folders\"),\n ]\n },\n 3: {\n id: \"delete\",\n label: qx.locale.Manager.tr(\"Owner\"),\n longLabel: qx.locale.Manager.tr(\"Owner: Read/Write/Delete access\"),\n canDo: [\n qx.locale.Manager.tr(\"- can rename workspace\"),\n qx.locale.Manager.tr(\"- can share it\"),\n qx.locale.Manager.tr(\"- can delete it\")\n ]\n }\n },\n\n __createRolesLayout: function(roles, showWording = true) {\n const rolesLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n alignY: \"middle\",\n paddingRight: 10\n });\n rolesLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n if (showWording) {\n const rolesText = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Roles\")).set({\n alignY: \"middle\",\n font: \"text-13\"\n });\n rolesLayout.add(rolesText);\n }\n\n let text = \"\";\n const values = Object.values(roles);\n values.forEach((role, idx) => {\n text += role.longLabel + \":
\";\n role.canDo.forEach(can => {\n text += can + \"
\";\n });\n if (idx !== values.length-1) {\n text += \"
\";\n }\n });\n const infoHint = new osparc.ui.hint.InfoHint(text).set({\n alignY: \"middle\"\n });\n rolesLayout.add(infoHint);\n\n return rolesLayout;\n },\n\n createRolesOrgInfo: function() {\n return this.__createRolesLayout(osparc.data.Roles.ORG);\n },\n\n createRolesWalletInfo: function() {\n return this.__createRolesLayout(osparc.data.Roles.WALLET);\n },\n\n createRolesStudyInfo: function() {\n return this.__createRolesLayout(osparc.data.Roles.STUDY);\n },\n\n createRolesServicesInfo: function() {\n return this.__createRolesLayout(osparc.data.Roles.SERVICES);\n },\n\n createRolesWorkspaceInfo: function(showWording = true) {\n return this.__createRolesLayout(osparc.data.Roles.WORKSPACE, showWording);\n },\n\n replaceSpacerWithWidget: function(rolesLayout, widget) {\n if (rolesLayout && rolesLayout.getChildren()) {\n // remove spacer\n rolesLayout.remove(rolesLayout.getChildren()[0]);\n // add widget\n rolesLayout.addAt(widget, 0, {\n flex: 1\n });\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that offers the \"Share with...\" button to add collaborators to a resource.\n * It also provides the \"Check Organization...\" direct access.\n * As output, once the user select n gid in the NewCollaboratorsManager pop up window,\n * an event is fired with the list of collaborators.\n */\n\nqx.Class.define(\"osparc.share.AddCollaborators\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param serializedDataCopy {Object} Object containing the Serialized Data\n * @param publishingTemplate {Boolean} Wether the widget needs to be initialized for publishing template\n */\n construct: function(serializedDataCopy, publishingTemplate = false) {\n this.base(arguments);\n\n this.__serializedDataCopy = serializedDataCopy;\n this.__publishingTemplate = publishingTemplate;\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.__buildLayout();\n },\n\n events: {\n \"addCollaborators\": \"qx.event.type.Data\"\n },\n\n members: {\n __serializedDataCopy: null,\n __publishingTemplate: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"intro-text\":\n control = new qx.ui.basic.Label();\n this._addAt(control, 0);\n break;\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n this._add(control);\n break;\n case \"share-with\":\n control = new qx.ui.form.Button(this.tr(\"Share with...\")).set({\n appearance: \"form-button\",\n alignX: \"left\",\n allowGrowX: false\n });\n this.getChildControl(\"buttons-layout\").add(control);\n this.getChildControl(\"buttons-layout\").add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n break;\n case \"my-organizations\":\n control = new qx.ui.form.Button(this.tr(\"My Organizations...\")).set({\n appearance: \"form-button-outlined\",\n allowGrowY: false,\n allowGrowX: false,\n alignX: \"right\",\n icon: osparc.dashboard.CardBase.SHARED_ORGS\n });\n this.getChildControl(\"buttons-layout\").add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n setSerializedData: function(serializedDataCopy) {\n this.__serializedDataCopy = serializedDataCopy;\n },\n\n __buildLayout: function() {\n const addCollaboratorBtn = this.getChildControl(\"share-with\");\n addCollaboratorBtn.addListener(\"execute\", () => {\n const collaboratorsManager = new osparc.share.NewCollaboratorsManager(this.__serializedDataCopy);\n if (this.__publishingTemplate) {\n collaboratorsManager.getActionButton().setLabel(this.tr(\"Publish for\"));\n }\n collaboratorsManager.addListener(\"addCollaborators\", e => {\n collaboratorsManager.close();\n this.fireDataEvent(\"addCollaborators\", e.getData());\n }, this);\n }, this);\n\n const organizations = this.getChildControl(\"my-organizations\");\n organizations.addListener(\"execute\", () => osparc.desktop.organizations.OrganizationsWindow.openWindow(), this);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n\n/**\n *
List Controller
\n *\n * *General idea*\n * The list controller is responsible for synchronizing every list like widget\n * with a data array. It does not matter if the array contains atomic values\n * like strings of complete objects where one property holds the value for\n * the label and another property holds the icon url. You can even use converters\n * that make the label show a text corresponding to the icon, by binding both\n * label and icon to the same model property and converting one of them.\n *\n * *Features*\n *\n * * Synchronize the model and the target\n * * Label and icon are bindable\n * * Takes care of the selection\n * * Passes on the options used by {@link qx.data.SingleValueBinding#bind}\n *\n * *Usage*\n *\n * As model, only {@link qx.data.Array}s do work. The currently supported\n * targets are\n *\n * * {@link qx.ui.form.SelectBox}\n * * {@link qx.ui.form.List}\n * * {@link qx.ui.form.ComboBox}\n *\n * All the properties like model, target or any property path is bindable.\n * Especially the model is nice to bind to another selection for example.\n * The controller itself can only work if it has a model and a target set. The\n * rest of the properties may be empty.\n *\n * *Cross reference*\n *\n * * If you want to bind single values, use {@link qx.data.controller.Object}\n * * If you want to bind a tree widget, use {@link qx.data.controller.Tree}\n * * If you want to bind a form widget, use {@link qx.data.controller.Form}\n */\nqx.Class.define(\"qx.data.controller.List\",\n{\n extend : qx.core.Object,\n include: qx.data.controller.MSelection,\n implement : qx.data.controller.ISelection,\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param model {qx.data.Array?null} The array containing the data.\n *\n * @param target {qx.ui.core.Widget?null} The widget which should show the\n * ListItems.\n *\n * @param labelPath {String?null} If the model contains objects, the labelPath\n * is the path reference to the property in these objects which should be\n * shown as label.\n */\n construct : function(model, target, labelPath)\n {\n this.base(arguments);\n\n // lookup table for filtering and sorting\n this.__lookupTable = [];\n\n // register for bound target properties and onUpdate methods\n // from the binding options\n this.__boundProperties = [];\n this.__boundPropertiesReverse = [];\n this.__onUpdate = {};\n\n if (labelPath != null) {\n this.setLabelPath(labelPath);\n }\n if (model != null) {\n this.setModel(model);\n }\n if (target != null) {\n this.setTarget(target);\n }\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** Data array containing the data which should be shown in the list. */\n model :\n {\n check: \"qx.data.IListData\",\n apply: \"_applyModel\",\n event: \"changeModel\",\n nullable: true,\n dereference: true\n },\n\n\n /** The target widget which should show the data. */\n target :\n {\n apply: \"_applyTarget\",\n event: \"changeTarget\",\n nullable: true,\n init: null,\n dereference: true\n },\n\n\n /**\n * The path to the property which holds the information that should be\n * shown as a label. This is only needed if objects are stored in the model.\n */\n labelPath :\n {\n check: \"String\",\n apply: \"_applyLabelPath\",\n nullable: true\n },\n\n\n /**\n * The path to the property which holds the information that should be\n * shown as an icon. This is only needed if objects are stored in the model\n * and if the icon should be shown.\n */\n iconPath :\n {\n check: \"String\",\n apply: \"_applyIconPath\",\n nullable: true\n },\n\n\n /**\n * A map containing the options for the label binding. The possible keys\n * can be found in the {@link qx.data.SingleValueBinding} documentation.\n */\n labelOptions :\n {\n apply: \"_applyLabelOptions\",\n nullable: true\n },\n\n\n /**\n * A map containing the options for the icon binding. The possible keys\n * can be found in the {@link qx.data.SingleValueBinding} documentation.\n */\n iconOptions :\n {\n apply: \"_applyIconOptions\",\n nullable: true\n },\n\n\n /**\n * Delegation object, which can have one or more functions defined by the\n * {@link IControllerDelegate} interface.\n */\n delegate :\n {\n apply: \"_applyDelegate\",\n event: \"changeDelegate\",\n init: null,\n nullable: true\n },\n \n /**\n * Whether a special \"null\" value is included in the list\n */\n allowNull :\n {\n apply: \"_applyAllowNull\",\n event: \"changeAllowNull\",\n init: false,\n nullable: false,\n check: \"Boolean\"\n },\n \n /**\n * Title for the special null value entry\n */\n nullValueTitle:\n {\n apply: \"_applyNullValueTitle\",\n event: \"changeNullValueTitle\",\n init: null,\n nullable: true,\n check: \"String\"\n },\n \n /**\n * Icon for the special null value entry\n */\n nullValueIcon:\n {\n apply: \"_applyNullValueIcon\",\n event: \"changeNullValueIcon\",\n init: null,\n nullable: true,\n check: \"String\"\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // private members\n __changeModelListenerId : null,\n __lookupTable : null,\n __onUpdate : null,\n __boundProperties : null,\n __boundPropertiesReverse : null,\n __syncTargetSelection : null,\n __syncModelSelection : null,\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n /**\n * Updates the filter and the target. This could be used if the filter\n * uses an additional parameter which changes the filter result.\n */\n update: function() {\n this.__changeModelLength();\n this.__renewBindings();\n\n this._updateSelection();\n },\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY METHODS\n ---------------------------------------------------------------------------\n */\n /**\n * If a new delegate is set, it applies the stored configuration for the\n * list items to the already created list items once.\n *\n * @param value {qx.core.Object|null} The new delegate.\n * @param old {qx.core.Object|null} The old delegate.\n */\n _applyDelegate: function(value, old) {\n this._setConfigureItem(value, old);\n this._setFilter(value, old);\n this._setCreateItem(value, old);\n this._setBindItem(value, old);\n },\n\n\n /**\n * Apply-method which will be called if the icon options has been changed.\n * It invokes a renewing of all set bindings.\n *\n * @param value {Map|null} The new icon options.\n * @param old {Map|null} The old icon options.\n */\n _applyIconOptions: function(value, old) {\n this.__renewBindings();\n },\n\n\n /**\n * Apply-method which will be called if the label options has been changed.\n * It invokes a renewing of all set bindings.\n *\n * @param value {Map|null} The new label options.\n * @param old {Map|null} The old label options.\n */\n _applyLabelOptions: function(value, old) {\n this.__renewBindings();\n },\n\n\n /**\n * Apply-method which will be called if the icon path has been changed.\n * It invokes a renewing of all set bindings.\n *\n * @param value {String|null} The new icon path.\n * @param old {String|null} The old icon path.\n */\n _applyIconPath: function(value, old) {\n this.__renewBindings();\n },\n\n\n /**\n * Apply-method which will be called if the label path has been changed.\n * It invokes a renewing of all set bindings.\n *\n * @param value {String|null} The new label path.\n * @param old {String|null} The old label path.\n */\n _applyLabelPath: function(value, old) {\n this.__renewBindings();\n },\n\n \n /**\n * Apply method for the `allowNull` property \n */\n _applyAllowNull: function(value, oldValue) {\n this.__refreshModel();\n },\n \n /**\n * Apply method for the `allowNull` property \n */\n _applyNullValueTitle: function(value, oldValue) {\n this.__refreshModel();\n },\n \n /**\n * Apply method for the `allowNull` property \n */\n _applyNullValueIcon: function(value, oldValue) {\n this.__refreshModel();\n },\n\n /**\n * Refreshes the model, uses when the model and target are not changing but the appearance\n * and bindings may need to be updated\n */\n __refreshModel: function() {\n if (this.getModel() && this.getTarget()) {\n this.update();\n }\n },\n\n\n /**\n * Apply-method which will be called if the model has been changed. It\n * removes all the listeners from the old model and adds the needed\n * listeners to the new model. It also invokes the initial filling of the\n * target widgets if there is a target set.\n *\n * @param value {qx.data.Array|null} The new model array.\n * @param old {qx.data.Array|null} The old model array.\n */\n _applyModel: function(value, old) {\n // remove the old listener\n if (old != undefined) {\n if (this.__changeModelListenerId != undefined) {\n old.removeListenerById(this.__changeModelListenerId);\n }\n }\n\n // erase the selection if there is something selected\n if (this.getSelection() != undefined && this.getSelection().length > 0) {\n this.getSelection().splice(0, this.getSelection().length).dispose();\n }\n\n // if a model is set\n if (value != null) {\n // add a new listener\n this.__changeModelListenerId =\n value.addListener(\"change\", this.__changeModel, this);\n\n // renew the index lookup table\n this.__buildUpLookupTable();\n // check for the new length\n this.__changeModelLength();\n\n // as we only change the labels of the items, the selection change event\n // may be missing so we invoke it here\n if (old == null) {\n this._changeTargetSelection();\n } else {\n // update the selection asynchronously\n this.__syncTargetSelection = true;\n qx.ui.core.queue.Widget.add(this);\n }\n } else {\n var target = this.getTarget();\n // if the model is set to null, we should remove all items in the target\n if (target != null) {\n // we need to remove the bindings too so use the controller method\n // for removing items\n var length = target.getChildren().length;\n for (var i = 0; i < length; i++) {\n this.__removeItem();\n };\n }\n }\n },\n\n\n /**\n * Apply-method which will be called if the target has been changed.\n * When the target changes, every binding needs to be reset and the old\n * target needs to be cleaned up. If there is a model, the target will be\n * filled with the data of the model.\n *\n * @param value {qx.ui.core.Widget|null} The new target.\n * @param old {qx.ui.core.Widget|null} The old target.\n */\n _applyTarget: function(value, old) {\n // add a listener for the target change\n this._addChangeTargetListener(value, old);\n\n // if there was an old target\n if (old != undefined) {\n // remove all element of the old target\n var removed = old.removeAll();\n for (var i=0; i\n * tree.setDelegate({\n * createItem: () => new osparc.ui.list.ListItem(),\n * bindItem: (c, item, id) => {\n * c.bindProperty(\"key\", \"model\", null, item, id);\n * c.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n * c.bindProperty(\"name\", \"title\", null, item, id);\n * c.bindProperty(\"description\", \"subtitle\", null, item, id);\n * c.bindProperty(\"role\", \"role\", null, item, id);\n * }\n * });\n * \n */\n\nqx.Class.define(\"osparc.ui.list.ListItem\", {\n extend: qx.ui.core.Widget,\n implement : [qx.ui.form.IModel, osparc.filter.IFilterable],\n include : [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid(8, 1);\n layout.setColumnWidth(0, 32);\n layout.setRowFlex(0, 1);\n layout.setColumnFlex(1, 1);\n layout.setColumnAlign(0, \"center\", \"middle\");\n layout.setColumnAlign(2, \"center\", \"middle\");\n this._setLayout(layout);\n\n this.set({\n padding: 5,\n minHeight: 48,\n alignY: \"middle\",\n });\n\n this.addListener(\"pointerover\", this._onPointerOver, this);\n this.addListener(\"pointerout\", this._onPointerOut, this);\n },\n\n events: {\n /** (Fired by {@link qx.ui.form.List}) */\n \"action\" : \"qx.event.type.Event\"\n },\n\n properties: {\n appearance: {\n refine : true,\n init : \"selectable\"\n },\n\n key: {\n check: \"String\",\n apply : \"__applyKey\"\n },\n\n thumbnail: {\n check : \"String\",\n apply : \"_applyThumbnail\",\n nullable : true\n },\n\n title: {\n check : \"String\",\n apply : \"__applyTitle\",\n nullable : true\n },\n\n subtitle: {\n check : \"String\",\n apply : \"__applySubtitle\",\n nullable : true\n },\n\n subtitleMD: {\n check : \"String\",\n apply : \"_applySubtitleMD\",\n nullable : true\n },\n\n role: {\n check : \"String\",\n apply : \"__applyRole\",\n nullable : true\n }\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n /**\n * Event handler for the pointer over event.\n */\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n\n /**\n * Event handler for the pointer out event.\n */\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"thumbnail\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n scale: true,\n allowGrowX: true,\n allowGrowY: true,\n allowShrinkX: true,\n allowShrinkY: true,\n maxWidth: 32,\n maxHeight: 32\n });\n this._add(control, {\n row: 0,\n column: 0,\n rowSpan: 2\n });\n break;\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control, {\n row: 0,\n column: 1\n });\n break;\n case \"subtitle\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\",\n rich: true\n });\n this._add(control, {\n row: 1,\n column: 1\n });\n break;\n // or\n case \"subtitle-md\":\n control = new osparc.ui.markdown.Markdown().set({\n font: \"text-13\",\n noMargin: true,\n maxHeight: 18\n });\n this._add(control, {\n row: 1,\n column: 1\n });\n break;\n case \"role\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\",\n alignY: \"middle\"\n });\n this._add(control, {\n row: 0,\n column: 2,\n rowSpan: 2\n });\n break;\n }\n if (control) {\n control.set({\n anonymous: true\n });\n }\n\n return control || this.base(arguments, id);\n },\n\n __applyKey: function(value, old) {\n if (value === null) {\n return;\n }\n const parts = value.split(\"/\");\n const id = parts.pop();\n if (osparc.utils.Utils.getIdFromWidget(this) === null) {\n osparc.utils.Utils.setIdToWidget(this, \"listItem_\"+id);\n }\n },\n\n _applyThumbnail: function(value) {\n if (value === null) {\n return;\n }\n const thumbnail = this.getChildControl(\"thumbnail\");\n thumbnail.setSource(value);\n },\n\n __applyTitle: function(value) {\n if (value === null) {\n return;\n }\n const label = this.getChildControl(\"title\");\n label.setValue(value);\n },\n\n __applySubtitle: function(value) {\n if ([null, undefined, \"\"].includes(value)) {\n return;\n }\n const label = this.getChildControl(\"subtitle\");\n label.setValue(value);\n },\n\n _applySubtitleMD: function(value) {\n if ([null, undefined, \"\"].includes(value)) {\n return;\n }\n const label = this.getChildControl(\"subtitle-md\");\n label.setValue(value);\n },\n\n __applyRole: function(value) {\n if (value === null) {\n return;\n }\n const label = this.getChildControl(\"role\");\n label.setValue(value);\n },\n\n /**\n * Event handler for filtering events.\n */\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n if (data.text) {\n const checks = [\n this.getTitle(),\n this.getSubtitle(),\n this.getSubtitleMD()\n ];\n if (checks.filter(check => check && check.toLowerCase().trim().includes(data.text)).length == 0) {\n return true;\n }\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n if (data.text && data.text.length > 1) {\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.list.CollaboratorListItem\", {\n extend: osparc.ui.list.ListItem,\n\n properties: {\n collabType: {\n check: [0, 1, 2], // 0:all, 1:org, 2:user\n event: \"changeCollabType\",\n nullable: true\n },\n\n accessRights: {\n check: \"Object\",\n apply: \"__applyAccessRights\",\n event: \"changeAccessRights\",\n nullable: true\n },\n\n showOptions: {\n check: \"Boolean\",\n apply: \"__applyShowOptions\",\n event: \"changeShowOptions\",\n nullable: true\n },\n\n resourceType : {\n check: \"String\",\n event: \"changeResourceType\",\n nullable: false\n }\n },\n\n events: {\n \"promoteToEditor\": \"qx.event.type.Data\",\n \"promoteToOwner\": \"qx.event.type.Data\",\n \"demoteToUser\": \"qx.event.type.Data\",\n \"demoteToEditor\": \"qx.event.type.Data\",\n \"removeMember\": \"qx.event.type.Data\"\n },\n\n statics: {\n canDelete: function(accessRights) {\n const canDelete = accessRights.getDelete ? accessRights.getDelete() : false;\n return canDelete;\n },\n\n canWrite: function(accessRights) {\n let canWrite = accessRights.getWrite ? accessRights.getWrite() : false;\n canWrite = canWrite || (accessRights.getWriteAccess ? accessRights.getWriteAccess() : false);\n return canWrite;\n },\n\n canRead: function(accessRights) {\n let canRead = accessRights.getRead ? accessRights.getRead() : false;\n canRead = canRead || (accessRights.getExecuteAccess ? accessRights.getExecuteAccess() : false);\n return canRead;\n }\n },\n\n members: {\n __getRoleInfo: function(i) {\n const resource = this.getResourceType();\n if (resource === \"study\" || resource === \"template\") {\n return osparc.data.Roles.STUDY[i];\n } else if (resource === \"service\") {\n return osparc.data.Roles.SERVICES[i];\n } else if (resource === \"workspace\") {\n return osparc.data.Roles.WORKSPACE[i];\n } else if (resource === \"tag\") {\n return osparc.data.Roles.STUDY[i];\n }\n return undefined;\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"options\": {\n const iconSize = 25;\n control = new qx.ui.form.MenuButton().set({\n maxWidth: iconSize,\n maxHeight: iconSize,\n alignX: \"center\",\n alignY: \"middle\",\n icon: \"@FontAwesome5Solid/ellipsis-v/\"+(iconSize-11),\n focusable: false\n });\n this._add(control, {\n row: 0,\n column: 3,\n rowSpan: 2\n });\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n // overridden\n _applyThumbnail: function(value) {\n if (value === null) {\n const collabType = this.getCollabType();\n switch (collabType) {\n case 0:\n value = \"@FontAwesome5Solid/globe/28\";\n break;\n case 1:\n value = \"@FontAwesome5Solid/users/28\";\n break;\n case 2:\n value = \"@FontAwesome5Solid/user/28\";\n break;\n }\n }\n this.base(arguments, value);\n },\n\n // overridden\n _applySubtitleMD: function(value) {\n this.base(arguments, value);\n\n // highlight me\n const email = osparc.auth.Data.getInstance().getEmail();\n if (value && value.includes(email)) {\n this.addState(\"selected\");\n }\n },\n\n __applyAccessRights: function(value) {\n if (value === null) {\n return;\n }\n\n this.__setRole();\n\n const menu = this.__getOptionsMenu();\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.setMenu(menu);\n },\n\n __setRole: function() {\n const accessRights = this.getAccessRights();\n const role = this.getChildControl(\"role\");\n if (this.self().canDelete(accessRights)) {\n role.setValue(this.__getRoleInfo(3).label);\n } else if (this.self().canWrite(accessRights)) {\n role.setValue(this.__getRoleInfo(2).label);\n } else {\n role.setValue(this.__getRoleInfo(1).label);\n }\n },\n\n __getOptionsMenu: function() {\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n const accessRights = this.getAccessRights();\n let currentRole = this.__getRoleInfo(1);\n if (this.self().canDelete(accessRights)) {\n currentRole = this.__getRoleInfo(3);\n } else if (this.self().canWrite(accessRights)) {\n currentRole = this.__getRoleInfo(2);\n }\n\n // promote/demote actions\n switch (currentRole.id) {\n case \"read\": {\n const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this.__getRoleInfo(2).label}`));\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToEditor\", {\n gid: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n break;\n }\n case \"write\": {\n const resource = this.getResourceType();\n const promoteButton = new qx.ui.menu.Button(this.tr(`Promote to ${this.__getRoleInfo(3).label}`));\n promoteButton.setVisibility(resource === \"service\" ? \"excluded\" : \"visible\");\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToOwner\", {\n gid: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this.__getRoleInfo(1).label}`));\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToUser\", {\n gid: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n break;\n }\n case \"delete\": {\n const demoteButton = new qx.ui.menu.Button(this.tr(`Demote to ${this.__getRoleInfo(2).label}`));\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToEditor\", {\n gid: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n break;\n }\n }\n\n if (menu.getChildren().length) {\n menu.addSeparator();\n }\n\n const removeButton = new qx.ui.menu.Button(this.tr(`Remove ${currentRole.label}`)).set({\n textColor: \"danger-red\"\n });\n removeButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"removeMember\", {\n gid: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(removeButton);\n\n return menu;\n },\n\n __applyShowOptions: function(value) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.setVisibility(value ? \"visible\" : \"excluded\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget for modifying Study permissions. This is the way for sharing studies\n * - Creates a copy of study data\n * - It allows changing study's access right, so that the study owners can:\n * - Share it with Organizations and/or Organization Members (Users)\n * - Make other Users Owner\n * - Remove users\n */\n\nqx.Class.define(\"osparc.share.CollaboratorsStudy\", {\n extend: osparc.share.Collaborators,\n\n /**\n * @param studyData {Object} Object containing the serialized Study Data\n */\n construct: function(studyData) {\n // this info is lost when we deepCloneStudyObject\n this._resourceType = studyData[\"resourceType\"]; // study or template\n const studyDataCopy = osparc.data.model.Study.deepCloneStudyObject(studyData);\n\n this.base(arguments, studyDataCopy);\n },\n\n statics: {\n canGroupsWrite: function(accessRights, gIds) {\n let canWrite = false;\n for (let i=0; i\n * var marshaller = new qx.data.marshal.Json({\n * getJsonHash: qx.data.marshal.Json.legacyJsonHash\n * });\n * \n */\n legacyJsonHash: function (data, includeBubbleEvents) {\n return Object.keys(data).sort().join('\"')\n + (includeBubbleEvents===true ? \"♥\" : \"\");\n }\n },\n\n\n members :\n {\n __delegate : null,\n\n\n /**\n * Converts a given object into a hash which will be used to identify the\n * classes under the namespace qx.data.model.\n *\n * @param data {Object} The JavaScript object from which the hash is\n * required.\n * @param includeBubbleEvents {Boolean?false} Whether the model should\n * support the bubbling of change events or not.\n * @return {String} The hash representation of the given JavaScript object.\n */\n __jsonToHash : function (data, includeBubbleEvents)\n {\n if (this.__delegate && this.__delegate.getJsonHash) {\n return this.__delegate.getJsonHash(data, includeBubbleEvents);\n }\n return Object.keys(data).sort().join('|')\n + (includeBubbleEvents===true ? \"♥\" : \"\");\n },\n\n\n /**\n * Get the \"most enhanced\" hash for a given object. That is the hash for\n * the class that is most feature rich in respect of the bubble event\n * feature. If there are two equal classes available (defined), one with\n * and one without the bubble event feature, this method will return the\n * hash of the class that includes the bubble event.\n *\n * @param data {Object} The JavaScript object from which the hash is\n * required.\n * @param includeBubbleEvents {Boolean} Whether the preferred model should\n * support the bubbling of change events or not.\n * If null, an automatic selection will take place which\n * selects the \"best\" model currently available.\n * @return {String} The hash representation of the given JavaScript object.\n */\n __jsonToBestHash : function (data, includeBubbleEvents)\n {\n // forced mode?\n //\n if (includeBubbleEvents === true) {\n return this.__jsonToHash(data, true);\n }\n if (includeBubbleEvents === false) {\n return this.__jsonToHash(data, false);\n }\n\n // automatic mode!\n //\n var hash = this.__jsonToHash(data); // without bubble event feature\n var bubbleClassHash = hash + \"♥\"; // with bubble event feature\n var bubbleClassName = \"qx.data.model.\" + bubbleClassHash;\n\n // In case there's a class with bubbling, we *always* prefer that one!\n return qx.Class.isDefined(bubbleClassName) ? bubbleClassHash : hash;\n },\n\n\n /**\n * Creates for the given data the needed classes. The classes contain for\n * every key in the data a property. The classname is always the prefix\n * qx.data.model and the hash of the data created by\n * {@link #__jsonToHash}. Two objects containing the same keys will not\n * create two different classes. The class creation process also supports\n * the functions provided by its delegate.\n *\n * Important, please keep in mind that only valid JavaScript identifiers\n * can be used as keys in the data map. For convenience '-' in keys will\n * be removed (a-b will be ab in the end).\n *\n * @see qx.data.store.IStoreDelegate\n *\n * @param data {Object} The object for which classes should be created.\n * @param includeBubbleEvents {Boolean} Whether the model should support\n * the bubbling of change events or not.\n */\n toClass: function(data, includeBubbleEvents) {\n this.__toClass(data, includeBubbleEvents, null, 0);\n },\n\n\n /**\n * Implementation of {@link #toClass} used for recursion.\n *\n * @param data {Object} The object for which classes should be created.\n * @param includeBubbleEvents {Boolean} Whether the model should support\n * the bubbling of change events or not.\n * @param parentProperty {String|null} The name of the property the\n * data will be stored in.\n * @param depth {Number} The depth of the data relative to the data's root.\n */\n __toClass : function(data, includeBubbleEvents, parentProperty, depth) {\n // break on all primitive json types and qooxdoo objects\n if (\n !qx.lang.Type.isObject(data)\n || !!data.$$isString // check for localized strings\n || data instanceof qx.core.Object\n ) {\n // check for arrays\n if (data instanceof Array || qx.Bootstrap.getClass(data) == \"Array\") {\n for (var i = 0; i < data.length; i++) {\n this.__toClass(data[i], includeBubbleEvents, parentProperty + \"[\" + i + \"]\", depth+1);\n }\n }\n\n // ignore arrays and primitive types\n return;\n }\n\n var hash = this.__jsonToHash(data, includeBubbleEvents);\n\n // ignore rules\n if (this.__ignore(hash, parentProperty, depth)) {\n return;\n }\n\n // check for the possible child classes\n for (var key in data) {\n this.__toClass(data[key], includeBubbleEvents, key, depth+1);\n }\n\n // class already exists\n if (qx.Class.isDefined(\"qx.data.model.\" + hash)) {\n return;\n }\n\n // class is defined by the delegate\n if (\n this.__delegate\n && this.__delegate.getModelClass\n && this.__delegate.getModelClass(hash, data, parentProperty, depth) != null\n ) {\n return;\n }\n\n // create the properties map\n var properties = {};\n // include the disposeItem for the dispose process.\n var members = {__disposeItem : this.__disposeItem};\n for (var key in data) {\n // apply the property names mapping\n if (this.__delegate && this.__delegate.getPropertyMapping) {\n key = this.__delegate.getPropertyMapping(key, hash);\n }\n\n // strip the unwanted characters\n key = key.replace(/-|\\.|\\s+/g, \"\");\n // check for valid JavaScript identifier (leading numbers are ok)\n if (qx.core.Environment.get(\"qx.debug\")) {\n this.assertTrue((/^[$0-9A-Za-z_]*$/).test(key),\n \"The key '\" + key + \"' is not a valid JavaScript identifier.\");\n }\n\n properties[key] = {};\n properties[key].nullable = true;\n properties[key].event = \"change\" + qx.lang.String.firstUp(key);\n // bubble events\n if (includeBubbleEvents) {\n properties[key].apply = \"_applyEventPropagation\";\n }\n // validation rules\n if (this.__delegate && this.__delegate.getValidationRule) {\n var rule = this.__delegate.getValidationRule(hash, key);\n if (rule) {\n properties[key].validate = \"_validate\" + key;\n members[\"_validate\" + key] = rule;\n }\n }\n }\n\n // try to get the superclass, qx.core.Object as default\n if (this.__delegate && this.__delegate.getModelSuperClass) {\n var superClass =\n this.__delegate.getModelSuperClass(hash, parentProperty, depth) || qx.core.Object;\n } else {\n var superClass = qx.core.Object;\n }\n\n // try to get the mixins\n var mixins = [];\n if (this.__delegate && this.__delegate.getModelMixins) {\n var delegateMixins = this.__delegate.getModelMixins(hash, parentProperty, depth);\n // check if its an array\n if (!qx.lang.Type.isArray(delegateMixins)) {\n if (delegateMixins != null) {\n mixins = [delegateMixins];\n }\n } else {\n mixins = delegateMixins;\n }\n }\n\n // include the mixin for the event bubbling\n if (includeBubbleEvents) {\n mixins.push(qx.data.marshal.MEventBubbling);\n }\n\n // create the map for the class\n var newClass = {\n extend : superClass,\n include : mixins,\n properties : properties,\n members : members\n };\n\n qx.Class.define(\"qx.data.model.\" + hash, newClass);\n },\n\n\n /**\n * Helper for disposing items of the created class.\n *\n * @param item {var} The item to dispose.\n */\n __disposeItem : function(item) {\n if (!(item instanceof qx.core.Object)) {\n // ignore all non objects\n return;\n }\n // ignore already disposed items (could happen during shutdown)\n if (item.isDisposed()) {\n return;\n }\n item.dispose();\n },\n\n\n /**\n * Creates an instance for the given data hash.\n *\n * @param hash {String} The hash of the data for which an instance should\n * be created.\n * @param parentProperty {String|null} The name of the property the data\n * will be stored in.\n * @param depth {Number} The depth of the object relative to the data root.\n * @param data {Map} The data for which an instance should be created.\n * @return {qx.core.Object} An instance of the corresponding class.\n */\n __createInstance : function (hash, data, parentProperty, depth)\n {\n var delegateClass;\n // get the class from the delegate\n if (this.__delegate && this.__delegate.getModelClass) {\n delegateClass = this.__delegate.getModelClass(hash, data, parentProperty, depth);\n }\n if (delegateClass != null) {\n return (new delegateClass());\n } else {\n var className = \"qx.data.model.\" + hash;\n var clazz = qx.Class.getByName(className);\n if (!clazz)\n {\n // Extra check for possible bubble-event feature inconsistency\n var noBubbleClassName = className.replace(\"♥\", \"\");\n if (qx.Class.getByName(noBubbleClassName))\n {\n throw new Error( \"Class '\" + noBubbleClassName + \"' found, \" +\n \"but it does not support changeBubble event.\" );\n }\n throw new Error(\"Class '\" + className + \"' could not be found.\");\n }\n return (new clazz());\n }\n },\n\n\n /**\n * Helper to decide if the delegate decides to ignore a data set.\n * @param hash {String} The property names.\n * @param parentProperty {String|null} The name of the property the data\n * will be stored in.\n * @param depth {Number} The depth of the object relative to the data root.\n * @return {Boolean} true if the set should be ignored\n */\n __ignore : function(hash, parentProperty, depth) {\n var del = this.__delegate;\n return del && del.ignore && del.ignore(hash, parentProperty, depth);\n },\n\n\n /**\n * Creates for the given data the needed models. Be sure to have the classes\n * created with {@link #toClass} before calling this method. The creation\n * of the class itself is delegated to the {@link #__createInstance} method,\n * which could use the {@link qx.data.store.IStoreDelegate} methods, if\n * given.\n *\n * @param data {Object} The object for which models should be created.\n * @param includeBubbleEvents {Boolean?null} Whether the model should\n * support the bubbling of change events or not.\n * If omitted or null, an automatic selection will take place\n * which selects the \"best\" model currently available.\n * @return {qx.core.Object} The created model object.\n */\n toModel : function (data, includeBubbleEvents) {\n return this.__toModel(data, includeBubbleEvents, null, 0);\n },\n\n\n /**\n * Implementation of {@link #toModel} used for recursion.\n *\n * @param data {Object} The object for which models should be created.\n * @param includeBubbleEvents {Boolean|null} Whether the model should\n * support the bubbling of change events or not.\n * If null, an automatic selection will take place which\n * selects the \"best\" model currently available.\n * @param parentProperty {String|null} The name of the property the\n * data will be stored in.\n * @param depth {Number} The depth of the data relative to the data's root.\n * @return {qx.core.Object} The created model object.\n */\n __toModel : function (data, includeBubbleEvents, parentProperty, depth)\n {\n var isObject = qx.lang.Type.isObject(data);\n var isArray = data instanceof Array || qx.Bootstrap.getClass(data) == \"Array\";\n\n if (\n (!isObject && !isArray)\n || !!data.$$isString // check for localized strings\n || data instanceof qx.core.Object\n ) {\n return data;\n\n // ignore rules\n } else if (this.__ignore(this.__jsonToBestHash(data, includeBubbleEvents), parentProperty, depth)) {\n return data;\n\n } else if (isArray) {\n var arrayClass = qx.data.Array;\n if (this.__delegate && this.__delegate.getArrayClass) {\n var customArrayClass = this.__delegate.getArrayClass(parentProperty, depth);\n arrayClass = customArrayClass || arrayClass;\n }\n\n var array = new arrayClass();\n // set the auto dispose for the array\n array.setAutoDisposeItems(true);\n\n for (var i = 0; i < data.length; i++) {\n array.push(this.__toModel(data[i], includeBubbleEvents, parentProperty + \"[\" + i + \"]\", depth+1));\n }\n return array;\n\n } else if (isObject) {\n // create an instance for the object\n var hash = this.__jsonToBestHash(data, includeBubbleEvents);\n var model = this.__createInstance(hash, data, parentProperty, depth);\n\n // go threw all element in the data\n for (var key in data) {\n // apply the property names mapping\n var propertyName = key;\n if (this.__delegate && this.__delegate.getPropertyMapping) {\n propertyName = this.__delegate.getPropertyMapping(key, hash);\n }\n var propertyNameReplaced = propertyName.replace(/-|\\.|\\s+/g, \"\");\n // warn if there has been a replacement\n if (\n (qx.core.Environment.get(\"qx.debug\")) &&\n qx.core.Environment.get(\"qx.debug.databinding\")\n ) {\n if (propertyNameReplaced != propertyName) {\n this.warn(\n \"The model contained an illegal name: '\" + key +\n \"'. Replaced it with '\" + propertyName + \"'.\"\n );\n }\n }\n propertyName = propertyNameReplaced;\n // only set the properties if they are available [BUG #5909]\n var setterName = \"set\" + qx.lang.String.firstUp(propertyName);\n if (model[setterName]) {\n model[setterName](this.__toModel(data[key], includeBubbleEvents, key, depth+1));\n }\n }\n return model;\n }\n\n throw new Error(\"Unsupported type!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/* eslint new-cap: [2, {capIsNewExceptions: [\"B\", \"D\", \"J\", \"K\", \"L\", \"MD5\"]}] */\n/* eslint operator-assignment: [\"off\"] */\n\n/**\n * Static class for getting the avatar related information for the given user/email.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let image = osparc.utils.Avatar.emailToThumbnail(userEmail);\n *\n */\n\nqx.Class.define(\"osparc.utils.Avatar\", {\n type: \"static\",\n\n statics: {\n emailToThumbnail: function(email, username) {\n return this.__getUrl(email, username, 32);\n },\n\n __getUrl: function(email, username, size = 100) {\n email = email || \"\";\n // MD5 (Message-Digest Algorithm) by WebToolkit\n const MD5 = function(s) {\n function L(k, d) {\n return (k << d) | (k >>> (32 - d));\n }\n function K(G, k) {\n let I;\n let d;\n let F;\n let H;\n let x;\n F = (G & 2147483648);\n H = (k & 2147483648);\n I = (G & 1073741824);\n d = (k & 1073741824);\n x = (G & 1073741823) + (k & 1073741823);\n if (I & d) {\n return (x ^ 2147483648 ^ F ^ H);\n }\n if (I | d) {\n if (x & 1073741824) {\n return (x ^ 3221225472 ^ F ^ H);\n }\n return (x ^ 1073741824 ^ F ^ H);\n }\n return (x ^ F ^ H);\n }\n function r(d, F, k) {\n return (d & F) | ((~d) & k);\n }\n function q(d, F, k) {\n return (d & k) | (F & (~k));\n }\n function p(d, F, k) {\n return (d ^ F ^ k);\n }\n function n(d, F, k) {\n return (F ^ (d | (~k)));\n }\n function u(G, F, aa, Z, k, H, I) {\n G = K(G, K(K(r(F, aa, Z), k), I));\n return K(L(G, H), F);\n }\n function f(G, F, aa, Z, k, H, I) {\n G = K(G, K(K(q(F, aa, Z), k), I));\n return K(L(G, H), F);\n }\n function D(G, F, aa, Z, k, H, I) {\n G = K(G, K(K(p(F, aa, Z), k), I));\n return K(L(G, H), F);\n }\n function t(G, F, aa, Z, k, H, I) {\n G = K(G, K(K(n(F, aa, Z), k), I));\n return K(L(G, H), F);\n }\n function e(G) {\n let Z;\n let F = G.length;\n let x = F + 8;\n let k = (x - (x % 64)) / 64;\n let I = (k + 1) * 16;\n let aa = Array(I - 1);\n let d = 0;\n let H = 0;\n while (H < F) {\n Z = (H - (H % 4)) / 4;\n d = (H % 4) * 8;\n aa[Z] = (aa[Z] | (G.charCodeAt(H) << d));\n H++;\n }\n Z = (H - (H % 4)) / 4;\n d = (H % 4) * 8;\n aa[Z] = aa[Z] | (128 << d);\n aa[I - 2] = F << 3;\n aa[I - 1] = F >>> 29;\n return aa;\n }\n function B(x) {\n let k = \"\";\n let F = \"\";\n let G;\n let d;\n for (d = 0; d <= 3; d++) {\n G = (x >>> (d * 8)) & 255;\n F = \"0\" + G.toString(16);\n k += F.substr(F.length - 2, 2);\n }\n return k;\n }\n function J(k) {\n k = k.replace(/rn/g, \"n\");\n let d = \"\";\n for (let F = 0; F < k.length; F++) {\n let x = k.charCodeAt(F);\n if (x < 128) {\n d += String.fromCharCode(x);\n } else if ((x > 127) && (x < 2048)) {\n d += String.fromCharCode((x >> 6) | 192);\n d += String.fromCharCode((x & 63) | 128);\n } else {\n d += String.fromCharCode((x >> 12) | 224);\n d += String.fromCharCode(((x >> 6) & 63) | 128);\n d += String.fromCharCode((x & 63) | 128);\n }\n }\n return d;\n }\n // let C = Array();\n let C = [];\n let P;\n let h;\n let E;\n let v;\n let g;\n let Y;\n let X;\n let W;\n let V;\n let S = 7;\n let Q = 12;\n let N = 17;\n let M = 22;\n let A = 5;\n let z = 9;\n let y = 14;\n let w = 20;\n let o = 4;\n let m = 11;\n let l = 16;\n let j = 23;\n let U = 6;\n let T = 10;\n let R = 15;\n let O = 21;\n s = J(s);\n C = e(s);\n Y = 1732584193;\n X = 4023233417;\n W = 2562383102;\n V = 271733878;\n for (P = 0; P < C.length; P += 16) {\n h = Y;\n E = X;\n v = W;\n g = V;\n Y = u(Y, X, W, V, C[P + 0], S, 3614090360);\n V = u(V, Y, X, W, C[P + 1], Q, 3905402710);\n W = u(W, V, Y, X, C[P + 2], N, 606105819);\n X = u(X, W, V, Y, C[P + 3], M, 3250441966);\n Y = u(Y, X, W, V, C[P + 4], S, 4118548399);\n V = u(V, Y, X, W, C[P + 5], Q, 1200080426);\n W = u(W, V, Y, X, C[P + 6], N, 2821735955);\n X = u(X, W, V, Y, C[P + 7], M, 4249261313);\n Y = u(Y, X, W, V, C[P + 8], S, 1770035416);\n V = u(V, Y, X, W, C[P + 9], Q, 2336552879);\n W = u(W, V, Y, X, C[P + 10], N, 4294925233);\n X = u(X, W, V, Y, C[P + 11], M, 2304563134);\n Y = u(Y, X, W, V, C[P + 12], S, 1804603682);\n V = u(V, Y, X, W, C[P + 13], Q, 4254626195);\n W = u(W, V, Y, X, C[P + 14], N, 2792965006);\n X = u(X, W, V, Y, C[P + 15], M, 1236535329);\n Y = f(Y, X, W, V, C[P + 1], A, 4129170786);\n V = f(V, Y, X, W, C[P + 6], z, 3225465664);\n W = f(W, V, Y, X, C[P + 11], y, 643717713);\n X = f(X, W, V, Y, C[P + 0], w, 3921069994);\n Y = f(Y, X, W, V, C[P + 5], A, 3593408605);\n V = f(V, Y, X, W, C[P + 10], z, 38016083);\n W = f(W, V, Y, X, C[P + 15], y, 3634488961);\n X = f(X, W, V, Y, C[P + 4], w, 3889429448);\n Y = f(Y, X, W, V, C[P + 9], A, 568446438);\n V = f(V, Y, X, W, C[P + 14], z, 3275163606);\n W = f(W, V, Y, X, C[P + 3], y, 4107603335);\n X = f(X, W, V, Y, C[P + 8], w, 1163531501);\n Y = f(Y, X, W, V, C[P + 13], A, 2850285829);\n V = f(V, Y, X, W, C[P + 2], z, 4243563512);\n W = f(W, V, Y, X, C[P + 7], y, 1735328473);\n X = f(X, W, V, Y, C[P + 12], w, 2368359562);\n Y = D(Y, X, W, V, C[P + 5], o, 4294588738);\n V = D(V, Y, X, W, C[P + 8], m, 2272392833);\n W = D(W, V, Y, X, C[P + 11], l, 1839030562);\n X = D(X, W, V, Y, C[P + 14], j, 4259657740);\n Y = D(Y, X, W, V, C[P + 1], o, 2763975236);\n V = D(V, Y, X, W, C[P + 4], m, 1272893353);\n W = D(W, V, Y, X, C[P + 7], l, 4139469664);\n X = D(X, W, V, Y, C[P + 10], j, 3200236656);\n Y = D(Y, X, W, V, C[P + 13], o, 681279174);\n V = D(V, Y, X, W, C[P + 0], m, 3936430074);\n W = D(W, V, Y, X, C[P + 3], l, 3572445317);\n X = D(X, W, V, Y, C[P + 6], j, 76029189);\n Y = D(Y, X, W, V, C[P + 9], o, 3654602809);\n V = D(V, Y, X, W, C[P + 12], m, 3873151461);\n W = D(W, V, Y, X, C[P + 15], l, 530742520);\n X = D(X, W, V, Y, C[P + 2], j, 3299628645);\n Y = t(Y, X, W, V, C[P + 0], U, 4096336452);\n V = t(V, Y, X, W, C[P + 7], T, 1126891415);\n W = t(W, V, Y, X, C[P + 14], R, 2878612391);\n X = t(X, W, V, Y, C[P + 5], O, 4237533241);\n Y = t(Y, X, W, V, C[P + 12], U, 1700485571);\n V = t(V, Y, X, W, C[P + 3], T, 2399980690);\n W = t(W, V, Y, X, C[P + 10], R, 4293915773);\n X = t(X, W, V, Y, C[P + 1], O, 2240044497);\n Y = t(Y, X, W, V, C[P + 8], U, 1873313359);\n V = t(V, Y, X, W, C[P + 15], T, 4264355552);\n W = t(W, V, Y, X, C[P + 6], R, 2734768916);\n X = t(X, W, V, Y, C[P + 13], O, 1309151649);\n Y = t(Y, X, W, V, C[P + 4], U, 4149444226);\n V = t(V, Y, X, W, C[P + 11], T, 3174756917);\n W = t(W, V, Y, X, C[P + 2], R, 718787259);\n X = t(X, W, V, Y, C[P + 9], O, 3951481745);\n Y = K(Y, h);\n X = K(X, E);\n W = K(W, v);\n V = K(V, g);\n }\n let i = B(Y) + B(X) + B(W) + B(V);\n return i.toLowerCase();\n };\n\n const emailHash = MD5(email);\n const defaultImageUrl = `https://ui-avatars.com/api/${username}/${size}`;\n return `https://www.gravatar.com/avatar/${emailHash}?d=${defaultImageUrl}&s=${size}&r=g`;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Group data.\n */\n\nqx.Class.define(\"osparc.data.model.Group\", {\n extend: qx.core.Object,\n\n /**\n * @param groupData {Object} Object containing the serialized Group Data\n */\n construct: function(groupData) {\n this.base(arguments);\n\n this.set({\n groupId: groupData.gid,\n label: groupData.label,\n description: groupData.description,\n accessRights: groupData.accessRights,\n thumbnail: groupData.thumbnail,\n groupMembers: {},\n });\n },\n\n properties: {\n groupId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeGroupId\",\n },\n\n label: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeLabel\",\n },\n\n description: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDescription\",\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeAccessRights\",\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n init: \"\",\n event: \"changeThumbnail\",\n },\n\n groupMembers: {\n check: \"Object\",\n nullable: true,\n init: null,\n event: \"changeGroupMembers\",\n },\n\n groupType: {\n check: [\"me\", \"organization\", \"productEveryone\", \"everyone\"],\n nullable: false,\n init: null,\n },\n },\n\n events: {\n \"memberAdded\": \"qx.event.type.Event\",\n \"memberRemoved\": \"qx.event.type.Event\",\n },\n\n statics: {\n getProperties: function() {\n return Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Group));\n }\n },\n\n members: {\n getGroupMemberByUserId: function(userId) {\n return Object.values(this.getGroupMembers()).find(user => user.getUserId() === userId);\n },\n\n getGroupMemberByUsername: function(username) {\n return Object.values(this.getGroupMembers()).find(user => user.getUsername() === username);\n },\n\n getGroupMemberByLogin: function(userEmail) {\n return Object.values(this.getGroupMembers()).find(user => user.getEmail() === userEmail);\n },\n\n addGroupMember: function(user) {\n this.getGroupMembers()[user.getGroupId()] = user;\n this.fireEvent(\"memberAdded\");\n },\n\n removeGroupMember: function(userId) {\n const groupMember = this.getGroupMemberByUserId(userId);\n if (groupMember) {\n delete this.getGroupMembers()[groupMember.getGroupId()];\n this.fireEvent(\"memberRemoved\");\n }\n },\n\n serialize: function() {\n const jsonObject = {};\n const propertyKeys = this.self().getProperties();\n propertyKeys.forEach(key => {\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores User data.\n */\n\nqx.Class.define(\"osparc.data.model.User\", {\n extend: qx.core.Object,\n\n /**\n * @param userData {Object} Object containing the serialized User Data\n */\n construct: function(userData) {\n this.base(arguments);\n\n const userId = (\"id\" in userData) ? parseInt(userData[\"id\"]) : parseInt(userData[\"userId\"]);\n const groupId = (\"gid\" in userData) ? parseInt(userData[\"gid\"]) : parseInt(userData[\"groupId\"]);\n const username = userData[\"userName\"];\n const email = (\"login\" in userData) ? userData[\"login\"] : userData[\"email\"];\n let firstName = \"\";\n if (userData[\"first_name\"]) {\n firstName = userData[\"first_name\"];\n } else if (userData[\"firstName\"]) {\n firstName = userData[\"firstName\"];\n }\n let lastName = \"\";\n if (userData[\"last_name\"]) {\n lastName = userData[\"last_name\"];\n } else if (userData[\"lastName\"]) {\n lastName = userData[\"lastName\"];\n }\n let description = [firstName, lastName].join(\" \").trim(); // the null values will be replaced by empty strings\n if (email) {\n if (description) {\n description += \" - \"\n }\n description += email;\n }\n const thumbnail = osparc.utils.Avatar.emailToThumbnail(email, username);\n this.set({\n userId,\n groupId,\n username,\n firstName,\n lastName,\n email,\n thumbnail,\n label: username,\n description,\n });\n },\n\n properties: {\n userId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeUserId\",\n },\n\n groupId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeGroupId\",\n },\n\n label: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeLabel\",\n },\n\n description: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDescription\",\n },\n\n username: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeUsername\",\n },\n\n firstName: {\n check: \"String\",\n nullable: true,\n init: \"\",\n event: \"changeFirstName\"\n },\n\n lastName: {\n check: \"String\",\n nullable: true,\n init: \"\",\n event: \"changeLastName\"\n },\n\n email: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeEmail\",\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n init: \"\",\n event: \"changeThumbnail\",\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores User data + access rights to the resource.\n */\n\nqx.Class.define(\"osparc.data.model.UserMember\", {\n extend: osparc.data.model.User,\n\n /**\n * @param userData {Object} Object containing the serialized User Data\n */\n construct: function(userData) {\n this.base(arguments, userData);\n\n this.set({\n accessRights: userData[\"accessRights\"],\n });\n },\n\n properties: {\n accessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeAccessRights\",\n },\n },\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A Input wrap any valid HTML input element and make it accessible\n * through the normalized qooxdoo element interface.\n */\nqx.Class.define(\"qx.html.Input\",\n{\n extend : qx.html.Element,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param type {String} The type of the input field. Valid values are\n *
text, textarea, select,\n * checkbox, radio, password,\n * hidden, submit, image,\n * file, search, reset,\n * select and textarea.\n * @param styles {Map?null} optional map of CSS styles, where the key is the name\n * of the style and the value is the value to use.\n * @param attributes {Map?null} optional map of element attributes, where the\n * key is the name of the attribute and the value is the value to use.\n */\n construct : function(type, styles, attributes)\n {\n // Update node name correctly\n if (type === \"select\" || type === \"textarea\") {\n var nodeName = type;\n } else {\n nodeName = \"input\";\n }\n\n this.base(arguments, nodeName, styles, attributes);\n\n this.__type = type;\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n\n __type : null,\n // used for webkit only\n __selectable : null,\n __enabled : null,\n\n /*\n ---------------------------------------------------------------------------\n ELEMENT API\n ---------------------------------------------------------------------------\n */\n\n //overridden\n _createDomElement : function() {\n return qx.bom.Input.create(this.__type);\n },\n\n\n // overridden\n _applyProperty : function(name, value)\n {\n this.base(arguments, name, value);\n var element = this.getDomElement();\n\n if (name === \"value\") {\n qx.bom.Input.setValue(element, value);\n } else if (name === \"wrap\") {\n qx.bom.Input.setWrap(element, value);\n\n // qx.bom.Input#setWrap has the side-effect that the CSS property\n // overflow is set via DOM methods, causing queue and DOM to get\n // out of sync. Mirror all overflow properties to handle the case\n // when group and x/y property differ.\n this.setStyle(\"overflow\", element.style.overflow, true);\n this.setStyle(\"overflowX\", element.style.overflowX, true);\n this.setStyle(\"overflowY\", element.style.overflowY, true);\n }\n },\n\n\n /**\n * Set the input element enabled / disabled.\n * Webkit needs a special treatment because the set color of the input\n * field changes automatically. Therefore, we use\n * -webkit-user-modify: read-only and\n * -webkit-user-select: none\n * for disabling the fields in webkit. All other browsers use the disabled\n * attribute.\n *\n * @param value {Boolean} true, if the input element should be enabled.\n */\n setEnabled : function(value)\n {\n this.__enabled = value;\n\n this.setAttribute(\"disabled\", value===false);\n\n if (qx.core.Environment.get(\"engine.name\") == \"webkit\") {\n if (!value) {\n this.setStyles({\n \"userModify\": \"read-only\",\n \"userSelect\": \"none\"\n });\n } else {\n this.setStyles({\n \"userModify\": null,\n \"userSelect\": this.__selectable ? null : \"none\"\n });\n }\n }\n },\n\n\n /**\n * Set whether the element is selectable. It uses the qooxdoo attribute\n * qxSelectable with the values 'on' or 'off'.\n * In webkit, a special css property will be used and checks for the\n * enabled state.\n *\n * @param value {Boolean} True, if the element should be selectable.\n */\n setSelectable : qx.core.Environment.select(\"engine.name\",\n {\n \"webkit\" : function(value)\n {\n this.__selectable = value;\n\n // Only apply the value when it is enabled\n this.base(arguments, this.__enabled && value);\n },\n\n \"default\" : function(value)\n {\n this.base(arguments, value);\n }\n }),\n\n\n\n /*\n ---------------------------------------------------------------------------\n INPUT API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Sets the value of the input element.\n *\n * @param value {var} the new value\n * @return {qx.html.Input} This instance for for chaining support.\n */\n setValue : function(value)\n {\n var element = this.getDomElement();\n\n if (element)\n {\n // Do not overwrite when already correct (on input events)\n // This is needed to keep caret position while typing.\n if (element.value != value) {\n qx.bom.Input.setValue(element, value);\n }\n } else {\n this._setProperty(\"value\", value);\n }\n\n return this;\n },\n\n\n /**\n * Get the current value.\n *\n * @return {String} The element's current value.\n */\n getValue : function()\n {\n var element = this.getDomElement();\n\n if (element) {\n return qx.bom.Input.getValue(element);\n }\n\n return this._getProperty(\"value\") || \"\";\n },\n\n\n /**\n * Sets the text wrap behavior of a text area element.\n *\n * This property uses the style property \"wrap\" (IE) respectively \"whiteSpace\"\n *\n * @param wrap {Boolean} Whether to turn text wrap on or off.\n * @param direct {Boolean?false} Whether the execution should be made\n * directly when possible\n * @return {qx.html.Input} This instance for for chaining support.\n */\n setWrap : function(wrap, direct)\n {\n if (this.__type === \"textarea\") {\n this._setProperty(\"wrap\", wrap, direct);\n } else {\n throw new Error(\"Text wrapping is only support by textareas!\");\n }\n\n return this;\n },\n\n\n /**\n * Gets the text wrap behavior of a text area element.\n *\n * This property uses the style property \"wrap\" (IE) respectively \"whiteSpace\"\n *\n * @return {Boolean} Whether wrapping is enabled or disabled.\n */\n getWrap : function()\n {\n if (this.__type === \"textarea\") {\n return this._getProperty(\"wrap\");\n } else {\n throw new Error(\"Text wrapping is only support by textareas!\");\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Common code for fetch buttons used in both toolbar.FetchButton and form.FetchButton\n */\nqx.Mixin.define(\"osparc.ui.mixin.FetchButton\", {\n properties: {\n fetching: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n apply: \"_applyFetching\"\n }\n },\n members: {\n __icon: null,\n _applyFetching: function(isFetching, old) {\n if (isFetching) {\n this.__icon = this.getIcon();\n this.setIcon(\"@FontAwesome5Solid/circle-notch/12\");\n this.getChildControl(\"icon\").getContentElement().addClass(\"rotate\");\n } else {\n if (isFetching !== old) {\n this.setIcon(this.__icon);\n }\n if (this.getChildControl(\"icon\")) {\n this.getChildControl(\"icon\").getContentElement().removeClass(\"rotate\");\n }\n }\n // Might have been destroyed already\n if (this.getLayoutParent()) {\n this.setEnabled(!isFetching);\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A button that serves to fetch or load some data from the server. To indicate that some processing is being done, and\n * that the user has to wait, a rotating special icon is shown meanwhile.\n */\nqx.Class.define(\"osparc.ui.form.FetchButton\", {\n extend: qx.ui.form.Button,\n include: osparc.ui.mixin.FetchButton\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A generic form item to be used inside JsonSchemaForm.\n * It generates an appropriate header than can dynamically change for array items (if the user deletes one element).\n * Manages this dynamic keys to update the header and generate a consistent output data object.\n */\nqx.Class.define(\"osparc.form.json.JsonSchemaFormItem\", {\n extend: qx.ui.container.Composite,\n construct: function(key, schema, depth) {\n this.base(arguments, new qx.ui.layout.VBox());\n this.setMarginBottom(10);\n if (key !== null) {\n this.setKey(key);\n }\n this.__isArrayItem = key === -1;\n this.__schema = schema;\n this.__header = new osparc.form.json.JsonSchemaFormHeader(schema, depth, this.__isArrayItem);\n this.add(this.__header);\n this.bind(\"key\", this.__header, \"key\");\n },\n properties: {\n key: {\n event: \"changeKey\",\n init: \"\"\n }\n },\n members: {\n __header: null,\n __isArrayItem: null,\n __input: null,\n /**\n * Makes this item a final input (leaf).\n */\n addInput: function(validation, validationManager) {\n const input = this.__input = this.__getInputElement(validation, validationManager);\n this.__header.getLabel().setBuddy(input);\n this.add(input);\n if (this.__schema.description) {\n this.add(new qx.ui.basic.Label(this.__schema.description).set({\n font: \"text-11-italic\",\n marginTop: 3,\n rich: true\n }));\n }\n return input;\n },\n /**\n * Gets the generated header\n */\n getHeader: function() {\n return this.__header;\n },\n /**\n * Gets the input field\n */\n getInput: function() {\n return this.__input;\n },\n /**\n * Returns the type of this input\n */\n getType: function() {\n return this.__schema.type;\n },\n /**\n * Function that recursively constructs the path of this form item.\n */\n getPath: function() {\n const isForm = layoutItem => layoutItem instanceof osparc.form.json.JsonSchemaForm;\n const isFormItem = layoutItem => layoutItem instanceof osparc.form.json.JsonSchemaFormItem;\n let parent = this.getLayoutParent();\n // Search for its parent FormItem\n while (!isFormItem(parent) && !isForm(parent) && parent) {\n parent = parent.getLayoutParent();\n }\n if (isFormItem(parent)) {\n const parentPath = parent.getPath();\n return parentPath ? `${parentPath}.${this.getKey()}` : `${this.getKey()}`;\n }\n if (isForm(parent)) {\n return null;\n }\n return \"orphan.osparc.form\";\n },\n /**\n * Function that returns an appropriate widget for the given type.\n *\n * @param {String} type Type of the input that will be used to determine the render behavior\n */\n __getInputElement: function(validation, validationManager) {\n let input;\n switch (this.__schema.type) {\n case \"boolean\":\n input = new qx.ui.form.CheckBox();\n break;\n case \"string\":\n if (this.__schema.contentMediaType) {\n const splitted = this.__schema.contentMediaType.split(\"/\");\n let extension = null;\n if (splitted.length === 2 && splitted[1] !== \"*\") {\n extension = splitted[1];\n }\n input = new osparc.ui.form.FileInput([extension]);\n break;\n }\n if (this.__schema.enum && this.__schema.enum.length) {\n input = new osparc.ui.form.ListItemSelectBox();\n this.__schema.enum.forEach(element => input.add(element));\n break;\n }\n // falls through\n default:\n input = new qx.ui.form.TextField().set({\n appearance: \"form-input\",\n required: Boolean(validation && validation.required)\n });\n if (this.__schema.pattern) {\n validationManager.add(input, osparc.utils.Validators.regExp(RegExp(this.__schema.pattern)));\n } else if (validation) {\n validationManager.add(input);\n }\n }\n return input;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A Qooxdoo generated form array to be used inside JsonSchemaForm.\n */\nqx.Class.define(\"osparc.form.json.JsonSchemaFormArray\", {\n extend: qx.ui.container.Composite,\n construct: function() {\n this.base(arguments, new qx.ui.layout.VBox());\n },\n members: {\n // overwritten\n add: function(child, options) {\n this.base(arguments, child, options);\n if (this.getChildren().length === 1) {\n this.setAppearance(\"form-array-container\");\n }\n child.setKey(this.getChildren().length - 1);\n },\n // overwritten\n remove(child) {\n this.base(arguments, child);\n if (!this.hasChildren()) {\n this.resetAppearance();\n }\n const children = this.getChildren();\n for (let i=0; i- \n *
- lineBreak (Boolean): If set to
true\n * a forced line break will happen after this child widget.\n * \n * - stretch (Boolean): If set to
true\n * the widget will be stretched to the remaining line width. This requires\n * lineBreak to be true.\n * \n\n *
\n * var flowlayout = new qx.ui.layout.Flow();\n *\n * flowlayout.setAlignX( \"center\" ); // Align children to the X axis of the container (left|center|right)\n *\n * var container = new qx.ui.container.Composite(flowlayout);\n * this.getRoot().add(container, {edge: 0});\n *\n * var button1 = new qx.ui.form.Button(\"1. First Button\", \"flowlayout/test.png\");\n * container.add(button1);\n *\n * var button2 = new qx.ui.form.Button(\"2. Second longer Button...\", \"flowlayout/test.png\");\n * // Have this child create a break in the current Line (next child will always start a new Line)\n * container.add(button2, {lineBreak: true});\n *\n * var button3 = new qx.ui.form.Button(\"3rd really, really, really long Button\", \"flowlayout/test.png\");\n * button3.setHeight(100); // tall button\n * container.add(button3);\n *\n * var button4 = new qx.ui.form.Button(\"Number 4\", \"flowlayout/test.png\");\n * button4.setAlignY(\"bottom\");\n * container.add(button4);\n *\n * var button5 = new qx.ui.form.Button(\"20px Margins around the great big 5th button!\");\n * button5.setHeight(100); // tall button\n * button5.setMargin(20);\n * container.add(button5, {lineBreak: true}); // Line break after this button.\n *\n * var button6 = new qx.ui.form.Button(\"Number 6\", \"flowlayout/test.png\");\n * button6.setAlignY(\"middle\"); // Align this child to the vertical center of this line.\n * container.add(button6);\n *\n * var button7 = new qx.ui.form.Button(\"7th a wide, short button\", \"flowlayout/test.png\");\n * button7.setMaxHeight(20); // short button\n * container.add(button7);\n * \n *\n * *External Documentation*\n *\n * \n * Extended documentation and links to demos of this layout in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.layout.Flow\",\n{\n extend : qx.ui.layout.Abstract,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param spacingX {Integer?0} The spacing between child widgets {@link #spacingX}.\n * @param spacingY {Integer?0} The spacing between the lines {@link #spacingY}.\n * @param alignX {String?\"left\"} Horizontal alignment of the whole children\n * block {@link #alignX}.\n */\n construct : function(spacingX, spacingY, alignX)\n {\n this.base(arguments);\n\n if (spacingX) {\n this.setSpacingX(spacingX);\n }\n\n if (spacingY) {\n this.setSpacingY(spacingY);\n }\n\n if (alignX) {\n this.setAlignX(alignX);\n }\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * Horizontal alignment of the whole children block. The horizontal\n * alignment of the child is completely ignored in HBoxes (\n * {@link qx.ui.core.LayoutItem#alignX}).\n */\n alignX :\n {\n check : [ \"left\", \"center\", \"right\" ],\n init : \"left\",\n apply : \"_applyLayoutChange\"\n },\n\n /**\n * Vertical alignment of each child. Can be overridden through\n * {@link qx.ui.core.LayoutItem#alignY}.\n */\n alignY :\n {\n check : [ \"top\", \"middle\", \"bottom\"],\n init : \"top\",\n apply : \"_applyLayoutChange\"\n },\n\n /** Horizontal spacing between two children */\n spacingX :\n {\n check : \"Integer\",\n init : 0,\n apply : \"_applyLayoutChange\"\n },\n\n /**\n * The vertical spacing between the lines.\n */\n spacingY :\n {\n check : \"Integer\",\n init : 0,\n apply : \"_applyLayoutChange\"\n },\n\n /** Whether the actual children list should be laid out in reversed order. */\n reversed :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyLayoutChange\"\n }\n\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n LAYOUT INTERFACE\n ---------------------------------------------------------------------------\n */\n\n // overridden\n verifyLayoutProperty : qx.core.Environment.select(\"qx.debug\",\n {\n \"true\" : function(item, name, value) {\n var validProperties = [\"lineBreak\", \"stretch\"];\n this.assertInArray(name, validProperties, \"The property '\"+name+\"' is not supported by the flow layout!\" );\n },\n\n \"false\" : null\n }),\n\n\n // overridden\n connectToWidget : function(widget)\n {\n this.base(arguments, widget);\n\n // Necessary to be able to calculate the lines for the flow layout.\n // Otherwise the layout calculates the needed width and height by using\n // only one line of items which is leading to the wrong height. This\n // wrong height does e.g. suppress scrolling since the scroll pane does\n // not know about the correct needed height.\n if (widget) {\n widget.setAllowShrinkY(false);\n }\n },\n\n\n /**\n * The FlowLayout tries to add as many Children as possible to the current 'Line'\n * and when it sees that the next Child won't fit, it starts on a new Line, continuing\n * until all the Children have been added.\n * To enable alignX \"left\", \"center\", \"right\" renderLayout has to calculate the positions\n * of all a Line's children before it draws them.\n *\n * @param availWidth {Integer} Final width available for the content (in pixel)\n * @param availHeight {Integer} Final height available for the content (in pixel)\n * @param padding {Map} Map containing the padding values. Keys:\n * top, bottom, left, right\n */\n renderLayout : function(availWidth, availHeight, padding)\n {\n var children = this._getLayoutChildren();\n\n if (this.getReversed()) {\n children = children.concat().reverse();\n }\n\n var lineCalculator = new qx.ui.layout.LineSizeIterator(\n children,\n this.getSpacingX()\n );\n\n var lineTop = padding.top;\n while (lineCalculator.hasMoreLines())\n {\n var line = lineCalculator.computeNextLine(availWidth);\n this.__renderLine(line, lineTop, availWidth, padding);\n lineTop += line.height + this.getSpacingY();\n }\n },\n\n\n /**\n * Render a line in the flow layout\n *\n * @param line {Map} A line configuration as returned by\n * {@link LineSizeIterator#computeNextLine}.\n * @param lineTop {Integer} The line's top position\n * @param availWidth {Integer} The available line width\n * @param padding {Map} Map containing the padding values. Keys:\n * top, bottom, left, right\n */\n __renderLine : function(line, lineTop, availWidth, padding)\n {\n var util = qx.ui.layout.Util;\n\n var left = padding.left;\n if (this.getAlignX() != \"left\") {\n left = padding.left + availWidth - line.width;\n if (this.getAlignX() == \"center\") {\n left = padding.left + Math.round((availWidth - line.width) / 2);\n }\n }\n\n for (var i=0; i- \n *
- asyncValidator: A reference to the corresponding validator. \n *
- value: The value of the assigned input field. \n *
\n * const link = new osparc.ui.basic.LinkLabel(this.tr(\"oSparc\"),\"https://osparc.io\");\n * this.getRoot().add(link);\n *\n */\n\nqx.Class.define(\"osparc.ui.form.LinkButton\", {\n extend: osparc.ui.form.FetchButton,\n\n /**\n * @param label {String} Label to use\n * @param icon {String} Icon to use\n * @param url {String} Url to point to\n */\n construct: function(label, icon, url) {\n this.base(arguments, label);\n\n this.set({\n iconPosition: \"right\",\n allowGrowX: false,\n appearance: \"link-button\"\n });\n\n if (url) {\n this.setIcon(\"@FontAwesome5Solid/external-link-alt/12\");\n this.addListener(\"execute\", () => {\n window.open(url);\n }, this);\n }\n if (icon) {\n this.setIcon(icon);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Based on the double column renderer for {@link qx.ui.form.Form}.\n * This custom class shows the buddy over the field and supports fields taking the double space\n */\nqx.Class.define(\"osparc.ui.form.renderer.DoubleV\", {\n extend: qx.ui.form.renderer.AbstractRenderer,\n\n construct: function(form, doubleSpacedItems) {\n const layout = new qx.ui.layout.Grid();\n layout.setSpacing(15);\n layout.setColumnAlign(0, \"left\", \"bottom\");\n layout.setColumnAlign(1, \"left\", \"bottom\");\n layout.setColumnFlex(0, 1);\n layout.setColumnFlex(1, 1);\n this._setLayout(layout);\n\n this.__doubleSpacedItems = doubleSpacedItems || [];\n\n this.base(arguments, form);\n },\n\n members: {\n __doubleSpacedItems: null,\n __row: 0,\n __buttonRow: null,\n\n // overridden\n _onFormChange : function() {\n if (this.__buttonRow) {\n this.__buttonRow.destroy();\n this.__buttonRow = null;\n }\n this.__row = 0;\n this.base(arguments);\n },\n\n /**\n * Add a group of form items with the corresponding names. The names are\n * displayed as label.\n * The title is optional and is used as grouping for the given form\n * items.\n *\n * @param items {qx.ui.core.Widget[]} An array of form items to render.\n * @param names {String[]} An array of names for the form items.\n * @param title {String?} A title of the group you are adding.\n */\n addItems : function(items, names, title) {\n // add the header\n if (title != null) {\n this._add(this._createHeader(title), {\n row: this.__row,\n column: 0,\n colSpan: 2\n });\n this.__row++;\n }\n\n // add the items\n let i = null;\n let col = 0;\n for (i = 0; i < items.length; i++) {\n const name = names[i];\n const item = items[i];\n const takeDouble = this.__doubleSpacedItems.includes(item);\n if (takeDouble && col === 1) {\n col = 0;\n this.__row++;\n }\n\n const itemLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const label = this._createLabel(name, item).set({\n font: \"text-12\",\n allowGrowX: true\n });\n label.setBuddy(item);\n itemLayout.add(label);\n item.setBackgroundColor(\"transparent\");\n itemLayout.add(item);\n this._add(itemLayout, {\n row: this.__row,\n column: takeDouble ? 0 : col,\n colSpan: takeDouble ? 2 : 1\n });\n\n this._connectVisibility(item, label);\n\n if (takeDouble || col === 1) {\n col = 0;\n this.__row++;\n } else {\n col = 1;\n }\n\n // store the names for translation\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n this._names.push({\n name,\n label,\n item\n });\n }\n }\n\n if (i % 2 == 1) {\n this.__row++;\n }\n },\n\n /**\n * Adds a button the form renderer. All buttons will be added in a\n * single row at the bottom of the form.\n *\n * @param button {qx.ui.form.Button} The button to add.\n */\n addButton : function(button) {\n if (this.__buttonRow == null) {\n // create button row\n this.__buttonRow = new qx.ui.container.Composite();\n this.__buttonRow.setMarginTop(5);\n const hBox = new qx.ui.layout.HBox();\n hBox.setAlignX(\"right\");\n hBox.setSpacing(5);\n this.__buttonRow.setLayout(hBox);\n // add the button row\n this._add(this.__buttonRow, {\n row: this.__row,\n column: 0,\n colSpan: 2\n });\n // increase the row\n this.__row++;\n }\n\n // add the button\n this.__buttonRow.add(button);\n },\n\n /**\n * Returns the set layout for configuration.\n *\n * @return {qx.ui.layout.Grid} The grid layout of the widget.\n */\n getLayout : function() {\n return this._getLayout();\n },\n\n /**\n * Creates a label for the given form item.\n *\n * @param name {String} The content of the label without the\n * trailing * and :\n * @param item {qx.ui.core.Widget} The item, which has the required state.\n * @return {qx.ui.basic.Label} The label for the given item.\n */\n _createLabel: function(name, item) {\n const label = new qx.ui.basic.Label(this._createLabelText(name, item));\n // store labels for disposal\n this._labels.push(label);\n label.setRich(true);\n return label;\n },\n\n /**\n * Creates a header label for the form groups.\n *\n * @param title {String} Creates a header label.\n * @return {qx.ui.basic.Label} The header for the form groups.\n */\n _createHeader : function(title) {\n const header = new qx.ui.basic.Label(title);\n // store labels for disposal\n this._labels.push(header);\n header.setFont(\"bold\");\n if (this.__row != 0) {\n header.setMarginTop(10);\n }\n header.setAlignX(\"left\");\n return header;\n }\n },\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n destruct : function() {\n // first, remove all buttons from the bottom row because they\n // should not be disposed\n if (this.__buttonRow) {\n this.__buttonRow.removeAll();\n this._disposeObjects(\"__buttonRow\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* global intlTelInput */\n\n/**\n * @ignore(intlTelInput)\n */\n\nqx.Class.define(\"osparc.widget.IntlTelInput\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5));\n\n this.getContentElement().setStyles({\n \"overflow\": \"visible\" // needed for countries dropdown menu\n });\n\n const randId = Math.floor(Math.random() * 100);\n const html = ``;\n const phoneNumber = new qx.ui.embed.Html(html).set({\n marginTop: 2,\n marginLeft: 2,\n marginRight: 2,\n minWidth: 185,\n maxHeight: 25\n });\n this._add(phoneNumber);\n phoneNumber.addListenerOnce(\"appear\", () => {\n const convertInputToPhoneInput = () => {\n const domElement = document.querySelector(`#phone-${randId}`);\n this.__itiInput = this.__inputToPhoneInput(domElement);\n phoneNumber.getContentElement().setStyles({\n \"overflow\": \"visible\" // needed for countries dropdown menu\n });\n };\n const intlTelInputLib = osparc.wrapper.IntlTelInput.getInstance();\n if (intlTelInputLib.getLibReady()) {\n convertInputToPhoneInput();\n } else {\n intlTelInputLib.addListenerOnce(\"changeLibReady\", e => {\n if (e.getData()) {\n convertInputToPhoneInput();\n }\n });\n }\n });\n\n const feedbackCheck = this.__feedbackCheck = new qx.ui.basic.Image().set({\n paddingTop: 3\n });\n feedbackCheck.exclude();\n this._add(feedbackCheck);\n },\n\n statics: {\n updateStyle: function(itiInput, checkIcon) {\n itiInput.a.style[\"width\"] = checkIcon && checkIcon.isVisible() ? \"185px\" : \"215px\";\n itiInput.a.style[\"height\"] = \"26px\";\n itiInput.a.style[\"borderWidth\"] = \"0px\";\n itiInput.a.style[\"backgroundColor\"] = qx.theme.manager.Color.getInstance().resolve(\"input_background\");\n itiInput.a.style[\"color\"] = qx.theme.manager.Color.getInstance().resolve(\"text\");\n }\n },\n\n members: {\n __itiInput: null,\n __feedbackCheck: null,\n\n getNumber: function() {\n return this.__itiInput.getNumber();\n },\n\n isValidNumber: function() {\n return this.__itiInput.isValidNumber();\n },\n\n verifyPhoneNumber: function() {\n const isValid = this.isValidNumber();\n this.__feedbackCheck.set({\n toolTipText: \"E.164: \" + this.getNumber(),\n source: isValid ? \"@FontAwesome5Solid/check/18\" : \"@FontAwesome5Solid/exclamation-triangle/18\",\n textColor: isValid ? \"text\" : \"failed-red\"\n });\n this.__feedbackCheck.show();\n if (!isValid) {\n const validationError = this.__itiInput.getValidationError();\n const errorMap = {\n 0: this.tr(\"Invalid number\"),\n 1: this.tr(\"Invalid country code\"),\n 2: this.tr(\"Number too short\"),\n 3: this.tr(\"Number too long\")\n };\n const errorMsg = validationError in errorMap ? errorMap[validationError] : \"Invalid number\";\n this.__feedbackCheck.set({\n toolTipText: errorMsg + \". \" + this.__feedbackCheck.getToolTipText()\n });\n }\n this.self().updateStyle(this.__itiInput, this.__feedbackCheck);\n },\n\n __inputToPhoneInput: function(input) {\n const iti = intlTelInput(input, {\n initialCountry: \"auto\",\n geoIpLookup: callback => {\n fetch(\"https://ipapi.co/json\")\n .then(res => res.json())\n .then(data => callback(data.country_code))\n .catch(() => callback(\"ch\"));\n },\n preferredCountries: []\n });\n const themeManager = qx.theme.manager.Meta.getInstance();\n themeManager.addListener(\"changeTheme\", () => this.self().updateStyle(iti));\n this.self().updateStyle(iti);\n return iti;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Adrian Olaru (adrianolaru)\n\n************************************************************************ */\n\n/**\n * Base64 encoder\n */\nqx.Class.define(\"qx.util.Base64\", {\n statics : {\n /** Characters allowed in a Base 64 encoded string */\n __base64Chars : [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/' ],\n\n\n /**\n * Encode a string using base64 encoding (http://en.wikipedia.org/wiki/Base64).\n *\n * @param input {String} the input string to encode\n *\n * @param is8bit {Boolean?} Whether the character set is 8-bit, not\n * multi-byte. If this parameter is not provided, the character set is\n * determined from the 'document' object.\n *\n * @return {String} The base64 encoded input string.\n */\n encode : function(input, is8bit)\n {\n var isMultiByte;\n\n if (typeof is8bit == \"undefined\")\n {\n var charSet = document.characterSet || document.charset;\n isMultiByte = charSet.toLowerCase().indexOf('utf') != -1;\n\n if (!isMultiByte && window.btoa instanceof Function) {\n return btoa(input);\n }\n }\n else\n {\n isMultiByte = ! is8bit;\n }\n\n var padding = '=';\n var base64Chars = this.__base64Chars;\n var length = input.length;\n var output = [];\n var result = [];\n var i = 0;\n\n var translateUTF8 = this.__translateUTF8;\n\n while (i < length) {\n translateUTF8(input.charCodeAt(i++), output, !isMultiByte);\n }\n\n for (var k=0, l=output.length; k
\n
\n Are you part of the TI Solutions Early Adopter Program (EAP)?
\n
\n If yes, you have free access to our complete TIP platform with advanced features for TI planning and simulations. Click here to request access.
\n
\n Not an EAP member yet? Join our cutting-edge research community:
\n • Use our investigational TIBS-R devices in your projects
\n • Contribute to advancing TI knowledge
\n • Shape the future of neurostimulation technology
\n
\n Click here to learn more about EAP and apply today!
\n
\n ${link1} ${link2}\n `);\n control = new qx.ui.basic.Label(text).set({\n font: \"text-14\",\n wrap: true,\n rich: true,\n });\n this.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * App/Theme dependant osparc logo with powerwed by text\n */\nqx.Class.define(\"osparc.ui.basic.PoweredByOsparc\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n osparc.utils.Utils.setIdToWidget(this, \"poweredByOsparc\");\n\n this._setLayout(new qx.ui.layout.VBox(2));\n\n this.set({\n toolTipText: this.tr(\"powered by \") + osparc.About.OSPARC_OFFICIAL,\n alignX: \"center\",\n alignY: \"middle\",\n cursor: \"pointer\"\n });\n\n this.addListener(\"tap\", () => osparc.About.getInstance().open());\n\n this.getChildControl(\"powered-by\");\n this.getChildControl(\"logo\");\n\n this.__resetSourcePath();\n\n const themeManager = qx.theme.manager.Meta.getInstance();\n themeManager.addListener(\"changeTheme\", () => this.__resetSourcePath(), this);\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"powered-by\":\n control = new qx.ui.basic.Label(this.tr(\"powered by\")).set({\n alignX: \"center\",\n font: \"text-9\"\n });\n this._add(control);\n break;\n case \"logo\": {\n control = new qx.ui.basic.Image().set({\n width: 32,\n height: 24,\n scale: true\n });\n const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"bottom\"\n }));\n logoContainer.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n logoContainer.add(control);\n logoContainer.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n this._add(logoContainer);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __resetSourcePath: function() {\n const colorManager = qx.theme.manager.Color.getInstance();\n const textColor = colorManager.resolve(\"text\");\n const lightLogo = osparc.utils.Utils.getColorLuminance(textColor) > 0.4;\n this.getChildControl(\"logo\").set({\n source: lightLogo ? \"osparc/osparc-o-white.svg\" : \"osparc/osparc-o-black.svg\"\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.navigation.StudyTitleWOptions\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n alignX: \"center\"\n }));\n\n this.getChildControl(\"study-menu-button\");\n this.getChildControl(\"edit-title-label\");\n },\n\n events: {\n \"openLogger\": \"qx.event.type.Event\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n nullable: true,\n event: \"changeStudy\",\n apply: \"__applyStudy\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"study-menu-info\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Information...\"),\n icon: \"@MaterialIcons/info_outline/14\",\n ...this.self().BUTTON_OPTIONS\n });\n control.addListener(\"execute\", () => {\n let widget = null;\n if (this.getStudy().isPipelineMononode()) {\n widget = new osparc.info.MergedLarge(this.getStudy());\n } else {\n widget = new osparc.info.StudyLarge(this.getStudy());\n }\n const title = this.tr(\"Information\");\n const width = osparc.info.CardLarge.WIDTH;\n const height = osparc.info.CardLarge.HEIGHT;\n osparc.ui.window.Window.popUpInWindow(widget, title, width, height).set({\n maxHeight: height\n });\n });\n break;\n case \"study-menu-reload\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Reload\"),\n icon: \"@FontAwesome5Solid/redo-alt/12\",\n });\n control.addListener(\"execute\", () => this.__reloadIFrame(), this);\n break;\n case \"study-menu-convert-to-pipeline\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Convert to Pipeline\"),\n icon: null,\n });\n control.addListener(\"execute\", () => {\n this.getStudy().getUi().setMode(\"workbench\");\n });\n break;\n case \"study-menu-convert-to-standalone\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Convert to Standalone\"),\n icon: null,\n });\n control.addListener(\"execute\", () => {\n this.getStudy().getUi().setMode(\"standalone\");\n });\n break;\n case \"study-menu-restore\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Restore\"),\n icon: osparc.theme.common.Image.URLS[\"window-restore\"] + \"/20\",\n });\n control.addListener(\"execute\", () => {\n this.getStudy().getUi().setMode(\"workbench\");\n });\n break;\n case \"study-menu-open-logger\":\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Platform Logs...\"),\n icon: \"@FontAwesome5Solid/download/14\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"openLogger\"));\n break;\n case \"study-menu-button\": {\n const optionsMenu = new qx.ui.menu.Menu();\n optionsMenu.setAppearance(\"menu-wider\");\n optionsMenu.add(this.getChildControl(\"study-menu-info\"));\n optionsMenu.add(this.getChildControl(\"study-menu-reload\"));\n optionsMenu.add(this.getChildControl(\"study-menu-convert-to-pipeline\"));\n optionsMenu.add(this.getChildControl(\"study-menu-convert-to-standalone\"));\n optionsMenu.add(this.getChildControl(\"study-menu-restore\"));\n optionsMenu.add(this.getChildControl(\"study-menu-open-logger\"));\n control = new qx.ui.form.MenuButton().set({\n appearance: \"fab-button\",\n menu: optionsMenu,\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n allowGrowY: false,\n width: 24,\n });\n this._add(control);\n break;\n }\n case \"edit-title-label\":\n control = new osparc.ui.form.EditLabel().set({\n labelFont: \"text-14\",\n inputFont: \"text-14\",\n maxWidth: 300\n });\n control.addListener(\"editValue\", e => {\n const newLabel = e.getData();\n this.getStudy().setName(newLabel);\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __reloadIFrame: function() {\n const nodes = this.getStudy().getWorkbench().getNodes();\n if (Object.keys(nodes).length === 1) {\n Object.values(nodes)[0].getIframeHandler().restartIFrame();\n }\n },\n\n __applyStudy: function(study) {\n if (study) {\n const editTitle = this.getChildControl(\"edit-title-label\");\n study.bind(\"name\", editTitle, \"value\");\n\n const reloadButton = this.getChildControl(\"study-menu-reload\");\n study.getUi().bind(\"mode\", reloadButton, \"visibility\", {\n converter: mode => mode === \"standalone\" ? \"visible\" : \"excluded\"\n });\n\n const convertToPipelineButton = this.getChildControl(\"study-menu-convert-to-pipeline\");\n const convertToStandaloneButton = this.getChildControl(\"study-menu-convert-to-standalone\");\n if (osparc.product.Utils.hasConvertToPipelineEnabled()) {\n study.getUi().bind(\"mode\", convertToPipelineButton, \"visibility\", {\n converter: mode => mode === \"standalone\" ? \"visible\" : \"excluded\"\n });\n\n const evaluateConvertToStandaloneButton = () => {\n // exclude until we have the export to standalone backend functionality\n convertToStandaloneButton.exclude();\n };\n study.getWorkbench().addListener(\"pipelineChanged\", () => evaluateConvertToStandaloneButton());\n study.getUi().addListener(\"changeMode\", () => evaluateConvertToStandaloneButton());\n } else {\n convertToPipelineButton.exclude();\n convertToStandaloneButton.exclude();\n }\n\n const restoreButton = this.getChildControl(\"study-menu-restore\");\n study.getUi().bind(\"mode\", restoreButton, \"visibility\", {\n converter: mode => mode === \"standalone\" ? \"visible\" : \"excluded\"\n });\n\n const loggerButton = this.getChildControl(\"study-menu-open-logger\");\n study.getUi().bind(\"mode\", loggerButton, \"visibility\", {\n converter: mode => mode === \"standalone\" ? \"visible\" : \"excluded\"\n });\n } else {\n this.exclude();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that displays a SVG image and supports changing its color.\n * It is meant to be used for those images that are not available in the catalogs of font icons we include.\n */\n\n\nqx.Class.define(\"osparc.ui.basic.SVGImage\", {\n extend: osparc.ui.layout.CenteredGrid,\n\n /**\n * @param source\n */\n construct: function(source) {\n this.base(arguments);\n\n if (source) {\n this.setSource(source);\n }\n },\n\n properties: {\n source: {\n check: \"String\",\n init: null,\n nullable: false,\n apply: \"__applySource\"\n },\n\n imageColor: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeImageColor\",\n apply: \"__applyImageColor\"\n },\n },\n\n statics: {\n keywordToCSSFilter: function(keyword) {\n // use the following link to extended supported colors\n // https://isotropic.co/tool/hex-color-to-css-filter/\n let filter = null;\n switch (keyword) {\n case \"danger-red\": // \"#FF2D2D\"\n filter = \"invert(13%) sepia(89%) saturate(5752%) hue-rotate(346deg) brightness(85%) contrast(109%)\";\n break;\n case \"warning-yellow\": // #F8DB1F\n filter = \"invert(90%) sepia(99%) saturate(7500%) hue-rotate(331deg) brightness(95%) contrast(108%)\";\n break;\n case \"ready-green\": // #58A6FF\n filter = \"invert(66%) sepia(24%) saturate(5763%) hue-rotate(188deg) brightness(101%) contrast(101%)\";\n break;\n case \"text\": // light or dark\n if (qx.theme.manager.Meta.getInstance().getTheme().basename === \"ThemeLight\") {\n // ThemeLight #282828\n filter = \"invert(10%) sepia(4%) saturate(19%) hue-rotate(354deg) brightness(102%) contrast(86%)\";\n } else {\n // ThemeDark #D8D8D8\n filter = \"invert(94%) sepia(0%) saturate(1442%) hue-rotate(148deg) brightness(97%) contrast(84%)\";\n }\n break;\n case \"strong-main\": // it depends on the product\n if (qx.theme.manager.Meta.getInstance().getTheme().name.includes(\".s4l.\")) {\n // \"rgba(0, 144, 208, 1)\"\n filter = \"invert(55%) sepia(73%) saturate(6976%) hue-rotate(177deg) brightness(100%) contrast(102%)\";\n } else if (qx.theme.manager.Meta.getInstance().getTheme().name.includes(\".tis.\")) {\n // \"rgba(105, 105, 255, 1)\"\n filter = \"invert(36%) sepia(74%) saturate(2007%) hue-rotate(225deg) brightness(102%) contrast(104%)\";\n } else {\n // \"rgba(131, 0, 191, 1)\" osparc\n filter = \"invert(13%) sepia(95%) saturate(6107%) hue-rotate(282deg) brightness(77%) contrast(115%)\";\n }\n }\n return filter;\n },\n\n // not very accurate\n rgbToCSSFilter: function(rgb) {\n const [r, g, b] = rgb.split(\",\").map(Number);\n\n let [rf, gf, bf] = [r / 255, g / 255, b / 255];\n let [mi, ma] = [Math.min(rf, gf, bf), Math.max(rf, gf, bf)];\n let [h, s, l] = [0, 0, (mi + ma) / 2];\n\n if (mi !== ma) {\n s = l < 0.5 ? (ma - mi) / (ma + mi) : (ma - mi) / (2 - ma - mi);\n switch (ma) {\n case rf:\n h = (gf - bf) / (ma - mi);\n break;\n case gf:\n h = 2 + (bf - rf) / (ma - mi);\n break;\n case bf:\n h = 4 + (rf - gf) / (ma - mi);\n break;\n }\n }\n\n h = Math.round(h * 60);\n if (h < 0) {\n h += 360;\n }\n s = Math.round(s * 100);\n l = Math.round(l * 100);\n\n const invertValue = l2 => 100 - l2;\n const sepiaValue = s2 => s2;\n const saturateValue = s3 => s3;\n const brightnessValue = l3 => l3;\n const contrastValue = l4 => l4 > 50 ? 50 : l4;\n return `invert(${invertValue(l)}%) sepia(${sepiaValue(s)}%) saturate(${saturateValue(s)}%) hue-rotate(${h}deg) brightness(${brightnessValue(l)}%) contrast(${contrastValue(l)}%)`;\n },\n\n setColorToImage: function(image, keywordOrRgb) {\n if (keywordOrRgb === null) {\n keywordOrRgb = \"text\";\n }\n let filterValue = this.self().keywordToCSSFilter(keywordOrRgb);\n if (filterValue === null) {\n const hexColor = qx.theme.manager.Color.getInstance().resolve(keywordOrRgb);\n const rgbColor = qx.util.ColorUtil.hexStringToRgb(hexColor);\n filterValue = this.self().rgbToCSSFilter(rgbColor);\n }\n const myStyle = {\n \"filter\": filterValue\n };\n image.getContentElement().setStyles(myStyle);\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"image\":\n control = new qx.ui.basic.Image().set({\n scale: true,\n allowStretchX: true,\n allowStretchY: true,\n allowGrowX: true,\n allowGrowY: true,\n alignX: \"center\",\n alignY: \"middle\"\n });\n this.addCenteredWidget(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applySource: function(src) {\n if (src && src.includes(\".svg\")) {\n this.getChildControl(\"image\").setSource(src);\n }\n },\n\n /**\n * @param keywordOrRgb {string} predefined keyword or rgb in the following format \"0,255,0\"\n */\n __applyImageColor: function(keywordOrRgb) {\n this.self().setColorToImage(this.getChildControl(\"image\"), keywordOrRgb);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsImage\", {\n extend: osparc.ui.basic.SVGImage,\n\n construct: function() {\n this.base(arguments, \"osparc/coins-solid.svg\");\n\n const store = osparc.store.Store.getInstance();\n store.addListener(\"changeContextWallet\", this.__updateWallet, this);\n this.__updateWallet();\n },\n\n members: {\n __forceNullColor: null,\n\n __updateWallet: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (contextWallet) {\n this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);\n\n contextWallet.addListener(\"changeCreditsAvailable\", this.__updateColor, this);\n this.__updateColor();\n }\n },\n\n __updateColor: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (contextWallet) {\n if (this.__forceNullColor) {\n this.setImageColor(null);\n } else {\n const credits = contextWallet.getCreditsAvailable();\n const creditsColorKeyword = osparc.desktop.credits.Utils.creditsToColor(credits, \"strong-main\");\n this.setImageColor(creditsColorKeyword);\n }\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsIndicatorButton\", {\n extend: osparc.desktop.credits.CreditsImage,\n\n construct: function() {\n this.base(arguments);\n\n osparc.utils.Utils.setIdToWidget(this, \"creditsIndicatorButton\");\n\n this.set({\n cursor: \"pointer\",\n padding: [3, 8]\n });\n\n this.getChildControl(\"image\").set({\n width: 24,\n height: 24\n });\n\n this.addListener(\"tap\", this.__buttonTapped, this);\n },\n\n members: {\n __creditsContainer: null,\n __tapListener: null,\n\n __buttonTapped: function() {\n if (this.__creditsContainer && this.__creditsContainer.isVisible()) {\n this.__hideCreditsContainer();\n } else {\n this.__showCreditsContainer();\n }\n },\n\n __showCreditsContainer: function() {\n if (!this.__creditsContainer) {\n this.__creditsContainer = new osparc.desktop.credits.CreditsSummary();\n this.__creditsContainer.exclude();\n }\n\n this.__positionCreditsContainer();\n\n // Show the container\n this.__creditsContainer.show();\n\n // Add listeners for taps outside the container to hide it\n document.addEventListener(\"mousedown\", this.__onTapOutsideMouse.bind(this), true);\n },\n\n __positionCreditsContainer: function() {\n const bounds = this.getBounds();\n const cel = this.getContentElement();\n if (cel) {\n const domEle = cel.getDomElement();\n if (domEle) {\n const rect = domEle.getBoundingClientRect();\n bounds.left = parseInt(rect.x);\n bounds.top = parseInt(rect.y);\n }\n }\n const bottom = bounds.top + bounds.height;\n const right = bounds.left + bounds.width;\n this.__creditsContainer.setPosition(right, bottom);\n },\n\n __onTapOutsideMouse: function(event) {\n this.__handleOutsideEvent(event);\n },\n\n __handleOutsideEvent: function(event) {\n const offset = 0;\n const onContainer = osparc.utils.Utils.isMouseOnElement(this.__creditsContainer, event, offset);\n const onButton = osparc.utils.Utils.isMouseOnElement(this, event, offset);\n if (!onContainer && !onButton) {\n this.__hideCreditsContainer();\n }\n },\n\n __hideCreditsContainer: function() {\n if (this.__creditsContainer) {\n this.__creditsContainer.exclude();\n }\n\n // Remove listeners for outside clicks/taps\n document.removeEventListener(\"mousedown\", this.__onTapOutsideMouse.bind(this), true);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.TasksButton\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.set({\n width: 30,\n alignX: \"center\",\n cursor: \"pointer\",\n visibility: \"excluded\"\n });\n\n const tasks = osparc.task.Tasks.getInstance();\n tasks.getTasks().addListener(\"change\", e => this.__updateTasksButton(), this);\n this.addListener(\"tap\", () => this.__showTasks(), this);\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/cog/24\");\n osparc.utils.Utils.addClass(control.getContentElement(), \"rotate\");\n\n const logoContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n logoContainer.add(control);\n\n this._add(logoContainer, {\n height: \"100%\"\n });\n break;\n }\n case \"number\":\n control = new qx.ui.basic.Label().set({\n backgroundColor: \"background-main-1\",\n font: \"text-12\"\n });\n control.getContentElement().setStyles({\n \"border-radius\": \"4px\"\n });\n this._add(control, {\n bottom: 8,\n right: 4\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __updateTasksButton: function() {\n this._createChildControlImpl(\"icon\");\n const number = this.getChildControl(\"number\");\n\n const tasks = osparc.task.Tasks.getInstance();\n const nTasks = tasks.getTasks().length;\n number.setValue(nTasks.toString());\n nTasks ? this.show() : this.exclude();\n },\n\n __showTasks: function() {\n const that = this;\n const tapListener = event => {\n const tasks = osparc.task.Tasks.getInstance();\n const tasksContainer = tasks.getTasksContainer();\n if (osparc.utils.Utils.isMouseOnElement(tasksContainer, event)) {\n return;\n }\n // eslint-disable-next-line no-underscore-dangle\n that.__hideTasks();\n document.removeEventListener(\"mousedown\", tapListener);\n };\n\n const bounds = this.getBounds();\n const cel = this.getContentElement();\n if (cel) {\n const domeEle = cel.getDomElement();\n if (domeEle) {\n const rect = domeEle.getBoundingClientRect();\n bounds.left = parseInt(rect.x);\n bounds.top = parseInt(rect.y);\n }\n }\n const tasks = osparc.task.Tasks.getInstance();\n tasks.setTasksContainerPosition(bounds.left+bounds.width, osparc.navigation.NavigationBar.HEIGHT+3);\n tasks.getTasksContainer().show();\n document.addEventListener(\"mousedown\", tapListener);\n },\n\n __hideTasks: function() {\n const tasks = osparc.task.Tasks.getInstance();\n tasks.getTasksContainer().exclude();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.NotificationsButton\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n osparc.utils.Utils.setIdToWidget(this, \"notificationsButton\");\n\n this.set({\n width: 30,\n alignX: \"center\",\n cursor: \"pointer\"\n });\n\n this._createChildControlImpl(\"icon\");\n this._createChildControlImpl(\"number\");\n\n const notifications = osparc.notification.Notifications.getInstance();\n notifications.getNotifications().addListener(\"change\", () => this.__updateButton(), this);\n this.__updateButton();\n\n this.__notificationsContainer = new osparc.notification.NotificationsContainer();\n this.__notificationsContainer.exclude();\n\n this.addListener(\"tap\", this.__buttonTapped, this);\n },\n\n members: {\n __notificationsContainer: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = new qx.ui.basic.Image();\n const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n iconContainer.add(control);\n this._add(iconContainer, {\n height: \"100%\"\n });\n break;\n }\n case \"number\":\n control = new qx.ui.basic.Label().set({\n backgroundColor: \"error\",\n textColor: \"white\",\n font: \"text-12\",\n padding: [0, 4],\n visibility: this.value > 0 ? \"visible\" : \"hidden\"\n });\n control.getContentElement().setStyles({\n \"border-radius\": \"8px\"\n });\n this._add(control, {\n bottom: 8,\n right: 4\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __updateButton: function() {\n const notificationManager = osparc.notification.Notifications.getInstance();\n const notifications = notificationManager.getNotifications();\n notifications.forEach(notification => notification.addListener(\"changeRead\", () => this.__updateButton(), this));\n\n const nUnreadNotifications = notifications.filter(notification => notification.getRead() === false).length;\n const icon = this.getChildControl(\"icon\");\n icon.set({\n source: nUnreadNotifications > 0 ? \"@FontAwesome5Solid/bell/22\" : \"@FontAwesome5Regular/bell/22\",\n textColor: nUnreadNotifications > 0 ? \"strong-main\" : \"text\"\n });\n const number = this.getChildControl(\"number\");\n number.set({\n value: nUnreadNotifications.toString(),\n visibility: nUnreadNotifications > 0 ? \"visible\" : \"excluded\"\n });\n },\n\n __buttonTapped: function() {\n if (this.__notificationsContainer && this.__notificationsContainer.isVisible()) {\n this.__hideNotificationsContainer();\n } else {\n this.__showNotificationsContainer();\n }\n },\n\n __showNotificationsContainer: function() {\n if (!this.__notificationsContainer) {\n this.__notificationsContainer = new osparc.notification.NotificationsContainer();\n this.__notificationsContainer.exclude();\n }\n\n this.__positionNotificationsContainer();\n\n // Show the container\n this.__notificationsContainer.show();\n\n // mark all notifications as read\n const notificationManager = osparc.notification.Notifications.getInstance();\n notificationManager.markAllAsRead();\n\n // Add listener for taps outside the container to hide it\n document.addEventListener(\"mousedown\", this.__onTapOutside.bind(this), true);\n },\n\n __positionNotificationsContainer: function() {\n const bounds = this.getBounds();\n const cel = this.getContentElement();\n if (cel) {\n const domEle = cel.getDomElement();\n if (domEle) {\n const rect = domEle.getBoundingClientRect();\n bounds.left = parseInt(rect.x);\n bounds.top = parseInt(rect.y);\n }\n }\n const bottom = bounds.top + bounds.height;\n const right = bounds.left + bounds.width;\n this.__notificationsContainer.setPosition(right, bottom);\n },\n\n __onTapOutside: function(event) {\n if (\n !osparc.utils.Utils.isMouseOnElement(this.__notificationsContainer, event) &&\n !osparc.utils.Utils.isMouseOnElement(this, event)\n ) {\n this.__hideNotificationsContainer();\n }\n },\n\n __hideNotificationsContainer: function() {\n if (this.__notificationsContainer) {\n this.__notificationsContainer.exclude();\n }\n\n // Remove listener for outside clicks/taps\n document.removeEventListener(\"mousedown\", this.__onTapOutside.bind(this), true);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.window.TabbedWindow\", {\n extend: osparc.ui.window.SingletonWindow,\n type: \"abstract\",\n\n construct: function(id, caption) {\n this.base(arguments, id, caption);\n\n this.setLayout(new qx.ui.layout.Grow());\n\n const defaultProps = this.self().DEFAULT_PROPS;\n this.set(defaultProps);\n },\n\n statics: {\n DEFAULT_PROPS: {\n modal: true,\n width: 900,\n height: 600,\n showMaximize: false,\n showMinimize: false,\n resizable: true,\n appearance: \"service-window\"\n }\n },\n\n members: {\n _setTabbedView: function(tabbedView) {\n this.add(tabbedView);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.account.MyAccountWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function() {\n this.base(arguments, \"credits\", this.tr(\"My Account\"));\n\n const width = 990;\n const height = 700;\n const maxHeight = 700;\n this.set({\n width,\n height,\n maxHeight,\n });\n\n const myAccount = this.__myAccount = new osparc.desktop.account.MyAccount();\n this._setTabbedView(myAccount);\n },\n\n statics: {\n openWindow: function() {\n const accountWindow = new osparc.desktop.account.MyAccountWindow();\n accountWindow.center();\n accountWindow.open();\n return accountWindow;\n }\n },\n\n members: {\n __myAccount: null,\n\n openTags: function() {\n this.__myAccount.openTags();\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * A button which opens the connected menu when tapping on it.\n */\nqx.Class.define(\"qx.ui.form.MenuButton\",\n{\n extend : qx.ui.form.Button,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param label {String} Initial label\n * @param icon {String?null} Initial icon\n * @param menu {qx.ui.menu.Menu} Connect to menu instance\n */\n construct : function(label, icon, menu)\n {\n this.base(arguments, label, icon);\n\n // Initialize properties\n if (menu != null) {\n this.setMenu(menu);\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** The menu instance to show when tapping on the button */\n menu :\n {\n check : \"qx.ui.menu.Menu\",\n nullable : true,\n apply : \"_applyMenu\",\n event : \"changeMenu\"\n },\n\n // overridden\n appearance :\n {\n refine : true,\n init : \"menubutton\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n // overridden\n _applyVisibility : function(value, old) {\n this.base(arguments, value, old);\n\n // hide the menu too\n var menu = this.getMenu();\n if (value != \"visible\" && menu) {\n menu.hide();\n }\n },\n\n\n // property apply\n _applyMenu : function(value, old)\n {\n if (old)\n {\n old.removeListener(\"changeVisibility\", this._onMenuChange, this);\n old.resetOpener();\n }\n\n if (value)\n {\n value.addListener(\"changeVisibility\", this._onMenuChange, this);\n value.setOpener(this);\n\n value.removeState(\"submenu\");\n value.removeState(\"contextmenu\");\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Positions and shows the attached menu widget.\n *\n * @param selectFirst {Boolean?false} Whether the first menu button should be selected\n */\n open : function(selectFirst)\n {\n var menu = this.getMenu();\n\n if (menu)\n {\n // Hide all menus first\n qx.ui.menu.Manager.getInstance().hideAll();\n\n // Open the attached menu\n menu.setOpener(this);\n menu.open();\n\n // Select first item\n if (selectFirst)\n {\n var first = menu.getSelectables()[0];\n if (first) {\n menu.setSelectedButton(first);\n }\n }\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Listener for visibility property changes of the attached menu\n *\n * @param e {qx.event.type.Data} Property change event\n */\n _onMenuChange : function(e)\n {\n var menu = this.getMenu();\n\n if (menu.isVisible()) {\n this.addState(\"pressed\");\n } else {\n this.removeState(\"pressed\");\n }\n },\n\n\n // overridden\n _onPointerDown : function(e) {\n // call the base function to get into the capture phase [BUG #4340]\n this.base(arguments, e);\n\n // only open on left clicks [BUG #5125]\n if(e.getButton() != \"left\") {\n return;\n }\n\n var menu = this.getMenu();\n if (menu) {\n // Toggle sub menu visibility\n if (!menu.isVisible()) {\n this.open();\n } else {\n menu.exclude();\n }\n\n // Event is processed, stop it for others\n e.stopPropagation();\n }\n },\n\n\n // overridden\n _onPointerUp : function(e) {\n // call base for firing the execute event\n this.base(arguments, e);\n\n // Just stop propagation to stop menu manager\n // from getting the event\n e.stopPropagation();\n },\n\n\n // overridden\n _onPointerOver : function(e) {\n // Add hovered state\n this.addState(\"hovered\");\n },\n\n\n // overridden\n _onPointerOut : function(e) {\n // Just remove the hover state\n this.removeState(\"hovered\");\n },\n\n\n // overridden\n _onKeyDown : function(e)\n {\n switch(e.getKeyIdentifier())\n {\n case \"Enter\":\n this.removeState(\"abandoned\");\n this.addState(\"pressed\");\n\n var menu = this.getMenu();\n if (menu)\n {\n // Toggle sub menu visibility\n if (!menu.isVisible()) {\n this.open();\n } else {\n menu.exclude();\n }\n }\n\n e.stopPropagation();\n }\n },\n\n\n // overridden\n _onKeyUp : function(e) {\n // no action required here\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.navigation.UserMenuButton\", {\n extend: qx.ui.form.MenuButton,\n\n construct: function() {\n this.base(arguments);\n\n const authData = osparc.auth.Data.getInstance();\n\n const menu = new osparc.navigation.UserMenu();\n osparc.utils.Utils.setIdToWidget(menu, \"userMenuMenu\");\n this.set({\n width: 40,\n height: 40,\n font: \"text-14\",\n allowShrinkX: false,\n allowShrinkY: false,\n allowGrowX: false,\n allowGrowY: false,\n menu\n });\n\n this.getContentElement().setStyles({\n \"border-radius\": \"20px\"\n });\n this.getChildControl(\"icon\").getContentElement().setStyles({\n \"border-radius\": \"16px\"\n });\n osparc.utils.Utils.setIdToWidget(this, \"userMenuBtn\");\n\n const store = osparc.store.Store.getInstance();\n this.__bindWalletToHalo();\n store.addListener(\"changeContextWallet\", () => this.__bindWalletToHalo());\n\n const preferencesSettings = osparc.Preferences.getInstance();\n preferencesSettings.addListener(\"changeCreditsWarningThreshold\", () => this.__updateHaloColor());\n\n const myUsername = authData.getUsername() || \"Username\";\n const myEmail = authData.getEmail() || \"bizzy@itis.ethz.ch\";\n const icon = this.getChildControl(\"icon\");\n authData.bind(\"role\", this, \"icon\", {\n converter: role => {\n if ([\"anonymous\", \"guest\"].includes(role)) {\n icon.getContentElement().setStyles({\n \"margin-left\": \"0px\"\n });\n return \"@FontAwesome5Solid/user-secret/28\";\n }\n icon.getContentElement().setStyles({\n \"margin-left\": \"-4px\"\n });\n return osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32);\n }\n });\n },\n\n members: {\n __forceNullColor: null,\n\n __bindWalletToHalo: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (contextWallet) {\n this.__forceNullColor = osparc.product.Utils.forceNullCreditsColor(contextWallet);\n\n this.__updateHaloColor();\n contextWallet.addListener(\"changeCreditsAvailable\", () => this.__updateHaloColor());\n }\n },\n\n __updateHaloColor: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (contextWallet) {\n const credits = contextWallet.getCreditsAvailable();\n if (credits !== null) {\n if (this.__forceNullColor) {\n osparc.service.StatusUI.getStatusHalo(this, null, 100);\n } else {\n const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make halo red\n const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, \"strong-main\");\n const color = qx.theme.manager.Color.getInstance().resolve(creditsColor);\n osparc.service.StatusUI.getStatusHalo(this, color, progress);\n }\n }\n }\n },\n\n populateMenu: function() {\n this.getMenu().populateMenu();\n },\n\n populateMenuCompact: function() {\n this.getMenu().populateMenuCompact();\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * The menu is a popup like control which supports buttons. It comes\n * with full keyboard navigation and an improved timeout based pointer\n * control behavior.\n *\n * This class is the container for all derived instances of\n * {@link qx.ui.menu.AbstractButton}.\n *\n * @childControl slidebar {qx.ui.menu.MenuSlideBar} shows a slidebar to easily navigate inside the menu (if too little space is left)\n */\nqx.Class.define(\"qx.ui.menu.Menu\",\n{\n extend : qx.ui.core.Widget,\n\n include : [\n qx.ui.core.MPlacement,\n qx.ui.core.MRemoteChildrenHandling\n ],\n\n\n construct : function()\n {\n this.base(arguments);\n\n // Use hard coded layout\n this._setLayout(new qx.ui.menu.Layout);\n\n // Automatically add to application's root\n var root = this.getApplicationRoot();\n root.add(this);\n\n // Register pointer listeners\n this.addListener(\"pointerover\", this._onPointerOver);\n this.addListener(\"pointerout\", this._onPointerOut);\n\n // add resize listener\n this.addListener(\"resize\", this._onResize, this);\n root.addListener(\"resize\", this._onResize, this);\n\n this._blocker = new qx.ui.core.Blocker(root);\n\n // Initialize properties\n this.initVisibility();\n this.initKeepFocus();\n this.initKeepActive();\n },\n\n\n\n properties :\n {\n /*\n ---------------------------------------------------------------------------\n WIDGET PROPERTIES\n ---------------------------------------------------------------------------\n */\n\n // overridden\n appearance :\n {\n refine : true,\n init : \"menu\"\n },\n\n // overridden\n allowGrowX :\n {\n refine : true,\n init: false\n },\n\n // overridden\n allowGrowY :\n {\n refine : true,\n init: false\n },\n\n // overridden\n visibility :\n {\n refine : true,\n init : \"excluded\"\n },\n\n // overridden\n keepFocus :\n {\n refine : true,\n init : true\n },\n\n // overridden\n keepActive :\n {\n refine : true,\n init : true\n },\n\n\n /*\n ---------------------------------------------------------------------------\n STYLE OPTIONS\n ---------------------------------------------------------------------------\n */\n\n /** The spacing between each cell of the menu buttons */\n spacingX :\n {\n check : \"Integer\",\n apply : \"_applySpacingX\",\n init : 0,\n themeable : true\n },\n\n /** The spacing between each menu button */\n spacingY :\n {\n check : \"Integer\",\n apply : \"_applySpacingY\",\n init : 0,\n themeable : true\n },\n\n /**\n * Default icon column width if no icons are rendered.\n * This property is ignored as soon as an icon is present.\n */\n iconColumnWidth :\n {\n check : \"Integer\",\n init : 0,\n themeable : true,\n apply : \"_applyIconColumnWidth\"\n },\n\n /** Default arrow column width if no sub menus are rendered */\n arrowColumnWidth :\n {\n check : \"Integer\",\n init : 0,\n themeable : true,\n apply : \"_applyArrowColumnWidth\"\n },\n\n /**\n * Color of the blocker\n */\n blockerColor :\n {\n check : \"Color\",\n init : null,\n nullable: true,\n apply : \"_applyBlockerColor\",\n themeable: true\n },\n\n /**\n * Opacity of the blocker\n */\n blockerOpacity :\n {\n check : \"Number\",\n init : 1,\n apply : \"_applyBlockerOpacity\",\n themeable: true\n },\n\n\n /*\n ---------------------------------------------------------------------------\n FUNCTIONALITY PROPERTIES\n ---------------------------------------------------------------------------\n */\n\n /** The currently selected button */\n selectedButton :\n {\n check : \"qx.ui.core.Widget\",\n nullable : true,\n apply : \"_applySelectedButton\"\n },\n\n /** The currently opened button (sub menu is visible) */\n openedButton :\n {\n check : \"qx.ui.core.Widget\",\n nullable : true,\n apply : \"_applyOpenedButton\"\n },\n\n /** Widget that opened the menu */\n opener :\n {\n check : \"qx.ui.core.Widget\",\n nullable : true\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n BEHAVIOR PROPERTIES\n ---------------------------------------------------------------------------\n */\n\n /** Interval in ms after which sub menus should be opened */\n openInterval :\n {\n check : \"Integer\",\n themeable : true,\n init : 250,\n apply : \"_applyOpenInterval\"\n },\n\n /** Interval in ms after which sub menus should be closed */\n closeInterval :\n {\n check : \"Integer\",\n themeable : true,\n init : 250,\n apply : \"_applyCloseInterval\"\n },\n\n /** Blocks the background if value is
true */\n blockBackground :\n {\n check : \"Boolean\",\n themeable : true,\n init : false\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n\n __scheduledOpen : null,\n __onAfterSlideBarAdd : null,\n\n /** @type {qx.ui.core.Blocker} blocker for background blocking */\n _blocker : null,\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Opens the menu and configures the opener\n */\n open : function()\n {\n if (this.getOpener() != null)\n {\n var isPlaced = this.placeToWidget(this.getOpener(), true);\n if(isPlaced) {\n this.__updateSlideBar();\n this.show();\n\n this._placementTarget = this.getOpener();\n } else {\n this.warn(\"Could not open menu instance because 'opener' widget is not visible\");\n }\n } else {\n this.warn(\"The menu instance needs a configured 'opener' widget!\");\n }\n },\n\n\n /**\n * Opens the menu at the pointer position\n *\n * @param e {qx.event.type.Pointer} Pointer event to align to\n */\n openAtPointer : function(e)\n {\n this.placeToPointer(e);\n this.__updateSlideBar();\n this.show();\n\n this._placementTarget = {\n left: e.getDocumentLeft(),\n top: e.getDocumentTop()\n };\n },\n\n\n /**\n * Opens the menu in relation to the given point\n *\n * @param point {Map} Coordinate of any point with the keys left\n * and top.\n */\n openAtPoint : function(point)\n {\n this.placeToPoint(point);\n this.__updateSlideBar();\n this.show();\n\n this._placementTarget = point;\n },\n\n\n /**\n * Convenience method to add a separator to the menu\n */\n addSeparator : function() {\n this.add(new qx.ui.menu.Separator);\n },\n\n\n /**\n * Returns the column sizes detected during the pre-layout phase\n *\n * @return {Array} List of all column widths\n */\n getColumnSizes : function() {\n return this._getMenuLayout().getColumnSizes();\n },\n\n\n /**\n * Return all selectable menu items.\n *\n * @return {qx.ui.core.Widget[]} selectable widgets\n */\n getSelectables : function() {\n var result = [];\n var children = this.getChildren();\n\n for (var i = 0; i < children.length; i++)\n {\n if (children[i].isEnabled()) {\n result.push(children[i]);\n }\n }\n\n return result;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyIconColumnWidth : function(value, old) {\n this._getMenuLayout().setIconColumnWidth(value);\n },\n\n\n // property apply\n _applyArrowColumnWidth : function(value, old) {\n this._getMenuLayout().setArrowColumnWidth(value);\n },\n\n\n // property apply\n _applySpacingX : function(value, old) {\n this._getMenuLayout().setColumnSpacing(value);\n },\n\n\n // property apply\n _applySpacingY : function(value, old) {\n this._getMenuLayout().setSpacing(value);\n },\n\n\n // overridden\n _applyVisibility : function(value, old)\n {\n this.base(arguments, value, old);\n\n var mgr = qx.ui.menu.Manager.getInstance();\n\n if (value === \"visible\")\n {\n // Register to manager (zIndex handling etc.)\n mgr.add(this);\n\n // Mark opened in parent menu\n var parentMenu = this.getParentMenu();\n if (parentMenu) {\n parentMenu.setOpenedButton(this.getOpener());\n }\n }\n else if (old === \"visible\")\n {\n // Deregister from manager (zIndex handling etc.)\n mgr.remove(this);\n\n // Unmark opened in parent menu\n var parentMenu = this.getParentMenu();\n if (parentMenu && parentMenu.getOpenedButton() == this.getOpener()) {\n parentMenu.resetOpenedButton();\n }\n\n // Clear properties\n this.resetOpenedButton();\n this.resetSelectedButton();\n }\n\n this.__updateBlockerVisibility();\n },\n\n\n /**\n * Updates the blocker's visibility\n */\n __updateBlockerVisibility : function()\n {\n if (this.isVisible())\n {\n if (this.getBlockBackground()) {\n var zIndex = this.getZIndex();\n this._blocker.blockContent(zIndex - 1);\n }\n }\n else\n {\n if (this._blocker.isBlocked()) {\n this._blocker.unblock();\n }\n }\n },\n\n\n /**\n * Get the parent menu. Returns null if the menu doesn't have a\n * parent menu.\n *\n * @return {qx.ui.core.Widget|null} The parent menu.\n */\n getParentMenu : function()\n {\n var widget = this.getOpener();\n if (!widget || !(widget instanceof qx.ui.menu.AbstractButton)) {\n return null;\n }\n\n if (widget && widget.getContextMenu() === this) {\n return null;\n }\n\n while (widget && !(widget instanceof qx.ui.menu.Menu)) {\n widget = widget.getLayoutParent();\n }\n return widget;\n },\n\n\n // property apply\n _applySelectedButton : function(value, old)\n {\n if (old) {\n old.removeState(\"selected\");\n }\n\n if (value) {\n value.addState(\"selected\");\n }\n },\n\n\n // property apply\n _applyOpenedButton : function(value, old)\n {\n if (old && old.getMenu()) {\n old.getMenu().exclude();\n }\n\n if (value) {\n value.getMenu().open();\n }\n },\n\n\n // property apply\n _applyBlockerColor : function(value, old) {\n this._blocker.setColor(value);\n },\n\n\n // property apply\n _applyBlockerOpacity : function(value, old) {\n this._blocker.setOpacity(value);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SCROLLING SUPPORT\n ---------------------------------------------------------------------------\n */\n\n // overridden\n getChildrenContainer : function() {\n return this.getChildControl(\"slidebar\", true) || this;\n },\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"slidebar\":\n var control = new qx.ui.menu.MenuSlideBar();\n\n var layout = this._getLayout();\n this._setLayout(new qx.ui.layout.Grow());\n\n var slidebarLayout = control.getLayout();\n control.setLayout(layout);\n slidebarLayout.dispose();\n\n var children = qx.lang.Array.clone(this.getChildren());\n for (var i=0; i rootHeight)\n {\n this._assertSlideBar(function() {\n this.setHeight(rootHeight - top);\n });\n }\n else\n {\n this.setHeight(null);\n }\n },\n\n\n /**\n * Schedules the addition of the slidebar and calls the given callback\n * after the slidebar has been added.\n *\n * @param callback {Function} the callback to call\n * @return {var|undefined} The return value of the callback if the slidebar\n * already exists, or undefined if it doesn't\n */\n _assertSlideBar : function(callback)\n {\n if (this.hasChildControl(\"slidebar\")) {\n return callback.call(this);\n }\n\n this.__onAfterSlideBarAdd = callback;\n qx.ui.core.queue.Widget.add(this);\n },\n\n\n // overridden\n syncWidget : function(jobs)\n {\n this.getChildControl(\"slidebar\");\n if (this.__onAfterSlideBarAdd)\n {\n this.__onAfterSlideBarAdd.call(this);\n delete this.__onAfterSlideBarAdd;\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * Update position if the menu or the root is resized\n */\n _onResize : function()\n {\n if (this.isVisible())\n {\n var target = this._placementTarget;\n if (!target) {\n return;\n } else if (target instanceof qx.ui.core.Widget) {\n this.placeToWidget(target, true);\n } else if (target.top !== undefined) {\n this.placeToPoint(target);\n } else {\n throw new Error(\"Unknown target: \" + target);\n }\n this.__updateSlideBar();\n }\n },\n\n\n /**\n * Event listener for pointerover event.\n *\n * @param e {qx.event.type.Pointer} pointerover event\n */\n _onPointerOver : function(e)\n {\n // Cache manager\n var mgr = qx.ui.menu.Manager.getInstance();\n\n // Be sure this menu is kept\n mgr.cancelClose(this);\n\n // Change selection\n var target = e.getTarget();\n if (target.isEnabled() && target instanceof qx.ui.menu.AbstractButton)\n {\n // Select button directly\n this.setSelectedButton(target);\n\n var subMenu = target.getMenu && target.getMenu();\n if (subMenu)\n {\n subMenu.setOpener(target);\n\n // Finally schedule for opening\n mgr.scheduleOpen(subMenu);\n\n // Remember scheduled menu for opening\n this.__scheduledOpen = subMenu;\n }\n else\n {\n var opened = this.getOpenedButton();\n if (opened) {\n mgr.scheduleClose(opened.getMenu());\n }\n\n if (this.__scheduledOpen)\n {\n mgr.cancelOpen(this.__scheduledOpen);\n this.__scheduledOpen = null;\n }\n }\n }\n else if (!this.getOpenedButton())\n {\n // When no button is opened reset the selection\n // Otherwise keep it\n this.resetSelectedButton();\n }\n },\n\n\n /**\n * Event listener for pointerout event.\n *\n * @param e {qx.event.type.Pointer} pointerout event\n */\n _onPointerOut : function(e)\n {\n // Cache manager\n var mgr = qx.ui.menu.Manager.getInstance();\n\n // Detect whether the related target is out of the menu\n if (!qx.ui.core.Widget.contains(this, e.getRelatedTarget()))\n {\n // Update selected property\n // Force it to the open sub menu in cases where that is opened\n // Otherwise reset it. Menus which are left by the cursor should\n // not show any selection.\n var opened = this.getOpenedButton();\n opened ? this.setSelectedButton(opened) : this.resetSelectedButton();\n\n // Cancel a pending close request for the currently\n // opened sub menu\n if (opened) {\n mgr.cancelClose(opened.getMenu());\n }\n\n // When leaving this menu to the outside, stop\n // all pending requests to open any other sub menu\n if (this.__scheduledOpen) {\n mgr.cancelOpen(this.__scheduledOpen);\n }\n }\n }\n },\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function()\n {\n if (!qx.core.ObjectRegistry.inShutDown) {\n qx.ui.menu.Manager.getInstance().remove(this);\n }\n\n this.getApplicationRoot().removeListener(\"resize\", this._onResize, this);\n this._placementTarget = null;\n this._disposeObjects(\"_blocker\");\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Tag data.\n */\n\nqx.Class.define(\"osparc.data.model.Tag\", {\n extend: qx.core.Object,\n\n /**\n * @param tagData {Object} Object containing the serialized Tag Data\n */\n construct: function(tagData) {\n this.base(arguments);\n\n this.set({\n tagId: tagData.id,\n name: tagData.name,\n description: tagData.description,\n color: tagData.color,\n myAccessRights: tagData.accessRights,\n });\n },\n\n properties: {\n tagId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeTagId\"\n },\n\n name: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeName\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDescription\"\n },\n\n color: {\n check: \"Color\",\n event: \"changeColor\",\n init: \"#303030\"\n },\n\n myAccessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeMyAccessRights\"\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeAccessRights\"\n },\n },\n\n statics: {\n getProperties: function() {\n return Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Tag));\n }\n },\n\n members: {\n serialize: function() {\n const jsonObject = {};\n const propertyKeys = this.self().getProperties();\n propertyKeys.forEach(key => {\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A page is the way to add content to a {@link TabView}. Each page gets a\n * button to switch to the page. Only one page is visible at a time.\n *\n * @childControl button {qx.ui.tabview.TabButton} tab button connected to the page\n */\nqx.Class.define(\"qx.ui.tabview.Page\",\n{\n extend : qx.ui.container.Composite,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param label {String} Initial label of the tab\n * @param icon {String} Initial icon of the tab\n */\n construct : function(label, icon)\n {\n this.base(arguments);\n\n this._createChildControl(\"button\");\n\n // init\n if (label != null) {\n this.setLabel(label);\n }\n\n if (icon != null) {\n this.setIcon(icon);\n }\n\n },\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /**\n * Fired by {@link qx.ui.tabview.TabButton} if the close button is tapped.\n */\n \"close\" : \"qx.event.type.Event\"\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"tabview-page\"\n },\n\n\n /** The label/caption/text of the Page's button. */\n label :\n {\n check : \"String\",\n init : \"\",\n apply : \"_applyLabel\"\n },\n\n\n /** Any URI String supported by qx.ui.basic.Image to display an icon in Page's button. */\n icon :\n {\n check : \"String\",\n init : \"\",\n apply : \"_applyIcon\",\n nullable: true\n },\n\n /** Indicates if the close button of a TabButton should be shown. */\n showCloseButton :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyShowCloseButton\"\n }\n\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates :\n {\n barTop : 1,\n barRight : 1,\n barBottom : 1,\n barLeft : 1,\n firstTab : 1,\n lastTab : 1\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyIcon : function(value, old) {\n var btn = this.getChildControl(\"button\");\n if (value) {\n btn.setIcon(value);\n btn._showChildControl(\"icon\");\n } else {\n btn._excludeChildControl(\"icon\");\n }\n },\n\n\n // property apply\n _applyLabel : function(value, old) {\n this.getChildControl(\"button\").setLabel(value);\n },\n\n\n // overridden\n _applyEnabled: function(value, old)\n {\n this.base(arguments, value, old);\n\n // delegate to non-child widget button\n // since enabled is inheritable value may be null\n var btn = this.getChildControl(\"button\");\n value == null ? btn.resetEnabled() : btn.setEnabled(value);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"button\":\n control = new qx.ui.tabview.TabButton;\n control.setAllowGrowX(true);\n control.setAllowGrowY(true);\n\n control.setUserData(\"page\", this);\n control.addListener(\"close\", this._onButtonClose, this);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyShowCloseButton : function(value, old) {\n this.getChildControl(\"button\").setShowCloseButton(value);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Fires an \"close\" event when the close button of the TabButton of the page\n * is tapped.\n */\n _onButtonClose : function() {\n this.fireEvent(\"close\");\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Returns the button used within this page. This method is used by\n * the TabView to access the button.\n *\n * @internal\n * @return {qx.ui.form.RadioButton} The button associated with this page.\n */\n getButton: function() {\n return this.getChildControl(\"button\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.preferences.pages.BasePage\", {\n extend: qx.ui.tabview.Page,\n\n construct: function(title, iconSrc = null) {\n this.base(arguments, null, iconSrc);\n\n this.setLayout(new qx.ui.layout.VBox(10));\n\n this.set({\n backgroundColor: \"window-popup-background\",\n paddingTop: 5,\n paddingLeft: 15\n });\n\n this.__showLabelOnTab(title);\n\n const tabButton = this.getChildControl(\"button\");\n if (tabButton.getIcon() && tabButton.getIcon().includes(\".svg\")) {\n tabButton.getChildControl(\"icon\").set({\n minWidth: 24,\n minHeight: 24,\n scale: true,\n });\n osparc.ui.basic.SVGImage.setColorToImage(tabButton.getChildControl(\"icon\"), \"text\");\n }\n },\n\n members: {\n __showLabelOnTab: function(title) {\n const tabButton = this.getChildControl(\"button\");\n tabButton.set({\n label: title,\n font: \"text-14\"\n });\n // eslint-disable-next-line no-underscore-dangle\n const buttonLayout = tabButton._getLayout();\n buttonLayout.setColumnAlign(0, \"center\", \"middle\"); // center icon\n buttonLayout.setColumnWidth(0, 24); // align texts\n buttonLayout.setSpacingX(5);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsIndicator\", {\n extend: qx.ui.core.Widget,\n\n construct: function(wallet = null) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this.setWallet(wallet);\n\n this.__updateCredits();\n },\n\n properties: {\n wallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changeWallet\",\n apply: \"__applyWallet\"\n },\n\n creditsAvailable: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeCreditsAvailable\",\n apply: \"__updateCredits\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"credits-text\":\n control = new qx.ui.basic.Label().set({\n alignX: \"center\",\n font: \"text-16\"\n });\n this._add(control);\n break;\n case \"credits-bar\":\n control = new qx.ui.core.Widget().set({\n height: 4\n });\n control.getContentElement().setStyles({\n \"border-radius\": \"2px\"\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyWallet: function(wallet) {\n if (wallet) {\n wallet.bind(\"creditsAvailable\", this, \"creditsAvailable\");\n }\n },\n\n __updateCredits: function() {\n const credits = this.getCreditsAvailable();\n if (credits !== null) {\n const label = this.getChildControl(\"credits-text\");\n label.set({\n value: credits === null ? \"-\" : osparc.desktop.credits.Utils.creditsToFixed(credits) + this.tr(\" credits\"),\n textColor: osparc.desktop.credits.Utils.creditsToColor(credits, \"text\")\n });\n\n const indicator = this.getChildControl(\"credits-bar\");\n const progress = credits > 0 ? osparc.desktop.credits.Utils.normalizeCredits(credits) : 100; // make bar red\n const creditsColor = osparc.desktop.credits.Utils.creditsToColor(credits, \"strong-main\");\n const color1 = qx.theme.manager.Color.getInstance().resolve(creditsColor);\n const textColor = qx.theme.manager.Color.getInstance().resolve(\"text\");\n const arr = qx.util.ColorUtil.stringToRgb(textColor);\n arr[3] = 0.5;\n const color2 = qx.util.ColorUtil.rgbToRgbString(arr);\n indicator.getContentElement().setStyles({\n background: `linear-gradient(90deg, ${color1} ${progress}%, ${color2} ${progress}%)`\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.WalletsView\", {\n extend: qx.ui.container.Stack,\n\n construct: function() {\n this.base(arguments);\n this.__buildLayout();\n },\n\n events: {\n \"buyCredits\": \"qx.event.type.Data\"\n },\n\n members: {\n __walletsList: null,\n __walletDetails: null,\n\n __buildLayout: function() {\n const walletsPage = this.__walletsList = new osparc.desktop.wallets.WalletsList();\n const walletDetails = this.__walletDetails = new osparc.desktop.wallets.WalletDetails();\n this.add(walletsPage);\n this.add(walletDetails);\n\n walletsPage.addListener(\"walletSelected\", e => {\n const walletId = e.getData();\n this.openWalletDetails(walletId);\n });\n\n walletDetails.addListener(\"backToWallets\", () => {\n this.setSelection([walletsPage]);\n walletsPage.loadWallets();\n });\n\n walletsPage.addListener(\"buyCredits\", e => this.fireDataEvent(\"buyCredits\", e.getData()));\n walletDetails.addListener(\"buyCredits\", e => this.fireDataEvent(\"buyCredits\", e.getData()));\n },\n\n openWalletDetails: function(walletId) {\n const openWalletDetails = walletId2 => {\n const walletModel = this.__walletsList.getWalletModel(walletId2);\n this.__walletDetails.setWallet(walletModel);\n this.setSelection([this.__walletDetails]);\n };\n if (this.__walletsList.isWalletsLoaded()) {\n openWalletDetails(walletId);\n this.__walletDetails.excludeShareButton()\n } else {\n this.__walletsList.addListenerOnce(\"changeWalletsLoaded\", () => openWalletDetails(walletId));\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.paymentMethods.PaymentMethods\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(20));\n\n const groupsStore = osparc.store.Groups.getInstance();\n const myGid = groupsStore.getMyGroupId();\n const store = osparc.store.Store.getInstance();\n const personalWallet = store.getWallets().find(wallet => wallet.getOwner() === myGid)\n this.__personalWalletId = personalWallet.getWalletId()\n this.__buildLayout()\n },\n\n properties: {\n paymentMethods: {\n check: \"Array\",\n init: [],\n nullable: false,\n apply: \"__applyPaymentMethods\"\n }\n },\n\n members: {\n __allPaymentMethods: null,\n\n __buildLayout: function() {\n this._removeAll();\n\n this.__introLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"Credit cards used for payments in your personal Credit Account\"),\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n this._add(this.__introLabel);\n\n const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10))\n this.__addPaymentMethodBtn = new qx.ui.form.Button().set({\n appearance: \"strong-button\",\n label: this.tr(\"Add Payment Method\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n this.__addPaymentMethodBtn.addListener(\"execute\", () => this.__addNewPaymentMethod(), this);\n buttonContainer.add(this.__addPaymentMethodBtn);\n this.__fetchingMsg = new qx.ui.basic.Atom().set({\n label: this.tr(\"Fetching Payment Methods\"),\n icon: \"@FontAwesome5Solid/circle-notch/12\",\n font: \"text-14\",\n visibility: \"excluded\"\n });\n this.__fetchingMsg.getChildControl(\"icon\").getContentElement().addClass(\"rotate\");\n buttonContainer.add(this.__fetchingMsg);\n this._add(buttonContainer);\n\n this.__listContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({\n allowStretchY: true\n });\n this._add(this.__listContainer, {\n flex: 1\n });\n\n this.__fetchPaymentMethods()\n },\n\n __addNewPaymentMethod: function() {\n const walletId = this.__personalWalletId;\n if (walletId) {\n const params = {\n url: {\n walletId\n }\n };\n osparc.data.Resources.fetch(\"paymentMethods\", \"init\", params)\n .then(data => {\n const gatewayWindow = this.__popUpPaymentGateway(data.paymentMethodId, data.paymentMethodFormUrl);\n osparc.wrapper.WebSocket.getInstance().getSocket().once(\"paymentMethodAcknowledged\", ({ paymentMethodId }) => {\n if (paymentMethodId === data.paymentMethodId) {\n gatewayWindow.close();\n this.__fetchPaymentMethods();\n }\n });\n });\n }\n },\n\n __cancelPaymentMethod: function(paymentMethodId) {\n // inform backend\n const params = {\n url: {\n walletId: this.__personalWalletId,\n paymentMethodId\n }\n };\n osparc.data.Resources.fetch(\"paymentMethods\", \"cancel\", params)\n .finally(() => this.__fetchPaymentMethods());\n },\n\n __windowClosed: function(paymentMethodId) {\n const msg = this.tr(\"The window was closed. Try again and follow the instructions inside the opened window.\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n this.__cancelPaymentMethod(paymentMethodId);\n },\n\n __popUpPaymentGateway: function(paymentMethodId, url) {\n const options = {\n width: 450,\n height: 600\n };\n\n const pgWindow = osparc.desktop.credits.PaymentGatewayWindow.popUp(\n url,\n \"Add payment method\",\n options\n );\n // listen to \"tap\" instead of \"execute\": the \"execute\" is not propagated\n pgWindow.getChildControl(\"close-button\").addListener(\"tap\", () => this.__windowClosed(paymentMethodId));\n\n return pgWindow;\n },\n\n __fetchPaymentMethods: function() {\n this.__fetchingMsg.setVisibility(\"visible\");\n const walletId = this.__personalWalletId;\n const params = {\n url: {\n walletId\n }\n };\n osparc.data.Resources.fetch(\"paymentMethods\", \"get\", params)\n .then(paymentMethods => {\n this.__listContainer.removeAll();\n if (paymentMethods.length) {\n this.__listContainer.add(this.__populatePaymentMethodsList(paymentMethods), {\n flex: 1\n });\n } else {\n this.__listContainer.add(new qx.ui.basic.Label().set({\n value: this.tr(\"No Payment Methods found\"),\n font: \"text-14\",\n rich: true,\n wrap: true\n }));\n }\n })\n .finally(() => this.__fetchingMsg.setVisibility(\"excluded\"))\n .catch(err => {\n console.error(err)\n osparc.FlashMessenger.getInstance().logAs(\n this.tr(\"We could not retrieve your saved payment methods. Please try again later.\"),\n \"ERROR\"\n );\n });\n },\n\n __populatePaymentMethodsList: function(allPaymentMethods) {\n this.__allPaymentMethods = allPaymentMethods;\n const paymentMethodsUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n height: 150,\n width: 150,\n backgroundColor: \"transparent\"\n });\n\n const paymentMethodsModel = this.__paymentMethodsModel = new qx.data.Array();\n const paymentMethodsCtrl = new qx.data.controller.List(paymentMethodsModel, paymentMethodsUIList, \"name\");\n paymentMethodsCtrl.setDelegate({\n createItem: () => new osparc.desktop.paymentMethods.PaymentMethodListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"idr\", \"key\", null, item, id);\n ctrl.bindProperty(\"idr\", \"model\", null, item, id);\n ctrl.bindProperty(\"walletId\", \"walletId\", null, item, id);\n ctrl.bindProperty(\"cardHolderName\", \"cardHolderName\", null, item, id);\n ctrl.bindProperty(\"cardType\", \"cardType\", null, item, id);\n ctrl.bindProperty(\"cardNumberMasked\", \"cardNumberMasked\", null, item, id);\n ctrl.bindProperty(\"expirationMonth\", \"expirationMonth\", null, item, id);\n ctrl.bindProperty(\"expirationYear\", \"expirationYear\", null, item, id);\n },\n configureItem: item => {\n item.addListener(\"openPaymentMethodDetails\", e => this.__openPaymentMethodDetails(e.getData()));\n item.addListener(\"deletePaymentMethod\", e => this.__deletePaymentMethod(e.getData()));\n }\n });\n\n allPaymentMethods.forEach(paymentMethod => {\n const paymentMethodModel = qx.data.marshal.Json.createModel(paymentMethod);\n paymentMethodsModel.append(paymentMethodModel);\n });\n\n return paymentMethodsUIList;\n },\n\n __findPaymentMethod: function(idr) {\n return this.__allPaymentMethods.find(paymentMethod => paymentMethod[\"idr\"] === idr);\n },\n\n __openPaymentMethodDetails: function(idr) {\n const paymentMethod = this.__findPaymentMethod(idr);\n if (paymentMethod) {\n osparc.desktop.paymentMethods.PaymentMethodDetails.popUpInWindow(paymentMethod);\n }\n },\n\n __deletePaymentMethod: function(idr) {\n const paymentMethod = this.__findPaymentMethod(idr);\n if (paymentMethod) {\n const params = {\n url: {\n walletId: paymentMethod[\"walletId\"],\n paymentMethodId: paymentMethod[\"idr\"]\n }\n };\n osparc.data.Resources.fetch(\"paymentMethods\", \"delete\", params)\n .then(() => this.__fetchPaymentMethods());\n }\n },\n\n getPaymentMethods: function() {\n return this.__allPaymentMethods || [];\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.Transactions\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n const today = osparc.utils.Utils.formatDateYyyyMmDd(new Date())\n this.__params = {\n filters: {\n from: today,\n until: today\n }\n }\n\n const groupsStore = osparc.store.Groups.getInstance();\n const myGid = groupsStore.getMyGroupId()\n const store = osparc.store.Store.getInstance();\n this.__personalWallet = store.getWallets().find(wallet => wallet.getOwner() === myGid);\n this.__personalWalletId = this.__personalWallet.getWalletId();\n this.__buildLayout();\n },\n\n members: {\n __buildLayout: function() {\n this._removeAll();\n const introContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox())\n this.__introLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"Top-up and refunds in US Dollars associated to your personal account show up here.\"),\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n introContainer.add(this.__introLabel)\n introContainer.add(new qx.ui.core.Spacer(), { flex: 1 })\n const refreshButton = new qx.ui.form.Button(this.tr(\"Reload\"), \"@FontAwesome5Solid/sync-alt/14\")\n refreshButton.addListener(\"execute\", () => this.__table && this.__table.getTableModel().reloadData())\n introContainer.add(refreshButton)\n this._add(introContainer);\n\n // FEATURE TOGGLE\n // const filterContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox())\n // this.__dateFilters = new osparc.desktop.credits.DateFilters();\n // this.__dateFilters.addListener(\"change\", e => this.__saveFilters(e.getData()));\n // filterContainer.add(this.__dateFilters);\n\n // filterContainer.add(new qx.ui.core.Spacer(), {\n // flex: 1\n // });\n\n // this.__exportButton = new qx.ui.form.Button(this.tr(\"Export\")).set({\n // allowStretchY: false,\n // alignY: \"bottom\"\n // });\n // this.__exportButton.addListener(\"execute\", () => {\n // console.log(\"export\", this.__params);\n // });\n // filterContainer.add(this.__exportButton);\n\n // this._add(filterContainer);\n\n this.__table = new osparc.desktop.credits.TransactionsTable().set({\n marginTop: 10\n })\n if (this.__personalWallet && this.__personalWallet.getMyAccessRights()[\"write\"]) {\n this._add(this.__table, { flex: 1 })\n this.__table.getTableModel().reloadData()\n } else {\n this._add(osparc.desktop.credits.Utils.getNoWriteAccessInformationLabel())\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.ResourceInTableViewer\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this._buildLayout();\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let layout;\n let control;\n switch (id) {\n case \"intro-text\":\n control = new qx.ui.basic.Label(\"Select a Credit Account:\");\n this._add(control);\n break;\n case \"wallet-selector-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(control);\n break;\n case \"wallet-selector\":\n control = new qx.ui.form.SelectBox().set({\n allowStretchX: false,\n width: 200\n });\n layout = this.getChildControl(\"wallet-selector-layout\");\n layout.add(control);\n break;\n case \"fetching-image\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/circle-notch/12\",\n alignX: \"center\",\n alignY: \"middle\",\n visibility: \"excluded\"\n });\n control.getContentElement().addClass(\"rotate\");\n layout = this.getChildControl(\"wallet-selector-layout\");\n layout.add(control);\n break;\n case \"filter-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(control);\n break;\n case \"date-filters\":\n control = new osparc.desktop.credits.DateFilters();\n control.addListener(\"change\", e => {\n const table = this.getChildControl(\"table\");\n table.getTableModel().setFilters(e.getData());\n table.getTableModel().reloadData();\n });\n layout = this.getChildControl(\"filter-layout\");\n layout.add(control);\n break;\n case \"export-button\":\n control = new qx.ui.form.Button(this.tr(\"Export\")).set({\n allowStretchY: false,\n alignY: \"bottom\",\n });\n control.addListener(\"execute\", () => this._handleExport());\n layout = this.getChildControl(\"filter-layout\");\n layout.add(control);\n break;\n case \"reload-button\":\n control = new qx.ui.form.Button(this.tr(\"Reload\"), \"@FontAwesome5Solid/sync-alt/14\").set({\n allowStretchY: false,\n alignY: \"bottom\"\n });\n control.addListener(\"execute\", () => {\n const table = this.getChildControl(\"table\");\n table.getTableModel().reloadData();\n });\n layout = this.getChildControl(\"filter-layout\");\n layout.add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n const introText = this.getChildControl(\"intro-text\");\n const walletSelectBox = this.getChildControl(\"wallet-selector\");\n this.getChildControl(\"fetching-image\");\n\n const filterLayout = this.getChildControl(\"filter-layout\");\n this.getChildControl(\"date-filters\");\n filterLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n const exportButton = this.getChildControl(\"export-button\");\n this.getChildControl(\"reload-button\");\n\n walletSelectBox.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const table = this.getChildControl(\"table\");\n table.getTableModel().setWalletId(this._getSelectWalletId());\n table.getTableModel().reloadData();\n }\n });\n\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const store = osparc.store.Store.getInstance();\n store.getWallets().forEach(wallet => {\n walletSelectBox.add(new qx.ui.form.ListItem(wallet.getName(), null, wallet));\n });\n } else {\n introText.setVisibility(\"excluded\");\n walletSelectBox.setVisibility(\"excluded\");\n exportButton.setVisibility(\"excluded\");\n this.getChildControl(\"table\");\n }\n },\n\n _getSelectWalletId: function() {\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const walletSelectBox = this.getChildControl(\"wallet-selector\");\n const selectedWallet = walletSelectBox.getSelection()[0].getModel();\n return selectedWallet.getWalletId();\n }\n return null;\n },\n\n _handleExport: function() {\n throw new Error(\"Abstract method called!\");\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.Usage\", {\n extend: osparc.desktop.credits.ResourceInTableViewer,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"table\": {\n const dateFilters = this.getChildControl(\"date-filters\");\n control = new osparc.desktop.credits.UsageTable(this._getSelectWalletId(), dateFilters.getValue()).set({\n marginTop: 10\n });\n const fetchingImage = this.getChildControl(\"fetching-image\");\n control.getTableModel().bind(\"isFetching\", fetchingImage, \"visibility\", {\n converter: isFetching => isFetching ? \"visible\" : \"excluded\"\n })\n this._add(control, { flex: 1 })\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _handleExport: function() {\n const reportUrl = new URL(\"/v0/services/-/usage-report\", window.location.origin);\n reportUrl.searchParams.append(\"wallet_id\", this._getSelectWalletId());\n const dateFilters = this.getChildControl(\"date-filters\");\n reportUrl.searchParams.append(\"filters\", JSON.stringify({ \"started_at\": dateFilters.getValue() }));\n window.open(reportUrl, \"_blank\");\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.Purchases\", {\n extend: osparc.desktop.credits.ResourceInTableViewer,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"table\": {\n const dateFilters = this.getChildControl(\"date-filters\");\n control = new osparc.desktop.credits.PurchasesTable(this._getSelectWalletId(), dateFilters.getValue()).set({\n marginTop: 10\n });\n const fetchingImage = this.getChildControl(\"fetching-image\");\n control.getTableModel().bind(\"isFetching\", fetchingImage, \"visibility\", {\n converter: isFetching => isFetching ? \"visible\" : \"excluded\"\n })\n this._add(control, { flex: 1 })\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.base(arguments);\n\n this.getChildControl(\"export-button\").exclude();\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.Checkouts\", {\n extend: osparc.desktop.credits.ResourceInTableViewer,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"table\": {\n const dateFilters = this.getChildControl(\"date-filters\");\n control = new osparc.desktop.credits.CheckoutsTable(this._getSelectWalletId(), dateFilters.getValue()).set({\n marginTop: 10\n });\n const fetchingImage = this.getChildControl(\"fetching-image\");\n control.getTableModel().bind(\"isFetching\", fetchingImage, \"visibility\", {\n converter: isFetching => isFetching ? \"visible\" : \"excluded\"\n })\n this._add(control, { flex: 1 })\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.base(arguments);\n\n this.getChildControl(\"export-button\").exclude();\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * User profile in preferences dialog\n *\n * - first name, last name, username, email\n *\n */\n\nqx.Class.define(\"osparc.desktop.account.ProfilePage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n this.__fetchProfile();\n\n this._add(this.__createProfileUser());\n this._add(this.__createPrivacySection());\n if (osparc.store.StaticInfo.getInstance().is2FARequired()) {\n this._add(this.__create2FASection());\n }\n this._add(this.__createPasswordSection());\n this._add(this.__createDeleteAccount());\n },\n\n members: {\n __userProfileData: null,\n __userProfileModel: null,\n __userPrivacyData: null,\n __userPrivacyModel: null,\n __userProfileForm: null,\n\n __fetchProfile: function() {\n osparc.data.Resources.getOne(\"profile\", {}, null, false)\n .then(profile => {\n this.__setDataToProfile(profile);\n this.__setDataToPrivacy(profile[\"privacy\"]);\n })\n .catch(err => {\n console.error(err);\n });\n },\n\n __setDataToProfile: function(data) {\n if (data) {\n this.__userProfileData = data;\n this.__userProfileModel.set({\n \"username\": data[\"userName\"] || \"\",\n \"firstName\": data[\"first_name\"] || \"\",\n \"lastName\": data[\"last_name\"] || \"\",\n \"email\": data[\"login\"],\n \"expirationDate\": data[\"expirationDate\"] || null,\n });\n }\n },\n\n __setDataToPrivacy: function(privacyData) {\n if (privacyData) {\n this.__userPrivacyData = privacyData;\n this.__userPrivacyModel.set({\n \"hideFullname\": \"hideFullname\" in privacyData ? privacyData[\"hideFullname\"] : true,\n \"hideEmail\": \"hideEmail\" in privacyData ? privacyData[\"hideEmail\"] : true,\n });\n }\n },\n\n __createProfileUser: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"User\"));\n box.set({\n alignX: \"left\",\n maxWidth: 500\n });\n\n const username = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"username\")\n });\n\n const firstName = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"First Name\")\n });\n const lastName = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"Last Name\")\n });\n\n const email = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"Email\"),\n readOnly: true\n });\n\n const form = this.__userProfileForm = new qx.ui.form.Form();\n form.add(username, \"Username\", null, \"username\");\n form.add(firstName, \"First Name\", null, \"firstName\");\n form.add(lastName, \"Last Name\", null, \"lastName\");\n form.add(email, \"Email\", null, \"email\");\n box.add(new qx.ui.form.renderer.Single(form));\n\n const expirationLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n paddingLeft: 16,\n visibility: \"excluded\"\n });\n const expirationDateLabel = new qx.ui.basic.Label(this.tr(\"Expiration date:\")).set({\n textColor: \"danger-red\"\n });\n expirationLayout.add(expirationDateLabel);\n const expirationDate = new qx.ui.basic.Label();\n expirationLayout.add(expirationDate);\n const infoLabel = this.tr(\"Please contact us by email:
\");\n const infoExtension = new osparc.ui.hint.InfoHint(infoLabel);\n const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();\n infoExtension.setHintText(infoLabel + supportEmail);\n expirationLayout.add(infoExtension);\n box.add(expirationLayout);\n\n // binding to a model\n const raw = {\n \"username\": \"\",\n \"firstName\": \"\",\n \"lastName\": \"\",\n \"email\": \"\",\n \"expirationDate\": null,\n };\n\n const model = this.__userProfileModel = qx.data.marshal.Json.createModel(raw);\n const controller = new qx.data.controller.Object(model);\n\n controller.addTarget(username, \"value\", \"username\", true);\n controller.addTarget(email, \"value\", \"email\", true);\n controller.addTarget(firstName, \"value\", \"firstName\", true, null, {\n converter: function(data) {\n return data.replace(/^\\w/, c => c.toUpperCase());\n }\n });\n controller.addTarget(lastName, \"value\", \"lastName\", true);\n controller.addTarget(expirationDate, \"value\", \"expirationDate\", false, {\n converter: expirationDay => {\n if (expirationDay) {\n expirationLayout.show();\n return osparc.utils.Utils.formatDate(new Date(expirationDay));\n }\n return \"\";\n }\n });\n\n // validation\n const emailValidator = new qx.ui.form.validation.Manager();\n emailValidator.add(email, qx.util.Validate.email());\n\n const namesValidator = new qx.ui.form.validation.Manager();\n namesValidator.add(firstName, qx.util.Validate.regExp(/[^\\.\\d]+/), this.tr(\"Avoid dots or numbers in text\"));\n namesValidator.add(lastName, qx.util.Validate.regExp(/^$|[^\\.\\d]+/), this.tr(\"Avoid dots or numbers in text\")); // allow also empty last name\n\n const updateBtn = new qx.ui.form.Button(\"Update Profile\").set({\n appearance: \"form-button\",\n alignX: \"right\",\n allowGrowX: false\n });\n box.add(updateBtn);\n\n updateBtn.addListener(\"execute\", () => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.user.update\", true)) {\n this.__resetUserData();\n return;\n }\n\n const patchData = {};\n if (this.__userProfileData[\"username\"] !== model.getUsername()) {\n patchData[\"userName\"] = model.getUsername();\n }\n if (this.__userProfileData[\"first_name\"] !== model.getFirstName()) {\n patchData[\"first_name\"] = model.getFirstName();\n }\n if (this.__userProfileData[\"last_name\"] !== model.getLastName()) {\n patchData[\"last_name\"] = model.getLastName();\n }\n\n if (Object.keys(patchData).length) {\n if (namesValidator.validate()) {\n const params = {\n data: patchData\n };\n osparc.data.Resources.fetch(\"profile\", \"patch\", params)\n .then(() => {\n this.__setDataToProfile(Object.assign(this.__userProfileData, params.data));\n osparc.auth.Manager.getInstance().updateProfile(this.__userProfileData);\n const msg = this.tr(\"Profile updated\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n })\n .catch(err => {\n this.__resetUserData();\n const msg = err.message || this.tr(\"Failed to update profile\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n console.error(err);\n });\n }\n }\n });\n\n return box;\n },\n\n __createPrivacySection: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Privacy\"));\n box.set({\n alignX: \"left\",\n maxWidth: 500\n });\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"For Privacy reasons, you might want to hide your First and Last Names and/or the Email to other users\"));\n box.add(label);\n\n const hideFullname = new qx.ui.form.CheckBox().set({\n value: true\n });\n const hideEmail = new qx.ui.form.CheckBox().set({\n value: true\n });\n\n const form = new qx.ui.form.Form();\n form.add(hideFullname, \"Hide Full Name\", null, \"hideFullname\");\n form.add(hideEmail, \"Hide Email\", null, \"hideEmail\");\n box.add(new qx.ui.form.renderer.Single(form));\n\n // binding to a model\n const raw = {\n \"hideFullname\": true,\n \"hideEmail\": true,\n };\n\n const model = this.__userPrivacyModel = qx.data.marshal.Json.createModel(raw);\n const controller = new qx.data.controller.Object(model);\n controller.addTarget(hideFullname, \"value\", \"hideFullname\", true);\n controller.addTarget(hideEmail, \"value\", \"hideEmail\", true);\n\n const privacyBtn = new qx.ui.form.Button(\"Update Privacy\").set({\n appearance: \"form-button\",\n alignX: \"right\",\n allowGrowX: false\n });\n box.add(privacyBtn);\n privacyBtn.addListener(\"execute\", () => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.user.update\", true)) {\n this.__resetPrivacyData();\n return;\n }\n const patchData = {\n \"privacy\": {}\n };\n if (this.__userPrivacyData[\"hideFullname\"] !== model.getHideFullname()) {\n patchData[\"privacy\"][\"hideFullname\"] = model.getHideFullname();\n }\n if (this.__userPrivacyData[\"hideEmail\"] !== model.getHideEmail()) {\n patchData[\"privacy\"][\"hideEmail\"] = model.getHideEmail();\n }\n\n if (\n \"hideFullname\" in patchData[\"privacy\"] &&\n patchData[\"privacy\"][\"hideFullname\"] === false &&\n this.__userProfileData[\"first_name\"] === null\n ) {\n this.__userProfileForm.getItem(\"firstName\").set({\n invalidMessage: qx.locale.Manager.tr(\"Name is required\"),\n valid: false\n });\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Set the Name first\"), \"WARNING\");\n return;\n }\n\n if (Object.keys(patchData[\"privacy\"]).length) {\n const params = {\n data: patchData\n };\n osparc.data.Resources.fetch(\"profile\", \"patch\", params)\n .then(() => {\n this.__setDataToPrivacy(Object.assign(this.__userPrivacyData, params.data[\"privacy\"]));\n const msg = this.tr(\"Privacy updated\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n })\n .catch(err => {\n this.__resetPrivacyData();\n const msg = err.message || this.tr(\"Failed to update privacy\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n console.error(err);\n });\n }\n });\n\n return box;\n },\n\n __create2FASection: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"2 Factor Authentication\"));\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Set your preferred method to use for two-factor authentication when signing in:\"));\n box.add(label);\n\n const form = new qx.ui.form.Form();\n\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const twoFAPreferenceSB = new qx.ui.form.SelectBox().set({\n allowGrowX: false\n });\n [{\n id: \"SMS\",\n label: \"SMS\"\n }, {\n id: \"EMAIL\",\n label: \"e-mail\"\n }, {\n id: \"DISABLED\",\n label: \"Disabled\"\n }].forEach(options => {\n const lItem = new qx.ui.form.ListItem(options.label, null, options.id);\n twoFAPreferenceSB.add(lItem);\n });\n const value = preferencesSettings.getTwoFAPreference();\n twoFAPreferenceSB.getSelectables().forEach(selectable => {\n if (selectable.getModel() === value) {\n twoFAPreferenceSB.setSelection([selectable]);\n }\n });\n twoFAPreferenceSB.addListener(\"changeValue\", e => {\n const currentSelection = e.getData();\n const lastSelection = e.getOldData();\n const selectedId = currentSelection.getModel();\n if (selectedId === \"DISABLED\") {\n const discourageTitle = this.tr(\"You are about to disable the 2FA\");\n const discourageText = this.tr(\"\\\n The 2 Factor Authentication is one more measure to prevent hackers from accessing your account with an additional layer of security. \\\n When you sign in, 2FA helps make sure that your resources and personal information stays private, safe and secure.\\\n \");\n const win = new osparc.ui.window.Confirmation(discourageTitle).set({\n caption: discourageTitle,\n message: discourageText,\n confirmText: this.tr(\"Yes, disable\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n osparc.Preferences.patchPreferenceField(\"twoFAPreference\", twoFAPreferenceSB, selectedId);\n } else {\n twoFAPreferenceSB.setSelection([lastSelection]);\n }\n }, this);\n } else {\n osparc.Preferences.patchPreferenceField(\"twoFAPreference\", twoFAPreferenceSB, selectedId);\n }\n });\n form.add(twoFAPreferenceSB, this.tr(\"2FA Method\"));\n\n box.add(new qx.ui.form.renderer.Single(form));\n\n return box;\n },\n\n __resetUserData: function() {\n this.__setDataToProfile(this.__userProfileData);\n },\n\n __resetPrivacyData: function() {\n this.__setDataToPrivacy(this.__userPrivacyData);\n },\n\n __createPasswordSection: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Password\"));\n box.set({\n alignX: \"left\",\n maxWidth: 500\n });\n\n const currentPassword = new osparc.ui.form.PasswordField().set({\n required: true,\n placeholder: this.tr(\"Your current password\")\n });\n\n const newPassword = new osparc.ui.form.PasswordField().set({\n required: true,\n placeholder: this.tr(\"Your new password\")\n });\n\n const confirm = new osparc.ui.form.PasswordField().set({\n required: true,\n placeholder: this.tr(\"Retype your new password\")\n });\n\n const form = new qx.ui.form.Form();\n form.add(currentPassword, \"Current Password\", null, \"curPassword\");\n form.add(newPassword, \"New Password\", null, \"newPassword\");\n form.add(confirm, \"Confirm New Password\", null, \"newPassword2\");\n box.add(new qx.ui.form.renderer.Single(form));\n\n const manager = new qx.ui.form.validation.Manager();\n manager.add(newPassword, osparc.auth.core.Utils.passwordLengthValidator);\n manager.add(confirm, osparc.auth.core.Utils.passwordLengthValidator);\n manager.setValidator(function(_itemForms) {\n return osparc.auth.core.Utils.checkSamePasswords(newPassword, confirm);\n });\n\n const resetBtn = new qx.ui.form.Button(\"Reset Password\").set({\n appearance: \"form-button\",\n alignX: \"right\",\n allowGrowX: false\n });\n box.add(resetBtn);\n\n resetBtn.addListener(\"execute\", () => {\n if (manager.validate()) {\n const params = {\n data: {\n current: currentPassword.getValue(),\n new: newPassword.getValue(),\n confirm: confirm.getValue()\n }\n };\n osparc.data.Resources.fetch(\"password\", \"post\", params)\n .then(data => {\n osparc.FlashMessenger.getInstance().log(data);\n [currentPassword, newPassword, confirm].forEach(item => {\n item.resetValue();\n });\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Failed to reset password\"), \"ERROR\");\n [currentPassword, newPassword, confirm].forEach(item => {\n item.resetValue();\n });\n });\n }\n });\n\n return box;\n },\n\n __createDeleteAccount: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Danger Zone\")).set({\n alignX: \"left\",\n maxWidth: 500\n });\n\n const deleteBtn = new qx.ui.form.Button(this.tr(\"Delete Account\")).set({\n appearance: \"danger-button\",\n alignX: \"right\",\n allowGrowX: false\n });\n deleteBtn.addListener(\"execute\", () => {\n const deleteAccount = new osparc.desktop.account.DeleteAccount();\n const win = osparc.ui.window.Window.popUpInWindow(deleteAccount, qx.locale.Manager.tr(\"Delete Account\"), 430, null);\n deleteAccount.addListener(\"cancel\", () => win.close());\n deleteAccount.addListener(\"deleted\", () => win.close());\n });\n box.add(deleteBtn);\n\n return box;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Til Schneider (til132)\n * Jonathan Weiß (jonathan_rass)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Abstract base class for iframe widgets.\n */\nqx.Class.define(\"qx.ui.embed.AbstractIframe\",\n{\n extend : qx.ui.core.Widget,\n\n /**\n * @param source {String} URL which should initially set.\n */\n construct : function(source)\n {\n this.base(arguments);\n\n if (source) {\n this.setSource(source);\n }\n\n this._getIframeElement().addListener(\"navigate\", this.__onNavigate, this);\n },\n\n\n events:\n {\n /**\n * The \"load\" event is fired after the iframe content has successfully been loaded.\n */\n \"load\" : \"qx.event.type.Event\",\n\n /**\n * The \"navigate\" event is fired whenever the location of the iframe\n * changes.\n *\n * Useful to track user navigation and internally used to keep the source\n * property in sync. Only works when the destination source is of same\n * origin than the page embedding the iframe.\n */\n \"navigate\" : \"qx.event.type.Data\"\n },\n\n\n properties :\n {\n /**\n * Source URL of the iframe.\n */\n source :\n {\n check : \"String\",\n apply : \"_applySource\",\n init : \"about:blank\"\n },\n\n /**\n * Name of the iframe.\n */\n frameName :\n {\n check : \"String\",\n init : \"\",\n apply : \"_applyFrameName\"\n }\n },\n\n\n members :\n {\n /**\n * Get the Element wrapper for the iframe\n *\n * @abstract\n * @return {qx.html.Iframe} the iframe element wrapper\n */\n _getIframeElement : function() {\n throw new Error(\"Abstract method call\");\n },\n\n\n // property apply\n _applySource : function(value, old) {\n this._getIframeElement().setSource(value);\n },\n\n\n // property apply\n _applyFrameName : function(value, old) {\n this._getIframeElement().setAttribute(\"name\", value);\n },\n\n\n\n /**\n * Get the DOM window object of an iframe.\n *\n * @return {Window} The DOM window object of the iframe.\n */\n getWindow : function() {\n return this._getIframeElement().getWindow();\n },\n\n\n /**\n * Get the DOM document object of an iframe.\n *\n * @return {Document} The DOM document object of the iframe.\n */\n getDocument : function() {\n return this._getIframeElement().getDocument();\n },\n\n\n /**\n * Get the HTML body element of the iframe.\n *\n * @return {Element} The DOM node of the body element of the iframe.\n */\n getBody : function() {\n return this._getIframeElement().getBody();\n },\n\n\n /**\n * Get the current name.\n *\n * @return {String} The iframe's name.\n */\n getName : function() {\n return this._getIframeElement().getName();\n },\n\n\n /**\n * Reload the contents of the iframe.\n *\n */\n reload : function() {\n this._getIframeElement().reload();\n },\n\n /**\n * Handle user navigation. Sync actual URL of iframe with source property.\n *\n * @param e {qx.event.type.Data} navigate event\n */\n __onNavigate: function(e) {\n var actualUrl = e.getData();\n\n if (actualUrl) {\n this.setSource(actualUrl);\n }\n\n this.fireDataEvent(\"navigate\", actualUrl);\n }\n }\n});\n","/* ************************************************************************\n Copyright: 2018 ITIS Foundation\n License: MIT\n Authors: Tobi Oetiker \n Utf8Check: äöü\n************************************************************************ */\n\n/**\n * When moving an iframe node in the dom, it reloads its content. This is\n * rather unfortunate when the content is another web application.\n * This Iframe widget solves the problem by attaching the iframe to a\n * permanent location and just moving it into position as the actual\n * widget manifests in different locations. There are limits as to where\n * the widget can be displayed as the widget hierarchy may prevent correct\n * visualisation. By default the iframe is attached to the root node of\n * the document, but an alternate attachment can be specified as required.\n *\n */\n\nqx.Class.define(\"osparc.widget.PersistentIframe\", {\n extend: qx.ui.embed.AbstractIframe,\n /**\n *\n * @param source {String} URL for the iframe content\n * @param poolEl {Element?} Dom node for attaching the iframe\n */\n construct: function(source, el) {\n this.base(arguments, source);\n\n this.__attachInterframeMessageHandlers();\n },\n\n statics: {\n getZoomLabel: function(maximize) {\n return maximize ? \"Restore\" : \"Maximize\";\n },\n\n getZoomIcon: function(maximize) {\n const iconURL = maximize ? \"window-restore\" : \"window-maximize\";\n return osparc.theme.common.Image.URLS[iconURL] + \"/20\";\n },\n\n getMaximizeWidgetId: function(maximize) {\n return maximize ? \"restoreBtn\" : \"maximizeBtn\";\n },\n\n createToolbarButton: function() {\n return new qx.ui.form.Button().set({\n appearance: \"fab-button\",\n zIndex: 20,\n padding: [0, 5],\n marginRight: 10\n });\n },\n\n HIDDEN_TOP: -10000\n },\n\n properties: {\n toolbarHeight: {\n check: \"Integer\",\n init: 25\n },\n\n /**\n * Show Restart-Maximize Toolbar\n */\n showToolbar: {\n check: \"Boolean\",\n init: true,\n event: \"changeShowToolbar\",\n apply: \"__applyShowToolbar\"\n }\n },\n\n events: {\n /** Fired for requesting a restart */\n \"restart\" : \"qx.event.type.Event\",\n /** Fired if the iframe is restored from a minimized or maximized state */\n \"restore\" : \"qx.event.type.Event\",\n /** Fired if the iframe is maximized */\n \"maximize\" : \"qx.event.type.Event\"\n },\n\n members: {\n __iframe: null,\n __syncScheduled: null,\n __buttonsContainer: null,\n __diskUsageIndicator: null,\n __reloadButton: null,\n __zoomButton: null,\n\n // override\n _createContentElement : function() {\n const iframe = this.__iframe = new qx.ui.embed.Iframe(this.getSource());\n const persistentIframe = this;\n iframe.addListener(\"load\", () => {\n const currentTheme = qx.theme.manager.Meta.getInstance().getTheme();\n if (currentTheme && persistentIframe.postThemeSwitch) {\n persistentIframe.postThemeSwitch(currentTheme.name);\n }\n this.fireEvent(\"load\");\n });\n iframe.addListener(\"navigate\", e => this.fireDataEvent(\"navigate\", e.getData()));\n\n let standin = new qx.html.Element(\"div\");\n let appRoot = this.getApplicationRoot();\n appRoot.add(iframe, {\n top: this.self().HIDDEN_TOP\n });\n const iframeEl = this._getIframeElement();\n const host = window.location.host;\n iframeEl.setAttribute(\"allow\", `clipboard-read; clipboard-write; from *.services.${host}`);\n\n const buttonsContainer = this.__buttonsContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\",\n alignY: \"middle\"\n }));\n\n const diskUsageIndicator = this.__diskUsageIndicator = new osparc.workbench.DiskUsageIndicator();\n diskUsageIndicator.getChildControl(\"disk-indicator\").set({\n margin: 0\n });\n buttonsContainer.add(diskUsageIndicator);\n\n const reloadButton = this.__reloadButton = this.self().createToolbarButton().set({\n label: this.tr(\"Reload\"),\n icon: \"@FontAwesome5Solid/redo-alt/14\",\n padding: [1, 5],\n gap: 10\n });\n reloadButton.addListener(\"execute\", e => {\n this.fireEvent(\"restart\");\n }, this);\n osparc.utils.Utils.setIdToWidget(reloadButton, \"iFrameRestartBtn\");\n buttonsContainer.add(reloadButton);\n\n const zoomButton = this.__zoomButton = this.self().createToolbarButton().set({\n label: this.self().getZoomLabel(false),\n icon: this.self().getZoomIcon(false)\n });\n osparc.utils.Utils.setIdToWidget(zoomButton, this.self().getMaximizeWidgetId(false));\n zoomButton.addListener(\"execute\", e => {\n this.maximizeIFrame(!this.hasState(\"maximized\"));\n }, this);\n buttonsContainer.add(zoomButton);\n\n appRoot.add(buttonsContainer, {\n top: this.self().HIDDEN_TOP\n });\n standin.addListener(\"appear\", e => {\n this.__syncIframePos();\n });\n standin.addListener(\"disappear\", e => {\n iframe.setLayoutProperties({\n top: this.self().HIDDEN_TOP\n });\n buttonsContainer.setLayoutProperties({\n top: this.self().HIDDEN_TOP\n });\n });\n\n this.addListener(\"move\", e => {\n // got to let the new layout render first or we don't see it\n this.__syncIframePos();\n });\n this.addListener(\"resize\", e => {\n // got to let the new layout render first or we don't see it\n this.__syncIframePos();\n });\n this.addListener(\"changeVisibility\", e => {\n var visibility = e.getData()[0];\n if (visibility == \"none\") {\n iframe.set({\n zIndex: -10000\n });\n } else {\n this.__syncIframePos();\n }\n });\n return standin;\n },\n\n getIframe: function() {\n return this.__iframe;\n },\n\n getDiskUsageIndicator: function() {\n return this.__diskUsageIndicator;\n },\n\n maximizeIFrame: function(maximize) {\n if (maximize) {\n this.fireEvent(\"maximize\");\n this.addState(\"maximized\");\n } else {\n this.fireEvent(\"restore\");\n this.removeState(\"maximized\");\n }\n const actionButton = this.__zoomButton;\n actionButton.set({\n label: this.self().getZoomLabel(maximize),\n icon: this.self().getZoomIcon(maximize)\n });\n osparc.utils.Utils.setIdToWidget(actionButton, this.self().getMaximizeWidgetId(maximize));\n qx.event.message.Bus.getInstance().dispatchByName(\"maximizeIframe\", this.hasState(\"maximized\"));\n },\n\n __syncIframePos: function() {\n if (this.__syncScheduled) {\n return;\n }\n this.__syncScheduled = true;\n window.setTimeout(() => {\n this.__syncScheduled = false;\n let iframeParentPos = qx.bom.element.Location.get(qx.bom.element.Location.getOffsetParent(this.__iframe.getContentElement().getDomElement()), \"scroll\");\n const domElement = this.getContentElement().getDomElement();\n if (domElement === null) {\n return;\n }\n let divPos = qx.bom.element.Location.get(domElement, \"scroll\");\n let divSize = qx.bom.element.Dimension.getSize(domElement);\n this.__iframe.setLayoutProperties({\n top: divPos.top - iframeParentPos.top + this.getToolbarHeight(),\n left: divPos.left - iframeParentPos.left\n });\n this.__iframe.set({\n width: divSize.width,\n height: divSize.height - this.getToolbarHeight()\n });\n\n this.__buttonsContainer.setLayoutProperties({\n top: (divPos.top - iframeParentPos.top),\n right: (iframeParentPos.right - iframeParentPos.left - divPos.right)\n });\n\n this.__buttonsContainer.setVisibility(this.isShowToolbar() ? \"visible\" : \"excluded\");\n }, 0);\n },\n\n __applyShowToolbar: function(show) {\n this.setToolbarHeight(show ? 25 : 0);\n this.__syncIframePos();\n },\n\n _applySource: function(newValue) {\n this.__iframe.setSource(newValue);\n },\n\n __attachInterframeMessageHandlers: function() {\n this.__attachTriggerers();\n this.__attachListeners();\n },\n\n __attachTriggerers: function() {\n this.postThemeSwitch = theme => {\n const msg = \"osparc;theme=\" + theme;\n this.sendMessageToIframe(msg);\n };\n\n this.themeSwitchHandler = msg => {\n this.postThemeSwitch(msg.getData());\n };\n qx.event.message.Bus.getInstance().subscribe(\"themeSwitch\", this.themeSwitchHandler);\n },\n\n sendMessageToIframe: function(msg) {\n const iframe = this._getIframeElement();\n if (iframe) {\n const iframeDomEl = iframe.getDomElement();\n const iframeSource = iframe.getSource();\n if (iframeDomEl && iframeSource) {\n try {\n iframeDomEl.contentWindow.postMessage(msg, iframeSource);\n } catch (err) {\n console.log(`Failed posting message ${msg} to iframe ${iframeSource}\\n${err.message}`);\n }\n }\n }\n },\n\n __attachListeners: function() {\n this.__iframe.addListener(\"load\", () => {\n const iframe = this._getIframeElement();\n if (iframe) {\n const iframeDomEl = iframe.getDomElement();\n if (iframeDomEl) {\n window.addEventListener(\"message\", message => {\n const data = message.data;\n if (data) {\n const origin = new URL(message.origin).hostname; // nodeId.services.deployment\n const nodeId = origin.split(\".\")[0];\n this.__handleIframeMessage(data, nodeId);\n }\n });\n }\n }\n }, this);\n },\n\n __handleIframeMessage: function(data, nodeId) {\n if (data[\"type\"]) {\n switch (data[\"type\"]) {\n case \"theme\": {\n // switch theme driven by the iframe\n const message = data[\"message\"];\n if (message && message.includes(\"osparc;theme=\")) {\n const themeName = message.replace(\"osparc;theme=\", \"\");\n const validThemes = osparc.ui.switch.ThemeSwitcher.getValidThemes();\n const themeFound = validThemes.find(theme => theme.basename === themeName);\n const themeManager = qx.theme.manager.Meta.getInstance();\n if (themeFound !== themeManager.getTheme()) {\n themeManager.setTheme(themeFound);\n }\n }\n break;\n }\n case \"openMarket\": {\n if (osparc.product.Utils.showS4LStore()) {\n const category = data[\"message\"] && data[\"message\"][\"category\"];\n setTimeout(() => osparc.vipMarket.MarketWindow.openWindow(nodeId, category), 100);\n }\n break;\n }\n case \"openWallets\": {\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n setTimeout(() => osparc.desktop.credits.BillingCenterWindow.openWindow(), 100);\n }\n break;\n }\n }\n }\n },\n\n // override\n _getIframeElement: function() {\n return this.__iframe._getIframeElement(); // eslint-disable-line no-underscore-dangle\n },\n\n /**\n * Cover the iframe with a transparent blocker div element. This prevents\n * pointer or key events to be handled by the iframe. To release the blocker\n * use {@link #release}.\n *\n */\n block : function() {\n this.__iframe.block();\n },\n\n /**\n * Release the blocker set by {@link #block}.\n *\n */\n release : function() {\n this.__iframe.release();\n }\n },\n\n destruct: function() {\n this.__iframe.exclude();\n this.__iframe.dispose();\n this.__iframe = undefined;\n qx.event.message.Bus.getInstance().unsubscribe(\"themeSwitch\", this.themeSwitchHandler);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* global SVG */\n/* eslint new-cap: [2, {capIsNewExceptions: [\"SVG\", \"M\", \"C\"]}] */\n\n/**\n * @asset(svg/svg.js)\n * @asset(svg/svg.path.js)\n * @asset(svg/svg.draggable.js)\n * @asset(svg/svg.foreignobject.js)\n * @ignore(SVG)\n */\n\n/**\n * A qooxdoo wrapper for\n * SVG\n */\n\nqx.Class.define(\"osparc.wrapper.Svg\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n statics: {\n NAME: \"svg.js\",\n VERSION: \"2.7.1\",\n URL: \"https://github.com/svgdotjs/svg.js\",\n\n curateCurveControls: function(controls) {\n [\n controls[0],\n controls[1],\n controls[2],\n controls[3]\n ].forEach(control => {\n if (Number.isNaN(control.x)) {\n control.x = 0;\n }\n if (Number.isNaN(control.y)) {\n control.y = 0;\n }\n });\n },\n\n drawCurve: function(draw, controls, dashed) {\n const edgeWidth = 3;\n const arrowSize = 4;\n const edgeColor = qx.theme.manager.Color.getInstance().getTheme().colors[\"workbench-edge-comp-active\"];\n\n osparc.wrapper.Svg.curateCurveControls(controls);\n\n const widerCurve = draw.path()\n .M(controls[0].x, controls[0].y)\n .C(controls[1], controls[2], controls[3])\n .style({\n cursor: \"pointer\"\n })\n .opacity(0)\n .stroke({\n width: edgeWidth*4\n });\n\n const curve = draw.path()\n .M(controls[0].x, controls[0].y)\n .C(controls[1], controls[2], controls[3])\n .fill(\"none\")\n .style({\n cursor: \"pointer\"\n })\n .stroke({\n width: edgeWidth,\n color: edgeColor,\n dasharray: dashed ? 5 : 0\n });\n curve.widerCurve = widerCurve;\n\n const portArrow = draw.marker(arrowSize, arrowSize, add => {\n add.path(\"M 0 0 V 4 L 2 2 Z\")\n .fill(edgeColor)\n .size(arrowSize, arrowSize);\n });\n curve.marker(\"end\", portArrow);\n curve.markers = [portArrow];\n\n return curve;\n },\n\n updateCurve: function(curve, controls) {\n if (curve.type === \"path\") {\n let mSegment = curve.getSegment(0);\n mSegment.coords = [controls[0].x, controls[0].y];\n let cSegment = curve.getSegment(1);\n cSegment.coords = [controls[1].x, controls[1].y, controls[2].x, controls[2].y, controls[3].x, controls[3].y];\n\n if (curve.widerCurve) {\n curve.widerCurve.replaceSegment(0, mSegment);\n curve.widerCurve.replaceSegment(1, cSegment);\n }\n curve.replaceSegment(0, mSegment);\n curve.replaceSegment(1, cSegment);\n }\n },\n\n removeCurve: function(curve) {\n if (curve.type === \"path\") {\n if (curve.widerCurve) {\n curve.widerCurve.remove();\n }\n curve.remove();\n }\n },\n\n /* ANNOTATIONS */\n\n getRectAttributes: function(rect) {\n const rectAttrs = rect.node.attributes;\n return {\n x: rectAttrs.x.value,\n y: rectAttrs.y.value,\n width: rectAttrs.width ? rectAttrs.width.value : null,\n height: rectAttrs.height ? rectAttrs.height.value : null\n };\n },\n\n drawAnnotationText: function(draw, x, y, label, color, fontSize) {\n const defaultFont = osparc.utils.Utils.getDefaultFont();\n const text = draw.text(label)\n .font({\n fill: color,\n size: (fontSize ? fontSize : defaultFont[\"size\"]) + \"px\",\n family: defaultFont[\"family\"]\n })\n .style({\n cursor: \"pointer\"\n })\n .move(x, y);\n text.back();\n return text;\n },\n\n drawAnnotationNote: function(draw, x, y, recipientName, note) {\n const lines = note.split(\"\\n\");\n const width = 200;\n const minHeight = 120;\n const titleHeight = 26;\n const padding = 5;\n const nLines = lines.length;\n const height = Math.max(minHeight, titleHeight + nLines*18);\n const trianSize = 25;\n const yellow = \"#FFFF01\"; // do not make it pure yellow, svg will change the hex value to a \"yellow\" string\n const orange = \"#FFA500\";\n x = parseInt(x);\n y = parseInt(y);\n\n const gNote = draw.nested().move(x, y);\n const rect = gNote.rect(width, height)\n .fill(yellow)\n .style({\n cursor: \"pointer\"\n });\n rect.back();\n gNote.add(rect);\n\n const trianOrangeCtrls = [\n [width-trianSize, height-trianSize],\n [width-trianSize, height],\n [width, height-trianSize]\n ];\n const trianOrange = gNote.polygon(trianOrangeCtrls.join())\n .fill(orange)\n .style({\n cursor: \"pointer\"\n })\n .move(width-trianSize, height-trianSize);\n trianOrange.back();\n gNote.add(trianOrange);\n\n const trianTransparentCtrls = [\n [width-trianSize, height],\n [width, height],\n [width, height-trianSize]\n ];\n const colorManager = qx.theme.manager.Color.getInstance();\n const trianTransparent = gNote.polygon(trianTransparentCtrls.join())\n .fill(colorManager.resolve(\"background-main\"))\n .style({\n cursor: \"pointer\"\n })\n .move(width-trianSize, height-trianSize);\n trianTransparent.back();\n colorManager.addListener(\"changeTheme\", () => {\n const bgColor = colorManager.resolve(\"background-main\");\n trianTransparent.fill(bgColor);\n }, this);\n gNote.add(trianTransparent);\n\n const separator = gNote.line(0, 0, width-2*padding, 0)\n .stroke({\n width: 2,\n color: orange\n })\n .move(padding, titleHeight);\n separator.back();\n gNote.add(separator);\n\n const defaultFont = osparc.utils.Utils.getDefaultFont();\n const title = gNote.text(recipientName)\n .font({\n fill: \"#000000\",\n size: (defaultFont[\"size\"]+1) + \"px\",\n family: defaultFont[\"family\"]\n })\n .move(padding, padding);\n title.back();\n gNote.add(title);\n\n // size and id are not relevant\n const fobj = gNote.foreignObject(100, 100).attr({id: \"fobj\"});\n fobj.appendChild(\"div\", {\n id: \"mydiv\",\n innerText: note\n });\n fobj\n .attr({\n width: width-2*padding,\n height: height-titleHeight-4\n })\n .move(padding, padding+titleHeight);\n const textChild = fobj.getChild(0);\n textChild.style.overflow = \"auto\";\n textChild.style.overflowWrap = \"anywhere\";\n textChild.style.fontFamily = defaultFont[\"family\"];\n textChild.style.fontSize = defaultFont[\"size\"] + \"px\";\n gNote.textChild = textChild;\n gNote.add(fobj);\n\n return gNote;\n },\n\n drawAnnotationRect: function(draw, width, height, x, y, color) {\n const rect = draw.rect(width, height)\n .fill(\"none\")\n .stroke({\n width: 2,\n color\n })\n .style({\n cursor: \"pointer\"\n })\n .move(x, y);\n rect.back();\n return rect;\n },\n\n updateText: function(representation, label) {\n if (representation.type === \"text\") {\n representation.text(label);\n } else if (representation.type === \"svg\") {\n // nested\n representation[\"textChild\"].innerText = label;\n }\n },\n\n updateTextColor: function(text, color) {\n text.font({\n fill: color\n });\n },\n\n updateTextSize: function(text, size) {\n text.font({\n size: size + \"px\"\n });\n },\n\n /* / ANNOTATIONS */\n\n drawDashedRect: function(draw, width, height, x, y) {\n const edgeColor = qx.theme.manager.Color.getInstance().getTheme().colors[\"workbench-edge-comp-active\"];\n const rect = draw.rect(width, height)\n .fill(\"none\")\n .stroke({\n // width: 5,\n color: edgeColor,\n dasharray: \"4, 4\"\n })\n .move(x, y);\n return rect;\n },\n\n drawFilledRect: function(draw, width, height, x, y) {\n const fillColor = qx.theme.manager.Color.getInstance().resolve(\"background-main-1\");\n const edgeColor = qx.theme.manager.Color.getInstance().resolve(\"background-main-2\");\n const rect = draw.rect(width, height)\n .fill(fillColor)\n .stroke({\n width: 1,\n color: edgeColor\n })\n .move(x, y);\n rect.back();\n return rect;\n },\n\n drawNodeUI: function(draw, width, height, radius, x, y) {\n const nodeUIColor = qx.theme.manager.Color.getInstance().resolve(\"background-main-3\");\n const rect = draw.rect(width, height)\n .fill(nodeUIColor)\n .stroke({\n width: 0.2,\n color: \"black\"\n })\n .move(x, y)\n .attr({\n rx: radius,\n ry: radius\n });\n return rect;\n },\n\n updateRect: function(rect, w, h, x, y) {\n rect.width(w);\n rect.height(h);\n rect.move(x, y);\n },\n\n updateItemPos: function(item, x, y) {\n item.move(x, y);\n },\n\n updateItemColor: function(item, color) {\n item.stroke({\n color: color\n });\n },\n\n removeItem: function(item) {\n item.remove();\n },\n\n updateCurveDashes: function(curve, dashed) {\n curve.attr({\n \"stroke-dasharray\": dashed ? 5 : 0\n });\n },\n\n updateCurveColor: function(curve, color) {\n if (curve.type === \"path\") {\n curve.attr({\n stroke: color\n });\n if (curve.markers) {\n curve.markers.forEach(markerDiv => {\n markerDiv.node.childNodes.forEach(node => {\n node.setAttribute(\"fill\", color);\n });\n });\n }\n }\n },\n\n drawPolygon: function(draw, controls) {\n const polygon = draw.polygon(controls.join())\n .fill(\"none\")\n .stroke({\n width: 0\n })\n .move(0, 0);\n return polygon;\n },\n\n updatePolygonColor: function(polygon, color) {\n polygon.fill(color);\n },\n\n drawPolyline: function(draw, controls) {\n const polyline = draw.polyline(controls.join())\n .fill(\"none\")\n .stroke({\n color: \"#BFBFBF\",\n width: 1\n });\n return polyline;\n },\n\n drawLine: function(draw, controls) {\n const line = draw.line(controls.join())\n .fill(\"none\")\n .stroke({\n color: \"#BFBFBF\",\n width: 1\n })\n .move(0, 0);\n return line;\n },\n\n drawPath: function(draw, controls) {\n const polygon = draw.path(controls)\n .fill(\"none\")\n .stroke({\n width: 0\n })\n .move(0, 0);\n return polygon;\n },\n\n makeDraggable: function(item, draggable = true) {\n item.style({\n cursor: \"move\"\n });\n item.draggable(draggable);\n }\n },\n\n members: {\n init: function() {\n return new Promise((resolve, reject) => {\n if (this.getLibReady()) {\n resolve();\n return;\n }\n\n // initialize the script loading\n const svgAndPlugins = [\n \"svg/svg.js\",\n \"svg/svg.draggable.js\",\n \"svg/svg.path.js\",\n \"svg/svg.foreignobject.js\"\n ];\n const dynLoader = new qx.util.DynamicScriptLoader(svgAndPlugins);\n dynLoader.addListenerOnce(\"ready\", () => {\n console.log(\"svgAndPlugins loaded\");\n this.setLibReady(true);\n resolve();\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n const data = e.getData();\n console.error(\"failed to load \" + data.script);\n reject(data);\n }, this);\n\n dynLoader.start();\n });\n },\n\n createEmptyCanvas: function(element) {\n return SVG(element);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(jsondiffpatch/jsondiffpatch.*js)\n * @ignore(jsondiffpatch)\n */\n\n/* global jsondiffpatch */\n\n/**\n * A qooxdoo wrapper for\n * JsonDiffPatch\n */\n\nqx.Class.define(\"osparc.wrapper.JsonDiffPatch\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n NAME: \"jsondiffpatch\",\n VERSION: \"0.3.11\",\n URL: \"https://github.com/benjamine/jsondiffpatch\"\n },\n\n construct: function() {\n this.base(arguments);\n },\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n members: {\n __diffPatcher: null,\n\n init: function() {\n // initialize the script loading\n let jsondiffpatchPath = \"jsondiffpatch/jsondiffpatch.min.js\";\n let dynLoader = new qx.util.DynamicScriptLoader([\n jsondiffpatchPath\n ]);\n\n dynLoader.addListenerOnce(\"ready\", e => {\n console.log(jsondiffpatchPath + \" loaded\");\n\n this.__diffPatcher = jsondiffpatch.create();\n\n this.setLibReady(true);\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n let data = e.getData();\n console.error(\"failed to load \" + data.script);\n }, this);\n\n dynLoader.start();\n },\n\n diff: function(obj1, obj2) {\n // https://github.com/benjamine/jsondiffpatch/blob/master/docs/deltas.md\n let delta = this.__diffPatcher.diff(obj1, obj2);\n return delta;\n },\n\n patch: function(obj, delta) {\n this.__diffPatcher.patch(obj, delta);\n return obj;\n },\n\n // deep clone\n clone: function(obj) {\n return this.__diffPatcher.clone(obj);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* global jsonTree */\n\n/**\n * @asset(jsontreeviewer/jsonTree.*)\n * @asset(jsontreeviewer/icons.svg)\n * @ignore(jsonTree)\n */\n\n/**\n * A qooxdoo wrapper for\n * JsonTreeViewer\n */\n\nqx.Class.define(\"osparc.wrapper.JsonTreeViewer\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n NAME: \"jsonTreeViewer\",\n VERSION: \"0.6.0\",\n URL: \"https://github.com/summerstyle/jsonTreeViewer\"\n },\n\n construct: function() {\n this.base(arguments);\n },\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n members: {\n init: function() {\n // initialize the script loading\n let jsonTreeViewerPath = \"jsontreeviewer/jsonTree.js\";\n let jsonTreeViewerCss = \"jsontreeviewer/jsonTree.css\";\n let jsonTreeViewerCssUri = qx.util.ResourceManager.getInstance().toUri(jsonTreeViewerCss);\n qx.module.Css.includeStylesheet(jsonTreeViewerCssUri);\n let dynLoader = new qx.util.DynamicScriptLoader([\n jsonTreeViewerPath\n ]);\n\n dynLoader.addListenerOnce(\"ready\", e => {\n console.log(jsonTreeViewerPath + \" loaded\");\n this.setLibReady(true);\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n let data = e.getData();\n console.error(\"failed to load \" + data.script);\n }, this);\n\n dynLoader.start();\n },\n\n print: function(data, wrapper) {\n jsonTree.create(data, wrapper);\n // tree.expand();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(DOMPurify/purify.min.js)\n * @ignore(DOMPurify)\n */\n\n/* global DOMPurify */\n\n/**\n * A qooxdoo wrapper for\n * DOMPurify\n */\n\nqx.Class.define(\"osparc.wrapper.DOMPurify\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n NAME: \"DOMPurify\",\n VERSION: \"2.0.0\",\n URL: \"https://github.com/cure53/DOMPurify\"\n },\n\n construct: function() {\n this.base(arguments);\n },\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n members: {\n __diffPatcher: null,\n\n init: function() {\n // initialize the script loading\n let purifyPath = \"DOMPurify/purify.min.js\";\n let dynLoader = new qx.util.DynamicScriptLoader([\n purifyPath\n ]);\n\n dynLoader.addListenerOnce(\"ready\", e => {\n console.log(purifyPath + \" loaded\");\n this.setLibReady(true);\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n let data = e.getData();\n console.error(\"failed to load \" + data.script);\n }, this);\n\n dynLoader.start();\n },\n\n sanitize: function(html) {\n // https://github.com/markedjs/marked/issues/655#issuecomment-383226346\n // Add a hook to make all links open a new window\n DOMPurify.addHook(\"afterSanitizeAttributes\", function(node) {\n // set all elements owning target to target=_blank\n if (\"target\" in node) {\n node.setAttribute(\"target\", \"_blank\");\n }\n // set non-HTML/MathML links to xlink:show=new\n if (\n !node.hasAttribute(\"target\") &&\n (node.hasAttribute(\"xlink:href\") || node.hasAttribute(\"href\"))\n ) {\n node.setAttribute(\"xlink:show\", \"new\");\n }\n });\n\n return DOMPurify.sanitize(html);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* global RadialMenu */\n\n/**\n * @asset(radialMenu/RadialMenuES5.js)\n * @asset(radialMenu/font-awesome.css)\n * @asset(radialMenu/fonts/*)\n * @ignore(RadialMenu)\n */\n\n/**\n * A qooxdoo wrapper for\n * RadialMenu\n * icons: https://victorribeiro.com/radialMenu/font-visualizer.html\n */\n\nqx.Class.define(\"osparc.wrapper.RadialMenu\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n statics: {\n NAME: \"RadialMenu\",\n VERSION: \"1.2.0\",\n URL: \"https://github.com/victorqribeiro/radialMenu\"\n },\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n members: {\n init: function() {\n return new Promise((resolve, reject) => {\n // initialize the script loading\n const radialMenuPath = \"radialMenu/RadialMenuES5.js\";\n const radialMenuFontsCss = \"radialMenu/font-awesome.css\";\n const radialMenuFontsCssUri = qx.util.ResourceManager.getInstance().toUri(radialMenuFontsCss);\n qx.module.Css.includeStylesheet(radialMenuFontsCssUri);\n const dynLoader = new qx.util.DynamicScriptLoader([\n radialMenuPath\n ]);\n\n dynLoader.addListenerOnce(\"ready\", e => {\n this.setLibReady(true);\n resolve(true);\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n let data = e.getData();\n console.error(\"failed to load \" + data.script);\n reject(data);\n }, this);\n\n dynLoader.start();\n });\n },\n\n createMenu: function(settings = {}) {\n const defSettings = this.__getDefaultSettings();\n const radialMenu = new RadialMenu(Object.assign(defSettings, settings));\n // give id to canvas\n return radialMenu;\n },\n\n __getDefaultSettings: function() {\n return {\n fontSize: 16,\n textColor: qx.theme.manager.Color.getInstance().resolve(\"text\"),\n backgroundColor: qx.theme.manager.Color.getInstance().resolve(\"background-main-2\"),\n hoverBackgroundColor: qx.theme.manager.Color.getInstance().resolve(\"background-main-4\"),\n borderColor: \"transparent\",\n innerCircle: 20,\n outerCircle: 60,\n rotation: 0, // radians\n buttonGap: 0.01 // radians\n // isFixed: true // we will handle the events\n };\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Services\", {\n type: \"static\",\n\n statics: {\n servicesCached: {},\n\n getServicesLatest: function(useCache = true) {\n return new Promise(resolve => {\n if (useCache && Object.keys(this.servicesCached)) {\n // return latest only\n const latest = this.__getLatestCached();\n resolve(latest);\n return;\n }\n\n osparc.data.Resources.getInstance().getAllPages(\"servicesV2\")\n .then(servicesArray => {\n const servicesObj = osparc.service.Utils.convertArrayToObject(servicesArray);\n this.__addHits(servicesObj);\n this.__addTSRInfos(servicesObj);\n this.__addExtraTypeInfos(servicesObj);\n\n // use response to populate servicesCached\n Object.values(servicesObj).forEach(serviceKey => {\n Object.values(serviceKey).forEach(srv => this.__addToCache(srv));\n });\n\n resolve(servicesObj);\n })\n .catch(err => {\n const msg = err.message || qx.locale.Manager.tr(\"Unable to fetch Services\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n console.error(err);\n });\n });\n },\n\n getServicesLatestList: function(excludeFrontend = true, excludeDeprecated = true) {\n return new Promise(resolve => {\n const servicesList = [];\n this.getServicesLatest()\n .then(async servicesLatest => {\n const serviceKeys = Object.keys(servicesLatest);\n for (let i=0; i {\n console.error(err);\n })\n .finally(() => resolve(servicesList));\n });\n },\n\n getService: function(key, version, useCache = true) {\n return new Promise(resolve => {\n if (useCache && this.__isInCache(key, version)) {\n resolve(this.servicesCached[key][version]);\n return;\n }\n\n const params = {\n url: osparc.data.Resources.getServiceUrl(key, version)\n };\n osparc.data.Resources.getOne(\"servicesV2\", params)\n .then(service => {\n this.__addHit(service);\n this.__addTSRInfo(service);\n this.__addExtraTypeInfo(service);\n this.__addToCache(service)\n resolve(service);\n })\n .catch(console.error);\n });\n },\n\n getResources: function(key, version) {\n return new Promise(resolve => {\n if (\n this.__isInCache(key, version) &&\n \"resources\" in this.servicesCached[key][version]\n ) {\n resolve(this.servicesCached[key][version][\"resources\"]);\n return;\n }\n\n const params = {\n url: osparc.data.Resources.getServiceUrl(key, version)\n };\n osparc.data.Resources.get(\"serviceResources\", params)\n .then(resources => {\n this.servicesCached[key][version][\"resources\"] = resources;\n resolve(resources);\n });\n });\n },\n\n getMetadata: function(key, version) {\n if (this.__isInCache(key, version)) {\n return this.servicesCached[key][version];\n }\n return null;\n },\n\n patchServiceData: function(serviceData, fieldKey, value) {\n const key = serviceData[\"key\"];\n const version = serviceData[\"version\"];\n const patchData = {};\n patchData[fieldKey] = value;\n const params = {\n url: osparc.data.Resources.getServiceUrl(key, version),\n data: patchData\n };\n return osparc.data.Resources.fetch(\"servicesV2\", \"patch\", params)\n .then(() => {\n this.servicesCached[key][version][fieldKey] = value;\n serviceData[fieldKey] = value;\n });\n },\n\n __addToCache: function(service) {\n const key = service.key;\n const version = service.version;\n if (!(key in this.servicesCached)) {\n this.servicesCached[key] = {};\n }\n this.servicesCached[key][version] = service;\n this.servicesCached[key][version][\"cached\"] = true;\n\n if (\"history\" in service) {\n service[\"history\"].forEach(historyEntry => {\n const hVersion = historyEntry.version;\n if (!(hVersion in this.servicesCached[key])) {\n this.servicesCached[key][hVersion] = {};\n this.servicesCached[key][hVersion][\"cached\"] = false;\n }\n // merge history data into current metadata\n this.servicesCached[key][hVersion] = {\n ...this.servicesCached[key][hVersion],\n ...historyEntry\n };\n });\n }\n },\n\n __isInCache: function(key, version) {\n return (\n key in this.servicesCached &&\n version in this.servicesCached[key] &&\n this.servicesCached[key][version][\"cached\"]\n );\n },\n\n __getLatestCached: function() {\n const latestServices = {};\n for (const key in this.servicesCached) {\n let versions = Object.keys(this.servicesCached[key]);\n versions = versions.sort(osparc.utils.Utils.compareVersionNumbers).reverse();\n const latest = this.servicesCached[key][versions[0]];\n latestServices[key] = osparc.utils.Utils.deepCloneObject(latest);\n }\n return latestServices;\n },\n\n __addTSRInfo: function(service) {\n if (osparc.data.model.Node.isComputational(service)) {\n osparc.metadata.Quality.attachQualityToObject(service);\n }\n },\n\n __addTSRInfos: function(servicesObj) {\n Object.values(servicesObj).forEach(serviceWVersion => {\n Object.values(serviceWVersion).forEach(service => {\n this.__addTSRInfo(service);\n });\n });\n },\n\n __addExtraTypeInfo: function(service) {\n service[\"xType\"] = service[\"type\"];\n if ([\"backend\", \"frontend\"].includes(service[\"xType\"])) {\n if (osparc.data.model.Node.isFilePicker(service)) {\n service[\"xType\"] = \"file\";\n } else if (osparc.data.model.Node.isParameter(service)) {\n service[\"xType\"] = \"parameter\";\n } else if (osparc.data.model.Node.isIterator(service)) {\n service[\"xType\"] = \"iterator\";\n } else if (osparc.data.model.Node.isProbe(service)) {\n service[\"xType\"] = \"probe\";\n }\n }\n },\n\n __addExtraTypeInfos: function(servicesObj) {\n Object.values(servicesObj).forEach(serviceWVersion => {\n Object.values(serviceWVersion).forEach(service => {\n this.__addExtraTypeInfo(service);\n });\n });\n },\n\n __addHit: function(service, favServices) {\n const cachedHit = favServices ? favServices : osparc.utils.Utils.localCache.getFavServices();\n const found = Object.keys(cachedHit).find(favSrv => favSrv === service[\"key\"]);\n service.hits = found ? cachedHit[found][\"hits\"] : 0;\n },\n\n __addHits: function(servicesObj) {\n const favServices = osparc.utils.Utils.localCache.getFavServices();\n Object.values(servicesObj).forEach(serviceWVersion => {\n Object.values(serviceWVersion).forEach(service => {\n this.__addHit(service, favServices);\n });\n });\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Tobias Oetiker (oetiker)\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\n/**\n * Widget used by StudyBrowser and Explore Browser for displaying Studies, Templates and Services\n */\n\nqx.Class.define(\"osparc.dashboard.GridButtonBase\", {\n extend: osparc.dashboard.CardBase,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.set({\n width: this.self().ITEM_WIDTH,\n height: this.self().ITEM_HEIGHT,\n padding: 0,\n allowGrowX: false\n });\n\n this.getChildControl(\"main-layout\");\n },\n\n statics: {\n ITEM_WIDTH: 190,\n ITEM_HEIGHT: 220,\n PADDING: 10,\n TITLE_PADDING: 6,\n SPACING_IN: 5,\n SPACING: 15,\n THUMBNAIL_SIZE: 50,\n POS: {\n TITLE: {\n row: 0,\n column: 0,\n rowSpan: 1,\n colSpan: 4\n },\n THUMBNAIL: {\n row: 2,\n column: 0,\n rowSpan: 1,\n colSpan: 4\n },\n TAGS: {\n row: 3,\n column: 0\n },\n FOOTER: {\n row: 4,\n column: 0,\n rowSpan: 1,\n colSpan: 4\n }\n },\n FPOS: {\n MODIFIED: {\n row: 0,\n column: 0,\n },\n UI_MODE: {\n row: 0,\n column: 1,\n },\n UPDATES: {\n row: 0,\n column: 2,\n },\n TSR: {\n row: 1,\n column: 0,\n },\n HITS: {\n row: 1,\n column: 1,\n },\n PERMISSION: {\n row: 1,\n column: 2,\n }\n }\n },\n\n events: {\n /** (Fired by {@link qx.ui.form.List}) */\n \"action\": \"qx.event.type.Event\"\n },\n\n members: {\n // overridden\n _createChildControlImpl: function(id) {\n let layout;\n let control;\n switch (id) {\n case \"main-layout\": {\n const grid = new qx.ui.layout.Grid();\n grid.setSpacing(this.self().SPACING_IN);\n grid.setRowFlex(2, 1);\n grid.setColumnFlex(0, 1);\n\n control = new qx.ui.container.Composite().set({\n maxWidth: this.self().ITEM_WIDTH,\n maxHeight: this.self().ITEM_HEIGHT\n });\n control.setLayout(grid);\n const header = this.getChildControl(\"header\");\n const body = this.getChildControl(\"body\");\n const footer = this.getChildControl(\"footer\");\n control.add(header, this.self().POS.TITLE);\n control.add(body, this.self().POS.THUMBNAIL);\n control.add(footer, this.self().POS.FOOTER);\n this._add(control, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n break;\n }\n case \"header\": {\n const hGrid = new qx.ui.layout.Grid().set({\n spacing: 0, // the sub-elements will take care of the padding\n });\n hGrid.setColumnFlex(1, 1);\n hGrid.setRowAlign(0, \"left\", \"middle\");\n control = new qx.ui.container.Composite().set({\n backgroundColor: \"background-card-overlay\",\n padding: 0,\n maxWidth: this.self().ITEM_WIDTH,\n maxHeight: this.self().ITEM_HEIGHT\n });\n control.setLayout(hGrid);\n break;\n }\n case \"body\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n decorator: \"main\",\n allowGrowY: true,\n allowGrowX: true,\n allowShrinkX: true,\n padding: this.self().PADDING\n });\n control.getContentElement().setStyles({\n \"border-width\": 0\n });\n break;\n case \"footer\": {\n const fGrid = new qx.ui.layout.Grid();\n fGrid.setSpacing(2);\n fGrid.setColumnFlex(0, 1);\n control = new qx.ui.container.Composite().set({\n backgroundColor: \"background-card-overlay\",\n padding: this.self().PADDING - 2,\n maxWidth: this.self().ITEM_WIDTH,\n maxHeight: this.self().ITEM_HEIGHT\n });\n control.setLayout(fGrid);\n break;\n }\n case \"icon\": {\n control = osparc.dashboard.CardBase.createCardIcon();\n layout = this.getChildControl(\"header\");\n layout.add(control, {\n column: 0,\n row: 0,\n });\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-light\",\n font: \"text-14\",\n padding: this.self().TITLE_PADDING,\n maxWidth: this.self().ITEM_WIDTH,\n });\n layout = this.getChildControl(\"header\");\n layout.addAt(control, 0, {\n column: 1,\n row: 0,\n });\n break;\n case \"subtitle\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(6)).set({\n anonymous: true,\n height: 20,\n padding: 6,\n paddingLeft: 20, // align with icon\n });\n layout = this.getChildControl(\"header\");\n layout.addAt(control, 0, {\n column: 0,\n row: 1,\n colSpan: 2,\n });\n break;\n case \"subtitle-icon\": {\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n allowGrowX: false,\n allowShrinkX: false\n });\n const subtitleLayout = this.getChildControl(\"subtitle\");\n subtitleLayout.addAt(control, 0);\n break;\n }\n case \"subtitle-text\": {\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-dark\",\n alignY: \"middle\",\n allowGrowX: true,\n allowShrinkX: true,\n rich: true,\n anonymous: true,\n font: \"text-12\",\n allowGrowY: false\n });\n const subtitleLayout = this.getChildControl(\"subtitle\");\n subtitleLayout.addAt(control, 1, {\n flex: 1\n });\n break;\n }\n case \"thumbnail\": {\n layout = this.getChildControl(\"body\");\n const maxWidth = this.self().ITEM_WIDTH;\n control = new osparc.ui.basic.Thumbnail(null, maxWidth, 124);\n control.getChildControl(\"image\").set({\n anonymous: true,\n alignY: \"middle\",\n alignX: \"center\",\n allowGrowX: true,\n allowGrowY: true\n });\n layout.getContentElement().setStyles({\n \"border-width\": \"0px\"\n });\n layout.add(control, {flex: 1});\n break;\n }\n case \"date-by\":\n control = new osparc.ui.basic.DateAndBy();\n layout = this.getChildControl(\"footer\");\n layout.add(control, this.self().FPOS.MODIFIED);\n break;\n case \"project-status\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n textColor: \"text\",\n height: 13,\n width: 13,\n margin: [0, 1]\n });\n layout = this.getChildControl(\"subtitle\");\n layout.set({\n visibility: \"visible\"\n });\n layout.addAt(control, 2);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n // overridden\n _applyIcon: function(value, old) {\n if (value) {\n const image = this.getChildControl(\"icon\").getChildControl(\"image\");\n image.set({\n source: value,\n });\n osparc.utils.Utils.setAltToImage(image, \"card-icon\");\n }\n },\n\n // overridden\n _applyThumbnail: function(value, old) {\n if (value.includes(\"@FontAwesome5Solid/\")) {\n value += this.self().THUMBNAIL_SIZE;\n const image = this.getChildControl(\"thumbnail\").getChildControl(\"image\");\n image.set({\n source: value,\n });\n\n [\n \"appear\",\n \"loaded\"\n ].forEach(eventName => {\n image.addListener(eventName, () => this.__fitThumbnailHeight(), this);\n });\n } else {\n this.getContentElement().setStyles({\n \"background-image\": `url(${value})`,\n \"background-repeat\": \"no-repeat\",\n \"background-size\": \"cover\", // auto width, 85% height\n \"background-position\": \"center center\",\n \"background-origin\": \"border-box\"\n });\n }\n },\n\n // overridden\n _applyTitle: function(value, old) {\n const label = this.getChildControl(\"title\");\n label.setValue(value);\n label.setToolTipText(value);\n },\n\n // overridden\n _applyDescription: function() {\n return;\n },\n\n __fitThumbnailHeight: function() {\n const thumbnailLayout = this.getChildControl(\"thumbnail\");\n let maxHeight = this.getHeight() - this.getPaddingTop() - this.getPaddingBottom() - 5;\n const checkThis = [\n \"title\",\n \"body\",\n \"footer\",\n \"tags\"\n ];\n const layout = this.getChildControl(\"main-layout\");\n // eslint-disable-next-line no-underscore-dangle\n layout._getChildren().forEach(child => {\n if (checkThis.includes(child.getSubcontrolId()) && child.getBounds()) {\n maxHeight -= (child.getBounds().height + this.self().SPACING_IN);\n if (child.getSubcontrolId() === \"tags\") {\n maxHeight -= 8;\n }\n }\n });\n // maxHeight -= 4; // for Roboto\n maxHeight -= 18; // for Manrope\n thumbnailLayout.getChildControl(\"image\").setMaxHeight(maxHeight);\n thumbnailLayout.setMaxHeight(maxHeight);\n thumbnailLayout.recheckSize();\n },\n\n /**\n * Event handler for the pointer over event.\n */\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n /**\n * Event handler for the pointer out event.\n */\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n /**\n * Event handler for filtering events.\n */\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n }\n },\n\n destruct : function() {\n this.removeListener(\"pointerover\", this._onPointerOver, this);\n this.removeListener(\"pointerout\", this._onPointerOut, this);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows lists user's studies.\n *\n * It is the entry point to start editing or creating a new study.\n *\n * Also takes care of retrieving the list of services and pushing the changes in the metadata.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let studyBrowser = new osparc.dashboard.StudyBrowser();\n * this.getRoot().add(studyBrowser);\n *
\n */\n\nqx.Class.define(\"osparc.dashboard.StudyBrowser\", {\n extend: osparc.dashboard.ResourceBrowserBase,\n\n construct: function() {\n this._resourceType = \"study\";\n this.base(arguments);\n\n const store = osparc.store.Store.getInstance();\n this.bind(\"currentContext\", store, \"studyBrowserContext\");\n },\n\n events: {\n \"publishTemplate\": \"qx.event.type.Data\",\n },\n\n properties: {\n currentContext: {\n check: [\"studiesAndFolders\", \"workspaces\", \"search\", \"trash\"],\n nullable: false,\n init: \"studiesAndFolders\",\n event: \"changeCurrentContext\"\n },\n\n currentWorkspaceId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentWorkspaceId\"\n },\n\n currentFolderId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentFolderId\"\n },\n\n multiSelection: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeMultiSelection\",\n apply: \"__applyMultiSelection\"\n },\n\n // Ordering by Possibilities:\n // field: type | uuid | name | description | prj_owner | creation_date | last_change_date\n // direction: asc | desc\n orderBy: {\n check: \"Object\",\n init: {\n field: \"last_change_date\",\n direction: \"desc\"\n }\n }\n },\n\n members: {\n __dontShowTutorial: null,\n __header: null,\n __workspacesList: null,\n __foldersList: null,\n __loadingFolders: null,\n __loadingWorkspaces: null,\n __dragWidget: null,\n\n // overridden\n initResources: function() {\n this._resourcesList = [];\n this.__getActiveStudy()\n .then(() => {\n this.getChildControl(\"resources-layout\");\n this.__attachEventHandlers();\n // set by the url or active study\n const loadStudyId = osparc.store.Store.getInstance().getCurrentStudyId();\n if (loadStudyId) {\n const cancelCB = () => this.reloadResources();\n const isStudyCreation = false;\n this._startStudyById(loadStudyId, null, cancelCB, isStudyCreation);\n } else {\n this.reloadResources();\n }\n // \"Starting...\" page\n this._hideLoadingPage();\n\n // since all the resources (templates, users, orgs...) were already loaded, notifications can be built\n osparc.data.Resources.get(\"notifications\")\n .then(notifications => {\n osparc.notification.Notifications.getInstance().addNotifications(notifications);\n });\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n },\n\n __getActiveStudy: function() {\n const params = {\n url: {\n tabId: osparc.utils.Utils.getClientSessionID()\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"getActive\", params)\n .then(studyData => {\n if (studyData) {\n osparc.store.Store.getInstance().setCurrentStudyId(studyData[\"uuid\"]);\n }\n })\n .catch(err => console.error(err));\n },\n\n reloadResources: function() {\n if (\n osparc.data.Permissions.getInstance().canDo(\"studies.user.read\") &&\n osparc.auth.Manager.getInstance().isLoggedIn()\n ) {\n this.__reloadFolders();\n this.__reloadStudies();\n } else {\n this.__resetStudiesList();\n }\n },\n\n reloadMoreResources: function() {\n this.__reloadStudies();\n },\n\n __reloadWorkspaces: function() {\n if (\n !osparc.auth.Manager.getInstance().isLoggedIn() ||\n this.getCurrentContext() === \"studiesAndFolders\" ||\n this.__loadingWorkspaces\n ) {\n return;\n }\n\n let request = null;\n switch (this.getCurrentContext()) {\n case \"search\": {\n const filterData = this._searchBarFilter.getFilterData();\n const text = filterData.text ? encodeURIComponent(filterData.text) : \"\";\n request = osparc.store.Workspaces.getInstance().searchWorkspaces(text, this.getOrderBy());\n break;\n }\n case \"workspaces\": {\n request = osparc.store.Workspaces.getInstance().fetchWorkspaces();\n break;\n }\n case \"trash\":\n request = osparc.store.Workspaces.getInstance().fetchAllTrashedWorkspaces();\n break;\n }\n\n this.__loadingWorkspaces = true;\n this.__setWorkspacesToList([]);\n request\n .then(workspaces => {\n this.__setWorkspacesToList(workspaces);\n if (this.getCurrentContext() === \"trash\") {\n if (workspaces.length) {\n this.__header.getChildControl(\"empty-trash-button\").show();\n }\n }\n })\n .catch(console.error)\n .finally(() => {\n this.__addNewWorkspaceButton();\n this.__loadingWorkspaces = null;\n });\n },\n\n __reloadFolders: function() {\n if (\n !osparc.auth.Manager.getInstance().isLoggedIn() ||\n this.getCurrentContext() === \"workspaces\" ||\n this.__loadingFolders\n ) {\n return;\n }\n\n let request = null;\n switch (this.getCurrentContext()) {\n case \"search\": {\n const filterData = this._searchBarFilter.getFilterData();\n const text = filterData.text ? encodeURIComponent(filterData.text) : \"\"; // name, description and uuid\n request = osparc.store.Folders.getInstance().searchFolders(text, this.getOrderBy());\n break;\n }\n case \"studiesAndFolders\": {\n const workspaceId = this.getCurrentWorkspaceId();\n const folderId = this.getCurrentFolderId();\n request = osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy());\n break;\n }\n case \"trash\":\n request = osparc.store.Folders.getInstance().fetchAllTrashedFolders(this.getOrderBy());\n break;\n }\n\n this.__loadingFolders = true;\n this.__setFoldersToList([]);\n request\n .then(folders => {\n this.__setFoldersToList(folders);\n if (this.getCurrentContext() === \"trash\") {\n if (folders.length) {\n this.__header.getChildControl(\"empty-trash-button\").show();\n }\n }\n })\n .catch(console.error)\n .finally(() => {\n // In favor of the NewPlusButton\n if (!osparc.product.Utils.hasNewPlusButton()) {\n this.__addNewFolderButton();\n }\n this.__loadingFolders = null;\n });\n },\n\n __reloadStudies: function() {\n if (\n !osparc.auth.Manager.getInstance().isLoggedIn() ||\n this.getCurrentContext() === \"workspaces\" ||\n this._loadingResourcesBtn.isFetching()\n ) {\n return;\n }\n\n osparc.data.Resources.get(\"tasks\")\n .then(tasks => {\n if (tasks && tasks.length) {\n this.__tasksReceived(tasks);\n }\n });\n\n // Show \"Contact Us\" message if services.length === 0\n // Most probably is a product-stranger user (it can also be that the catalog is down)\n osparc.store.Services.getServicesLatest()\n .then(services => {\n if (Object.keys(services).length === 0) {\n const noAccessText = new qx.ui.basic.Label().set({\n selectable: true,\n rich: true,\n font: \"text-18\",\n paddingTop: 20\n });\n let msg = this.tr(\"It seems you don't have access to this product.\");\n msg += \"\";\n msg += \"\";\n msg += this.tr(\"Please contact us:\");\n msg += \"\";\n const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();\n noAccessText.setValue(msg + supportEmail);\n this._addToLayout(noAccessText);\n }\n });\n\n this._loadingResourcesBtn.setFetching(true);\n this._loadingResourcesBtn.setVisibility(\"visible\");\n this.__getNextStudiesRequest()\n .then(resp => {\n // Context might have been changed while waiting for the response.\n // The new call is on the way, therefore this response can be ignored.\n const contextChanged = this.__didContextChange(resp[\"params\"][\"url\"]);\n if (contextChanged) {\n return;\n }\n\n const studies = resp[\"data\"];\n this.__addStudiesToList(studies);\n if (this._resourcesContainer.getFlatList()) {\n this._resourcesContainer.getFlatList().nextRequest = resp[\"_links\"][\"next\"];\n }\n\n if (this.getCurrentContext() === \"trash\") {\n if (this._resourcesList.length) {\n this.__header.getChildControl(\"empty-trash-button\").show();\n }\n }\n\n // Show Quick Start if there are no studies in the root folder of the personal workspace\n const quickStartInfo = osparc.product.quickStart.Utils.getQuickStart();\n if (quickStartInfo) {\n const dontShow = osparc.utils.Utils.localCache.getLocalStorageItem(quickStartInfo.localStorageStr);\n if (dontShow === \"true\" || this.__dontShowTutorial) {\n return;\n }\n const nStudies = \"_meta\" in resp ? resp[\"_meta\"][\"total\"] : 0;\n if (\n nStudies === 0 &&\n this.getCurrentContext() === \"studiesAndFolders\" &&\n this.getCurrentWorkspaceId() === null &&\n this.getCurrentFolderId() === null\n ) {\n const quickStartWindow = quickStartInfo.tutorial();\n quickStartWindow.center();\n quickStartWindow.open();\n quickStartWindow.addListener(\"close\", () => {\n this.__dontShowTutorial = true;\n }, this);\n }\n }\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n // stop fetching\n if (this._resourcesContainer.getFlatList()) {\n this._resourcesContainer.getFlatList().nextRequest = null;\n }\n })\n .finally(() => {\n this._loadingResourcesBtn.setFetching(false);\n if (this._resourcesContainer.getFlatList()) {\n this._loadingResourcesBtn.setVisibility(this._resourcesContainer.getFlatList().nextRequest === null ? \"excluded\" : \"visible\");\n }\n this._moreResourcesRequired();\n });\n },\n\n __resetStudiesList: function() {\n this._resourcesList = [];\n // It will remove the study cards\n this._reloadCards();\n },\n\n __addStudiesToList: function(studiesList) {\n studiesList.forEach(study => study[\"resourceType\"] = \"study\");\n studiesList.forEach(study => {\n const idx = this._resourcesList.findIndex(std => std[\"uuid\"] === study[\"uuid\"]);\n if (idx === -1) {\n this._resourcesList.push(study);\n }\n });\n this.__reloadNewCards();\n\n studiesList.forEach(study => {\n const state = study[\"state\"];\n if (state && \"locked\" in state && state[\"locked\"][\"value\"] && state[\"locked\"][\"status\"] === \"CLOSING\") {\n // websocket might have already notified that the state was closed.\n // But the /projects calls response got after the ws message. Ask again to make sure\n const delay = 2000;\n const studyId = study[\"uuid\"];\n setTimeout(() => {\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(studyData => {\n this.__studyStateReceived(study[\"uuid\"], studyData[\"state\"]);\n });\n }, delay);\n }\n });\n },\n\n __setFoldersToList: function(folders) {\n this.__foldersList = folders;\n folders.forEach(folder => folder[\"resourceType\"] = \"folder\");\n this.__reloadFolderCards();\n },\n\n __setWorkspacesToList: function(workspaces) {\n this.__workspacesList = workspaces;\n workspaces.forEach(workspace => workspace[\"resourceType\"] = \"workspace\");\n this.__reloadWorkspaceCards();\n },\n\n _reloadCards: function() {\n const fetching = this._loadingResourcesBtn ? this._loadingResourcesBtn.getFetching() : false;\n const visibility = this._loadingResourcesBtn ? this._loadingResourcesBtn.getVisibility() : \"excluded\";\n\n this._resourcesContainer.setResourcesToList(this._resourcesList);\n const cards = this._resourcesContainer.reloadCards(\"studies\");\n this.__configureStudyCards(cards);\n\n this.__addNewStudyButtons();\n\n const loadMoreBtn = this.__createLoadMoreButton();\n loadMoreBtn.set({\n fetching,\n visibility\n });\n loadMoreBtn.addListener(\"appear\", () => this._moreResourcesRequired());\n this._resourcesContainer.addNonResourceCard(loadMoreBtn);\n\n osparc.filter.UIFilterController.dispatch(\"searchBarFilter\");\n },\n\n __reloadNewCards: function() {\n this._resourcesContainer.setResourcesToList(this._resourcesList);\n const cards = this._resourcesContainer.reloadNewCards();\n this.__configureStudyCards(cards);\n\n osparc.filter.UIFilterController.dispatch(\"searchBarFilter\");\n },\n\n // WORKSPACES\n __reloadWorkspaceCards: function() {\n this._resourcesContainer.setWorkspacesToList(this.__workspacesList);\n this._resourcesContainer.reloadWorkspaces();\n },\n\n __addNewWorkspaceButton: function() {\n if (this.getCurrentContext() !== \"workspaces\") {\n return;\n }\n\n const newWorkspaceCard = new osparc.dashboard.WorkspaceButtonNew();\n newWorkspaceCard.setCardKey(\"new-workspace\");\n newWorkspaceCard.subscribeToFilterGroup(\"searchBarFilter\");\n [\n \"workspaceCreated\",\n \"workspaceDeleted\",\n \"workspaceUpdated\",\n ].forEach(e => {\n newWorkspaceCard.addListener(e, () => this.__reloadWorkspaces());\n });\n this._resourcesContainer.addNewWorkspaceCard(newWorkspaceCard);\n },\n\n _workspaceSelected: function(workspaceId) {\n this._changeContext(\"studiesAndFolders\", workspaceId, null);\n },\n\n _workspaceUpdated: function() {\n this.__reloadWorkspaces();\n },\n\n _trashWorkspaceRequested: function(workspaceId) {\n osparc.store.Workspaces.getInstance().trashWorkspace(workspaceId)\n .then(() => {\n this.__reloadWorkspaces();\n const msg = this.tr(\"Successfully deleted\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.setTrashEmpty(false);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n });\n },\n\n _untrashWorkspaceRequested: function(workspace) {\n osparc.store.Workspaces.getInstance().untrashWorkspace(workspace)\n .then(() => {\n this.__reloadWorkspaces();\n const msg = this.tr(\"Successfully restored\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.evaluateTrashEmpty();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n });\n },\n\n _deleteWorkspaceRequested: function(workspaceId) {\n osparc.store.Workspaces.getInstance().deleteWorkspace(workspaceId)\n .then(() => {\n this.__reloadWorkspaces();\n const msg = this.tr(\"Successfully deleted\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.evaluateTrashEmpty();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n },\n // /WORKSPACES\n\n // FOLDERS\n __reloadFolderCards: function() {\n this._resourcesContainer.setFoldersToList(this.__foldersList);\n this._resourcesContainer.reloadFolders();\n },\n\n __addNewFolderButton: function() {\n if (this.getCurrentContext() !== \"studiesAndFolders\") {\n return;\n }\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n if (currentWorkspaceId) {\n const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());\n if (currentWorkspace && !currentWorkspace.getMyAccessRights()[\"write\"]) {\n // If user can't write in workspace, do not show plus button\n return;\n }\n }\n\n const newFolderCard = new osparc.dashboard.FolderButtonNew();\n newFolderCard.setCardKey(\"new-folder\");\n newFolderCard.subscribeToFilterGroup(\"searchBarFilter\");\n newFolderCard.addListener(\"createFolder\", e => {\n const data = e.getData();\n this.__createFolder(data);\n }, this);\n this._resourcesContainer.addNewFolderCard(newFolderCard);\n },\n\n __createFolder: function(data) {\n const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId())\n const parentFolderId = currentFolder ? currentFolder.getFolderId() : null;\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n osparc.store.Folders.getInstance().postFolder(data.name, parentFolderId, currentWorkspaceId)\n .then(() => this.__reloadFolders())\n .catch(err => console.error(err));\n },\n\n _folderSelected: function(folderId) {\n this._changeContext(\"studiesAndFolders\", this.getCurrentWorkspaceId(), folderId);\n },\n\n _folderUpdated: function() {\n this.__reloadFolders();\n },\n\n __showMoveToDifferentWorkspaceWarningMessage: function() {\n const msg = this.tr(\"The permissions will be taken from the new workspace.\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Move\"),\n confirmText: this.tr(\"Move\"),\n });\n win.open();\n return win;\n },\n\n _moveFolderToRequested: function(folderId) {\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n const currentFolderId = this.getCurrentFolderId();\n const moveFolderTo = new osparc.dashboard.MoveResourceTo(currentWorkspaceId, currentFolderId);\n const title = this.tr(\"Move to...\");\n const win = osparc.ui.window.Window.popUpInWindow(moveFolderTo, title, 400, 400);\n moveFolderTo.addListener(\"moveTo\", e => {\n win.close();\n const data = e.getData();\n const destWorkspaceId = data[\"workspaceId\"];\n const destFolderId = data[\"folderId\"];\n this.__folderToFolderRequested(folderId, currentWorkspaceId, destWorkspaceId, destFolderId);\n });\n moveFolderTo.addListener(\"cancel\", () => win.close());\n },\n\n __doMoveFolder: function(folderId, destWorkspaceId, destFolderId) {\n osparc.store.Folders.getInstance().moveFolderToWorkspace(folderId, destWorkspaceId) // first move to workspace\n .then(() => osparc.store.Folders.getInstance().moveFolderToFolder(folderId, destFolderId)) // then move to folder\n .then(() => this.__reloadFolders())\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n });\n },\n\n __folderToFolderRequested: function(folderId, workspaceId, destWorkspaceId, destFolderId) {\n if (destWorkspaceId === workspaceId) {\n this.__doMoveFolder(folderId, destWorkspaceId, destFolderId);\n } else {\n const confirmationWin = this.__showMoveToDifferentWorkspaceWarningMessage();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__doMoveFolder(folderId, destWorkspaceId, destFolderId);\n }\n }, this);\n }\n },\n\n __folderToTrash: function(folderId) {\n osparc.store.Folders.getInstance().trashFolder(folderId, this.getCurrentWorkspaceId())\n .then(() => {\n this.__reloadFolders();\n const msg = this.tr(\"Successfully deleted\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.setTrashEmpty(false);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n });\n },\n\n _trashFolderRequested: function(folderId) {\n const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();\n let msg = this.tr(\"Are you sure you want to delete the Folder and all its content?\");\n msg += \"
\" + this.tr(\"It will be permanently deleted after \") + trashDays + \" days.\";\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"warning\",\n });\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__folderToTrash(folderId);\n }\n }, this);\n },\n\n _untrashFolderRequested: function(folder) {\n osparc.store.Folders.getInstance().untrashFolder(folder)\n .then(() => {\n this.__reloadFolders();\n const msg = this.tr(\"Successfully restored\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.evaluateTrashEmpty();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n })\n },\n\n _deleteFolderRequested: function(folderId) {\n osparc.store.Folders.getInstance().deleteFolder(folderId, this.getCurrentWorkspaceId())\n .then(() => {\n this.__reloadFolders();\n const msg = this.tr(\"Successfully deleted\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.evaluateTrashEmpty();\n })\n .catch(err => console.error(err));\n },\n // /FOLDERS\n\n __configureStudyCards: function(cards) {\n cards.forEach(card => {\n card.setMultiSelectionMode(this.getMultiSelection());\n card.addListener(\"tap\", e => this.__studyCardClicked(card, e.getNativeEvent().shiftKey), this);\n this._populateCardMenu(card);\n\n this.__attachDragHandlers(card);\n });\n },\n\n __attachDragHandlers: function(card) {\n card.setDraggable(true);\n\n card.addListener(\"dragstart\", e => {\n const studyDataOrigin = card.getResourceData();\n osparc.dashboard.DragDropHelpers.moveStudy.dragStart(e, card, studyDataOrigin);\n });\n\n card.addListener(\"dragend\", () => {\n osparc.dashboard.DragDropHelpers.dragEnd(card);\n });\n },\n\n __studyCardClicked: function(item, isShiftPressed) {\n if (item.isItemNotClickable()) {\n item.setSelected(false);\n return;\n }\n\n if (item.isMultiSelectionMode()) {\n item.setSelected(!item.getSelected());\n const studiesCont = this._resourcesContainer.getFlatList();\n if (isShiftPressed) {\n const lastIdx = studiesCont.getLastSelectedIndex();\n const currentIdx = studiesCont.getIndex(item);\n const minMax = [Math.min(lastIdx, currentIdx), Math.max(lastIdx, currentIdx)];\n for (let i=minMax[0]; i<=minMax[1]; i++) {\n const card = studiesCont.getChildren()[i];\n if (card.isVisible()) {\n card.setSelected(true);\n }\n }\n }\n studiesCont.setLastSelectedIndex(studiesCont.getIndex(item));\n } else {\n const studyData = this.__getStudyData(item.getUuid(), false);\n this._openResourceDetails(studyData);\n this.resetSelection();\n }\n },\n\n __attachEventHandlers: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n socket.on(\"projectStateUpdated\", data => {\n if (data) {\n const studyId = data[\"project_uuid\"];\n const state = (\"data\" in data) ? data.data : {};\n const errors = (\"errors\" in data) ? data.errors : [];\n this.__studyStateReceived(studyId, state, errors);\n }\n }, this);\n\n const commandEsc = new qx.ui.command.Command(\"Esc\");\n commandEsc.addListener(\"execute\", e => {\n this.resetSelection();\n this.setMultiSelection(false);\n });\n\n const store = osparc.store.Store.getInstance();\n store.addListener(\"changeTags\", () => {\n this.invalidateStudies();\n this.__reloadStudies();\n }, this);\n store.addListener(\"studyStateChanged\", e => {\n const {\n studyId,\n state,\n } = e.getData();\n this.__studyStateChanged(studyId, state);\n });\n store.addListener(\"studyDebtChanged\", e => {\n const {\n studyId,\n debt,\n } = e.getData();\n this.__studyDebtChanged(studyId, debt);\n });\n\n qx.event.message.Bus.subscribe(\"reloadStudies\", () => {\n this.invalidateStudies();\n this.__reloadStudies();\n }, this);\n },\n\n __didContextChange: function(reqParams) {\n // not needed for the comparison\n delete reqParams[\"type\"];\n delete reqParams[\"limit\"];\n delete reqParams[\"offset\"];\n delete reqParams[\"filters\"];\n\n const cParams = this.__getRequestParams();\n const currentParams = {};\n Object.entries(cParams).forEach(([snakeKey, value]) => {\n const key = osparc.utils.Utils.snakeToCamel(snakeKey);\n currentParams[key] = value === \"null\" ? null : value;\n });\n\n // check the entries in currentParams are the same as the reqParams\n let sameContext = true;\n Object.entries(currentParams).forEach(([key, value]) => {\n // loose equality: will do a Number to String conversion if necessary\n sameContext &= key in reqParams && reqParams[key] == value;\n });\n // both ways\n Object.entries(reqParams).forEach(([key, value]) => {\n // loose equality: will do a Number to String conversion if necessary\n sameContext &= key in currentParams && currentParams[key] == value;\n });\n return !sameContext;\n },\n\n __getNextPageParams: function() {\n const studiesContainer = this._resourcesContainer.getFlatList();\n if (studiesContainer && studiesContainer.nextRequest) {\n // Context might have been changed while waiting for the response.\n // The new call is on the way, therefore this response can be ignored.\n const url = new URL(studiesContainer.nextRequest);\n const urlSearchParams = new URLSearchParams(url.search);\n const urlParams = {};\n for (const [snakeKey, value] of urlSearchParams.entries()) {\n const key = osparc.utils.Utils.snakeToCamel(snakeKey);\n urlParams[key] = value === \"null\" ? null : value;\n }\n const contextChanged = this.__didContextChange(urlParams);\n if (\n !contextChanged &&\n osparc.utils.Utils.hasParamFromURL(studiesContainer.nextRequest, \"offset\") &&\n osparc.utils.Utils.hasParamFromURL(studiesContainer.nextRequest, \"limit\")\n ) {\n return {\n offset: osparc.utils.Utils.getParamFromURL(studiesContainer.nextRequest, \"offset\"),\n limit: osparc.utils.Utils.getParamFromURL(studiesContainer.nextRequest, \"limit\")\n };\n }\n }\n return null;\n },\n\n __getRequestParams: function() {\n const requestParams = {};\n requestParams.orderBy = JSON.stringify(this.getOrderBy());\n\n switch (this.getCurrentContext()) {\n case \"studiesAndFolders\":\n requestParams.workspaceId = this.getCurrentWorkspaceId();\n requestParams.folderId = this.getCurrentFolderId();\n break;\n case \"search\": {\n // Use the ``search`` functionality only if the user types some text\n // tags should only be used to filter the current context (search context ot workspace/folder context)\n const filterData = this._searchBarFilter.getFilterData();\n if (filterData.text) {\n requestParams.text = filterData.text ? encodeURIComponent(filterData.text) : \"\"; // name, description and uuid\n requestParams[\"tagIds\"] = filterData.tags.length ? filterData.tags.join(\",\") : \"\";\n }\n break;\n }\n }\n\n return requestParams;\n },\n\n __getNextStudiesRequest: function() {\n const params = {\n url: {\n offset: 0,\n limit: osparc.dashboard.ResourceBrowserBase.PAGINATED_STUDIES,\n }\n };\n const nextPageParams = this.__getNextPageParams();\n if (nextPageParams) {\n params.url.offset = nextPageParams.offset;\n params.url.limit = nextPageParams.limit;\n }\n const requestParams = this.__getRequestParams();\n Object.entries(requestParams).forEach(([key, value]) => {\n params.url[key] = value;\n });\n\n const options = {\n resolveWResponse: true\n };\n\n let request = null;\n switch (this.getCurrentContext()) {\n case \"trash\":\n request = osparc.data.Resources.fetch(\"studies\", \"getPageTrashed\", params, options);\n break;\n case \"search\":\n request = osparc.data.Resources.fetch(\"studies\", \"getPageSearch\", params, options);\n break;\n case \"studiesAndFolders\":\n request = osparc.data.Resources.fetch(\"studies\", \"getPage\", params, options);\n break;\n }\n return request;\n },\n\n invalidateStudies: function() {\n osparc.store.Store.getInstance().invalidate(\"studies\");\n this.__resetStudiesList();\n if (this._resourcesContainer.getFlatList()) {\n this._resourcesContainer.getFlatList().nextRequest = null;\n }\n },\n\n __addNewPlusButton: function() {\n const newPlusButton = new osparc.dashboard.NewPlusButton();\n this._leftFilters.add(newPlusButton);\n\n const newPlusButtonMenu = newPlusButton.getMenu();\n\n newPlusButtonMenu.addListener(\"createFolder\", e => {\n const data = e.getData();\n this.__createFolder(data);\n }, this);\n\n newPlusButtonMenu.addListener(\"newEmptyStudyClicked\", e => {\n const {\n newStudyLabel,\n } = e.getData();\n this.__newEmptyStudyBtnClicked(newStudyLabel);\n }, this);\n\n newPlusButtonMenu.addListener(\"newStudyFromTemplateClicked\", e => {\n const {\n templateData,\n newStudyLabel,\n } = e.getData();\n if (templateData) {\n this.__newPlanBtnClicked(templateData, newStudyLabel);\n }\n }, this);\n\n newPlusButtonMenu.addListener(\"newStudyFromServiceClicked\", e => {\n const {\n serviceMetadata,\n newStudyLabel,\n } = e.getData();\n if (serviceMetadata) {\n this.__newStudyFromServiceBtnClicked(serviceMetadata[\"key\"], serviceMetadata[\"version\"], newStudyLabel);\n }\n }, this);\n },\n\n __addNewStudyButtons: function() {\n if (this.getCurrentContext() !== \"studiesAndFolders\") {\n return;\n }\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n if (currentWorkspaceId) {\n const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(currentWorkspaceId);\n if (currentWorkspace && !currentWorkspace.getMyAccessRights()[\"write\"]) {\n // If user can't write in workspace, do not show plus buttons\n return;\n }\n }\n\n if (!osparc.product.Utils.hasNewPlusButton()) {\n switch (osparc.product.Utils.getProductName()) {\n case \"tis\":\n case \"tiplite\":\n // this one is different since it groups all new buttons in one new button\n this.__addTIPPlusButton();\n break;\n default:\n this.__addPlusButtons();\n break;\n }\n }\n },\n\n __addPlusButtons: function() {\n const plusButtonConfig = osparc.store.Products.getInstance().getNewStudiesUiConfig();\n if (plusButtonConfig) {\n plusButtonConfig[\"resources\"].forEach(newStudyData => {\n if (newStudyData[\"resourceType\"] === \"study\") {\n this.__addEmptyStudyPlusButton(newStudyData);\n } else if (newStudyData[\"resourceType\"] === \"service\") {\n this.__addNewStudyFromServiceButton(newStudyData);\n }\n });\n }\n },\n\n __addEmptyStudyPlusButton: function(newStudyData) {\n const mode = this._resourcesContainer.getMode();\n const defTitle = this.tr(\"Empty\") + \" \" + osparc.product.Utils.getStudyAlias({\n firstUpperCase: true\n });\n const title = newStudyData[\"title\"] || defTitle;\n const desc = newStudyData[\"description\"] || this.tr(\"Start with an empty study\");\n const newEmptyStudyBtn = (mode === \"grid\") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);\n newEmptyStudyBtn.setCardKey(\"new-study\");\n newEmptyStudyBtn.subscribeToFilterGroup(\"searchBarFilter\");\n osparc.utils.Utils.setIdToWidget(newEmptyStudyBtn, newStudyData[\"idToWidget\"]);\n newEmptyStudyBtn.addListener(\"tap\", () => this.__newEmptyStudyBtnClicked(newStudyData[\"newStudyLabel\"]));\n this._resourcesContainer.addNonResourceCard(newEmptyStudyBtn);\n },\n\n __addNewStudyFromServiceButton: function(newStudyData) {\n if (\"expectedKey\" in newStudyData) {\n const key = newStudyData[\"expectedKey\"];\n // Include deprecated versions, they should all be updatable to a non deprecated version\n const versions = osparc.service.Utils.getVersions(key, false);\n if (versions.length && newStudyData) {\n // scale to latest compatible\n const latestVersion = versions[0];\n const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);\n osparc.store.Services.getService(latestCompatible[\"key\"], latestCompatible[\"version\"])\n .then(latestMetadata => {\n // make sure this one is not deprecated\n if (osparc.service.Utils.isDeprecated(latestMetadata)) {\n return;\n }\n const title = newStudyData.title + \" \" + osparc.service.Utils.extractVersionDisplay(latestMetadata);\n const desc = newStudyData.description;\n const mode = this._resourcesContainer.getMode();\n const newStudyFromServiceButton = (mode === \"grid\") ? new osparc.dashboard.GridButtonNew(title, desc) : new osparc.dashboard.ListButtonNew(title, desc);\n newStudyFromServiceButton.setCardKey(\"new-\"+key);\n if (newStudyData[\"idToWidget\"]) {\n osparc.utils.Utils.setIdToWidget(newStudyFromServiceButton, newStudyData[\"idToWidget\"]);\n }\n newStudyFromServiceButton.addListener(\"tap\", () => this.__newStudyFromServiceBtnClicked(latestMetadata[\"key\"], latestMetadata[\"version\"], newStudyData.newStudyLabel));\n this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);\n })\n }\n } else if (\"myMostUsed\" in newStudyData) {\n const excludeFrontend = true;\n const excludeDeprecated = true\n osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)\n .then(servicesList => {\n osparc.service.Utils.sortObjectsBasedOn(servicesList, {\n \"sort\": \"hits\",\n \"order\": \"down\"\n });\n for (let i=0; i this.__newStudyFromServiceBtnClicked(latestMetadata[\"key\"], latestMetadata[\"version\"], latestMetadata[\"name\"]));\n this._resourcesContainer.addNonResourceCard(newStudyFromServiceButton);\n }\n });\n }\n },\n\n __addTIPPlusButton: function() {\n const mode = this._resourcesContainer.getMode();\n const title = this.tr(\"New Plan\");\n const newPlansBtn = (mode === \"grid\") ? new osparc.dashboard.GridButtonNew(title) : new osparc.dashboard.ListButtonNew(title);\n newPlansBtn.setCardKey(\"new-study\");\n newPlansBtn.subscribeToFilterGroup(\"searchBarFilter\");\n osparc.utils.Utils.setIdToWidget(newPlansBtn, \"newPlansBtn\");\n this._resourcesContainer.addNonResourceCard(newPlansBtn);\n newPlansBtn.setEnabled(false);\n\n const newStudiesConfig = osparc.store.Products.getInstance().getNewStudiesUiConfig();\n if (newStudiesConfig) {\n newPlansBtn.setEnabled(true);\n\n newPlansBtn.addListener(\"tap\", () => {\n osparc.data.Resources.get(\"templates\")\n .then(templates => {\n if (templates) {\n const newStudies = new osparc.dashboard.NewStudies(newStudiesConfig);\n newStudies.addListener(\"templatesLoaded\", () => {\n newStudies.setGroupBy(\"category\");\n const winTitle = this.tr(\"New Plan\");\n const win = osparc.ui.window.Window.popUpInWindow(newStudies, winTitle, osparc.dashboard.NewStudies.WIDTH+40, 300).set({\n clickAwayClose: false,\n resizable: true\n });\n newStudies.addListener(\"newStudyClicked\", e => {\n win.close();\n const templateInfo = e.getData();\n const templateData = templates.find(t => t.name === templateInfo.expectedTemplateLabel);\n if (templateData) {\n this.__newPlanBtnClicked(templateData, templateInfo.newStudyLabel);\n }\n });\n osparc.utils.Utils.setIdToWidget(win, \"newStudiesWindow\");\n });\n }\n });\n });\n }\n },\n\n // LAYOUT //\n _createLayout: function() {\n this._createSearchBar();\n\n const header = this.__header = new osparc.dashboard.StudyBrowserHeader();\n this.__header.addListener(\"trashEmptied\", () => this.reloadResources(), this);\n this._addToLayout(header);\n\n this._createResourcesLayout(\"studiesList\");\n\n const importStudyButton = this.__createImportButton();\n const isDisabled = osparc.utils.DisabledPlugins.isImportDisabled();\n importStudyButton.setVisibility(isDisabled ? \"excluded\" : \"visible\");\n this._toolbar.add(importStudyButton);\n\n const selectStudiesButton = this.__createSelectButton();\n this._toolbar.add(selectStudiesButton);\n\n const studiesMoveButton = this.__createMoveStudiesButton();\n this._toolbar.add(studiesMoveButton);\n\n const studiesTrashButton = this.__createTrashStudiesButton();\n this._toolbar.add(studiesTrashButton);\n\n const studiesDeleteButton = this.__createDeleteStudiesButton();\n this._toolbar.add(studiesDeleteButton);\n\n this._toolbar.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n this.__addSortByButton();\n this._addViewModeButton();\n\n if (osparc.product.Utils.hasNewPlusButton()) {\n this.__addNewPlusButton();\n }\n\n this._addResourceFilter();\n\n this.__connectContexts();\n this.__connectDropHandlers();\n\n this.__addNewStudyButtons();\n\n const loadMoreBtn = this.__createLoadMoreButton();\n this._resourcesContainer.addNonResourceCard(loadMoreBtn);\n\n this.addListener(\"changeMultiSelection\", e => {\n const multiEnabled = e.getData();\n const cards = this._resourcesContainer.getCards();\n cards.forEach(card => {\n if (!osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card)) {\n card.setEnabled(!multiEnabled);\n }\n });\n importStudyButton.setEnabled(!multiEnabled);\n });\n\n this._resourcesContainer.addListener(\"changeSelection\", e => {\n const currentContext = this.getCurrentContext();\n const selection = e.getData();\n\n studiesMoveButton.set({\n visibility: selection.length && currentContext === \"studiesAndFolders\" ? \"visible\" : \"excluded\",\n label: this.tr(\"Move\") + (selection.length > 1 ? ` (${selection.length})` : \"\"),\n });\n\n studiesTrashButton.set({\n visibility: selection.length && currentContext === \"studiesAndFolders\" ? \"visible\" : \"excluded\",\n label: this.tr(\"Delete\") + (selection.length > 1 ? ` (${selection.length})` : \"\"),\n });\n\n studiesDeleteButton.set({\n visibility: selection.length && currentContext === \"trash\" ? \"visible\" : \"excluded\",\n label: this.tr(\"Delete permanently\") + (selection.length > 1 ? ` (${selection.length})` : \"\"),\n });\n });\n\n this._resourcesContainer.addListener(\"changeVisibility\", () => this._moreResourcesRequired());\n\n return this._resourcesContainer;\n },\n\n __connectContexts: function() {\n const header = this.__header;\n header.addListener(\"locationChanged\", () => {\n const workspaceId = header.getCurrentWorkspaceId();\n const folderId = header.getCurrentFolderId();\n this._changeContext(\"studiesAndFolders\", workspaceId, folderId);\n }, this);\n\n const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();\n workspacesAndFoldersTree.addListener(\"locationChanged\", e => {\n const context = e.getData();\n const workspaceId = context[\"workspaceId\"];\n if (workspaceId === -1) {\n this._changeContext(\"workspaces\");\n } else {\n const folderId = context[\"folderId\"];\n this._changeContext(\"studiesAndFolders\", workspaceId, folderId);\n }\n }, this);\n\n this._resourceFilter.addListener(\"trashContext\", () => {\n this._changeContext(\"trash\");\n });\n\n this._searchBarFilter.addListener(\"filterChanged\", e => {\n const filterData = e.getData();\n if (filterData.text) {\n this._changeContext(\"search\");\n } else {\n const workspaceId = this.getCurrentWorkspaceId();\n const folderId = this.getCurrentFolderId();\n this._changeContext(\"studiesAndFolders\", workspaceId, folderId);\n }\n });\n },\n\n _changeContext: function(context, workspaceId = null, folderId = null) {\n if (\n context !== \"search\" && // reload studies for a new search\n context === this.getCurrentContext() &&\n workspaceId === this.getCurrentWorkspaceId() &&\n folderId === this.getCurrentFolderId()\n ) {\n // didn't really change\n return;\n }\n\n osparc.store.Store.getInstance().setStudyBrowserContext(context);\n this.set({\n currentContext: context,\n currentWorkspaceId: workspaceId,\n currentFolderId: folderId,\n });\n this.resetSelection();\n this.setMultiSelection(false);\n\n // reset lists\n this.__setWorkspacesToList([]);\n this.__setFoldersToList([]);\n this._resourcesList = [];\n this._resourcesContainer.setResourcesToList(this._resourcesList);\n this._resourcesContainer.reloadCards(\"studies\");\n\n this._toolbar.show();\n switch (this.getCurrentContext()) {\n case \"studiesAndFolders\":\n this._searchBarFilter.resetFilters();\n this.__reloadFolders();\n this._loadingResourcesBtn.setFetching(false);\n this.invalidateStudies();\n this.__reloadStudies();\n break;\n case \"workspaces\":\n this._toolbar.exclude();\n this._searchBarFilter.resetFilters();\n this.__reloadWorkspaces();\n break;\n case \"search\":\n this.__reloadWorkspaces();\n this.__reloadFolders();\n this._loadingResourcesBtn.setFetching(false);\n this.invalidateStudies();\n this.__reloadStudies();\n break;\n case \"trash\":\n this._searchBarFilter.resetFilters();\n this.__reloadWorkspaces();\n this.__reloadFolders();\n this._loadingResourcesBtn.setFetching(false);\n this.invalidateStudies();\n this.__reloadStudies();\n break;\n }\n\n // notify header\n const header = this.__header;\n header.set({\n currentWorkspaceId: workspaceId,\n currentFolderId: folderId,\n });\n\n // notify Filters on the left\n this._resourceFilter.contextChanged(context, workspaceId, folderId);\n },\n\n __connectDropHandlers: function() {\n const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();\n workspacesAndFoldersTree.addListener(\"studyToFolderRequested\", e => {\n const {\n studyData,\n destWorkspaceId,\n destFolderId,\n } = e.getData();\n this.__studyToFolderRequested(studyData, destWorkspaceId, destFolderId);\n });\n workspacesAndFoldersTree.addListener(\"folderToFolderRequested\", e => {\n const {\n folderId,\n workspaceId,\n destWorkspaceId,\n destFolderId,\n } = e.getData();\n this.__folderToFolderRequested(folderId, workspaceId, destWorkspaceId, destFolderId);\n });\n\n this._resourceFilter.addListener(\"trashStudyRequested\", e => {\n const studyData = e.getData();\n this.__trashStudyRequested(studyData);\n });\n this._resourceFilter.addListener(\"trashFolderRequested\", e => {\n const folderId = e.getData();\n this._trashFolderRequested(folderId);\n });\n },\n\n _studyToFolderRequested: function(data) {\n const {\n studyData,\n destWorkspaceId,\n destFolderId,\n } = data;\n this.__studyToFolderRequested(studyData, destWorkspaceId, destFolderId);\n },\n\n _folderToFolderRequested: function(data) {\n const {\n folderId,\n workspaceId,\n destWorkspaceId,\n destFolderId,\n } = data;\n this.__folderToFolderRequested(folderId, workspaceId, destWorkspaceId, destFolderId);\n },\n\n __addSortByButton: function() {\n const sortByButton = new osparc.dashboard.SortedByMenuButton();\n sortByButton.set({\n appearance: \"form-button-outlined\"\n });\n osparc.utils.Utils.setIdToWidget(sortByButton, \"sortByButton\");\n sortByButton.addListener(\"sortByChanged\", e => {\n this.setOrderBy(e.getData());\n this.invalidateStudies();\n this.reloadResources();\n }, this);\n this._toolbar.add(sortByButton);\n },\n\n __createLoadMoreButton: function() {\n const mode = this._resourcesContainer.getMode();\n const loadMoreBtn = this._loadingResourcesBtn = (mode === \"grid\") ? new osparc.dashboard.GridButtonLoadMore() : new osparc.dashboard.ListButtonLoadMore();\n loadMoreBtn.setCardKey(\"load-more\");\n osparc.utils.Utils.setIdToWidget(loadMoreBtn, \"studiesLoading\");\n loadMoreBtn.addListener(\"tap\", () => {\n this._moreResourcesRequired();\n });\n return loadMoreBtn;\n },\n\n __createImportButton: function() {\n const importButton = new qx.ui.form.Button(this.tr(\"Import\"));\n importButton.set({\n appearance: \"form-button-outlined\"\n });\n importButton.addListener(\"execute\", () => {\n const importStudy = new osparc.study.Import();\n const win = osparc.ui.window.Window.popUpInWindow(importStudy, this.tr(\"Import Study\"), 400, 125);\n win.set({\n clickAwayClose: false\n });\n importStudy.addListener(\"fileReady\", e => {\n win.close();\n const file = e.getData();\n if (file === null || file === undefined) {\n return;\n }\n const size = file.size;\n const maxSize = 10 * 1000 * 1000 * 1000; // 10 GB\n if (size > maxSize) {\n osparc.FlashMessenger.logAs(`The file is too big. Maximum size is ${maxSize}MB. Please provide with a smaller file or a repository URL.`, \"ERROR\");\n return;\n }\n this.__importStudy(file);\n }, this);\n }, this);\n return importButton;\n },\n\n __createMoveStudiesButton: function() {\n const moveStudiesButton = new qx.ui.form.Button(this.tr(\"Move to\")).set({\n appearance: \"form-button-outlined\",\n visibility: \"excluded\",\n });\n moveStudiesButton.addListener(\"execute\", () => {\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n const currentFolderId = this.getCurrentFolderId();\n const moveStudyTo = new osparc.dashboard.MoveResourceTo(currentWorkspaceId, currentFolderId);\n const title = this.tr(\"Move to...\");\n const win = osparc.ui.window.Window.popUpInWindow(moveStudyTo, title, 400, 400);\n moveStudyTo.addListener(\"moveTo\", e => {\n win.close();\n const data = e.getData();\n const destWorkspaceId = data[\"workspaceId\"];\n const destFolderId = data[\"folderId\"];\n const moveStudies = () => {\n const selection = this._resourcesContainer.getSelection();\n selection.forEach(button => {\n const studyData = button.getResourceData();\n this.__doMoveStudy(studyData, destWorkspaceId, destFolderId);\n });\n this.resetSelection();\n this.setMultiSelection(false);\n }\n if (destWorkspaceId === currentWorkspaceId) {\n moveStudies();\n } else {\n const confirmationWin = this.__showMoveToDifferentWorkspaceWarningMessage();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n moveStudies();\n }\n }, this);\n }\n }, this);\n moveStudyTo.addListener(\"cancel\", () => win.close());\n }, this);\n return moveStudiesButton;\n },\n\n __createTrashStudiesButton: function() {\n const trashButton = new qx.ui.form.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/14\").set({\n appearance: \"warning-button\",\n visibility: \"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(trashButton, \"deleteStudiesBtn\");\n trashButton.addListener(\"execute\", () => {\n const selection = this._resourcesContainer.getSelection();\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteStudy()) {\n const win = this.__createConfirmTrashWindow(selection.map(button => button.getTitle()));\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__trashStudies(selection.map(button => this.__getStudyData(button.getUuid(), false)), false);\n }\n }, this);\n } else {\n this.__trashStudies(selection.map(button => this.__getStudyData(button.getUuid(), false)), false);\n }\n }, this);\n return trashButton;\n },\n\n __createDeleteStudiesButton: function() {\n const deleteButton = new qx.ui.form.Button(this.tr(\"Delete permanently\"), \"@FontAwesome5Solid/trash/14\").set({\n appearance: \"danger-button\",\n visibility: \"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(deleteButton, \"deleteStudiesBtn\");\n deleteButton.addListener(\"execute\", () => {\n const selection = this._resourcesContainer.getSelection();\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteStudy()) {\n const win = this.__createConfirmDeleteWindow(selection.map(button => button.getTitle()));\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__doDeleteStudies(selection.map(button => this.__getStudyData(button.getUuid(), false)), false);\n }\n }, this);\n } else {\n this.__doDeleteStudies(selection.map(button => this.__getStudyData(button.getUuid(), false)), false);\n }\n }, this);\n return deleteButton;\n },\n\n\n\n __createSelectButton: function() {\n const selectButton = new qx.ui.form.ToggleButton().set({\n appearance: \"form-button-outlined\",\n marginRight: 8\n });\n selectButton.bind(\"value\", this, \"multiSelection\");\n selectButton.bind(\"value\", selectButton, \"label\", {\n converter: val => val ? this.tr(\"Cancel Selection\") : (this.tr(\"Select \") + osparc.product.Utils.getStudyAlias({\n plural: true,\n firstUpperCase: true\n }))\n });\n this.bind(\"multiSelection\", selectButton, \"value\");\n this.bind(\"currentContext\", selectButton, \"visibility\", {\n converter: currentContext => currentContext === \"studiesAndFolders\" ? \"visible\" : \"excluded\"\n });\n return selectButton;\n },\n\n __applyMultiSelection: function(value) {\n this._resourcesContainer.getCards().forEach(studyItem => {\n if (osparc.dashboard.ResourceBrowserBase.isCardButtonItem(studyItem)) {\n studyItem.setMultiSelectionMode(value);\n if (value === false) {\n studyItem.setSelected(false);\n }\n }\n });\n },\n // LAYOUT //\n\n __studyStateReceived: function(studyId, state, errors) {\n osparc.store.Store.getInstance().setStudyState(studyId, state);\n if (errors && errors.length) {\n console.error(errors);\n }\n },\n\n __studyStateChanged: function(studyId, state) {\n const idx = this._resourcesList.findIndex(study => study[\"uuid\"] === studyId);\n if (idx > -1) {\n this._resourcesList[idx][\"state\"] = state;\n }\n const studyItem = this._resourcesContainer.getCards().find(card => osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card) && card.getUuid() === studyId);\n if (studyItem) {\n studyItem.setState(state);\n }\n },\n\n __studyDebtChanged: function(studyId, debt) {\n const idx = this._resourcesList.findIndex(study => study[\"uuid\"] === studyId);\n if (idx > -1) {\n this._resourcesList[idx][\"debt\"] = debt;\n }\n const studyItem = this._resourcesContainer.getCards().find(card => osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card) && card.getUuid() === studyId);\n if (studyItem) {\n studyItem.setDebt(debt);\n }\n },\n\n __newEmptyStudyBtnClicked: function(newStudyLabel) {\n const existingNames = this._resourcesList.map(study => study[\"name\"]);\n const title = osparc.utils.Utils.getUniqueName(newStudyLabel, existingNames);\n const minStudyData = osparc.data.model.Study.createMinStudyObject();\n minStudyData[\"name\"] = title;\n minStudyData[\"workspaceId\"] = this.getCurrentWorkspaceId();\n minStudyData[\"folderId\"] = this.getCurrentFolderId();\n this._showLoadingPage(this.tr(\"Creating \") + (minStudyData.name || osparc.product.Utils.getStudyAlias()));\n const params = {\n data: minStudyData\n };\n osparc.study.Utils.createStudyAndPoll(params)\n .then(studyData => this.__startStudyAfterCreating(studyData[\"uuid\"]))\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n },\n\n __newPlanBtnClicked: function(templateData, newStudyName) {\n // do not override cached template data\n const templateCopyData = osparc.utils.Utils.deepCloneObject(templateData);\n const existingNames = this._resourcesList.map(study => study[\"name\"]);\n const title = osparc.utils.Utils.getUniqueName(newStudyName, existingNames);\n templateCopyData.name = title;\n this._showLoadingPage(this.tr(\"Creating \") + (newStudyName || osparc.product.Utils.getStudyAlias()));\n const contextProps = {\n workspaceId: this.getCurrentWorkspaceId(),\n folderId: this.getCurrentFolderId(),\n };\n osparc.study.Utils.createStudyFromTemplate(templateCopyData, this._loadingPage, contextProps)\n .then(studyData => this.__startStudyAfterCreating(studyData[\"uuid\"]))\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n },\n\n __newStudyFromServiceBtnClicked: function(key, version, newStudyLabel) {\n this._showLoadingPage(this.tr(\"Creating \") + osparc.product.Utils.getStudyAlias());\n const contextProps = {\n workspaceId: this.getCurrentWorkspaceId(),\n folderId: this.getCurrentFolderId(),\n };\n osparc.study.Utils.createStudyFromService(key, version, this._resourcesList, newStudyLabel, contextProps)\n .then(studyId => this.__startStudyAfterCreating(studyId))\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n },\n\n __startStudyAfterCreating: function(studyId) {\n const openCB = () => this._hideLoadingPage();\n const cancelCB = () => {\n this._hideLoadingPage();\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"delete\", params);\n };\n const isStudyCreation = true;\n this._startStudyById(studyId, openCB, cancelCB, isStudyCreation);\n },\n\n _updateStudyData: function(studyData) {\n studyData[\"resourceType\"] = \"study\";\n const index = this._resourcesList.findIndex(study => study[\"uuid\"] === studyData[\"uuid\"]);\n if (index === -1) {\n // add it in first position, most likely it's a new study\n this._resourcesList.unshift(studyData);\n } else {\n this._resourcesList[index] = studyData;\n }\n // it will render the studies in the right order\n this._reloadCards();\n },\n\n __removeFromStudyList: function(studyId) {\n const idx = this._resourcesList.findIndex(study => study[\"uuid\"] === studyId);\n if (idx > -1) {\n this._resourcesList.splice(idx, 1);\n }\n this._resourcesContainer.removeCard(studyId);\n },\n\n _populateCardMenu: function(card) {\n const menu = card.getMenu();\n const studyData = card.getResourceData();\n\n const trashed = Boolean(studyData[\"trashedAt\"]);\n const writeAccess = osparc.data.model.Study.canIWrite(studyData[\"accessRights\"]);\n const deleteAccess = osparc.data.model.Study.canIDelete(studyData[\"accessRights\"]);\n\n if (this.getCurrentContext() === \"trash\") {\n if (trashed) {\n if (writeAccess) {\n const untrashButton = this.__getUntrashStudyMenuButton(studyData);\n menu.add(untrashButton);\n }\n if (deleteAccess) {\n const deleteButton = this.__getDeleteStudyMenuButton(studyData, false);\n menu.addSeparator();\n menu.add(deleteButton);\n }\n }\n return;\n }\n\n const openButton = this._getOpenMenuButton(studyData);\n if (openButton) {\n menu.add(openButton);\n }\n\n if (this.getCurrentContext() === \"search\") {\n const renameStudyButton = this.__getOpenLocationMenuButton(studyData);\n menu.add(renameStudyButton);\n }\n\n if (writeAccess) {\n const renameStudyButton = this.__getRenameStudyMenuButton(studyData);\n menu.add(renameStudyButton);\n }\n\n if (writeAccess) {\n const editThumbnailButton = this.__getThumbnailStudyMenuButton(studyData);\n menu.add(editThumbnailButton);\n }\n\n const duplicateStudyButton = this.__getDuplicateMenuButton(studyData);\n menu.add(duplicateStudyButton);\n\n if (osparc.product.Utils.hasConvertToPipelineEnabled()) {\n const convertToPipelineButton = this.__getConvertToPipelineMenuButton(studyData);\n menu.add(convertToPipelineButton);\n }\n\n if (osparc.product.Utils.hasExportCMisEnabled()) {\n const exportStudyButton = this.__getExportCMisMenuButton(studyData);\n menu.add(exportStudyButton);\n }\n\n menu.addSeparator();\n\n // Access Rights are set at workspace level)\n if (writeAccess && this.getCurrentWorkspaceId() === null) {\n const shareButton = this._getShareMenuButton(card);\n if (shareButton) {\n menu.add(shareButton);\n }\n }\n\n if (writeAccess) {\n const tagsButton = this._getTagsMenuButton(card);\n if (tagsButton) {\n menu.add(tagsButton);\n }\n }\n\n const studyDataButton = this.__getStudyDataMenuButton(card);\n menu.add(studyDataButton);\n\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const billingsSettingsButton = this.__getBillingMenuButton(card);\n menu.add(billingsSettingsButton);\n }\n\n menu.addSeparator();\n\n const moveToButton = this.__getMoveStudyToMenuButton(studyData);\n if (moveToButton) {\n menu.add(moveToButton);\n }\n\n if (deleteAccess) {\n menu.addSeparator();\n const trashButton = this.__getTrashStudyMenuButton(studyData, false);\n menu.add(trashButton);\n } else if (this.__deleteOrRemoveMe(studyData) === \"remove\") {\n // if I'm a collaborator, let me remove myself from the study. In that case it would be a Delete for me\n menu.addSeparator();\n const deleteButton = this.__getDeleteStudyMenuButton(studyData, false);\n menu.add(deleteButton);\n }\n\n card.evaluateMenuButtons();\n },\n\n __getOpenLocationMenuButton: function(studyData) {\n const openLocationButton = new qx.ui.menu.Button(this.tr(\"Open location\"), \"@FontAwesome5Solid/external-link-alt/12\");\n openLocationButton.addListener(\"execute\", () => {\n this._changeContext(\"studiesAndFolders\", studyData[\"workspaceId\"], studyData[\"folderId\"]);\n }, this);\n return openLocationButton;\n },\n\n __getRenameStudyMenuButton: function(studyData) {\n const renameButton = new qx.ui.menu.Button(this.tr(\"Rename...\"), \"@FontAwesome5Solid/pencil-alt/12\");\n renameButton.addListener(\"execute\", () => {\n const renamer = new osparc.widget.Renamer(studyData[\"name\"]);\n renamer.addListener(\"labelChanged\", e => {\n renamer.close();\n const newLabel = e.getData()[\"newLabel\"];\n this.__updateName(studyData, newLabel);\n }, this);\n renamer.center();\n renamer.open();\n }, this);\n return renameButton;\n },\n\n __getThumbnailStudyMenuButton: function(studyData) {\n const thumbButton = new qx.ui.menu.Button(this.tr(\"Thumbnail...\"), \"@FontAwesome5Solid/image/12\");\n thumbButton.addListener(\"execute\", () => {\n osparc.editor.ThumbnailSuggestions.extractThumbnailSuggestions(studyData)\n .then(suggestions => {\n const title = this.tr(\"Edit Thumbnail\");\n const oldThumbnail = studyData.thumbnail;\n const thumbnailEditor = new osparc.editor.ThumbnailEditor(oldThumbnail, suggestions);\n const win = osparc.ui.window.Window.popUpInWindow(thumbnailEditor, title, suggestions.length > 2 ? 500 : 350, 280);\n thumbnailEditor.addListener(\"updateThumbnail\", e => {\n win.close();\n const newUrl = e.getData();\n this.__updateThumbnail(studyData, newUrl);\n }, this);\n thumbnailEditor.addListener(\"cancel\", () => win.close());\n })\n .catch(err => console.error(err));\n }, this);\n return thumbButton;\n },\n\n __updateName: function(studyData, name) {\n osparc.store.Study.patchStudyData(studyData, \"name\", name)\n .then(() => this._updateStudyData(studyData))\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong Renaming\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n },\n\n __updateThumbnail: function(studyData, url) {\n osparc.store.Study.patchStudyData(studyData, \"thumbnail\", url)\n .then(() => this._updateStudyData(studyData))\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong updating the Thumbnail\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n },\n\n __getStudyDataMenuButton: function(card) {\n const text = osparc.utils.Utils.capitalize(osparc.product.Utils.getStudyAlias()) + this.tr(\" files...\");\n const studyDataButton = new qx.ui.menu.Button(text, \"@FontAwesome5Solid/file/12\");\n studyDataButton[\"studyDataButton\"] = true;\n studyDataButton.addListener(\"tap\", () => card.openData(), this);\n return studyDataButton;\n },\n\n __getBillingMenuButton: function(card) {\n const text = osparc.utils.Utils.capitalize(this.tr(\"Billing Settings...\"));\n const studyBillingSettingsButton = new qx.ui.menu.Button(text);\n studyBillingSettingsButton[\"billingSettingsButton\"] = true;\n studyBillingSettingsButton.addListener(\"tap\", () => card.openBilling(), this);\n return studyBillingSettingsButton;\n },\n\n __doMoveStudy: function(studyData, destWorkspaceId, destFolderId) {\n this.__moveStudyToWorkspace(studyData, destWorkspaceId) // first move to workspace\n .then(() => this.__moveStudyToFolder(studyData, destFolderId)) // then move to folder\n .then(() => this.__removeFromStudyList(studyData[\"uuid\"]))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n },\n\n __studyToFolderRequested: function(studyData, destWorkspaceId, destFolderId) {\n if (studyData[\"workspaceId\"] === destWorkspaceId) {\n this.__doMoveStudy(studyData, destWorkspaceId, destFolderId);\n } else {\n const confirmationWin = this.__showMoveToDifferentWorkspaceWarningMessage();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__doMoveStudy(studyData, destWorkspaceId, destFolderId);\n }\n }, this);\n }\n },\n\n __getMoveStudyToMenuButton: function(studyData) {\n const moveToButton = new qx.ui.menu.Button(this.tr(\"Move to...\"), \"@FontAwesome5Solid/folder/12\");\n moveToButton[\"moveToButton\"] = true;\n moveToButton.addListener(\"tap\", () => {\n const currentWorkspaceId = this.getCurrentWorkspaceId();\n const currentFolderId = this.getCurrentFolderId();\n const moveStudyTo = new osparc.dashboard.MoveResourceTo(currentWorkspaceId, currentFolderId);\n const title = this.tr(\"Move to...\");\n const win = osparc.ui.window.Window.popUpInWindow(moveStudyTo, title, 400, 400);\n moveStudyTo.addListener(\"moveTo\", e => {\n win.close();\n const data = e.getData();\n const destWorkspaceId = data[\"workspaceId\"];\n const destFolderId = data[\"folderId\"];\n this.__studyToFolderRequested(studyData, destWorkspaceId, destFolderId);\n }, this);\n moveStudyTo.addListener(\"cancel\", () => win.close());\n }, this);\n return moveToButton;\n },\n\n __moveStudyToWorkspace: function(studyData, destWorkspaceId) {\n if (studyData[\"workspaceId\"] === destWorkspaceId) {\n // resolve right away\n return new Promise(resolve => resolve());\n }\n const params = {\n url: {\n studyId: studyData[\"uuid\"],\n workspaceId: destWorkspaceId,\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"moveToWorkspace\", params)\n .then(() => studyData[\"workspaceId\"] = destWorkspaceId);\n },\n\n __moveStudyToFolder: function(studyData, destFolderId) {\n if (studyData[\"folderId\"] === destFolderId) {\n // resolve right away\n return new Promise(resolve => resolve());\n }\n const params = {\n url: {\n studyId: studyData[\"uuid\"],\n folderId: destFolderId,\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"moveToFolder\", params)\n .then(() => studyData[\"folderId\"] = destFolderId);\n },\n\n __getDuplicateMenuButton: function(studyData) {\n const duplicateButton = new qx.ui.menu.Button(this.tr(\"Duplicate\"), \"@FontAwesome5Solid/copy/12\");\n duplicateButton[\"duplicateButton\"] = true;\n duplicateButton.addListener(\"execute\", () => this.__duplicateStudy(studyData), this);\n return duplicateButton;\n },\n\n __getConvertToPipelineMenuButton: function(studyData) {\n const convertToPipelineButton = new qx.ui.menu.Button(this.tr(\"Convert to Pipeline\"), null);\n convertToPipelineButton[\"convertToPipelineButton\"] = true;\n const uiMode = osparc.study.Utils.getUiMode(studyData);\n convertToPipelineButton.setVisibility(uiMode === \"standalone\" ? \"visible\" : \"excluded\");\n convertToPipelineButton.addListener(\"execute\", () => {\n this.__updateUIMode(studyData, \"workbench\")\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong Converting to Pipeline\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n }, this);\n return convertToPipelineButton;\n },\n\n __updateUIMode: function(studyData, uiMode) {\n const studyUI = osparc.utils.Utils.deepCloneObject(studyData[\"ui\"]);\n studyUI[\"mode\"] = uiMode;\n return osparc.info.StudyUtils.patchStudyData(studyData, \"ui\", studyUI)\n .then(() => this._updateStudyData(studyData))\n },\n\n __getExportCMisMenuButton: function(studyData) {\n const exportButton = new qx.ui.menu.Button(this.tr(\"Export cMIS\"), \"@FontAwesome5Solid/cloud-download-alt/12\");\n exportButton[\"exportCMISButton\"] = true;\n const isDisabled = osparc.utils.DisabledPlugins.isExportDisabled();\n exportButton.setVisibility(isDisabled ? \"excluded\" : \"visible\");\n exportButton.addListener(\"execute\", () => this.__exportStudy(studyData), this);\n return exportButton;\n },\n\n _deleteResourceRequested: function(studyId) {\n if (this.getCurrentContext() === \"trash\") {\n this.__deleteStudyRequested(this.__getStudyData(studyId));\n } else {\n this.__trashStudyRequested(this.__getStudyData(studyId));\n }\n },\n\n __trashStudyRequested: function(studyData) {\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteStudy()) {\n const win = this.__createConfirmTrashWindow([studyData.name]);\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__trashStudy(studyData);\n }\n }, this);\n } else {\n this.__trashStudy(studyData);\n }\n },\n\n __deleteStudyRequested: function(studyData) {\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteStudy()) {\n const win = this.__deleteOrRemoveMe(studyData) === \"remove\" ? this.__createConfirmRemoveForMeWindow(studyData.name) : this.__createConfirmDeleteWindow([studyData.name]);\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__doDeleteStudy(studyData);\n }\n }, this);\n } else {\n this.__doDeleteStudy(studyData);\n }\n },\n\n __getTrashStudyMenuButton: function(studyData) {\n const trashButton = new qx.ui.menu.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/12\");\n trashButton[\"trashButton\"] = true;\n trashButton.set({\n appearance: \"menu-button\"\n });\n osparc.utils.Utils.setIdToWidget(trashButton, \"studyItemMenuDelete\");\n trashButton.addListener(\"execute\", () => this.__trashStudyRequested(studyData), this);\n return trashButton;\n },\n\n __getUntrashStudyMenuButton: function(studyData) {\n const restoreButton = new qx.ui.menu.Button(this.tr(\"Restore\"), \"@MaterialIcons/restore_from_trash/16\");\n restoreButton[\"untrashButton\"] = true;\n restoreButton.set({\n appearance: \"menu-button\"\n });\n restoreButton.addListener(\"execute\", () => this.__untrashStudy(studyData), this);\n return restoreButton;\n },\n\n __getDeleteStudyMenuButton: function(studyData) {\n const deleteButton = new qx.ui.menu.Button(this.tr(\"Delete permanently\"), \"@FontAwesome5Solid/trash/12\");\n deleteButton[\"deleteButton\"] = true;\n deleteButton.set({\n appearance: \"menu-button\"\n });\n osparc.utils.Utils.setIdToWidget(deleteButton, \"studyItemMenuDelete\");\n deleteButton.addListener(\"execute\", () => this.__deleteStudyRequested(studyData), this);\n return deleteButton;\n },\n\n __getStudyData: function(id) {\n return this._resourcesList.find(study => study.uuid === id);\n },\n\n __createDuplicateCard: function(studyName) {\n const isGrid = this._resourcesContainer.getMode() === \"grid\";\n const duplicatingStudyCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();\n duplicatingStudyCard.buildLayout(\n this.tr(\"Duplicating \") + studyName,\n osparc.task.Duplicate.ICON + (isGrid ? \"60\" : \"24\"),\n null,\n true\n );\n return duplicatingStudyCard;\n },\n\n __duplicateStudy: function(studyData) {\n const text = this.tr(\"Duplicate process started and added to the background tasks\");\n osparc.FlashMessenger.getInstance().logAs(text, \"INFO\");\n\n const params = {\n url: {\n \"studyId\": studyData[\"uuid\"]\n }\n };\n const options = {\n pollTask: true\n };\n const fetchPromise = osparc.data.Resources.fetch(\"studies\", \"duplicate\", params, options);\n const interval = 1000;\n const pollTasks = osparc.data.PollTasks.getInstance();\n pollTasks.createPollingTask(fetchPromise, interval)\n .then(task => this.__taskDuplicateReceived(task, studyData[\"name\"]))\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong Duplicating\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n },\n\n __exportStudy: function(studyData) {\n const exportTask = new osparc.task.Export(studyData);\n exportTask.start();\n exportTask.setSubtitle(this.tr(\"Preparing files\"));\n const text = this.tr(\"Exporting process started and added to the background tasks\");\n osparc.FlashMessenger.getInstance().logAs(text, \"INFO\");\n\n const url = window.location.href + \"v0/projects/\" + studyData[\"uuid\"] + \":xport\";\n const progressCB = () => {\n const textSuccess = this.tr(\"Download started\");\n exportTask.setSubtitle(textSuccess);\n };\n osparc.utils.Utils.downloadLink(url, \"POST\", null, progressCB)\n .catch(err => {\n console.error(err);\n const msg = osparc.data.Resources.getErrorMsg(JSON.parse(err.response)) || this.tr(\"Something went wrong Exporting the study\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n })\n .finally(() => {\n exportTask.stop();\n });\n },\n\n __importStudy: function(file) {\n const uploadingLabel = this.tr(\"Uploading file\");\n const importTask = new osparc.task.Import();\n importTask.start();\n importTask.setSubtitle(uploadingLabel);\n\n const text = this.tr(\"Importing process started and added to the background tasks\");\n osparc.FlashMessenger.getInstance().logAs(text, \"INFO\");\n\n const isGrid = this._resourcesContainer.getMode() === \"grid\";\n const importingStudyCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();\n importingStudyCard.buildLayout(\n this.tr(\"Importing Study...\"),\n \"@FontAwesome5Solid/cloud-upload-alt/\" + (isGrid ? \"60\" : \"24\"),\n uploadingLabel,\n true\n );\n importingStudyCard.subscribeToFilterGroup(\"searchBarFilter\");\n this._resourcesContainer.addNonResourceCard(importingStudyCard);\n\n const body = new FormData();\n body.append(\"fileName\", file);\n\n const req = new XMLHttpRequest();\n req.upload.addEventListener(\"progress\", ep => {\n // updateProgress\n if (ep.lengthComputable) {\n const percentComplete = ep.loaded / ep.total * 100;\n importingStudyCard.getChildControl(\"progress-bar\").setValue(percentComplete);\n if (percentComplete === 100) {\n const processingLabel = this.tr(\"Processing study\");\n importingStudyCard.getChildControl(\"state-label\").setValue(processingLabel);\n importTask.setSubtitle(processingLabel);\n importingStudyCard.getChildControl(\"progress-bar\").exclude();\n }\n } else {\n console.log(\"Unable to compute progress information since the total size is unknown\");\n }\n }, false);\n req.addEventListener(\"load\", e => {\n // transferComplete\n if (req.status == 200) {\n const processingLabel = this.tr(\"Processing study\");\n importingStudyCard.getChildControl(\"state-label\").setValue(processingLabel);\n importTask.setSubtitle(processingLabel);\n importingStudyCard.getChildControl(\"progress-bar\").exclude();\n const data = JSON.parse(req.responseText);\n const params = {\n url: {\n \"studyId\": data[\"data\"][\"uuid\"]\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(studyData => this._updateStudyData(studyData))\n .catch(err => {\n console.error(err);\n const msg = this.tr(\"Something went wrong Fetching the study\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n })\n .finally(() => {\n importTask.stop();\n this._resourcesContainer.removeNonResourceCard(importingStudyCard);\n });\n } else if (req.status == 400) {\n importTask.stop();\n this._resourcesContainer.removeNonResourceCard(importingStudyCard);\n const msg = osparc.data.Resources.getErrorMsg(JSON.parse(req.response)) || this.tr(\"Something went wrong Importing the study\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n }\n });\n req.addEventListener(\"error\", e => {\n // transferFailed\n importTask.stop();\n this._resourcesContainer.removeNonResourceCard(importingStudyCard);\n const msg = osparc.data.Resources.getErrorMsg(e) || this.tr(\"Something went wrong Importing the study\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n req.addEventListener(\"abort\", e => {\n // transferAborted\n importTask.stop();\n this._resourcesContainer.removeNonResourceCard(importingStudyCard);\n const msg = osparc.data.Resources.getErrorMsg(e) || this.tr(\"Something went wrong Importing the study\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n req.open(\"POST\", \"/v0/projects:import\", true);\n req.send(body);\n },\n\n __untrashStudy: function(studyData) {\n osparc.store.Store.getInstance().untrashStudy(studyData.uuid)\n .then(() => {\n this.__removeFromStudyList(studyData.uuid);\n const msg = this.tr(\"Successfully restored\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.evaluateTrashEmpty();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n })\n .finally(() => this.resetSelection());\n },\n\n __trashStudy: function(studyData) {\n osparc.store.Store.getInstance().trashStudy(studyData.uuid)\n .then(() => {\n this.__removeFromStudyList(studyData.uuid);\n const msg = this.tr(\"Successfully deleted\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this._resourceFilter.setTrashEmpty(false);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n })\n .finally(() => this.resetSelection());\n },\n\n __trashStudies: function(studiesData) {\n studiesData.forEach(studyData => this.__trashStudy(studyData));\n },\n\n __deleteOrRemoveMe: function(studyData) {\n const deleteAccess = osparc.data.model.Study.canIDelete(studyData[\"accessRights\"]);\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n const collabGids = Object.keys(studyData[\"accessRights\"]);\n const amICollaborator = collabGids.indexOf(myGid) > -1;\n return (!deleteAccess && collabGids.length > 1 && amICollaborator) ? \"remove\" : \"delete\";\n },\n\n __removeMeFromCollaborators: function(studyData) {\n const arCopy = osparc.utils.Utils.deepCloneObject(studyData[\"accessRights\"]);\n // remove me from collaborators\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n delete arCopy[myGid];\n return osparc.store.Study.patchStudyData(studyData, \"accessRights\", arCopy);\n },\n\n __doDeleteStudy: function(studyData) {\n let operationPromise = null;\n if (this.__deleteOrRemoveMe(studyData) === \"remove\") {\n operationPromise = this.__removeMeFromCollaborators(studyData);\n } else {\n // delete study\n operationPromise = osparc.store.Store.getInstance().deleteStudy(studyData.uuid);\n }\n operationPromise\n .then(() => this.__removeFromStudyList(studyData.uuid))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n })\n .finally(() => this.resetSelection());\n },\n\n __doDeleteStudies: function(studiesData) {\n studiesData.forEach(studyData => this.__doDeleteStudy(studyData));\n },\n\n __createConfirmTrashWindow: function(studyNames) {\n let msg = this.tr(\"Are you sure you want to delete\");\n if (studyNames.length > 1) {\n const studiesText = osparc.product.Utils.getStudyAlias({plural: true});\n msg += ` ${studyNames.length} ${studiesText}?`;\n } else {\n msg += ` '${studyNames[0]}'?`;\n }\n const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();\n msg += \"
\" + (studyNames.length > 1 ? \"They\" : \"It\") + this.tr(` will be permanently deleted after ${trashDays} days.`);\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"warning\",\n });\n osparc.utils.Utils.setIdToWidget(confirmationWin.getConfirmButton(), \"confirmDeleteStudyBtn\");\n return confirmationWin;\n },\n\n __createConfirmRemoveForMeWindow: function(studyName) {\n const msg = `'${studyName} ` + this.tr(\"will be removed from your list. Collaborators will still have access.\");\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Remove\"),\n confirmText: this.tr(\"Remove\"),\n confirmAction: \"delete\"\n });\n osparc.utils.Utils.setIdToWidget(confirmationWin.getConfirmButton(), \"confirmDeleteStudyBtn\");\n return confirmationWin;\n },\n\n __createConfirmDeleteWindow: function(studyNames) {\n let msg = this.tr(\"Are you sure you want to delete\");\n const studyAlias = osparc.product.Utils.getStudyAlias({plural: studyNames.length > 1});\n msg += (studyNames.length > 1 ? ` ${studyNames.length} ${studyAlias}?` : ` ${studyNames[0]}?`);\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\") + \" \" + studyAlias,\n confirmText: this.tr(\"Delete permanently\"),\n confirmAction: \"delete\"\n });\n osparc.utils.Utils.setIdToWidget(confirmationWin.getConfirmButton(), \"confirmDeleteStudyBtn\");\n return confirmationWin;\n },\n\n // TASKS //\n __tasksReceived: function(tasks) {\n tasks.forEach(taskData => this._taskDataReceived(taskData));\n },\n\n _taskDataReceived: function(taskData) {\n // a bit hacky\n if (taskData[\"task_id\"].includes(\"from_study\") && !taskData[\"task_id\"].includes(\"as_template\")) {\n const interval = 1000;\n const pollTasks = osparc.data.PollTasks.getInstance();\n const task = pollTasks.addTask(taskData, interval);\n if (task === null) {\n return;\n }\n // ask backend for studyData?\n const studyName = \"\";\n this.__taskDuplicateReceived(task, studyName);\n }\n },\n\n __taskDuplicateReceived: function(task, studyName) {\n const duplicateTaskUI = new osparc.task.Duplicate(studyName);\n duplicateTaskUI.setTask(task);\n duplicateTaskUI.start();\n const duplicatingStudyCard = this.__createDuplicateCard(studyName);\n duplicatingStudyCard.setTask(task);\n duplicatingStudyCard.subscribeToFilterGroup(\"searchBarFilter\");\n this._resourcesContainer.addNonResourceCard(duplicatingStudyCard);\n this.__attachDuplicateEventHandler(task, duplicateTaskUI, duplicatingStudyCard);\n },\n\n __attachDuplicateEventHandler: function(task, taskUI, duplicatingStudyCard) {\n const finished = (msg, msgLevel) => {\n if (msg) {\n osparc.FlashMessenger.logAs(msg, msgLevel);\n }\n taskUI.stop();\n this._resourcesContainer.removeNonResourceCard(duplicatingStudyCard);\n };\n\n task.addListener(\"taskAborted\", () => {\n const msg = this.tr(\"Duplication cancelled\");\n finished(msg, \"INFO\");\n });\n task.addListener(\"resultReceived\", e => {\n finished();\n const duplicatedStudyData = e.getData();\n this._updateStudyData(duplicatedStudyData);\n });\n task.addListener(\"pollingError\", e => {\n const err = e.getData();\n const msg = this.tr(\"Something went wrong Duplicating the study
\") + err.message;\n finished(msg, \"ERROR\");\n });\n }\n // TASKS //\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.TemplateBrowser\", {\n extend: osparc.dashboard.ResourceBrowserBase,\n\n construct: function() {\n this._resourceType = \"template\";\n this.base(arguments);\n },\n\n properties: {\n multiSelection: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeMultiSelection\",\n apply: \"__applyMultiSelection\"\n }\n },\n\n members: {\n __updateAllButton: null,\n\n // overridden\n initResources: function() {\n this._resourcesList = [];\n this.getChildControl(\"resources-layout\");\n this.reloadResources();\n this.__attachEventHandlers();\n this._hideLoadingPage();\n },\n\n reloadResources: function() {\n if (osparc.data.Permissions.getInstance().canDo(\"studies.templates.read\")) {\n this.__reloadTemplates();\n } else {\n this.__setResourcesToList([]);\n }\n },\n\n invalidateTemplates: function() {\n osparc.store.Store.getInstance().invalidate(\"templates\");\n },\n\n __attachEventHandlers: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n socket.on(\"projectStateUpdated\", data => {\n if (data) {\n const templateId = data[\"project_uuid\"];\n const state = (\"data\" in data) ? data.data : {};\n const errors = (\"errors\" in data) ? data.errors : [];\n this.__templateStateReceived(templateId, state, errors);\n }\n }, this);\n },\n\n __templateStateReceived: function(templateId, state, errors) {\n osparc.store.Store.getInstance().setTemplateState(templateId, state);\n const idx = this._resourcesList.findIndex(study => study[\"uuid\"] === templateId);\n if (idx > -1) {\n this._resourcesList[idx][\"state\"] = state;\n }\n const templateItem = this._resourcesContainer.getCards().find(card => osparc.dashboard.ResourceBrowserBase.isCardButtonItem(card) && card.getUuid() === templateId);\n if (templateItem) {\n templateItem.setState(state);\n }\n if (errors.length) {\n console.error(errors);\n }\n },\n\n __reloadTemplates: function() {\n osparc.data.Resources.getInstance().getAllPages(\"templates\")\n .then(templates => this.__setResourcesToList(templates))\n .catch(err => {\n console.error(err);\n this.__setResourcesToList([]);\n });\n },\n\n _updateTemplateData: function(templateData) {\n templateData[\"resourceType\"] = \"template\";\n const templatesList = this._resourcesList;\n const index = templatesList.findIndex(template => template[\"uuid\"] === templateData[\"uuid\"]);\n if (index !== -1) {\n templatesList[index] = templateData;\n this._reloadCards();\n }\n },\n\n __setResourcesToList: function(templatesList) {\n templatesList.forEach(template => template[\"resourceType\"] = \"template\");\n this._resourcesList = templatesList;\n this._reloadCards();\n },\n\n _reloadCards: function() {\n this._resourcesContainer.setResourcesToList(this._resourcesList);\n const cards = this._resourcesContainer.reloadCards(\"templates\");\n cards.forEach(card => {\n card.setMultiSelectionMode(this.getMultiSelection());\n card.addListener(\"tap\", () => this.__itemClicked(card), this);\n card.addListener(\"changeUpdatable\", () => this.__evaluateUpdateAllButton(), this);\n card.addListener(\"changeVisibility\", () => this.__evaluateUpdateAllButton(), this);\n this._populateCardMenu(card);\n });\n this.__evaluateUpdateAllButton();\n osparc.filter.UIFilterController.dispatch(\"searchBarFilter\");\n },\n\n __itemClicked: function(card) {\n if (!card.getBlocked()) {\n const templateData = this.__getTemplateData(card.getUuid());\n this._openResourceDetails(templateData);\n }\n this.resetSelection();\n },\n\n _createStudyFromTemplate: function(templateData) {\n if (!this._checkLoggedIn()) {\n return;\n }\n\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n this._showLoadingPage(this.tr(\"Creating \") + (templateData.name || studyAlias));\n\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const studyOptions = new osparc.study.StudyOptions();\n // they will be patched once the study is created\n studyOptions.setPatchStudy(false);\n studyOptions.setStudyData(templateData);\n studyOptions.getChildControl(\"open-button\").setLabel(this.tr(\"New\"));\n const win = osparc.study.StudyOptions.popUpInWindow(studyOptions);\n win.moveItUp();\n const cancelStudyOptions = () => {\n this._hideLoadingPage();\n win.close();\n }\n win.addListener(\"cancel\", () => cancelStudyOptions());\n studyOptions.addListener(\"cancel\", () => cancelStudyOptions());\n studyOptions.addListener(\"startStudy\", () => {\n const newName = studyOptions.getChildControl(\"title-field\").getValue();\n const walletSelection = studyOptions.getChildControl(\"wallet-selector\").getSelection();\n const nodesPricingUnits = studyOptions.getChildControl(\"study-pricing-units\").getNodePricingUnits();\n win.close();\n\n this._showLoadingPage(this.tr(\"Creating \") + (newName || studyAlias));\n osparc.study.Utils.createStudyFromTemplate(templateData, this._loadingPage)\n .then(newStudyData => {\n const studyId = newStudyData[\"uuid\"];\n const openCB = () => {\n this._hideLoadingPage();\n };\n const cancelCB = () => {\n this._hideLoadingPage();\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"delete\", params);\n };\n\n const promises = [];\n // patch the name\n if (newStudyData[\"name\"] !== newName) {\n promises.push(osparc.study.StudyOptions.updateName(newStudyData, newName));\n }\n // patch the wallet\n if (walletSelection.length && walletSelection[0][\"walletId\"]) {\n const walletId = walletSelection[0][\"walletId\"];\n promises.push(osparc.study.StudyOptions.updateWallet(newStudyData[\"uuid\"], walletId));\n }\n // patch the pricing units\n // the nodeIds are coming from the original template, they need to be mapped to the newStudy\n const workbench = newStudyData[\"workbench\"];\n const nodesIdsListed = [];\n Object.keys(workbench).forEach(nodeId => {\n const nodeData = workbench[nodeId];\n if (osparc.study.StudyPricingUnits.includeInList(nodeData)) {\n nodesIdsListed.push(nodeId);\n }\n });\n nodesPricingUnits.forEach((nodePricingUnits, idx) => {\n const selectedPricingUnitId = nodePricingUnits.getPricingUnits().getSelectedUnitId();\n if (selectedPricingUnitId) {\n const nodeId = nodesIdsListed[idx];\n const pricingPlanId = nodePricingUnits.getPricingPlanId();\n promises.push(osparc.study.NodePricingUnits.patchPricingUnitSelection(studyId, nodeId, pricingPlanId, selectedPricingUnitId));\n }\n });\n\n Promise.all(promises)\n .then(() => {\n win.close();\n const showStudyOptions = false;\n this._startStudyById(studyId, openCB, cancelCB, showStudyOptions);\n });\n })\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n });\n } else {\n osparc.study.Utils.createStudyFromTemplate(templateData, this._loadingPage)\n .then(newStudyData => {\n const studyId = newStudyData[\"uuid\"];\n const openCB = () => this._hideLoadingPage();\n const cancelCB = () => {\n this._hideLoadingPage();\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"delete\", params);\n };\n const isStudyCreation = true;\n this._startStudyById(studyId, openCB, cancelCB, isStudyCreation);\n })\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n }\n },\n\n // LAYOUT //\n _createLayout: function() {\n this._createSearchBar();\n this._createResourcesLayout(\"templatesList\");\n\n const updateAllButton = this.__createUpdateAllButton();\n if (updateAllButton) {\n this._toolbar.add(updateAllButton);\n }\n\n this._toolbar.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n this._addGroupByButton();\n this._addViewModeButton();\n\n this._addResourceFilter();\n\n this._resourcesContainer.addListener(\"changeVisibility\", () => this.__evaluateUpdateAllButton());\n\n return this._resourcesContainer;\n },\n\n __createUpdateAllButton: function() {\n const updateAllButton = this.__updateAllButton = new osparc.ui.form.FetchButton(this.tr(\"Update all\")).set({\n appearance: \"form-button-outlined\"\n });\n updateAllButton.exclude();\n updateAllButton.addListener(\"tap\", () => {\n const templatesAlias = osparc.product.Utils.getTemplateAlias({plural: true});\n const msg = this.tr(\"Are you sure you want to update all \") + templatesAlias + \"?\";\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Update\") + \" \" + templatesAlias,\n confirmText: this.tr(\"Update all\"),\n confirmAction: \"create\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__updateAllTemplates();\n }\n }, this);\n });\n return updateAllButton;\n },\n\n __evaluateUpdateAllButton: function() {\n if (this._resourcesContainer) {\n const visibleCards = this._resourcesContainer.getCards().filter(card => card.isVisible());\n const anyUpdatable = visibleCards.some(card => (card.getUpdatable() !== null && osparc.data.model.Study.canIWrite(card.getResourceData()[\"accessRights\"])));\n this.__updateAllButton.setVisibility(anyUpdatable ? \"visible\" : \"excluded\");\n }\n },\n\n __updateAllTemplates: async function() {\n if (this._resourcesContainer) {\n this.__updateAllButton.setFetching(true);\n const visibleCards = this._resourcesContainer.getCards().filter(card => card.isVisible());\n const updatableCards = visibleCards.filter(card => (card.getUpdatable() !== null && osparc.data.model.Study.canIWrite(card.getResourceData()[\"accessRights\"])));\n const templatesData = [];\n updatableCards.forEach(card => templatesData.push(card.getResourceData()));\n const uniqueTemplatesUuids = [];\n const uniqueTemplatesData = templatesData.filter(templateData => {\n const isDuplicate = uniqueTemplatesUuids.includes(templateData.uuid);\n if (!isDuplicate) {\n uniqueTemplatesUuids.push(templateData.uuid);\n return true;\n }\n return false;\n });\n await this.__updateTemplates(uniqueTemplatesData);\n\n this.__updateAllButton.setFetching(false);\n }\n },\n\n __updateTemplates: async function(uniqueTemplatesData) {\n for (const uniqueTemplateData of uniqueTemplatesData) {\n const studyData = osparc.data.model.Study.deepCloneStudyObject(uniqueTemplateData);\n const templatePromises = [];\n for (const nodeId in studyData[\"workbench\"]) {\n const node = studyData[\"workbench\"][nodeId];\n const latestCompatible = osparc.service.Utils.getLatestCompatible(node[\"key\"], node[\"version\"]);\n if (latestCompatible && (node[\"key\"] !== latestCompatible[\"key\"] || node[\"version\"] !== latestCompatible[\"version\"])) {\n const patchData = {};\n if (node[\"key\"] !== latestCompatible[\"key\"]) {\n patchData[\"key\"] = latestCompatible[\"key\"];\n }\n if (node[\"version\"] !== latestCompatible[\"version\"]) {\n patchData[\"version\"] = latestCompatible[\"version\"];\n }\n templatePromises.push(osparc.store.Study.patchNodeData(uniqueTemplateData, nodeId, patchData));\n }\n }\n Promise.all(templatePromises)\n .then(() => this._updateTemplateData(uniqueTemplateData))\n .catch(err => {\n if (\"message\" in err) {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n } else {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong\"), \"ERROR\");\n }\n });\n }\n },\n // LAYOUT //\n\n // MENU //\n _populateCardMenu: function(card) {\n const menu = card.getMenu();\n const templateData = card.getResourceData();\n\n const editButton = this.__getEditTemplateMenuButton(templateData);\n if (editButton) {\n menu.add(editButton);\n menu.addSeparator();\n }\n\n const openButton = this._getOpenMenuButton(templateData);\n if (openButton) {\n menu.add(openButton);\n }\n\n const shareButton = this._getShareMenuButton(card);\n if (shareButton) {\n menu.add(shareButton);\n }\n\n const tagsButton = this._getTagsMenuButton(card);\n if (tagsButton) {\n menu.add(tagsButton);\n }\n\n const deleteButton = this.__getDeleteTemplateMenuButton(templateData);\n if (deleteButton && editButton) {\n menu.addSeparator();\n menu.add(deleteButton);\n }\n },\n\n __getEditTemplateMenuButton: function(templateData) {\n const isCurrentUserOwner = osparc.data.model.Study.canIWrite(templateData[\"accessRights\"]);\n if (!isCurrentUserOwner) {\n return null;\n }\n\n const editButton = new qx.ui.menu.Button(this.tr(\"Edit\"));\n editButton.addListener(\"execute\", () => this.__editTemplate(templateData), this);\n return editButton;\n },\n\n __getTemplateData: function(id) {\n return this._resourcesList.find(template => template.uuid === id);\n },\n\n _deleteResourceRequested: function(templateId) {\n this.__deleteTemplateRequested(this.__getTemplateData(templateId));\n },\n\n __deleteTemplateRequested: function(templateData) {\n const rUSure = this.tr(\"Are you sure you want to delete \");\n const msg = rUSure + \"\" + templateData.name + \"?\";\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__doDeleteTemplate(templateData);\n }\n }, this);\n },\n\n __getDeleteTemplateMenuButton: function(templateData) {\n const isCurrentUserOwner = osparc.data.model.Study.canIDelete(templateData[\"accessRights\"]);\n if (!isCurrentUserOwner) {\n return null;\n }\n\n const deleteButton = new qx.ui.menu.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/12\");\n deleteButton.set({\n appearance: \"menu-button\"\n });\n osparc.utils.Utils.setIdToWidget(deleteButton, \"studyItemMenuDelete\");\n deleteButton.addListener(\"execute\", () => this.__deleteTemplateRequested(templateData), this);\n return deleteButton;\n },\n\n __editTemplate: function(studyData) {\n const isStudyCreation = false;\n this._startStudyById(studyData.uuid, null, null, isStudyCreation);\n },\n\n __doDeleteTemplate: function(studyData) {\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n const collabGids = Object.keys(studyData[\"accessRights\"]);\n const amICollaborator = collabGids.indexOf(myGid) > -1;\n\n let operationPromise = null;\n if (collabGids.length > 1 && amICollaborator) {\n const arCopy = osparc.utils.Utils.deepCloneObject(studyData[\"accessRights\"]);\n // remove collaborator\n delete arCopy[myGid];\n operationPromise = osparc.store.Study.patchStudyData(studyData, \"accessRights\", arCopy);\n } else {\n // delete study\n operationPromise = osparc.store.Store.getInstance().deleteStudy(studyData.uuid);\n }\n operationPromise\n .then(() => this.__removeFromTemplateList(studyData.uuid))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n });\n },\n\n __removeFromTemplateList: function(templateId) {\n const idx = this._resourcesList.findIndex(study => study[\"uuid\"] === templateId);\n if (idx > -1) {\n this._resourcesList.splice(idx, 1);\n }\n this._resourcesContainer.removeCard(templateId);\n },\n // MENU //\n\n // TASKS //\n __attachToTemplateEventHandler: function(task, taskUI, toTemplateCard) {\n const finished = (msg, msgLevel) => {\n if (msg) {\n osparc.FlashMessenger.logAs(msg, msgLevel);\n }\n taskUI.stop();\n this._resourcesContainer.removeNonResourceCard(toTemplateCard);\n };\n\n task.addListener(\"taskAborted\", () => {\n const msg = this.tr(\"Study to Template cancelled\");\n finished(msg, \"INFO\");\n });\n task.addListener(\"updateReceived\", e => {\n const updateData = e.getData();\n if (\"task_progress\" in updateData && toTemplateCard) {\n const progress = updateData[\"task_progress\"];\n toTemplateCard.getChildControl(\"progress-bar\").set({\n value: progress[\"percent\"]*100\n });\n toTemplateCard.getChildControl(\"state-label\").set({\n value: progress[\"message\"]\n });\n }\n }, this);\n task.addListener(\"resultReceived\", e => {\n finished();\n this.reloadResources();\n });\n task.addListener(\"pollingError\", e => {\n const err = e.getData();\n const msg = this.tr(\"Something went wrong Publishing the study
\") + err.message;\n finished(msg, \"ERROR\");\n });\n },\n\n _taskDataReceived: function(taskData) {\n // a bit hacky\n if (taskData[\"task_id\"].includes(\"from_study\") && taskData[\"task_id\"].includes(\"as_template\")) {\n const interval = 1000;\n const pollTasks = osparc.data.PollTasks.getInstance();\n const task = pollTasks.addTask(taskData, interval);\n if (task === null) {\n return;\n }\n // ask backend for studyData?\n const studyName = \"\";\n this.taskToTemplateReceived(task, studyName);\n }\n },\n\n taskToTemplateReceived: function(task, studyName) {\n const toTemplateTaskUI = new osparc.task.ToTemplate(studyName);\n toTemplateTaskUI.setTask(task);\n toTemplateTaskUI.start();\n const toTemplateCard = this.__createToTemplateCard(studyName);\n toTemplateCard.setTask(task);\n this.__attachToTemplateEventHandler(task, toTemplateTaskUI, toTemplateCard);\n },\n\n __createToTemplateCard: function(studyName) {\n const isGrid = this._resourcesContainer.getMode() === \"grid\";\n const toTemplateCard = isGrid ? new osparc.dashboard.GridButtonPlaceholder() : new osparc.dashboard.ListButtonPlaceholder();\n toTemplateCard.buildLayout(\n this.tr(\"Publishing \") + studyName,\n osparc.task.ToTemplate.ICON + (isGrid ? \"60\" : \"24\"),\n null,\n true\n );\n toTemplateCard.subscribeToFilterGroup(\"searchBarFilter\");\n this._resourcesContainer.addNonResourceCard(toTemplateCard);\n return toTemplateCard;\n }\n // TASKS //\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(form/service.json)\n * @asset(form/service-data.json)\n * @ignore(Headers)\n * @ignore(fetch)\n */\n\nqx.Class.define(\"osparc.dashboard.ServiceBrowser\", {\n extend: osparc.dashboard.ResourceBrowserBase,\n\n construct: function() {\n this._resourceType = \"service\";\n this.base(arguments);\n\n this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;\n },\n\n properties: {\n multiSelection: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeMultiSelection\",\n apply: \"__applyMultiSelection\"\n }\n },\n\n members: {\n __sortBy: null,\n\n // overridden\n initResources: function() {\n this._resourcesList = [];\n this.getChildControl(\"resources-layout\");\n this.reloadResources();\n this._hideLoadingPage();\n },\n\n reloadResources: function() {\n this.__loadServices();\n },\n\n __loadServices: function() {\n const excludeFrontend = true;\n const excludeDeprecated = true\n osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)\n .then(servicesList => this.__setServicesToList(servicesList));\n },\n\n _updateServiceData: function(serviceData) {\n serviceData[\"resourceType\"] = \"service\";\n const servicesList = this._resourcesList;\n const index = servicesList.findIndex(service => service[\"key\"] === serviceData[\"key\"] && service[\"version\"] === serviceData[\"version\"]);\n if (index !== -1) {\n servicesList[index] = serviceData;\n this._reloadCards();\n }\n },\n\n __setServicesToList: function(servicesList) {\n servicesList.forEach(service => service[\"resourceType\"] = \"service\");\n osparc.service.Utils.sortObjectsBasedOn(servicesList, this.__sortBy);\n this._resourcesList = servicesList;\n this._reloadCards();\n },\n\n _reloadCards: function() {\n this._resourcesContainer.setResourcesToList(this._resourcesList);\n const cards = this._resourcesContainer.reloadCards(\"services\");\n cards.forEach(card => {\n card.setMultiSelectionMode(this.getMultiSelection());\n card.addListener(\"tap\", () => this.__itemClicked(card), this);\n this._populateCardMenu(card);\n });\n osparc.filter.UIFilterController.dispatch(\"searchBarFilter\");\n },\n\n __itemClicked: function(card) {\n const serviceData = card.getResourceData();\n this._openResourceDetails(serviceData);\n this.resetSelection();\n },\n\n _createStudyFromService: function(key, version) {\n if (!this._checkLoggedIn()) {\n return;\n }\n\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n this._showLoadingPage(this.tr(\"Creating \") + studyAlias);\n\n osparc.study.Utils.createStudyFromService(key, version)\n .then(studyId => {\n const openCB = () => this._hideLoadingPage();\n const cancelCB = () => {\n this._hideLoadingPage();\n const params = {\n url: {\n studyId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"delete\", params);\n };\n const isStudyCreation = true;\n this._startStudyById(studyId, openCB, cancelCB, isStudyCreation);\n })\n .catch(err => {\n this._hideLoadingPage();\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n console.error(err);\n });\n },\n\n // LAYOUT //\n _createLayout: function() {\n this._createSearchBar();\n this._createResourcesLayout(\"servicesList\");\n\n this.__addNewServiceButtons();\n this._toolbar.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n this.__addSortingButtons();\n this._addGroupByButton();\n this._addViewModeButton();\n\n this._addResourceFilter();\n\n return this._resourcesContainer;\n },\n\n __addNewServiceButtons: function() {\n const platformName = osparc.store.StaticInfo.getInstance().getPlatformName();\n const hasRights = osparc.data.Permissions.getInstance().canDo(\"studies.template.create.productAll\");\n if (platformName === \"dev\") {\n const testDataButton = new qx.ui.form.Button(this.tr(\"Test with data\"), \"@FontAwesome5Solid/plus-circle/14\");\n testDataButton.addListener(\"execute\", () => {\n osparc.utils.Utils.fetchJSON(\"/resource/form/service-data.json\")\n .then(data => {\n this.__displayServiceSubmissionForm(data);\n });\n });\n this._toolbar.add(testDataButton);\n }\n\n const addServiceButton = new qx.ui.form.Button(this.tr(\"Submit new service\"), \"@FontAwesome5Solid/plus-circle/14\");\n addServiceButton.set({\n appearance: \"form-button-outlined\",\n visibility: hasRights ? \"visible\" : \"excluded\"\n });\n addServiceButton.addListener(\"execute\", () => this.__displayServiceSubmissionForm());\n this._toolbar.add(addServiceButton);\n },\n\n __addSortingButtons: function() {\n const containerSortButtons = new osparc.service.SortServicesButtons();\n containerSortButtons.set({\n appearance: \"form-button-outlined\"\n });\n containerSortButtons.addListener(\"sortBy\", e => {\n this.__sortBy = e.getData();\n this.__setServicesToList(this._resourcesList);\n }, this);\n this._toolbar.add(containerSortButtons);\n },\n\n _populateCardMenu: function(card) {\n const menu = card.getMenu();\n const serviceData = card.getResourceData();\n\n const openButton = this._getOpenMenuButton(serviceData);\n if (openButton) {\n menu.add(openButton);\n }\n },\n\n __displayServiceSubmissionForm: function(formData) {\n const addServiceWindow = new osparc.ui.window.Window(this.tr(\"Submit a new service\")).set({\n modal: true,\n autoDestroy: true,\n showMinimize: false,\n allowMinimize: false,\n centerOnAppear: true,\n layout: new qx.ui.layout.Grow(),\n width: 600,\n height: 660\n });\n const scroll = new qx.ui.container.Scroll();\n addServiceWindow.add(scroll);\n const form = new osparc.form.json.JsonSchemaForm(\"/resource/form/service.json\", formData);\n form.addListener(\"ready\", () => {\n addServiceWindow.open();\n });\n form.addListener(\"submit\", e => {\n const data = e.getData();\n const headers = new Headers();\n headers.append(\"Accept\", \"application/json\");\n const body = new FormData();\n body.append(\"metadata\", new Blob([JSON.stringify(data.json)], {\n type: \"application/json\"\n }));\n if (data.files && data.files.length) {\n const size = data.files[0].size;\n const maxSize = 10 * 1000 * 1000; // 10 MB\n if (size > maxSize) {\n osparc.FlashMessenger.logAs(`The file is too big. Maximum size is ${maxSize}MB. Please provide with a smaller file or a repository URL.`, \"ERROR\");\n return;\n }\n body.append(\"attachment\", data.files[0], data.files[0].name);\n }\n form.setFetching(true);\n fetch(\"/v0/publications/service-submission\", {\n method: \"POST\",\n headers,\n body\n })\n .then(resp => {\n if (resp.ok) {\n osparc.FlashMessenger.logAs(\"Your data was sent to our curation team. We will get back to you shortly.\", \"INFO\");\n addServiceWindow.close();\n } else {\n osparc.FlashMessenger.logAs(`A problem occurred while processing your data: ${resp.statusText}`, \"ERROR\");\n }\n })\n .finally(() => form.setFetching(false));\n });\n scroll.add(form);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that provides access to the data belonging to the active user.\n * - On the left side: myData FilesTree with the FileLabelWithActions\n * - On the right side: a pie chart reflecting the data resources consumed (hidden until there is real info)\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let dataManager = new osparc.dashboard.DataBrowser();\n * this.getRoot().add(dataManager);\n *
\n */\n\nqx.Class.define(\"osparc.dashboard.DataBrowser\", {\n extend: osparc.dashboard.ResourceBrowserBase,\n\n construct: function() {\n this._resourceType = \"data\";\n this.base(arguments);\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tree-folder-view\":\n control = new osparc.file.TreeFolderView();\n this._addToLayout(control, {\n flex: 1\n });\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n // overridden\n initResources: function() {\n this._hideLoadingPage();\n this.__buildLayout();\n\n this.addListener(\"appear\", () => {\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n treeFolderView.getChildControl(\"folder-tree\").populateTree();\n treeFolderView.getChildControl(\"folder-viewer\").setFolder(treeFolderView.getChildControl(\"folder-tree\").getModel());\n }, this);\n },\n\n __buildLayout: function() {\n this.set({\n marginTop: 20\n });\n\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n\n const reloadButton = treeFolderView.getChildControl(\"reload-button\");\n reloadButton.addListener(\"execute\", () => this.__reloadTree(), this);\n\n const selectedFileLayout = treeFolderView.getChildControl(\"folder-viewer\").getChildControl(\"selected-file-layout\");\n selectedFileLayout.addListener(\"fileDeleted\", e => this.__fileDeleted(e.getData()), this);\n },\n\n __reloadTree: function() {\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n\n const foldersTree = treeFolderView.getChildControl(\"folder-tree\");\n foldersTree.resetCache();\n foldersTree.populateTree();\n\n const folderViewer = treeFolderView.getChildControl(\"folder-viewer\");\n folderViewer.resetFolder();\n },\n\n __fileDeleted: function(fileMetadata) {\n // After deleting a file, try to keep the user in the same folder.\n // If the folder doesn't longer exist, open the closest available parent\n\n const path = fileMetadata[\"fileUuid\"].split(\"/\");\n\n const treeFolderView = this.getChildControl(\"tree-folder-view\");\n const foldersTree = treeFolderView.getChildControl(\"folder-tree\");\n const folderViewer = treeFolderView.getChildControl(\"folder-viewer\");\n\n const openSameFolder = () => {\n // drop last, which is the file\n path.pop();\n treeFolderView.openPath(path);\n };\n\n folderViewer.resetFolder();\n const locationId = fileMetadata[\"locationId\"];\n const datasetId = path[0];\n foldersTree.resetCache();\n foldersTree.populateTree()\n .then(datasetPromises => {\n Promise.all(datasetPromises)\n .then(() => foldersTree.requestDatasetFiles(locationId, datasetId))\n .then(() => openSameFolder());\n })\n .catch(err => console.error(err));\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A split panes divides an area into two panes. The ratio between the two\n * panes is configurable by the user using the splitter.\n *\n * @childControl slider {qx.ui.splitpane.Slider} shown during resizing the splitpane\n * @childControl splitter {qx.ui.splitpane.Splitter} splitter to resize the splitpane\n */\nqx.Class.define(\"qx.ui.splitpane.Pane\",\n{\n extend : qx.ui.core.Widget,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * Creates a new instance of a SplitPane. It allows the user to dynamically\n * resize the areas dropping the border between.\n *\n * @param orientation {String} The orientation of the split pane control.\n * Allowed values are \"horizontal\" (default) and \"vertical\".\n */\n construct : function(orientation)\n {\n this.base(arguments);\n\n this.__children = [];\n\n // Initialize orientation\n if (orientation) {\n this.setOrientation(orientation);\n } else {\n this.initOrientation();\n }\n\n // add all pointer listener to the blocker\n this.__blocker.addListener(\"pointerdown\", this._onPointerDown, this);\n this.__blocker.addListener(\"pointerup\", this._onPointerUp, this);\n this.__blocker.addListener(\"pointermove\", this._onPointerMove, this);\n this.__blocker.addListener(\"pointerout\", this._onPointerOut, this);\n this.__blocker.addListener(\"losecapture\", this._onPointerUp, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"splitpane\"\n },\n\n /**\n * Distance between pointer and splitter when the cursor should change\n * and enable resizing.\n */\n offset :\n {\n check : \"Integer\",\n init : 6,\n apply : \"_applyOffset\"\n },\n\n /**\n * The orientation of the splitpane control.\n */\n orientation :\n {\n init : \"horizontal\",\n check : [ \"horizontal\", \"vertical\" ],\n apply : \"_applyOrientation\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n\n __splitterOffset : null,\n __activeDragSession : false,\n __lastPointerX : null,\n __lastPointerY : null,\n __isHorizontal : null,\n __beginSize : null,\n __endSize : null,\n __children : null,\n __blocker : null,\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n // Create and add slider\n case \"slider\":\n control = new qx.ui.splitpane.Slider(this);\n control.exclude();\n this._add(control, {type : id});\n break;\n\n // Create splitter\n case \"splitter\":\n control = new qx.ui.splitpane.Splitter(this);\n this._add(control, {type : id});\n control.addListener(\"move\", this.__onSplitterMove, this);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n /**\n * Move handler for the splitter which takes care of the external\n * triggered resize of children.\n *\n * @param e {qx.event.type.Data} The data even of move.\n */\n __onSplitterMove : function(e) {\n this.__setBlockerPosition(e.getData());\n },\n\n\n /**\n * Creates a blocker for the splitter which takes all bouse events and\n * also handles the offset and cursor.\n *\n * @param orientation {String} The orientation of the pane.\n */\n __createBlocker : function(orientation) {\n this.__blocker = new qx.ui.splitpane.Blocker(orientation);\n this.getContentElement().add(this.__blocker);\n\n var splitter = this.getChildControl(\"splitter\");\n var splitterWidth = splitter.getWidth();\n if (!splitterWidth) {\n splitter.addListenerOnce(\"appear\", function() {\n this.__setBlockerPosition();\n }, this);\n }\n\n // resize listener to remove the blocker in case the splitter\n // is removed.\n splitter.addListener(\"resize\", function(e) {\n var bounds = e.getData();\n if (this.getChildControl(\"splitter\").getVisible() && (bounds.height == 0 || bounds.width == 0)) {\n this.__blocker.hide();\n } else {\n this.__blocker.show();\n }\n }, this);\n },\n\n\n /**\n * Returns the blocker used over the splitter. this could be used for\n * adding event listeners like tap or dbltap.\n *\n * @return {qx.ui.splitpane.Blocker} The used blocker element.\n *\n * @internal\n */\n getBlocker : function() {\n return this.__blocker;\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Apply routine for the orientation property.\n *\n * Sets the pane's layout to vertical or horizontal split layout.\n *\n * @param value {String} The new value of the orientation property\n * @param old {String} The old value of the orientation property\n */\n _applyOrientation : function(value, old)\n {\n var slider = this.getChildControl(\"slider\");\n var splitter = this.getChildControl(\"splitter\");\n\n // Store boolean flag for faster access\n this.__isHorizontal = value === \"horizontal\";\n\n if (!this.__blocker) {\n this.__createBlocker(value);\n }\n\n // update the blocker\n this.__blocker.setOrientation(value);\n\n // Dispose old layout\n var oldLayout = this._getLayout();\n if (oldLayout) {\n oldLayout.dispose();\n }\n\n // Create new layout\n var newLayout = value === \"vertical\" ?\n new qx.ui.splitpane.VLayout : new qx.ui.splitpane.HLayout;\n this._setLayout(newLayout);\n\n // Update states for splitter and slider\n splitter.removeState(old);\n splitter.addState(value);\n splitter.getChildControl(\"knob\").removeState(old);\n splitter.getChildControl(\"knob\").addState(value);\n slider.removeState(old);\n slider.addState(value);\n\n // flush (needs to be done for the blocker update) and update the blocker\n qx.ui.core.queue.Manager.flush();\n this.__setBlockerPosition();\n },\n\n\n // property apply\n _applyOffset : function(value, old) {\n this.__setBlockerPosition();\n },\n\n /**\n * Helper for setting the blocker to the right position, which depends on\n * the offset, orientation and the current position of the splitter.\n *\n * @param bounds {Map?null} If the bounds of the splitter are known,\n * they can be added.\n */\n __setBlockerPosition : function(bounds) {\n var splitter = this.getChildControl(\"splitter\");\n var offset = this.getOffset();\n var splitterBounds = splitter.getBounds();\n var splitterElem = splitter.getContentElement().getDomElement();\n\n // do nothing if the splitter is not ready\n if (!splitterElem) {\n return;\n }\n\n // recalculate the dimensions of the blocker\n if (this.__isHorizontal) {\n // get the width either of the given bounds or of the read bounds\n var width = null;\n if (bounds) {\n width = bounds.width;\n } else if (splitterBounds) {\n width = splitterBounds.width;\n }\n var left = bounds && bounds.left;\n\n if (width || !this.getChildControl(\"splitter\").getVisible()) {\n if (isNaN(left)) {\n left = qx.bom.element.Location.getPosition(splitterElem).left;\n }\n this.__blocker.setWidth(offset, width || 6);\n this.__blocker.setLeft(offset, left);\n }\n\n // vertical case\n } else {\n // get the height either of the given bounds or of the read bounds\n var height = null;\n if (bounds) {\n height = bounds.height;\n } else if (splitterBounds) {\n height = splitterBounds.height;\n }\n var top = bounds && bounds.top;\n\n if (height || !this.getChildControl(\"splitter\").getVisible()) {\n if (isNaN(top)) {\n top = qx.bom.element.Location.getPosition(splitterElem).top;\n }\n this.__blocker.setHeight(offset, height || 6);\n this.__blocker.setTop(offset, top);\n }\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Adds a widget to the pane.\n *\n * Sets the pane's layout to vertical or horizontal split layout. Depending on the\n * pane's layout the first widget will be the left or top widget, the second one\n * the bottom or right widget. Adding more than two widgets will overwrite the\n * existing ones.\n *\n * @param widget {qx.ui.core.Widget} The widget to be inserted into pane.\n * @param flex {Number} The (optional) layout property for the widget's flex value.\n */\n add : function(widget, flex)\n {\n if (flex == null) {\n this._add(widget);\n } else {\n this._add(widget, {flex : flex});\n }\n this.__children.push(widget);\n },\n\n\n /**\n * Removes the given widget from the pane.\n *\n * @param widget {qx.ui.core.Widget} The widget to be removed.\n */\n remove : function(widget)\n {\n this._remove(widget);\n qx.lang.Array.remove(this.__children, widget);\n },\n\n\n /**\n * Returns an array containing the pane's content.\n *\n * @return {qx.ui.core.Widget[]} The pane's child widgets\n */\n getChildren : function() {\n return this.__children;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n POINTER LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Handler for pointerdown event.\n *\n * Shows slider widget and starts drag session if pointer is near/on splitter widget.\n *\n * @param e {qx.event.type.Pointer} pointerdown event\n */\n _onPointerDown : function(e)\n {\n // Only proceed if left pointer button is pressed and the splitter is active\n if (!e.isLeftPressed()) {\n return;\n }\n\n var splitter = this.getChildControl(\"splitter\");\n\n // Store offset between pointer event coordinates and splitter\n var splitterLocation = splitter.getContentLocation();\n var paneLocation = this.getContentLocation();\n this.__splitterOffset = this.__isHorizontal ?\n e.getDocumentLeft() - splitterLocation.left + paneLocation.left :\n e.getDocumentTop() - splitterLocation.top + paneLocation.top ;\n\n // Synchronize slider to splitter size and show it\n var slider = this.getChildControl(\"slider\");\n var splitterBounds = splitter.getBounds();\n slider.setUserBounds(\n splitterBounds.left, splitterBounds.top,\n splitterBounds.width || 6, splitterBounds.height || 6\n );\n\n slider.setZIndex(splitter.getZIndex() + 1);\n slider.show();\n\n // Enable session\n this.__activeDragSession = true;\n this.__blocker.capture();\n\n e.stop();\n },\n\n\n /**\n * Handler for pointermove event.\n *\n * @param e {qx.event.type.Pointer} pointermove event\n */\n _onPointerMove : function(e)\n {\n this._setLastPointerPosition(e.getDocumentLeft(), e.getDocumentTop());\n\n // Check if slider is already being dragged\n if (this.__activeDragSession)\n {\n // Compute new children sizes\n this.__computeSizes();\n\n // Update slider position\n var slider = this.getChildControl(\"slider\");\n var pos = this.__beginSize;\n\n if(this.__isHorizontal) {\n slider.setDomLeft(pos);\n this.__blocker.setStyle(\"left\", (pos - this.getOffset()) + \"px\");\n } else {\n slider.setDomTop(pos);\n this.__blocker.setStyle(\"top\", (pos - this.getOffset()) + \"px\");\n }\n\n e.stop();\n }\n },\n\n\n /**\n * Handler for pointerout event\n *\n * @param e {qx.event.type.Pointer} pointerout event\n */\n _onPointerOut : function(e)\n {\n this._setLastPointerPosition(e.getDocumentLeft(), e.getDocumentTop());\n },\n\n\n /**\n * Handler for pointerup event\n *\n * Sets widget sizes if dragging session has been active.\n *\n * @param e {qx.event.type.Pointer} pointerup event\n */\n _onPointerUp : function(e)\n {\n if (!this.__activeDragSession) {\n return;\n }\n\n // Set sizes to both widgets\n this._finalizeSizes();\n\n // Hide the slider\n var slider = this.getChildControl(\"slider\");\n slider.exclude();\n\n // Cleanup\n this.__activeDragSession = false;\n this.releaseCapture();\n\n e.stop();\n },\n\n\n /*\n ---------------------------------------------------------------------------\n INTERVAL HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * Updates widgets' sizes based on the slider position.\n */\n _finalizeSizes : function()\n {\n var beginSize = this.__beginSize;\n var endSize = this.__endSize;\n\n if (beginSize == null) {\n return;\n }\n\n var children = this._getChildren();\n var firstWidget = children[2];\n var secondWidget = children[3];\n\n // Read widgets' flex values\n var firstFlexValue = firstWidget.getLayoutProperties().flex;\n var secondFlexValue = secondWidget.getLayoutProperties().flex;\n\n // Both widgets have flex values\n if((firstFlexValue != 0) && (secondFlexValue != 0))\n {\n firstWidget.setLayoutProperties({ flex : beginSize });\n secondWidget.setLayoutProperties({ flex : endSize });\n }\n\n // Update both sizes\n else\n {\n // Set widths to static widgets\n if (this.__isHorizontal)\n {\n firstWidget.setWidth(beginSize);\n secondWidget.setWidth(endSize);\n }\n else\n {\n firstWidget.setHeight(beginSize);\n secondWidget.setHeight(endSize);\n }\n }\n },\n\n\n /**\n * Computes widgets' sizes based on the pointer coordinate.\n */\n __computeSizes : function()\n {\n if (this.__isHorizontal) {\n var min=\"minWidth\", size=\"width\", max=\"maxWidth\", pointer=this.__lastPointerX;\n } else {\n var min=\"minHeight\", size=\"height\", max=\"maxHeight\", pointer=this.__lastPointerY;\n }\n\n var children = this._getChildren();\n var beginHint = children[2].getSizeHint();\n var endHint = children[3].getSizeHint();\n\n // Area given to both widgets\n var allocatedSize = children[2].getBounds()[size] + children[3].getBounds()[size];\n\n // Calculate widget sizes\n var beginSize = pointer - this.__splitterOffset;\n var endSize = allocatedSize - beginSize;\n\n // Respect minimum limits\n if (beginSize < beginHint[min])\n {\n endSize -= beginHint[min] - beginSize;\n beginSize = beginHint[min];\n }\n else if (endSize < endHint[min])\n {\n beginSize -= endHint[min] - endSize;\n endSize = endHint[min];\n }\n\n // Respect maximum limits\n if (beginSize > beginHint[max])\n {\n endSize += beginSize - beginHint[max];\n beginSize = beginHint[max];\n }\n else if (endSize > endHint[max])\n {\n beginSize += endSize - endHint[max];\n endSize = endHint[max];\n }\n\n // Store sizes\n this.__beginSize = beginSize;\n this.__endSize = endSize;\n },\n\n\n /**\n * Determines whether this is an active drag session\n *\n * @return {Boolean} True if active drag session, otherwise false.\n */\n _isActiveDragSession : function() {\n return this.__activeDragSession;\n },\n\n\n /**\n * Sets the last pointer position.\n *\n * @param x {Integer} the x position of the pointer.\n * @param y {Integer} the y position of the pointer.\n */\n _setLastPointerPosition : function(x, y)\n {\n this.__lastPointerX = x;\n this.__lastPointerY = y;\n }\n },\n\n\n destruct : function() {\n this.__children = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* eslint-disable no-underscore-dangle */\n\nqx.Class.define(\"osparc.desktop.WorkbenchView\", {\n extend: qx.ui.splitpane.Pane,\n\n construct: function() {\n this.base(arguments, \"horizontal\");\n\n this.setOffset(2);\n osparc.desktop.WorkbenchView.decorateSplitter(this.getChildControl(\"splitter\"));\n osparc.desktop.WorkbenchView.decorateSlider(this.getChildControl(\"slider\"));\n\n this.getChildControl(\"side-panels\");\n this.getChildControl(\"main-panel-tabs\");\n this.__workbenchPanel = new osparc.desktop.WorkbenchPanel();\n this.__workbenchUI = this.__workbenchPanel.getMainView();\n\n this.__attachEventHandlers();\n },\n\n statics: {\n PRIMARY_COL_BG_COLOR: \"transparent\",\n TAB_BUTTON_HEIGHT: 46,\n\n decorateSplitter: function(splitter) {\n splitter.set({\n width: 2,\n backgroundColor: \"workbench-view-splitter\"\n });\n },\n\n decorateSlider: function(slider) {\n slider.set({\n width: 2,\n backgroundColor: \"visual-blue\",\n opacity: 1\n });\n },\n\n openStudyDataManager: function(node) {\n const win = osparc.widget.StudyDataManager.popUpInWindow(null, node.getNodeId(), node.getLabel());\n const closeBtn = win.getChildControl(\"close-button\");\n osparc.utils.Utils.setIdToWidget(closeBtn, \"nodeDataManagerCloseBtn\");\n }\n },\n\n events: {\n \"changeSelectedNode\": \"qx.event.type.Data\",\n \"collapseNavBar\": \"qx.event.type.Event\",\n \"expandNavBar\": \"qx.event.type.Event\",\n \"backToDashboardPressed\": \"qx.event.type.Event\",\n \"slidesEdit\": \"qx.event.type.Event\",\n \"annotationRectStart\": \"qx.event.type.Event\",\n \"takeSnapshot\": \"qx.event.type.Event\",\n \"showSnapshots\": \"qx.event.type.Event\",\n \"createIterations\": \"qx.event.type.Event\",\n \"showIterations\": \"qx.event.type.Event\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"__applyStudy\",\n nullable: false\n },\n\n maximized: {\n check: \"Boolean\",\n init: null,\n nullable: false,\n apply: \"__applyMaximized\",\n event: \"changeMaximized\"\n }\n },\n\n members: {\n __nodesPage: null,\n __studyTreeItem: null,\n __nodesTree: null,\n __storagePage: null,\n __studyOptionsPage: null,\n __fileInfoPage: null,\n __serviceOptionsPage: null,\n __workbenchPanel: null,\n __workbenchPanelPage: null,\n __workbenchUI: null,\n __workbenchUIConnected: null,\n __iframePage: null,\n __loggerPage: null,\n __loggerView: null,\n __currentNodeId: null,\n __startAppButton: null,\n __editSlidesButton: null,\n __startAppButtonTB: null,\n __collapseWithUserMenu: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"side-panels\": {\n control = new qx.ui.splitpane.Pane(\"horizontal\").set({\n offset: 2,\n width: Math.min(parseInt(window.innerWidth * (0.16 + 0.24)), 550)\n });\n osparc.desktop.WorkbenchView.decorateSplitter(control.getChildControl(\"splitter\"));\n osparc.desktop.WorkbenchView.decorateSlider(control.getChildControl(\"slider\"));\n this.add(control, 0); // flex 0\n break;\n }\n case \"collapsible-view-left\": {\n const sidePanels = this.getChildControl(\"side-panels\");\n control = new osparc.widget.CollapsibleViewLight().set({\n minWidth: osparc.widget.CollapsibleViewLight.CARET_WIDTH,\n width: Math.min(parseInt(window.innerWidth * 0.16), 240)\n });\n control.getChildControl(\"expand-button\").setBackgroundColor(this.self().PRIMARY_COL_BG_COLOR);\n control.getChildControl(\"collapse-button\").setBackgroundColor(this.self().PRIMARY_COL_BG_COLOR);\n const caretExpandedLayout = control.getChildControl(\"caret-expanded-layout\");\n caretExpandedLayout.addAt(this.__createCollapsibleViewSpacer(), 0);\n const caretCollapsedLayout = control.getChildControl(\"caret-collapsed-layout\");\n caretCollapsedLayout.addAt(this.__createCollapsibleViewSpacer(), 0);\n control.bind(\"collapsed\", control, \"maxWidth\", {\n converter: collapsed => collapsed ? osparc.widget.CollapsibleViewLight.CARET_WIDTH : null\n });\n control.bind(\"collapsed\", sidePanels, \"width\", {\n converter: collapsed => this.__getSidePanelsNewWidth(collapsed, sidePanels, control)\n });\n control.addListener(\"changeCollapsed\", e => {\n const collapsed = e.getData();\n const collapsibleViewLeft = this.getChildControl(\"collapsible-view-right\");\n // if both panes are collapsed set the maxWidth of the layout to 2*15\n if (collapsed && collapsibleViewLeft.isCollapsed()) {\n sidePanels.setMaxWidth(2 * osparc.widget.CollapsibleViewLight.CARET_WIDTH);\n } else {\n sidePanels.setMaxWidth(null);\n }\n }, this);\n // flex 0 by default, this will be changed if \"collapsible-view-right\" gets collapsed\n sidePanels.add(control, 0);\n break;\n }\n case \"collapsible-view-right\": {\n const sidePanels = this.getChildControl(\"side-panels\");\n control = new osparc.widget.CollapsibleViewLight().set({\n minWidth: 15,\n width: Math.min(parseInt(window.innerWidth * 0.24), 310)\n });\n const caretExpandedLayout = control.getChildControl(\"caret-expanded-layout\");\n caretExpandedLayout.addAt(this.__createCollapsibleViewSpacer(), 0);\n const caretCollapsedLayout = control.getChildControl(\"caret-collapsed-layout\");\n caretCollapsedLayout.addAt(this.__createCollapsibleViewSpacer(), 0);\n control.bind(\"collapsed\", control, \"maxWidth\", {\n converter: collapsed => collapsed ? osparc.widget.CollapsibleViewLight.CARET_WIDTH : null\n });\n control.bind(\"collapsed\", sidePanels, \"width\", {\n converter: collapsed => this.__getSidePanelsNewWidth(collapsed, sidePanels, control)\n });\n control.addListener(\"changeCollapsed\", e => {\n // switch flex to 1 if the secondary pane gets collapsed\n const collapsed = e.getData();\n const collapsibleViewLeft = this.getChildControl(\"collapsible-view-left\");\n collapsibleViewLeft.setLayoutProperties({flex: collapsed ? 1 : 0});\n control.setLayoutProperties({flex: collapsed ? 0 : 1});\n // if both panes are collapsed set the maxWidth of the layout to 2*15\n if (collapsed && collapsibleViewLeft.isCollapsed()) {\n sidePanels.setMaxWidth(2 * osparc.widget.CollapsibleViewLight.CARET_WIDTH);\n } else {\n sidePanels.setMaxWidth(null);\n }\n }, this);\n sidePanels.add(control, 1); // flex 1\n break;\n }\n case \"side-panel-left-tabs\": {\n control = new qx.ui.tabview.TabView().set({\n contentPadding: osparc.widget.CollapsibleViewLight.CARET_WIDTH + 2, // collapse bar + padding\n contentPaddingRight: 2,\n barPosition: \"top\"\n });\n const collapsibleViewLeft = this.getChildControl(\"collapsible-view-left\");\n collapsibleViewLeft.setContent(control);\n break;\n }\n case \"side-panel-right-tabs\": {\n control = new qx.ui.tabview.TabView().set({\n contentPadding: osparc.widget.CollapsibleViewLight.CARET_WIDTH + 2, // collapse bar + padding\n contentPaddingRight: 2,\n barPosition: \"top\"\n });\n const collapsibleViewRight = this.getChildControl(\"collapsible-view-right\");\n collapsibleViewRight.setContent(control);\n break;\n }\n case \"main-panel-tabs\": {\n control = new qx.ui.tabview.TabView().set({\n contentPadding: 2,\n barPosition: \"top\"\n });\n this.add(control, 1); // flex 1\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n getNodesTree: function() {\n return this.__nodesTree;\n },\n\n getWorkbenchUI: function() {\n return this.__workbenchUI;\n },\n\n __getSidePanelsNewWidth: function(collapsing, sidePanels, collapsibleView) {\n let sidePanelsNewWidth = null;\n const sidePanelsWidth = (sidePanels.getBounds() && (\"width\" in sidePanels.getBounds())) ? sidePanels.getBounds().width : 250;\n if (collapsing) {\n const content = collapsibleView.getChildControl(\"scroll-content\");\n sidePanelsNewWidth = (content.getBounds() && (\"width\" in content.getBounds())) ? sidePanelsWidth - content.getBounds().width : 150;\n } else if (\"precollapseWidth\" in collapsibleView) {\n sidePanelsNewWidth = sidePanelsWidth + (collapsibleView.precollapseWidth - osparc.widget.CollapsibleViewLight.CARET_WIDTH);\n }\n return sidePanelsNewWidth;\n },\n\n __applyStudy: function(study) {\n if (study) {\n this.__initViews();\n this.__connectEvents();\n\n study.getWorkbench().addListener(\"pipelineChanged\", () => this.__evalSlidesButtons());\n study.getUi().getSlideshow().addListener(\"changeSlideshow\", () => this.__evalSlidesButtons());\n study.getUi().addListener(\"changeMode\", () => this.__evalSlidesButtons());\n this.__evalSlidesButtons();\n\n // if there are no nodes, preselect the study item (show study info)\n const nodes = study.getWorkbench().getNodes();\n if (Object.values(nodes).length === 0) {\n this.__studyTreeItem.selectStudyItem();\n }\n }\n this.__workbenchPanel.getToolbar().setStudy(study);\n },\n\n __createTabPage: function(icon, tooltip, widget, backgroundColor = \"background-main\") {\n const tabPage = new qx.ui.tabview.Page().set({\n layout: new qx.ui.layout.VBox(10),\n backgroundColor,\n icon: icon + \"/16\"\n });\n const tabPageBtn = tabPage.getChildControl(\"button\").set({\n toolTipText: tooltip,\n margin: [12, 2, 0],\n padding: [8, 10, 8, 10],\n height: this.self().TAB_BUTTON_HEIGHT,\n alignX: \"center\",\n alignY: \"middle\",\n backgroundColor\n });\n tabPageBtn.bind(\"value\", tabPageBtn, \"backgroundColor\", {\n converter: val => val ? \"default-button-disabled-background\" : undefined\n });\n tabPageBtn.bind(\"value\", tabPageBtn, \"textColor\", {\n converter: val => val ? \"default-button-text-outline\" : \"default-button-text-action\"\n });\n tabPageBtn.bind(\"value\", tabPageBtn, \"decorator\", {\n converter: val => val ? \"tab-button-selected\" : \"tab-button\"\n });\n if (widget) {\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(widget);\n tabPage.add(scrollView, {\n flex: 1\n });\n }\n return tabPage;\n },\n\n __initViews: function() {\n const study = this.getStudy();\n if (study === null) {\n return;\n }\n\n this.__initPrimaryColumn();\n this.__initSecondaryColumn();\n this.__initMainView();\n\n this.setMaximized(false);\n },\n\n __initPrimaryColumn: function() {\n const study = this.getStudy();\n\n const tabViewPrimary = this.getChildControl(\"side-panel-left-tabs\");\n this.__removePages(tabViewPrimary);\n tabViewPrimary.setBackgroundColor(this.self().PRIMARY_COL_BG_COLOR);\n\n const topBar = tabViewPrimary.getChildControl(\"bar\");\n topBar.set({\n height: this.self().TAB_BUTTON_HEIGHT,\n backgroundColor: \"workbench-view-navbar\"\n });\n this.__addTopBarSpacer(topBar);\n\n const homeAndNodesTree = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({\n backgroundColor: \"transparent\"\n });\n\n const studyTreeItem = this.__studyTreeItem = new osparc.widget.StudyTitleOnlyTree().set({\n alignY: \"middle\",\n minHeight: 32,\n maxHeight: 32,\n backgroundColor: \"transparent\"\n });\n studyTreeItem.setStudy(study);\n homeAndNodesTree.add(studyTreeItem);\n\n const nodesTree = this.__nodesTree = new osparc.widget.NodesTree().set({\n backgroundColor: \"transparent\",\n allowGrowY: true,\n minHeight: 5\n });\n nodesTree.setStudy(study);\n homeAndNodesTree.add(nodesTree);\n\n const addNewNodeBtn = new qx.ui.form.Button().set({\n appearance: \"form-button\",\n label: this.tr(\"New Node\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false,\n alignX: \"center\",\n marginLeft: 10\n });\n this.getStudy().bind(\"pipelineRunning\", addNewNodeBtn, \"enabled\", {\n converter: running => !running\n });\n osparc.utils.Utils.setIdToWidget(addNewNodeBtn, \"newNodeBtn\");\n addNewNodeBtn.addListener(\"execute\", () => {\n this.__workbenchUI.openServiceCatalog({\n x: 50,\n y: 50\n });\n });\n homeAndNodesTree.add(addNewNodeBtn);\n\n const nodesPage = this.__nodesPage = this.__createTabPage(\"@FontAwesome5Solid/list\", this.tr(\"Nodes\"), homeAndNodesTree, this.self().PRIMARY_COL_BG_COLOR);\n tabViewPrimary.add(nodesPage);\n\n const filesTree = new osparc.file.FilesTree().set({\n backgroundColor: \"transparent\",\n dragMechanism: true,\n hideRoot: true\n });\n filesTree.populateTree();\n const storagePage = this.__storagePage = this.__createTabPage(\"@FontAwesome5Solid/database\", this.tr(\"Storage\"), filesTree, this.self().PRIMARY_COL_BG_COLOR);\n tabViewPrimary.add(storagePage);\n\n this.__addTopBarSpacer(topBar);\n },\n\n __initSecondaryColumn: function() {\n const tabViewSecondary = this.getChildControl(\"side-panel-right-tabs\");\n this.__removePages(tabViewSecondary);\n tabViewSecondary.setBackgroundColor(this.self().PRIMARY_COL_BG_COLOR);\n const topBar = tabViewSecondary.getChildControl(\"bar\");\n topBar.set({\n height: this.self().TAB_BUTTON_HEIGHT,\n backgroundColor: \"workbench-view-navbar\"\n });\n this.__addTopBarSpacer(topBar);\n\n const studyOptionsPage = this.__studyOptionsPage = this.__createTabPage(\"@FontAwesome5Solid/book\", this.tr(\"Study options\"));\n studyOptionsPage.getLayout().set({\n separator: \"separator-vertical\",\n spacing: 10\n });\n studyOptionsPage.exclude();\n tabViewSecondary.add(studyOptionsPage);\n\n const fileInfoPage = this.__fileInfoPage = this.__createTabPage(\"@FontAwesome5Solid/info\", this.tr(\"Information\"));\n fileInfoPage.exclude();\n tabViewSecondary.add(fileInfoPage);\n\n const serviceOptionsPage = this.__serviceOptionsPage = this.__createTabPage(\"@FontAwesome5Solid/exchange-alt\", this.tr(\"Service options\"));\n serviceOptionsPage.exclude();\n tabViewSecondary.add(serviceOptionsPage);\n\n this.__addTopBarSpacer(topBar);\n\n this.__populateSecondaryColumn();\n },\n\n __initMainView: function() {\n const study = this.getStudy();\n\n const tabViewMain = this.getChildControl(\"main-panel-tabs\");\n this.__removePages(tabViewMain);\n\n const topBar = tabViewMain.getChildControl(\"bar\");\n topBar.set({\n height: this.self().TAB_BUTTON_HEIGHT,\n alignY: \"top\",\n backgroundColor: \"workbench-view-navbar\"\n });\n this.__addTopBarSpacer(topBar);\n\n this.__workbenchUI.setStudy(study);\n this.__workbenchUI.loadModel(study.getWorkbench());\n const workbenchPanelPage = this.__workbenchPanelPage = this.__createTabPage(\"@FontAwesome5Solid/object-group\", this.tr(\"Workbench\"), this.__workbenchPanel);\n tabViewMain.add(workbenchPanelPage);\n\n const iframePage = this.__iframePage = this.__createTabPage(\"@FontAwesome5Solid/desktop\", this.tr(\"Interactive\"));\n osparc.utils.Utils.setIdToWidget(iframePage.getChildControl(\"button\"), \"iframeTabButton\");\n tabViewMain.add(iframePage);\n\n const loggerView = this.__loggerView = new osparc.widget.logger.LoggerView();\n const loggerPage = this.__loggerPage = this.__createTabPage(\"@FontAwesome5Solid/file-alt\", this.tr(\"Logger\"), loggerView);\n osparc.utils.Utils.setIdToWidget(loggerPage.getChildControl(\"button\"), \"loggerTabButton\");\n tabViewMain.add(loggerPage);\n\n this.__addTopBarSpacer(topBar);\n\n const startAppButtonTB = this.__startAppButtonTB = new qx.ui.form.Button().set({\n appearance: \"form-button-outlined\",\n label: this.tr(\"App Mode\"),\n toolTipText: this.tr(\"Start App Mode\"),\n icon: \"@FontAwesome5Solid/play/14\",\n marginRight: 10,\n marginTop: 7,\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS\n });\n startAppButtonTB.addListener(\"execute\", () => study.getUi().setMode(\"app\"));\n topBar.add(startAppButtonTB);\n\n const collapseWithUserMenu = this.__collapseWithUserMenu = new osparc.desktop.CollapseWithUserMenu();\n [\n \"backToDashboardPressed\",\n \"collapseNavBar\",\n \"expandNavBar\"\n ].forEach(signalName => collapseWithUserMenu.addListener(signalName, () => this.fireEvent(signalName)), this);\n\n topBar.add(collapseWithUserMenu);\n },\n\n getCollapseWithUserMenu: function() {\n return this.__collapseWithUserMenu;\n },\n\n __removePages: function(tabView) {\n // remove pages\n osparc.utils.Utils.removeAllChildren(tabView);\n // remove spacers\n const topBar = tabView.getChildControl(\"bar\");\n topBar.removeAll();\n },\n\n __addTopBarSpacer: function(tabViewTopBar) {\n const spacer = new qx.ui.core.Widget().set({\n backgroundColor: \"workbench-view-navbar\"\n });\n tabViewTopBar.add(spacer, {\n flex: 1\n });\n },\n\n __createCollapsibleViewSpacer: function() {\n const spacer = new qx.ui.core.Widget().set({\n backgroundColor: \"workbench-view-navbar\",\n height: this.self().TAB_BUTTON_HEIGHT\n });\n return spacer;\n },\n\n __connectEvents: function() {\n const studyTreeItem = this.__studyTreeItem;\n const nodesTree = this.__nodesTree;\n const workbenchUI = this.__workbenchUI;\n\n studyTreeItem.addListener(\"changeSelectedNode\", () => {\n nodesTree.resetSelection();\n this.showPipeline();\n\n this.getStudy().getUi().setCurrentNodeId(this.getStudy().getUuid());\n });\n nodesTree.addListener(\"changeSelectedNode\", e => {\n studyTreeItem.resetSelection();\n const nodeId = e.getData();\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n this.__populateSecondaryColumn(node);\n this.__openIframeTab(node);\n }\n this.__loggerView.setCurrentNodeId(nodeId);\n this.__workbenchUI.nodeSelected(nodeId);\n this.fireDataEvent(\"changeSelectedNode\", nodeId);\n\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n });\n\n if (this.__workbenchUIConnected === null) {\n workbenchUI.addListener(\"changeSelectedNode\", e => {\n // one click\n const nodeId = e.getData();\n if (nodeId) {\n studyTreeItem.resetSelection();\n this.__nodesTree.nodeSelected(nodeId);\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n this.__populateSecondaryColumn(node);\n this.__evalIframe(node);\n this.__loggerView.setCurrentNodeId(nodeId);\n this.fireDataEvent(\"changeSelectedNode\", nodeId);\n\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n } else {\n // empty selection\n this.__studyTreeItem.selectStudyItem();\n\n this.getStudy().getUi().setCurrentNodeId(this.getStudy().getUuid());\n }\n });\n workbenchUI.addListener(\"nodeSelected\", e => {\n // double click\n const nodeId = e.getData();\n if (nodeId) {\n studyTreeItem.resetSelection();\n this.__nodesTree.nodeSelected(nodeId);\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n this.__populateSecondaryColumn(node);\n this.__openIframeTab(node);\n this.__loggerView.setCurrentNodeId(nodeId);\n\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n }\n }, this);\n }\n\n nodesTree.addListener(\"fullscreenNode\", e => {\n const nodeId = e.getData();\n if (nodeId) {\n studyTreeItem.resetSelection();\n this.fullscreenNode(nodeId);\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n }\n }, this);\n nodesTree.addListener(\"removeNode\", e => {\n const nodeId = e.getData();\n this.__removeNode(nodeId);\n }, this);\n\n if (this.__workbenchUIConnected === null) {\n workbenchUI.addListener(\"removeNode\", e => {\n const nodeId = e.getData();\n this.__removeNode(nodeId);\n }, this);\n workbenchUI.addListener(\"removeNodes\", e => {\n const nodeIds = e.getData();\n this.__removeNodes(nodeIds);\n }, this);\n workbenchUI.addListener(\"removeEdge\", e => {\n const edgeId = e.getData();\n this.__removeEdge(edgeId);\n }, this);\n workbenchUI.addListener(\"requestOpenLogger\", e => {\n const nodeId = e.getData();\n this.__loggerView.filterByNode(nodeId);\n this.__openLoggerTab();\n }, this);\n }\n\n const workbench = this.getStudy().getWorkbench();\n workbench.addListener(\"pipelineChanged\", this.__workbenchChanged, this);\n\n workbench.addListener(\"showInLogger\", e => {\n const data = e.getData();\n const nodeId = data.nodeId;\n const msg = data.msg;\n const logLevel = (\"level\" in data) ? data[\"level\"] : \"INFO\";\n this.logsToLogger(nodeId, [msg], logLevel);\n }, this);\n\n workbench.addListener(\"fileRequested\", () => {\n if (this.getStudy().getUi().getMode() === \"workbench\") {\n const tabViewLeftPanel = this.getChildControl(\"side-panel-left-tabs\");\n tabViewLeftPanel.setSelection([this.__storagePage]);\n }\n }, this);\n\n this.__workbenchUIConnected = true;\n },\n\n logsToLogger: function(nodeId, logs, logLevel) {\n // the node logger is mainly used in App Mode\n const nodeLogger = this.__getNodeLogger(nodeId);\n switch (logLevel) {\n case \"DEBUG\":\n this.__loggerView.debugs(nodeId, logs);\n if (nodeLogger) {\n nodeLogger.debugs(nodeId, logs);\n }\n break;\n case \"WARNING\":\n this.__loggerView.warns(nodeId, logs);\n if (nodeLogger) {\n nodeLogger.warns(nodeId, logs);\n }\n break;\n case \"ERROR\":\n this.__loggerView.errors(nodeId, logs);\n if (nodeLogger) {\n nodeLogger.errors(nodeId, logs);\n }\n break;\n default:\n this.__loggerView.infos(nodeId, logs);\n if (nodeLogger) {\n nodeLogger.infos(nodeId, logs);\n }\n break;\n }\n },\n\n getStartStopButtons: function() {\n return this.__workbenchPanel.getToolbar().getChildControl(\"start-stop-btns\");\n },\n\n getSelectedNodeIDs: function() {\n if (this.__workbenchPanel.getMainView() === this.__workbenchUI) {\n return this.__workbenchUI.getSelectedNodeIDs();\n }\n return [this.__currentNodeId];\n },\n\n nodeSelected: function(nodeId) {\n if (!this.isPropertyInitialized(\"study\")) {\n return;\n }\n const study = this.getStudy();\n if (nodeId === null || nodeId === undefined) {\n nodeId = study.getUuid();\n }\n\n this.__currentNodeId = nodeId;\n study.getUi().setCurrentNodeId(nodeId);\n\n if (this.__nodesTree) {\n this.__nodesTree.nodeSelected(nodeId);\n }\n\n if (nodeId === study.getUuid()) {\n this.__studyTreeItem.selectStudyItem();\n } else {\n const node = study.getWorkbench().getNode(nodeId);\n this.__populateSecondaryColumn(node);\n }\n },\n\n __evalIframe: function(node) {\n if (node && node.getIFrame()) {\n this.__iframePage.getChildControl(\"button\").set({\n enabled: true\n });\n this.__addIframe(node);\n } else {\n this.__iframePage.getChildControl(\"button\").set({\n enabled: false\n });\n }\n },\n\n __openWorkbenchTab: function() {\n const tabViewMain = this.getChildControl(\"main-panel-tabs\");\n tabViewMain.setSelection([this.__workbenchPanelPage]);\n },\n\n __openIframeTab: function(node) {\n this.__evalIframe(node);\n const tabViewMain = this.getChildControl(\"main-panel-tabs\");\n if (node && node.getIFrame()) {\n tabViewMain.setSelection([this.__iframePage]);\n } else {\n tabViewMain.setSelection([this.__workbenchPanelPage]);\n }\n },\n\n __openLoggerTab: function() {\n const tabViewMain = this.getChildControl(\"main-panel-tabs\");\n tabViewMain.setSelection([this.__loggerPage]);\n },\n\n __applyMaximized: function(maximized) {\n this.getBlocker().setStyles({\n display: maximized ? \"none\" : \"block\"\n });\n\n this.getChildControl(\"side-panels\").setVisibility(maximized ? \"excluded\" : \"visible\");\n\n const tabViewMain = this.getChildControl(\"main-panel-tabs\");\n const mainViewTopBar = tabViewMain.getChildControl(\"bar\");\n mainViewTopBar.setVisibility(maximized ? \"excluded\" : \"visible\");\n },\n\n __addIframe: function(node) {\n this.__iframePage.removeAll();\n\n const loadingPage = node.getLoadingPage();\n const iFrame = node.getIFrame();\n if (loadingPage && iFrame) {\n [\n loadingPage,\n iFrame\n ].forEach(widget => {\n if (widget) {\n widget.addListener(\"maximize\", () => this.setMaximized(true), this);\n widget.addListener(\"restore\", () => this.setMaximized(false), this);\n }\n });\n node.getIframeHandler().addListener(\"iframeChanged\", () => this.__iFrameChanged(node), this);\n iFrame.addListener(\"load\", () => this.__iFrameChanged(node), this);\n this.__iFrameChanged(node);\n } else {\n // This will keep what comes after at the bottom\n this.__iframePage.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n }\n },\n\n __iFrameChanged: function(node) {\n this.__iframePage.removeAll();\n\n if (node && node.getIFrame()) {\n const loadingPage = node.getLoadingPage();\n const iFrame = node.getIFrame();\n const src = iFrame.getSource();\n const iFrameView = (src === null || src === \"about:blank\") ? loadingPage : iFrame;\n this.__iframePage.add(iFrameView, {\n flex: 1\n });\n }\n },\n\n __populateSecondaryColumn: function(node) {\n [\n this.__studyOptionsPage,\n this.__fileInfoPage,\n this.__serviceOptionsPage\n ].forEach(page => {\n page.removeAll();\n page.getChildControl(\"button\").exclude();\n });\n\n const tabViewLeftPanel = this.getChildControl(\"side-panel-left-tabs\");\n tabViewLeftPanel.setSelection([this.__nodesPage]);\n\n if (node instanceof osparc.data.model.Study) {\n this.__populateSecondaryColumnStudy(node);\n } else if (node && node.isFilePicker()) {\n this.__populateSecondaryColumnFilePicker(node);\n } else if (node && node.isParameter()) {\n this.__populateSecondaryColumnParameter(node);\n } else if (node) {\n this.__populateSecondaryColumnNode(node);\n }\n },\n\n __populateSecondaryColumnStudy: function(study) {\n this.__studyOptionsPage.getChildControl(\"button\").show();\n this.getChildControl(\"side-panel-right-tabs\").setSelection([this.__studyOptionsPage]);\n\n const scrollView = new qx.ui.container.Scroll();\n const secondaryColumnStudyContent = new qx.ui.container.Composite(new qx.ui.layout.VBox(15)).set({\n backgroundColor: \"transparent\"\n });\n scrollView.add(secondaryColumnStudyContent);\n this.__studyOptionsPage.add(scrollView, {\n flex: 1\n });\n\n secondaryColumnStudyContent.add(new osparc.info.StudyMedium(study), {\n flex: 1\n });\n\n secondaryColumnStudyContent.add(this.__getSlideshowSection());\n\n secondaryColumnStudyContent.add(this.__getAnnotationsSection());\n\n const snaps = this.__getSnapshotsSection();\n snaps.exclude();\n const isVCDisabled = osparc.utils.DisabledPlugins.isVersionControlDisabled();\n snaps.setVisibility(isVCDisabled ? \"excluded\" : \"visible\");\n secondaryColumnStudyContent.add(snaps);\n\n const iters = this.__getIterationsSection();\n const isMMDisabled = osparc.utils.DisabledPlugins.isMetaModelingDisabled();\n snaps.setVisibility(isMMDisabled ? \"excluded\" : \"visible\");\n secondaryColumnStudyContent.add(iters);\n },\n\n __getSlideshowSection: function() {\n const slideshowSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n slideshowSection.add(new qx.ui.basic.Label(this.tr(\"App Mode\")).set({\n font: \"text-14\"\n }));\n\n const slideshowButtons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n slideshowSection.add(slideshowButtons);\n\n const buttonsHeight = 28;\n const editSlidesBtn = this.__editSlidesButton = new qx.ui.form.Button().set({\n label: this.tr(\"Edit\"),\n icon: \"@FontAwesome5Solid/edit/14\",\n height: buttonsHeight\n });\n editSlidesBtn.addListener(\"execute\", () => this.fireEvent(\"slidesEdit\"), this);\n slideshowButtons.add(editSlidesBtn);\n\n const startAppBtn = this.__startAppButton = new qx.ui.form.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/14\",\n toolTipText: this.tr(\"Start App Mode\"),\n height: buttonsHeight\n });\n startAppBtn.addListener(\"execute\", () => this.getStudy().getUi().setMode(\"app\"), this);\n slideshowButtons.add(startAppBtn);\n\n this.__evalSlidesButtons();\n\n return slideshowSection;\n },\n\n __evalSlidesButtons: function() {\n const study = this.getStudy();\n if (study && this.__editSlidesButton) {\n const canIWrite = osparc.data.model.Study.canIWrite(study.getAccessRights());\n this.__editSlidesButton.setEnabled(canIWrite);\n const canStart = study.hasSlideshow() || study.getWorkbench().isPipelineLinear();\n this.__startAppButton.setEnabled(canStart);\n this.__startAppButtonTB.setVisibility(canStart ? \"visible\" : \"hidden\");\n }\n },\n\n __getAnnotationsSection: function() {\n const annotationsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n annotationsSection.add(new qx.ui.basic.Label(this.tr(\"Annotations\")).set({\n font: \"text-14\"\n }));\n\n const annotationsButtons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n annotationsSection.add(annotationsButtons);\n\n const buttonsHeight = 28;\n const addNoteBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Note\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n height: buttonsHeight\n });\n addNoteBtn.addListener(\"execute\", () => this.__workbenchUI.startAnnotationsNote(), this);\n annotationsButtons.add(addNoteBtn);\n\n const addRectBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Rectangle\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n height: buttonsHeight\n });\n addRectBtn.addListener(\"execute\", () => this.__workbenchUI.startAnnotationsRect(), this);\n annotationsButtons.add(addRectBtn);\n\n const addTextBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Text\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n height: buttonsHeight\n });\n addTextBtn.addListener(\"execute\", () => this.__workbenchUI.startAnnotationsText(), this);\n annotationsButtons.add(addTextBtn);\n\n return annotationsSection;\n },\n\n __getSnapshotsSection: function() {\n const snapshotSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n snapshotSection.add(new qx.ui.basic.Label(this.tr(\"Checkpoints\")).set({\n font: \"text-14\"\n }));\n\n const snapshotButtons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n snapshotSection.add(snapshotButtons);\n\n const buttonsHeight = 28;\n const takeSnapshotBtn = new qx.ui.form.Button().set({\n label: this.tr(\"New\"),\n height: buttonsHeight\n });\n takeSnapshotBtn.setEnabled(osparc.data.Permissions.getInstance().canDo(\"study.snapshot.create\"));\n takeSnapshotBtn.addListener(\"execute\", () => this.fireEvent(\"takeSnapshot\"), this);\n snapshotButtons.add(takeSnapshotBtn);\n\n const showSnapshotsBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Show\"),\n height: buttonsHeight\n });\n const store = osparc.store.Store.getInstance();\n store.bind(\"snapshots\", showSnapshotsBtn, \"enabled\", {\n converter: snapshots => Boolean(snapshots.length)\n });\n showSnapshotsBtn.addListener(\"execute\", () => this.fireEvent(\"showSnapshots\"), this);\n snapshotButtons.add(showSnapshotsBtn);\n\n return snapshotSection;\n },\n\n __getIterationsSection: function() {\n const iterationsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n iterationsSection.add(new qx.ui.basic.Label(this.tr(\"Iterations\")).set({\n font: \"text-14\"\n }));\n\n const iterationButtons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n iterationsSection.add(iterationButtons);\n\n const buttonsHeight = 28;\n const createIterationsBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Create\"),\n height: buttonsHeight\n });\n createIterationsBtn.setEnabled(osparc.data.Permissions.getInstance().canDo(\"study.snapshot.create\"));\n createIterationsBtn.setEnabled(false);\n createIterationsBtn.addListener(\"execute\", () => this.fireEvent(\"createIterations\"), this);\n iterationButtons.add(createIterationsBtn);\n\n const showIterationsBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Show\"),\n height: buttonsHeight\n });\n const store = osparc.store.Store.getInstance();\n store.bind(\"iterations\", showIterationsBtn, \"enabled\", {\n converter: iterations => Boolean(iterations.length)\n });\n showIterationsBtn.addListener(\"execute\", () => this.fireEvent(\"showIterations\"), this);\n iterationButtons.add(showIterationsBtn);\n\n return iterationsSection;\n },\n\n __populateSecondaryColumnFilePicker: function(filePicker) {\n const fpView = new osparc.file.FilePicker(filePicker, \"workbench\");\n if (osparc.file.FilePicker.hasOutputAssigned(filePicker.getOutputs())) {\n this.__fileInfoPage.getChildControl(\"button\").show();\n this.getChildControl(\"side-panel-right-tabs\").setSelection([this.__fileInfoPage]);\n\n this.__fileInfoPage.add(fpView, {\n flex: 1\n });\n } else {\n // empty File Picker\n const tabViewLeftPanel = this.getChildControl(\"side-panel-left-tabs\");\n tabViewLeftPanel.setSelection([this.__storagePage]);\n\n this.__serviceOptionsPage.getChildControl(\"button\").show();\n this.getChildControl(\"side-panel-right-tabs\").setSelection([this.__serviceOptionsPage]);\n\n this.__serviceOptionsPage.add(fpView, {\n flex: 1\n });\n }\n [\n \"itemReset\",\n \"itemSelected\",\n \"fileUploaded\"\n ].forEach(ev => fpView.addListener(ev, () => this.__populateSecondaryColumn(filePicker)));\n },\n\n __populateSecondaryColumnParameter: function(parameter) {\n this.__serviceOptionsPage.getChildControl(\"button\").show();\n this.getChildControl(\"side-panel-right-tabs\").setSelection([this.__serviceOptionsPage]);\n\n const view = new osparc.node.ParameterEditor(parameter);\n view.buildForm(false);\n this.__serviceOptionsPage.add(view, {\n flex: 1\n });\n },\n\n __populateSecondaryColumnNode: async function(node) {\n this.__serviceOptionsPage.getChildControl(\"button\").show();\n this.getChildControl(\"side-panel-right-tabs\").setSelection([this.__serviceOptionsPage]);\n\n const spacing = 8;\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n separator: \"separator-vertical\",\n spacing: spacing*2\n }));\n\n this.__serviceOptionsPage.bind(\"width\", vBox, \"width\");\n\n // HEADER\n const nodeMetadata = node.getMetaData();\n const version = osparc.service.Utils.getVersionDisplay(nodeMetadata[\"key\"], nodeMetadata[\"version\"]);\n const header = new qx.ui.basic.Label(`${nodeMetadata[\"name\"]} ${version}`).set({\n paddingLeft: 5\n });\n vBox.add(header);\n\n // INPUTS FORM\n if (node.isPropertyInitialized(\"propsForm\") && node.getPropsForm()) {\n const inputsForm = node.getPropsForm();\n const inputs = new osparc.desktop.PanelView(this.tr(\"Inputs\"), inputsForm);\n inputs._innerContainer.set({\n margin: spacing\n });\n vBox.add(inputs);\n }\n\n // OUTPUTS\n const outputsBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(spacing));\n const outputsForm = node.getOutputsForm();\n if (node.hasOutputs() && outputsForm) {\n outputsForm.set({\n offerProbes: true\n });\n outputsBox.add(outputsForm);\n }\n\n const nodeFilesBtn = new qx.ui.form.Button(this.tr(\"Service data\"), \"@FontAwesome5Solid/folder-open/14\").set({\n allowGrowX: false,\n allowGrowY: false\n });\n osparc.utils.Utils.setIdToWidget(nodeFilesBtn, \"nodeFilesBtn\");\n nodeFilesBtn.addListener(\"execute\", () => this.self().openStudyDataManager(node));\n outputsBox.add(nodeFilesBtn);\n\n const outputs = new osparc.desktop.PanelView(this.tr(\"Outputs\"), outputsBox);\n outputs._innerContainer.set({\n margin: spacing\n });\n vBox.add(outputs);\n\n // NODE OPTIONS\n const nodeOptions = this.__getNodeOptionsPage(node);\n if (nodeOptions) {\n const options = new osparc.desktop.PanelView(this.tr(\"Options\"), nodeOptions);\n options._innerContainer.set({\n margin: spacing\n });\n nodeOptions.bind(\"visibility\", options, \"visibility\");\n vBox.add(options);\n }\n\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(vBox);\n this.__serviceOptionsPage.add(scrollContainer, {\n flex: 1\n });\n },\n\n __getNodeOptionsPage: function(node) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return null;\n }\n\n const nodeOptions = new osparc.widget.NodeOptions(node);\n nodeOptions.buildLayout();\n\n return nodeOptions;\n },\n\n getLogger: function() {\n return this.__loggerView;\n },\n\n __getNodeLogger: function(nodeId) {\n const nodes = this.getStudy().getWorkbench().getNodes();\n for (const node of Object.values(nodes)) {\n if (nodeId === node.getNodeId()) {\n return node.getLogger();\n }\n }\n return null;\n },\n\n __attachEventHandlers: function() {\n const maximizeIframeCb = msg => this.setMaximized(msg.getData());\n this.addListener(\"appear\", () => qx.event.message.Bus.getInstance().subscribe(\"maximizeIframe\", maximizeIframeCb, this), this);\n this.addListener(\"disappear\", () => qx.event.message.Bus.getInstance().unsubscribe(\"maximizeIframe\", maximizeIframeCb, this), this);\n },\n\n __removeNode: function(nodeId) {\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (node) {\n const avoidConfirmation = node.isFilePicker() && !osparc.file.FilePicker.hasOutputAssigned(node.getOutputs());\n const preferencesSettings = osparc.Preferences.getInstance();\n if (!avoidConfirmation && preferencesSettings.getConfirmDeleteNode()) {\n const msg = this.tr(\"Are you sure you want to delete the selected node?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Node\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__doRemoveNode(nodeId);\n }\n }, this);\n } else {\n this.__doRemoveNode(nodeId);\n }\n }\n },\n\n __removeNodes: function(nodeIds) {\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteNode()) {\n const msg = this.tr(\"Are you sure you want to delete the selected \") + nodeIds.length + \" nodes?\";\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Nodes\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n nodeIds.forEach(nodeId => this.__doRemoveNode(nodeId));\n }\n }, this);\n } else {\n nodeIds.forEach(nodeId => this.__doRemoveNode(nodeId));\n }\n },\n\n __doRemoveNode: async function(nodeId) {\n const workbench = this.getStudy().getWorkbench();\n const connectedEdges = workbench.getConnectedEdges(nodeId);\n const removed = await workbench.removeNode(nodeId);\n if (removed) {\n // remove first the connected edges\n for (let i = 0; i < connectedEdges.length; i++) {\n const edgeId = connectedEdges[i];\n this.__workbenchUI.clearEdge(edgeId);\n }\n this.__workbenchUI.clearNode(nodeId);\n }\n if ([this.__currentNodeId, null].includes(this.__nodesTree.getCurrentNodeId())) {\n this.nodeSelected(this.getStudy().getUuid());\n }\n },\n\n __removeEdge: function(edgeId) {\n const workbench = this.getStudy().getWorkbench();\n const removed = workbench.removeEdge(edgeId);\n if (removed) {\n this.__workbenchUI.clearEdge(edgeId);\n }\n },\n\n __workbenchChanged: function() {\n this.__nodesTree.populateTree();\n this.__nodesTree.nodeSelected(this.__currentNodeId);\n },\n\n showPipeline: function() {\n this.__populateSecondaryColumn(this.getStudy());\n this.__evalIframe();\n this.__openWorkbenchTab();\n this.__loggerView.setCurrentNodeId(null);\n\n this.getStudy().getUi().setCurrentNodeId(this.getStudy().getUuid());\n },\n\n fullscreenNode: function(nodeId) {\n const node = this.getStudy().getWorkbench().getNode(nodeId);\n if (node && node.isDynamic()) {\n qx.event.Timer.once(() => {\n this.__populateSecondaryColumn(node);\n this.__openIframeTab(node);\n node.getIFrame().maximizeIFrame(true);\n }, this, 10);\n }\n this.__loggerView.setCurrentNodeId(nodeId);\n this.__workbenchUI.nodeSelected(nodeId);\n },\n\n openFirstNode: function() {\n const validNodes = this.getStudy().getNonFrontendNodes();\n if (validNodes.length === 1 && validNodes[0].isDynamic()) {\n const dynamicNode = validNodes[0];\n this.fullscreenNode(dynamicNode.getNodeId());\n this.getStudy().getUi().setCurrentNodeId(dynamicNode.getNodeId());\n } else {\n this.setMaximized(false);\n this.nodeSelected(this.getStudy().getUuid());\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.SlideshowView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n const slideshowToolbar = this.__slideshowToolbar = new osparc.desktop.SlideshowToolbar().set({\n backgroundColor: \"workbench-view-navbar\"\n });\n\n const collapseWithUserMenu = this.__collapseWithUserMenu = new osparc.desktop.CollapseWithUserMenu();\n [\n \"backToDashboardPressed\",\n \"collapseNavBar\",\n \"expandNavBar\"\n ].forEach(signalName => collapseWithUserMenu.addListener(signalName, () => this.fireEvent(signalName)), this);\n // eslint-disable-next-line no-underscore-dangle\n slideshowToolbar._add(collapseWithUserMenu);\n\n slideshowToolbar.addListener(\"saveSlideshow\", () => {\n if (this.__currentNodeId) {\n const slideshow = this.getStudy().getUi().getSlideshow();\n if (!Object.keys(slideshow).includes(this.__currentNodeId)) {\n this.__openFirstNode();\n }\n } else {\n this.__openFirstNode();\n }\n }, this);\n slideshowToolbar.addListener(\"nodeSelectionRequested\", e => {\n const nodeId = e.getData();\n this.__moveToNode(nodeId);\n }, this);\n slideshowToolbar.addListener(\"addServiceBetween\", e => {\n const {\n leftNodeId,\n rightNodeId\n } = e.getData();\n this.__requestServiceBetween(leftNodeId, rightNodeId);\n }, this);\n slideshowToolbar.addListener(\"removeNode\", e => {\n const nodeId = e.getData();\n this.__removeNode(nodeId);\n }, this);\n slideshowToolbar.addListener(\"showNode\", e => {\n const {\n nodeId,\n desiredPos\n } = e.getData();\n this.__showNode(nodeId, desiredPos);\n }, this);\n slideshowToolbar.addListener(\"hideNode\", e => {\n const nodeId = e.getData();\n this.__hideNode(nodeId);\n }, this);\n slideshowToolbar.addListener(\"slidesStop\", () => this.getStudy().getUi().setMode(\"workbench\"), this);\n this._add(slideshowToolbar);\n\n const mainView = this.__mainView = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"center\"\n }));\n this._add(mainView, {\n flex: 1\n });\n\n const prevNextButtons = this.__prevNextButtons = new osparc.navigation.PrevNextButtons();\n prevNextButtons.addListener(\"nodeSelected\", e => {\n const nodeId = e.getData();\n this.__moveToNode(nodeId);\n }, this);\n prevNextButtons.addListener(\"runPressed\", e => {\n const nodeId = e.getData();\n this.fireDataEvent(\"startPartialPipeline\", [nodeId]);\n }, this);\n const prevButton = this.__prevButton = prevNextButtons.getPreviousButton().set({\n alignX: \"right\",\n alignY: \"middle\"\n });\n const nextButton = this.__nextButton = prevNextButtons.getNextButton().set({\n alignX: \"left\",\n alignY: \"middle\"\n });\n const runButton = this.__runButton = prevNextButtons.getRunButton().set({\n alignX: \"left\",\n alignY: \"middle\"\n });\n mainView.add(prevButton);\n mainView.add(nextButton);\n mainView.add(runButton);\n },\n\n events: {\n \"startPartialPipeline\": \"qx.event.type.Data\",\n \"stopPipeline\": \"qx.event.type.Event\",\n \"backToDashboardPressed\": \"qx.event.type.Event\",\n \"collapseNavBar\": \"qx.event.type.Event\",\n \"expandNavBar\": \"qx.event.type.Event\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"_applyStudy\",\n nullable: false\n },\n\n maximized: {\n check: \"Boolean\",\n init: null,\n nullable: false,\n apply: \"__applyMaximized\",\n event: \"changeMaximized\"\n },\n },\n\n statics: {\n CARD_MARGIN: 6\n },\n\n members: {\n __slideshowToolbar: null,\n __collapseWithUserMenu: null,\n __mainView: null,\n __prevNextButtons: null,\n __prevButton: null,\n __nextButton: null,\n __runButton: null,\n __nodeView: null,\n __currentNodeId: null,\n\n getSelectedNodeIDs: function() {\n return [this.__currentNodeId];\n },\n\n getCollapseWithUserMenu: function() {\n return this.__collapseWithUserMenu;\n },\n\n __isNodeReady: function(lastCurrentNodeId) {\n const node = this.getStudy().getWorkbench().getNode(lastCurrentNodeId);\n return osparc.data.model.NodeStatus.isCompNodeReady(node);\n },\n\n __getNeedToRunDependencies: function(node) {\n const dependencies = node.getStatus().getDependencies() || [];\n const wb = this.getStudy().getWorkbench();\n const upstreamNodeIds = wb.getUpstreamCompNodes(node, false);\n upstreamNodeIds.forEach(upstreamNodeId => {\n const upstreamNode = wb.getNode(upstreamNodeId);\n if (osparc.data.model.NodeStatus.doesCompNodeNeedRun(upstreamNode)) {\n dependencies.push(upstreamNodeId);\n }\n });\n return dependencies;\n },\n\n __getNotReadyDependencies: function(node) {\n const dependencies = node.getStatus().getDependencies() || [];\n const wb = this.getStudy().getWorkbench();\n const upstreamNodeIds = wb.getUpstreamCompNodes(node, true);\n upstreamNodeIds.forEach(upstreamNodeId => {\n if (!this.__isNodeReady(upstreamNodeId)) {\n dependencies.push(upstreamNodeId);\n }\n });\n return dependencies;\n },\n\n __getUpstreamCompDependencies: function(node) {\n const dependencies = node.getStatus().getDependencies() || [];\n const wb = this.getStudy().getWorkbench();\n const upstreamNodeIds = wb.getUpstreamCompNodes(node, true);\n upstreamNodeIds.forEach(upstreamNodeId => {\n if (wb.getNode(upstreamNodeId).isComputational()) {\n dependencies.push(upstreamNodeId);\n }\n });\n return dependencies;\n },\n\n __moveToNode: function(nodeId) {\n this.nodeSelected(nodeId);\n },\n\n __connectMaximizeEvents: function(node) {\n if (node.isDynamic()) {\n const loadingPage = node.getLoadingPage();\n const iFrame = node.getIFrame();\n if (loadingPage && iFrame) {\n [\n loadingPage,\n iFrame\n ].forEach(widget => {\n if (widget) {\n widget.addListener(\"maximize\", () => this.setMaximized(true), this);\n widget.addListener(\"restore\", () => this.setMaximized(false), this);\n }\n });\n }\n }\n },\n\n __styleView: function(node, view) {\n view.getContentElement().setStyles({\n \"border-radius\": \"12px\"\n });\n view.set({\n maxWidth: node.isDynamic() ? null : 800,\n margin: this.self().CARD_MARGIN\n });\n if (node.isParameter()) {\n view.bind(\"backgroundColor\", view.getChildControl(\"frame\"), \"backgroundColor\");\n view.set({\n backgroundColor: \"navigation_bar_background_color\",\n padding: 6\n });\n } else {\n view.getMainView().set({\n backgroundColor: \"navigation_bar_background_color\",\n padding: 6,\n paddingTop: 0,\n paddingBottom: 0\n });\n }\n if (node.isFilePicker()) {\n view.getMainView().set({\n backgroundColor: \"navigation_bar_background_color\"\n });\n }\n },\n\n __getNodeView: function(node) {\n let view;\n if (node.isParameter()) {\n view = osparc.node.slideshow.BaseNodeView.createSettingsGroupBox(this.tr(\"Settings\"));\n const renderer = new osparc.node.ParameterEditor(node);\n renderer.buildForm(false);\n view.add(renderer);\n } else {\n if (node.isFilePicker()) {\n view = new osparc.node.slideshow.FilePickerView();\n view.getOutputsButton().hide();\n } else {\n view = new osparc.node.slideshow.NodeView();\n }\n view.setNode(node);\n }\n this.__connectMaximizeEvents(node);\n this.__styleView(node, view);\n return view;\n },\n\n nodeSelected: function(nodeId) {\n const node = this.getStudy().getWorkbench().getNode(nodeId);\n if (node) {\n const lastCurrentNodeId = this.__currentNodeId;\n\n // If the user is moving forward do some run checks:\n const studyUI = this.getStudy().getUi();\n const movingForward = studyUI.getSlideshow().isMovingForward(lastCurrentNodeId, nodeId);\n if (movingForward) {\n // check if lastCurrentNodeId has to be run\n if (!this.__isNodeReady(lastCurrentNodeId)) {\n this.fireDataEvent(\"startPartialPipeline\", [lastCurrentNodeId]);\n return;\n }\n }\n\n this.__currentNodeId = nodeId;\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n\n // build layout\n const view = this.__getNodeView(node);\n\n this.__prevNextButtons.setNode(node);\n\n if (view) {\n if (this.__nodeView && this.__nodeView.getInstructionsWindow()) {\n this.__nodeView.getInstructionsWindow().close();\n }\n if (this.__nodeView && this.__mainView.getChildren().includes(this.__nodeView)) {\n this.__mainView.remove(this.__nodeView);\n }\n this.__mainView.addAt(view, 1, {\n flex: 1\n });\n this.__nodeView = view;\n\n // Automatically request to start the dynamic service when the user gets to this step\n if (node.isDynamic()) {\n node.requestStartNode();\n }\n }\n\n const upstreamDependencies = this.__getUpstreamCompDependencies(node);\n this.__nodeView.setUpstreamDependencies(upstreamDependencies);\n if (!this.__nodeView.hasListener(\"startPartialPipeline\")) {\n this.__nodeView.addListener(\"startPartialPipeline\", e => this.fireDataEvent(\"startPartialPipeline\", e.getData()));\n }\n if (!this.__nodeView.hasListener(\"stopPipeline\")) {\n this.__nodeView.addListener(\"stopPipeline\", () => this.fireEvent(\"stopPipeline\"));\n }\n\n const notReadyDependencies = this.__getNotReadyDependencies(node);\n if (notReadyDependencies && notReadyDependencies.length) {\n this.__nodeView.showPreparingInputs();\n }\n\n // check if upstream has to be run\n const notStartedDependencies = this.__getNeedToRunDependencies(node);\n if (notStartedDependencies && notStartedDependencies.length) {\n this.fireDataEvent(\"startPartialPipeline\", notStartedDependencies);\n }\n } else if (this.__nodeView) {\n this.__mainView.remove(this.__nodeView);\n }\n this.getStudy().getUi().setCurrentNodeId(nodeId);\n },\n\n __applyMaximized: function(maximized) {\n [\n this.__slideshowToolbar,\n this.__prevButton,\n this.__nextButton,\n this.__runButton,\n this.__nodeView.getHeaderLayout(),\n this.__nodeView.getLoggerPanel()\n ].forEach(widget => widget.setVisibility(maximized ? \"excluded\" : \"visible\"));\n\n this.__nodeView.set({\n margin: maximized ? 0 : this.self().CARD_MARGIN\n });\n },\n\n startSlides: function() {\n // If the study is not initialized this will fail\n if (!this.isPropertyInitialized(\"study\")) {\n console.error(\"study is not initialized\");\n return;\n }\n const study = this.getStudy();\n const slideshow = study.getUi().getSlideshow();\n if (slideshow.isEmpty()) {\n const sortedPipeline = study.getWorkbench().getPipelineLinearSorted();\n if (sortedPipeline) {\n sortedPipeline.forEach((nodeId, i) => {\n slideshow.insertNode(nodeId, i);\n });\n }\n }\n this.__slideshowToolbar.populateButtons(true);\n const currentNodeId = this.getStudy().getUi().getCurrentNodeId();\n const isValid = slideshow.getPosition(currentNodeId) !== -1;\n if (isValid && currentNodeId) {\n this.__moveToNode(currentNodeId);\n } else {\n this.__openFirstNode();\n }\n\n if (this.__nodeView) {\n const node = this.__nodeView.getNode();\n if (node.isDynamic()) {\n // Start it. First wait 2 seconds because the function depends on the node's state which might not be available yet\n setTimeout(() => node.requestStartNode(), 2000);\n }\n }\n },\n\n _applyStudy: function(study) {\n if (study) {\n this.__slideshowToolbar.setStudy(study);\n this.__prevNextButtons.setStudy(study);\n }\n },\n\n __openFirstNode: function() {\n const study = this.getStudy();\n if (study) {\n const nodes = study.getUi().getSlideshow().getSortedNodes();\n if (nodes.length) {\n this.__moveToNode(nodes[0].nodeId);\n } else {\n this.__moveToNode(null);\n }\n }\n },\n\n __requestServiceBetween: function(leftNodeId, rightNodeId) {\n const srvCat = new osparc.workbench.ServiceCatalog();\n srvCat.setContext(leftNodeId, rightNodeId);\n srvCat.addListener(\"addService\", e => {\n const data = e.getData();\n const service = data.service;\n this.__addServiceBetween(service, leftNodeId, rightNodeId);\n }, this);\n srvCat.center();\n srvCat.open();\n },\n\n __addServiceBetween: async function(service, leftNodeId, rightNodeId) {\n const workbench = this.getStudy().getWorkbench();\n\n const node = await workbench.addServiceBetween(service, leftNodeId, rightNodeId);\n if (node === null) {\n return;\n }\n\n // add to the slideshow\n const slideshow = this.getStudy().getUi().getSlideshow();\n slideshow.addNodeToSlideshow(node, leftNodeId, rightNodeId);\n\n this.__slideshowToolbar.populateButtons();\n },\n\n __removeNode: function(nodeId) {\n const workbench = this.getStudy().getWorkbench();\n const node = workbench.getNode(nodeId);\n if (!node) {\n return;\n }\n if (nodeId === this.__currentNodeId) {\n return;\n }\n\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmDeleteNode()) {\n const msg = this.tr(\"Are you sure you want to delete node?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.__doRemoveNode(nodeId);\n }\n }, this);\n } else {\n this.__doRemoveNode(nodeId);\n }\n },\n\n __doRemoveNode: function(nodeId) {\n // connect next node to previous node\n let leftNodeId = null;\n let rightNodeId = null;\n const nodes = this.getStudy().getUi().getSlideshow()\n .getSortedNodes();\n const idx = nodes.findIndex(node2 => node2.nodeId === nodeId);\n if (idx < 0) {\n return;\n }\n if (idx !== 0) {\n // not first\n leftNodeId = nodes[idx-1].nodeId;\n }\n if (idx < nodes.length-1) {\n // not last\n rightNodeId = nodes[idx+1].nodeId;\n }\n\n // bypass connection\n const workbench = this.getStudy().getWorkbench();\n workbench.createEdge(null, leftNodeId, rightNodeId, true);\n\n // remove node\n workbench.removeNode(nodeId);\n\n this.__slideshowToolbar.populateButtons();\n },\n\n __showNode: function(nodeId, desiredPos) {\n this.getStudy().getUi().getSlideshow()\n .insertNode(nodeId, desiredPos);\n\n this.__slideshowToolbar.populateButtons();\n },\n\n __hideNode: function(nodeId) {\n this.getStudy().getUi().getSlideshow()\n .removeNode(nodeId);\n\n this.__slideshowToolbar.populateButtons();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows a logging view.\n *\n * It consists of:\n * - a toolbar containing:\n * - clear button\n * - filter as you type textfield\n * - some log type filtering buttons\n * - log messages table\n *\n * Log messages have two inputs: \"Origin\" and \"Message\".\n *\n * Depending on the log level, \"Origin\"'s color will change, also \"Message\"s coming from the same\n * origin will be rendered with the same color.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let loggerView = new osparc.widget.logger.LoggerView();\n * this.getRoot().add(loggerView);\n * loggerView.info(null, \"Hello world\");\n *
\n */\n\n\nqx.Class.define(\"osparc.widget.logger.LoggerView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base();\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this.__createFilterToolbar();\n\n const table = this.__createTableLayout();\n this._add(table, {\n flex: 1\n });\n },\n\n properties: {\n logLevel: {\n apply : \"__applyFilters\",\n nullable: false,\n check : \"Number\",\n init: 0\n },\n\n lockLogs: {\n apply : \"__updateTable\",\n nullable: false,\n check : \"Boolean\",\n init: true\n },\n\n currentNodeId: {\n check: \"String\",\n nullable: true,\n apply: \"__currentNodeIdChanged\"\n }\n },\n\n statics: {\n POS: {\n LOG_LEVEL: 0,\n TIMESTAMP: 1,\n ORIGIN: 2,\n MESSAGE: 3,\n },\n\n LOG_LEVELS: {\n DEBUG: -1,\n INFO: 0,\n WARNING: 1,\n ERROR: 2\n },\n\n LOG_LEVEL_MAP: {\n 10: \"DEBUG\",\n 20: \"INFO\",\n 30: \"WARNING\",\n 40: \"ERROR\",\n 50: \"ERROR\" // CRITICAL\n },\n\n printRow: function(rowData) {\n return `${rowData.timeStamp} ${this.self().logLevel2Str(rowData.logLevel)} ${rowData.nodeId} ${rowData.label}: ${rowData.msg}`;\n },\n\n logLevel2Str: function(logLevel) {\n const pairFound = Object.entries(this.LOG_LEVELS).find(pair => pair[1] === logLevel);\n if (pairFound && pairFound.length) {\n return pairFound[0];\n }\n return undefined;\n }\n },\n\n members: {\n __textFilterField: null,\n __loggerModel: null,\n __loggerTable: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"toolbar\":\n control = new qx.ui.toolbar.ToolBar();\n control.setBackgroundColor(\"transparent\");\n this._add(control);\n break;\n case \"pin-node\": {\n const toolbar = this.getChildControl(\"toolbar\");\n control = new qx.ui.form.ToggleButton().set({\n icon: \"@FontAwesome5Solid/thumbtack/14\",\n toolTipText: this.tr(\"Show logs only from current node\"),\n appearance: \"toolbar-button\"\n });\n toolbar.add(control);\n break;\n }\n case \"filter-text\": {\n const toolbar = this.getChildControl(\"toolbar\");\n control = new qx.ui.form.TextField().set({\n appearance: \"toolbar-textfield\",\n liveUpdate: true,\n placeholder: this.tr(\"Filter\"),\n marginLeft: 5,\n marginRight: 5,\n });\n osparc.utils.Utils.setIdToWidget(control, \"logsFilterField\");\n toolbar.add(control, {\n flex: 1\n });\n break;\n }\n case \"log-level\": {\n const toolbar = this.getChildControl(\"toolbar\");\n const minLogLevelLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"Min log-level\"),\n alignY: \"middle\",\n });\n toolbar.add(minLogLevelLabel);\n control = new qx.ui.form.SelectBox().set({\n appearance: \"toolbar-selectbox\",\n maxWidth: 80\n });\n let logLevelSet = false;\n Object.keys(this.self().LOG_LEVELS).forEach(logLevelKey => {\n const logLevel = this.self().LOG_LEVELS[logLevelKey];\n if (logLevelKey === \"DEBUG\" && !osparc.data.Permissions.getInstance().canDo(\"study.logger.debug.read\")) {\n return;\n }\n const label = qx.lang.String.firstUp(logLevelKey);\n const listItem = new qx.ui.form.ListItem(label);\n control.add(listItem);\n listItem.logLevel = logLevel;\n if (!logLevelSet) {\n this.setLogLevel(logLevel);\n logLevelSet = true;\n }\n });\n toolbar.add(control);\n break;\n }\n case \"lock-logs-button\": {\n control = new qx.ui.form.ToggleButton().set({\n toolTipText: this.tr(\"Toggle auto-scroll\"),\n appearance: \"toolbar-button\"\n });\n control.bind(\"value\", this, \"lockLogs\");\n control.bind(\"value\", control, \"icon\", {\n converter: val => val ? \"@FontAwesome5Solid/lock-open/14\" : \"@FontAwesome5Solid/lock/14\"\n });\n const toolbar = this.getChildControl(\"toolbar\");\n toolbar.add(control);\n break;\n }\n case \"copy-to-clipboard\": {\n const toolbar = this.getChildControl(\"toolbar\");\n control = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/copy/14\",\n toolTipText: this.tr(\"Copy logs to clipboard\"),\n appearance: \"toolbar-button\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"copyLogsToClipboardButton\");\n toolbar.add(control);\n break;\n }\n case \"copy-selected-to-clipboard\": {\n const toolbar = this.getChildControl(\"toolbar\");\n control = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/file/14\",\n toolTipText: this.tr(\"Copy Selected log to clipboard\"),\n appearance: \"toolbar-button\"\n });\n toolbar.add(control);\n break;\n }\n case \"download-logs-button\": {\n const toolbar = this.getChildControl(\"toolbar\");\n control = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/download/14\",\n toolTipText: this.tr(\"Download logs\"),\n appearance: \"toolbar-button\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"__downloadLogsButton\");\n toolbar.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __createFilterToolbar: function() {\n const toolbar = this.getChildControl(\"toolbar\");\n\n const pinNode = this.getChildControl(\"pin-node\");\n pinNode.addListener(\"changeValue\", e => this.__pinChanged(e.getData()), this);\n\n const textFilterField = this.__textFilterField = this.getChildControl(\"filter-text\");\n textFilterField.addListener(\"changeValue\", this.__applyFilters, this);\n\n const logLevelSelectBox = this.getChildControl(\"log-level\");\n logLevelSelectBox.addListener(\"changeValue\", e => {\n this.setLogLevel(e.getData().logLevel);\n }, this);\n toolbar.add(logLevelSelectBox);\n\n const lockLogsButton = this.getChildControl(\"lock-logs-button\");\n toolbar.add(lockLogsButton);\n\n const copyToClipboardButton = this.getChildControl(\"copy-to-clipboard\");\n copyToClipboardButton.addListener(\"execute\", () => this.__copyLogsToClipboard(), this);\n toolbar.add(copyToClipboardButton);\n\n const copySelectedToClipboardButton = this.getChildControl(\"copy-selected-to-clipboard\");\n copySelectedToClipboardButton.addListener(\"execute\", () => this.__copySelectedLogToClipboard(), this);\n toolbar.add(copySelectedToClipboardButton);\n\n const downloadButton = this.getChildControl(\"download-logs-button\");\n downloadButton.addListener(\"execute\", () => this.__downloadLogs(), this);\n toolbar.add(downloadButton);\n\n return toolbar;\n },\n\n __createTableLayout: function() {\n const loggerModel = this.__loggerModel = new osparc.widget.logger.LoggerModel();\n\n const custom = {\n tableColumnModel : function(obj) {\n return new qx.ui.table.columnmodel.Resize(obj);\n }\n };\n\n // table\n const table = this.__loggerTable = new qx.ui.table.Table(loggerModel, custom).set({\n selectable: true,\n statusBarVisible: false,\n showCellFocusIndicator: false,\n forceLineHeight: false\n });\n // alwaysUpdateCells\n osparc.utils.Utils.setIdToWidget(table, \"logsViewer\");\n const colModel = table.getTableColumnModel();\n colModel.setDataCellRenderer(this.self().POS.LOG_LEVEL, new qx.ui.table.cellrenderer.Image(14, 14));\n colModel.setDataCellRenderer(this.self().POS.TIMESTAMP, new osparc.ui.table.cellrenderer.Html().set({\n defaultCellStyle: \"user-select: text\"\n }));\n colModel.setDataCellRenderer(this.self().POS.ORIGIN, new osparc.ui.table.cellrenderer.Html());\n colModel.setDataCellRenderer(this.self().POS.MESSAGE, new osparc.ui.table.cellrenderer.Html().set({\n defaultCellStyle: \"user-select: text; text-wrap: wrap\"\n }));\n const resizeBehavior = colModel.getBehavior();\n resizeBehavior.setWidth(this.self().POS.LOG_LEVEL, 35);\n resizeBehavior.setWidth(this.self().POS.TIMESTAMP, 80);\n resizeBehavior.setWidth(this.self().POS.ORIGIN, 100);\n\n table.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(table, this.self().POS.MESSAGE));\n\n this.__applyFilters();\n\n return table;\n },\n\n filterByNode: function(nodeId) {\n this.setCurrentNodeId(nodeId);\n this.getChildControl(\"pin-node\").setValue(true);\n },\n\n __currentNodeIdChanged: function() {\n this.getChildControl(\"pin-node\").setValue(false);\n },\n\n __pinChanged: function(checked) {\n if (checked) {\n const currentNodeId = this.getCurrentNodeId();\n this.__nodeSelected(currentNodeId);\n }\n },\n\n __nodeSelected: function(nodeId) {\n const study = osparc.store.Store.getInstance().getCurrentStudy();\n const workbench = study.getWorkbench();\n const node = workbench.getNode(nodeId);\n this.__textFilterField.setValue(node ? node.getLabel() : \"\");\n },\n\n __getLogsString: function() {\n const newLine = \"\\n\";\n let logs = \"\";\n this.__loggerModel.getFilteredRows().forEach(rowData => {\n logs += this.self().printRow(rowData) + newLine;\n });\n return logs;\n },\n\n __copyLogsToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.__getLogsString());\n },\n\n __copySelectedLogToClipboard: function() {\n const sel = this.__loggerTable.getSelectionModel().getAnchorSelectionIndex();\n if (sel > -1) {\n const rowData = this.__loggerModel.getRowData(sel);\n osparc.utils.Utils.copyTextToClipboard(this.self().printRow(rowData));\n }\n },\n\n __downloadLogs: function() {\n const logs = this.__getLogsString();\n const blob = new Blob([logs], {type: \"text/plain\"});\n osparc.utils.Utils.downloadBlobContent(blob, \"logs.log\");\n },\n\n debug: function(nodeId, msg = \"\") {\n this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.DEBUG);\n },\n\n info: function(nodeId, msg = \"\") {\n this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.INFO);\n },\n\n warn: function(nodeId, msg = \"\") {\n this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.WARNING);\n },\n\n error: function(nodeId, msg = \"\") {\n this.__addLogs(nodeId, [msg], this.self().LOG_LEVELS.ERROR);\n },\n\n debugs: function(nodeId, msgs = [\"\"]) {\n this.__addLogs(nodeId, msgs, this.self().LOG_LEVELS.DEBUG);\n },\n\n infos: function(nodeId, msgs = [\"\"]) {\n this.__addLogs(nodeId, msgs, this.self().LOG_LEVELS.INFO);\n },\n\n warns: function(nodeId, msgs = [\"\"]) {\n this.__addLogs(nodeId, msgs, this.self().LOG_LEVELS.WARNING);\n },\n\n errors: function(nodeId, msgs = [\"\"]) {\n this.__addLogs(nodeId, msgs, this.self().LOG_LEVELS.ERROR);\n },\n\n __addLogs: function(nodeId, msgs = [\"\"], logLevel = 0) {\n const study = osparc.store.Store.getInstance().getCurrentStudy();\n if (study === null) {\n return;\n }\n\n const workbench = study.getWorkbench();\n const node = workbench.getNode(nodeId);\n let label = null;\n if (node) {\n label = node.getLabel();\n node.addListener(\"changeLabel\", e => {\n const newLabel = e.getData();\n this.__loggerModel.nodeLabelChanged(nodeId, newLabel);\n this.__updateTable();\n }, this);\n } else {\n label = \"Workbench\";\n }\n\n const msgLogs = [];\n msgs.forEach(msg => {\n const msgLog = {\n logLevel,\n timeStamp: new Date(),\n nodeId,\n label,\n msg,\n tooltip: msg,\n };\n msgLogs.push(msgLog);\n });\n this.__loggerModel.addRows(msgLogs);\n\n this.__updateTable();\n },\n\n __updateTable: function() {\n if (this.__loggerModel) {\n this.__loggerModel.reloadData();\n // isWidgetOnScreen will avoid rendering every single line when the user click on the Logger button the first time\n if (!this.isLockLogs() && osparc.utils.Utils.isWidgetOnScreen(this.__loggerTable)) {\n const nFilteredRows = this.__loggerModel.getFilteredRowCount();\n this.__loggerTable.scrollCellVisible(0, nFilteredRows);\n }\n }\n },\n\n __applyFilters: function() {\n if (this.__loggerModel === null) {\n return;\n }\n\n this.__loggerModel.setFilterString(this.__textFilterField.getValue());\n this.__loggerModel.setFilterLogLevel(this.getLogLevel());\n this.__loggerModel.reloadData();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Andrei Neagu (GitHK)\n\n************************************************************************ */\n\n/**\n * Automatically expire keys after ttl (time to live) is reached\n */\nqx.Class.define(\"osparc.data.TTLMap\", {\n extend: qx.core.Object,\n\n /**\n * @param ttl time for which to keep track of the entries\n */\n construct: function(ttl) {\n this.base(arguments);\n\n this._entries = new Map();\n this._ttl = ttl;\n },\n\n members: {\n\n /**\n * @param {object} entry: add an entry or extend it's duration\n */\n addOrUpdateEntry: function(entry) {\n const now = Date.now();\n console.log(\"mapping\", entry, \"to\", now);\n this._entries.set(entry, now);\n\n // Set a timeout to potentially remove the entry after the ttl if it's the latest\n setTimeout(() => {\n // If the entry is still the latest, remove it\n if (now === this._entries.get(entry)) {\n this._entries.delete(entry);\n }\n }, this._ttl);\n },\n\n /**\n * checks of the entry is still present and valid (did not reach the `ttl`)\n * @param {*} entry\n * @returns\n */\n hasRecentEntry: function(entry) {\n const now = Date.now();\n if (this._entries.has(entry)) {\n const lastUpdate = this._entries.get(entry);\n return now - lastUpdate <= this._ttl;\n }\n return false;\n }\n\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * A special renderer for AutoForms which includes notes below the section header\n * widget and next to the individual form widgets.\n */\n\n\nqx.Class.define(\"osparc.form.renderer.PropFormBase\", {\n extend: qx.ui.form.renderer.Single,\n type: \"abstract\",\n\n /**\n * @param form {osparc.form.Auto} form widget to embed\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(form, node) {\n if (node) {\n this.setNode(node);\n } else {\n this.setNode(null);\n }\n\n this.base(arguments, form);\n\n // override qx.ui.form.renderer.Single's grid layout\n const grid = this.getLayout();\n grid.setSpacingY(0); // so that the \"excluded\" rows do not take any space\n grid.setColumnFlex(this.self().GRID_POS.LABEL, 1);\n grid.setColumnFlex(this.self().GRID_POS.INFO, 0);\n grid.setColumnFlex(this.self().GRID_POS.CTRL_FIELD, 1);\n grid.setColumnFlex(this.self().GRID_POS.UNIT, 0);\n grid.setColumnFlex(this.self().GRID_POS.FIELD_LINK_UNLINK, 0);\n grid.setColumnMinWidth(this.self().GRID_POS.CTRL_FIELD, 50);\n Object.keys(this.self().GRID_POS).forEach((_, idx) => grid.setColumnAlign(idx, \"left\", \"middle\"));\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n nullable: true\n }\n },\n\n statics: {\n GRID_POS: {\n LABEL: 0,\n INFO: 1,\n CTRL_FIELD: 2,\n UNIT: 3,\n FIELD_LINK_UNLINK: 4\n },\n\n ROW_HEIGHT: 28,\n\n getDisableables: function() {\n return [\n this.GRID_POS.LABEL,\n this.GRID_POS.CTRL_FIELD\n ];\n },\n\n updateUnitLabelPrefix: function(item) {\n const {\n unitShort,\n unitLong\n } = osparc.utils.Units.getLabels(item.unit, item.unitPrefix);\n if (\"unitLabel\" in item) {\n const unitLabel = item[\"unitLabel\"];\n unitLabel.set({\n value: unitShort || null,\n toolTipText: unitLong || null,\n visibility: unitShort ? \"visible\" : \"excluded\"\n });\n }\n }\n },\n\n // eslint-disable-next-line qx-rules/no-refs-in-members\n members: {\n _visibility: {\n hidden: \"Invisible\",\n readOnly: \"ReadOnly\",\n readWrite: \"ReadAndWrite\"\n },\n\n /**\n * override\n *\n * @param items {qx.ui.core.Widget[]} An array of form items to render.\n * @param names {String[]} An array of names for the form items.\n * @param title {String?} A title of the group you are adding.\n */\n addItems: function(items, names, title) {\n // add the header\n if (title !== null) {\n this._add(\n this._createHeader(title), {\n row: this._row,\n column: this.self().GRID_POS.LABEL,\n colSpan: Object.keys(this.self().gridPos).length\n }\n );\n this._row++;\n }\n\n // add the items\n let firstLabel = null;\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n\n const label = this._createLabel(names[i], item);\n if (firstLabel === null) {\n firstLabel = label;\n }\n label.set({\n // override ``rich``: to false, it is required for showing the cut off ellipsis.\n // rich: false,\n toolTipText: names[i]\n });\n // leave ``rich`` set to true. Ellipsis will be handled here:\n label.getContentElement().setStyles({\n \"text-overflow\": \"ellipsis\",\n \"white-space\": \"nowrap\"\n });\n label.setBuddy(item);\n this._add(label, {\n row: this._row,\n column: this.self().GRID_POS.LABEL\n });\n\n const info = this.__createInfoWHint(item.description);\n this._add(info, {\n row: this._row,\n column: this.self().GRID_POS.INFO\n });\n\n this._add(item, {\n row: this._row,\n column: this.self().GRID_POS.CTRL_FIELD\n });\n\n const unit = this.__createUnit(item);\n this._add(unit, {\n row: this._row,\n column: this.self().GRID_POS.UNIT\n });\n\n this._row++;\n\n this._connectVisibility(item, label);\n }\n\n this.addListener(\"appear\", () => this.__makeLabelsResponsive(), this);\n this.addListener(\"resize\", () => this.__makeLabelsResponsive(), this);\n },\n\n __makeLabelsResponsive: function() {\n const grid = this.getLayout()\n const firstColumnWidth = osparc.utils.Utils.getGridsFirstColumnWidth(grid);\n if (firstColumnWidth === null) {\n // not rendered yet\n setTimeout(() => this.__makeLabelsResponsive(), 100);\n return;\n }\n const extendedVersion = firstColumnWidth > 300;\n\n const inputs = this.getNode().getInputs();\n Object.keys(inputs).forEach((portId, idx) => {\n if (inputs[portId].description) {\n this._getLabelFieldChild(portId).child.set({\n value: extendedVersion ? inputs[portId].label + \". \" + inputs[portId].description + \":\" : inputs[portId].label,\n toolTipText: extendedVersion ? inputs[portId].label + \"
\" + inputs[portId].description : inputs[portId].label\n });\n\n if (grid.getRowHeight(idx) === 0) {\n // the port might be hidden\n this._getInfoFieldChild(portId).child.setVisibility(\"hidden\");\n } else {\n this._getInfoFieldChild(portId).child.setVisibility(extendedVersion ? \"hidden\" : \"visible\");\n }\n\n grid.setColumnMinWidth(this.self().GRID_POS.CTRL_FIELD, extendedVersion ? 150 : 50);\n }\n });\n },\n\n getValues: function() {\n let data = this._form.getData();\n for (const portId in data) {\n let ctrl = this._form.getControl(portId);\n if (ctrl && ctrl[\"link\"]) {\n data[portId] = ctrl[\"link\"];\n }\n if (ctrl && ctrl[\"parameter\"]) {\n data[portId] = \"{{\" + ctrl[\"parameter\"].id + \"}}\";\n }\n // FIXME: \"null\" should be a valid input\n if (data[portId] === \"null\") {\n data[portId] = null;\n }\n }\n let filteredData = {};\n for (const key in data) {\n if (data[key] !== null) {\n filteredData[key] = data[key];\n }\n }\n // convert values to service specified units\n const changedXUnits = this.getChangedXUnits();\n Object.keys(changedXUnits).forEach(portId => {\n const ctrl = this._form.getControl(portId);\n const nodeMD = this.getNode().getMetaData();\n const {\n unitPrefix\n } = osparc.utils.Units.decomposeXUnit(nodeMD.inputs[portId][\"x_unit\"]);\n filteredData[portId] = osparc.utils.Units.convertValue(filteredData[portId], ctrl.unitPrefix, unitPrefix);\n });\n return filteredData;\n },\n\n evalFieldRequired: function(portId) {\n const label = this._getLabelFieldChild(portId).child;\n const inputsRequired = this.getNode().getInputsRequired();\n\n // add star (*) to the label\n const requiredSuffix = \" *\";\n let newLabel = label.getValue();\n newLabel = newLabel.replace(requiredSuffix, \"\");\n if (inputsRequired.includes(portId)) {\n newLabel += requiredSuffix;\n }\n label.setValue(newLabel);\n\n // add \"required\" text to the label's tooltip\n const toolTipSuffix = \"
\" + this.tr(\"Required input: without it, the service will not start/run.\");\n let newToolTip = label.getToolTipText();\n newToolTip = newToolTip.replace(toolTipSuffix, \"\");\n if (inputsRequired.includes(portId)) {\n newToolTip += toolTipSuffix;\n }\n label.setToolTipText(newToolTip);\n\n // add \"required\" text to the description\n const infoButton = this._getInfoFieldChild(portId).child;\n let newHintText = infoButton.getHintText();\n newHintText = newHintText.replace(toolTipSuffix, \"\");\n if (inputsRequired.includes(portId)) {\n newHintText += toolTipSuffix;\n }\n infoButton.setHintText(newHintText);\n },\n\n getChangedXUnits: function() {\n const xUnits = {};\n const ctrls = this._form.getControls();\n for (const portId in ctrls) {\n const ctrl = this._form.getControl(portId);\n xUnits[portId] = osparc.utils.Units.composeXUnit(ctrl.unit, ctrl.unitPrefix);\n }\n const nodeMD = this.getNode().getMetaData();\n const changedXUnits = {};\n for (const portId in xUnits) {\n if (xUnits[portId] === null) {\n break;\n }\n if (!(\"x_unit\" in nodeMD.inputs[portId])) {\n break;\n }\n if (xUnits[portId] !== nodeMD.inputs[portId].x_unit) {\n changedXUnits[portId] = xUnits[portId];\n }\n }\n return changedXUnits;\n },\n\n setInputsUnits: function(inputsUnits) {\n Object.keys(inputsUnits).forEach(portId => {\n const item = this._form.getControl(portId);\n this.__switchPrefix(item, item.unitPrefix, osparc.utils.Units.decomposeXUnit(inputsUnits[portId]).unitPrefix);\n });\n },\n\n hasVisibleInputs: function() {\n const children = this._getChildren();\n for (let i=0; i unitLabel.setCursor(\"pointer\"), this);\n unitLabel.addListener(\"pointerout\", () => unitLabel.resetCursor(), this);\n const nodeMD = this.getNode().getMetaData();\n const originalUnit = \"x_unit\" in nodeMD.inputs[item.key] ? osparc.utils.Units.decomposeXUnit(nodeMD.inputs[item.key][\"x_unit\"]) : null;\n unitLabel.addListener(\"tap\", () => {\n const nextPrefix = osparc.utils.Units.getNextPrefix(item.unitPrefix, originalUnit.unitPrefix);\n this.__switchPrefix(item, item.unitPrefix, nextPrefix.long);\n }, this);\n }\n item.unitLabel = unitLabel;\n return unitLabel;\n },\n\n __switchPrefix: function(item, oldPrefix, newPrefix) {\n let newValue = osparc.utils.Units.convertValue(item.getValue(), oldPrefix, newPrefix);\n item.unitPrefix = newPrefix;\n if (\"type\" in item && item.type !== \"integer\") {\n newValue = String(newValue);\n }\n item.setValue(newValue);\n this.self().updateUnitLabelPrefix(item);\n },\n\n _getLayoutChild: function(portId, column) {\n let row = null;\n const children = this._getChildren();\n for (let i=0; i\n Odei Maiz \n Utf8Check: äöü\n************************************************************************ */\n\n/**\n * An extension of the PropFormBase that is able to handle port-links.\n */\n\nqx.Class.define(\"osparc.form.renderer.PropForm\", {\n extend: osparc.form.renderer.PropFormBase,\n\n /**\n * @param form {osparc.form.Auto} form widget to embed\n * @param node {osparc.data.model.Node} Node owning the widget\n * @param study {osparc.data.model.Study} Study owning the node\n */\n construct: function(form, node, study) {\n if (study) {\n this.setStudy(study);\n }\n this.__ctrlLinkMap = {};\n this.__linkUnlinkStackMap = {};\n this.__fieldOptsBtnMap = {};\n\n this.base(arguments, form, node);\n\n this.__addLinkCtrls();\n\n this.setDroppable(true);\n this.__attachDragoverHighlighter();\n },\n\n events: {\n \"highlightEdge\": \"qx.event.type.Data\",\n \"linkFieldModified\": \"qx.event.type.Data\",\n \"fileRequested\": \"qx.event.type.Data\",\n \"filePickerRequested\": \"qx.event.type.Data\",\n \"parameterRequested\": \"qx.event.type.Data\",\n \"changeChildVisibility\": \"qx.event.type.Event\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false\n }\n },\n\n statics: {\n getRetrievingAtom: function() {\n return new qx.ui.basic.Atom(\"\", \"osparc/loading.gif\");\n },\n\n getDownloadingAtom: function() {\n return new qx.ui.basic.Atom(\"\", \"@FontAwesome5Solid/cloud-download-alt/12\");\n },\n\n getUploadingAtom: function() {\n return new qx.ui.basic.Atom(\"\", \"@FontAwesome5Solid/cloud-upload-alt/12\");\n },\n\n getFailedAtom: function() {\n return new qx.ui.basic.Atom(\"\", \"@FontAwesome5Solid/times/12\");\n },\n\n getSucceededAtom: function() {\n return new qx.ui.basic.Atom(\"\", \"@FontAwesome5Solid/check/12\");\n },\n\n getRetrievedEmpty: function() {\n return new qx.ui.basic.Atom(\"\", \"@FontAwesome5Solid/dot-circle/10\");\n },\n\n GRID_POS: {\n ...osparc.form.renderer.PropFormBase.GRID_POS,\n RETRIEVE_STATUS: Object.keys(osparc.form.renderer.PropFormBase.GRID_POS).length\n },\n\n isFieldParametrizable: function(field) {\n const supportedTypes = [];\n const paramsMD = osparc.service.Utils.getParametersMetadata();\n paramsMD.forEach(paramMD => {\n supportedTypes.push(osparc.node.ParameterEditor.getParameterOutputTypeFromMD(paramMD));\n });\n return supportedTypes.includes(field.type);\n },\n\n RETRIEVE_STATUS: {\n failed: -1,\n empty: 0,\n retrieving: 1,\n downloading: 2,\n uploading: 3,\n succeed: 4\n },\n\n getIconForStatus: function(status) {\n let icon;\n switch (status) {\n case this.RETRIEVE_STATUS.failed:\n icon = this.getFailedAtom();\n break;\n case this.RETRIEVE_STATUS.empty:\n icon = this.getRetrievedEmpty();\n break;\n case this.RETRIEVE_STATUS.retrieving:\n icon = this.getRetrievingAtom();\n break;\n case this.RETRIEVE_STATUS.downloading:\n icon = this.getDownloadingAtom();\n break;\n case this.RETRIEVE_STATUS.uploading:\n icon = this.getUploadingAtom();\n break;\n case this.RETRIEVE_STATUS.succeed:\n icon = this.getSucceededAtom();\n break;\n }\n return icon;\n }\n },\n\n members: {\n __ctrlLinkMap: null,\n __linkUnlinkStackMap: null,\n __fieldOptsBtnMap: null,\n __addInputPortButton: null,\n\n /*\n * <-- Dynamic inputs -->\n */\n __getEmptyDataLastPorts: function() {\n let emptyDataPorts = [];\n const minVisibleInputs = this.getNode().getMinVisibleInputs();\n if (minVisibleInputs === null) {\n return emptyDataPorts;\n }\n const portIds = this.getPortIds();\n // it will always show 1 more, so: -1\n for (let i=minVisibleInputs-1; i {\n const ctrl = this._form.getControl(portId);\n const label = this._getLabelFieldChild(portId).child;\n if (\n ctrl && ctrl.type.includes(\"data:\") && !(\"link\" in ctrl) &&\n label && label.isVisible()\n ) {\n emptyDataPorts = portId;\n }\n });\n return emptyDataPorts;\n },\n\n __addInputPortButtonClicked: function() {\n const emptyDataPorts = this.__getEmptyDataLastPorts();\n const lastEmptyDataPort = this.__getVisibleEmptyDataLastPort();\n if (emptyDataPorts.length>1 && lastEmptyDataPort) {\n const idx = emptyDataPorts.indexOf(lastEmptyDataPort);\n if (idx+1 < emptyDataPorts.length) {\n this.__showPort(emptyDataPorts[idx+1]);\n }\n this.__addInputPortButton.setVisibility(this.__checkAddInputPortButtonVisibility());\n }\n },\n\n __checkAddInputPortButtonVisibility: function() {\n const emptyDataPorts = this.__getEmptyDataLastPorts();\n const lastEmptyDataPort = this.__getVisibleEmptyDataLastPort();\n const idx = emptyDataPorts.indexOf(lastEmptyDataPort);\n if (idx < emptyDataPorts.length-1) {\n return \"visible\";\n }\n return \"excluded\";\n },\n\n __showPort: function(portId) {\n const entries = this.self().GRID_POS;\n Object.values(entries).forEach(entryPos => {\n const layoutElement = this._getLayoutChild(portId, entryPos);\n if (layoutElement && layoutElement.child) {\n const control = layoutElement.child;\n if (control) {\n control.show();\n const row = control.getLayoutProperties().row;\n this._getLayout().setRowHeight(row, osparc.form.renderer.PropFormBase.ROW_HEIGHT);\n }\n }\n });\n },\n\n __excludePort: function(portId) {\n const entries = this.self().GRID_POS;\n Object.values(entries).forEach(entryPos => {\n const layoutElement = this._getLayoutChild(portId, entryPos);\n if (layoutElement && layoutElement.child) {\n const control = layoutElement.child;\n if (control) {\n control.exclude();\n const row = control.getLayoutProperties().row;\n this._getLayout().setRowHeight(row, 0);\n }\n }\n });\n },\n\n makeInputsDynamic: function() {\n this.getPortIds().forEach(portId => this.__showPort(portId));\n\n const emptyDataPorts = this.__getEmptyDataLastPorts();\n for (let i=1; i\n */\n\n __createLinkUnlinkStack: function(field) {\n const linkUnlinkStack = new qx.ui.container.Stack();\n\n const linkOptions = this.__createLinkOpts(field);\n linkUnlinkStack.add(linkOptions);\n\n const unlinkBtn = this.__createUnlinkButton(field);\n linkUnlinkStack.add(unlinkBtn);\n\n this.__linkUnlinkStackMap[field.key] = linkUnlinkStack;\n\n return linkUnlinkStack;\n },\n\n __createLinkOpts: function(field) {\n const optionsMenu = new qx.ui.menu.Menu().set({\n offsetLeft: 2,\n position: \"right-top\"\n });\n optionsMenu.getContentElement().setStyles({\n \"border-top-right-radius\": \"6px\",\n \"border-bottom-right-radius\": \"6px\",\n \"border-bottom-left-radius\": \"6px\"\n });\n const fieldOptsBtn = new qx.ui.form.MenuButton().set({\n menu: optionsMenu,\n icon: \"@FontAwesome5Solid/link/12\",\n maxHeight: 23,\n focusable: false,\n allowGrowX: false,\n alignX: \"center\"\n });\n this.__fieldOptsBtnMap[field.key] = fieldOptsBtn;\n // populate the button/menu when the it appears\n fieldOptsBtn.addListenerOnce(\"appear\", () => {\n if (this.getStudy()) {\n this.__populateFieldOptionsMenu(optionsMenu, field);\n this.getStudy().getWorkbench().addListener(\"pipelineChanged\", () => this.__populateFieldOptionsMenu(optionsMenu, field), this);\n }\n });\n return fieldOptsBtn;\n },\n\n __createUnlinkButton: function(field) {\n const unlinkBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/unlink/12\").set({\n toolTipText: this.tr(\"Unlink\"),\n maxHeight: 23\n });\n unlinkBtn.addListener(\"execute\", () => this.removePortLink(field.key), this);\n return unlinkBtn;\n },\n\n __populateFieldOptionsMenu: function(optionsMenu, field) {\n optionsMenu.removeAll();\n\n this.__addInputsMenuButtons(field.key, optionsMenu);\n\n if (optionsMenu.getChildren().length) {\n optionsMenu.addSeparator();\n }\n\n const studyUI = this.getStudy().getUi();\n if ([\"FileButton\"].includes(field.widgetType)) {\n const menuButton = this.__getSelectFileButton(field.key);\n studyUI.bind(\"mode\", menuButton, \"visibility\", {\n converter: mode => mode === \"workbench\" ? \"visible\" : \"excluded\"\n });\n optionsMenu.add(menuButton);\n }\n if (this.self().isFieldParametrizable(field)) {\n const newParamBtn = this.__getNewParamButton(field.key);\n newParamBtn.exclude();\n optionsMenu.add(newParamBtn);\n const paramsMenuBtn = this.__getParamsMenuButton(field.key);\n paramsMenuBtn.exclude();\n optionsMenu.add(paramsMenuBtn);\n const areParamsEnabled = osparc.utils.Utils.isDevelopmentPlatform();\n [\n newParamBtn,\n paramsMenuBtn\n ].forEach(btn => {\n studyUI.bind(\"mode\", btn, \"visibility\", {\n converter: mode => mode === \"workbench\" && areParamsEnabled ? \"visible\" : \"excluded\"\n });\n });\n }\n\n if (optionsMenu.getChildren().length) {\n optionsMenu.addSeparator();\n }\n const inputRequiredButton = this.__getInputRequiredButton(field.key);\n optionsMenu.add(inputRequiredButton);\n },\n\n __connectToInputNode: function(targetPortId, inputNodeId, outputKey) {\n this.getNode().addInputNode(inputNodeId);\n this.getNode().addPortLink(targetPortId, inputNodeId, outputKey)\n .then(connected => {\n if (connected) {\n this.getNode().fireEvent(\"reloadModel\");\n }\n });\n },\n\n __addInputsMenuButtons: function(targetPortId, menu) {\n const study = this.getStudy();\n const thisNode = this.getNode();\n if (study && thisNode) {\n const inputNodeIDs = thisNode.getInputNodes();\n inputNodeIDs.forEach(inputNodeId => {\n const inputNode = this.getStudy().getWorkbench().getNode(inputNodeId);\n if (inputNode) {\n for (const outputKey in inputNode.getOutputs()) {\n const paramButton = new qx.ui.menu.Button();\n inputNode.bind(\"label\", paramButton, \"label\", {\n converter: val => val + \" : \" + inputNode.getOutput(outputKey).label\n });\n paramButton.addListener(\"execute\", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);\n menu.add(paramButton);\n osparc.utils.Ports.arePortsCompatible(inputNode, outputKey, this.getNode(), targetPortId)\n .then(compatible => {\n if (compatible === false) {\n paramButton.exclude();\n }\n });\n }\n }\n });\n }\n },\n\n __getInputMenuButton: function(inputNodeId, targetPortId) {\n const study = this.getStudy();\n const thisNode = this.getNode();\n if (study && thisNode) {\n const node = study.getWorkbench().getNode(inputNodeId);\n\n const inputNodePortsMenu = new qx.ui.menu.Menu();\n const inputMenuBtn = new qx.ui.menu.Button(null, null, null, inputNodePortsMenu);\n node.bind(\"label\", inputMenuBtn, \"label\");\n if (this.getStudy()) {\n this.__populateInputNodePortsMenu(inputNodeId, targetPortId, inputNodePortsMenu, inputMenuBtn);\n }\n return inputMenuBtn;\n }\n return null;\n },\n\n __populateInputNodePortsMenu: function(inputNodeId, targetPortId, menu, menuBtn) {\n menuBtn.exclude();\n menu.removeAll();\n\n const inputNode = this.getStudy().getWorkbench().getNode(inputNodeId);\n if (inputNode) {\n for (const outputKey in inputNode.getOutputs()) {\n osparc.utils.Ports.arePortsCompatible(inputNode, outputKey, this.getNode(), targetPortId)\n .then(compatible => {\n if (compatible) {\n const paramButton = new qx.ui.menu.Button(inputNode.getOutput(outputKey).label);\n paramButton.addListener(\"execute\", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);\n menu.add(paramButton);\n menuBtn.show();\n }\n });\n }\n }\n },\n\n __getSelectFileButton: function(portId) {\n const selectFileButton = new qx.ui.menu.Button(this.tr(\"Select File\"));\n selectFileButton.addListener(\"execute\", () => this.fireDataEvent(\"filePickerRequested\", {\n portId,\n file: null\n }), this);\n return selectFileButton;\n },\n\n __getNewParamButton: function(portId) {\n const newParamBtn = new qx.ui.menu.Button(this.tr(\"Set new parameter\"));\n newParamBtn.addListener(\"execute\", () => this.fireDataEvent(\"parameterRequested\", portId), this);\n return newParamBtn;\n },\n\n __getParamsMenuButton: function(portId) {\n const existingParamMenu = new qx.ui.menu.Menu();\n const existingParamBtn = new qx.ui.menu.Button(this.tr(\"Set existing parameter\"), null, null, existingParamMenu);\n if (this.getStudy()) {\n this.__populateExistingParamsMenu(portId, existingParamMenu, existingParamBtn);\n }\n return existingParamBtn;\n },\n\n __populateExistingParamsMenu: function(targetPortId, menu, menuBtn) {\n menuBtn.exclude();\n menu.removeAll();\n\n const params = this.getStudy().getParameters();\n params.forEach(paramNode => {\n const inputNodeId = paramNode.getNodeId();\n const outputKey = \"out_1\";\n osparc.utils.Ports.arePortsCompatible(paramNode, outputKey, this.getNode(), targetPortId)\n .then(compatible => {\n if (compatible) {\n const paramButton = new qx.ui.menu.Button();\n paramButton.nodeId = inputNodeId;\n paramNode.bind(\"label\", paramButton, \"label\");\n paramButton.addListener(\"execute\", () => this.__connectToInputNode(targetPortId, inputNodeId, outputKey), this);\n if (!menu.getChildren().some(child => child.nodeId === paramButton.nodeId)) {\n menu.add(paramButton);\n menuBtn.show();\n }\n }\n });\n });\n },\n\n __getInputRequiredButton: function(portId) {\n const node = this.getNode();\n const inputRequiredBtn = new qx.ui.menu.Button(this.tr(\"Required Input\"));\n const evalButton = () => {\n if (node.getInputsRequired().includes(portId)) {\n inputRequiredBtn.set({\n icon: \"@FontAwesome5Regular/check-square/12\"\n });\n } else {\n inputRequiredBtn.set({\n icon: \"@FontAwesome5Regular/square/12\"\n });\n }\n }\n node.addListener(\"changeInputsRequired\", () => evalButton(), this);\n inputRequiredBtn.addListener(\"execute\", () => node.toggleInputRequired(portId), this);\n evalButton();\n return inputRequiredBtn;\n },\n\n // overridden\n addItems: function(items, names, title, itemOptions, headerOptions) {\n this.base(arguments, items, names, title, itemOptions, headerOptions);\n\n // header\n let row = title === null ? 0 : 1;\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n const portId = item.key;\n\n const fieldOpts = this.__createLinkUnlinkStack(item);\n if (fieldOpts) {\n this._add(fieldOpts, {\n row,\n column: this.self().GRID_POS.FIELD_LINK_UNLINK\n });\n }\n\n this.__createDropMechanism(item, portId);\n\n // Notify focus and focus out\n const msgDataFn = (nodeId, pId) => this.__arePortsCompatible(nodeId, pId, this.getNode().getNodeId(), item.key);\n\n item.addListener(\"focus\", () => {\n if (this.getNode()) {\n qx.event.message.Bus.getInstance().dispatchByName(\"inputFocus\", msgDataFn);\n }\n }, this);\n item.addListener(\"focusout\", () => {\n if (this.getNode()) {\n qx.event.message.Bus.getInstance().dispatchByName(\"inputFocusout\", msgDataFn);\n }\n }, this);\n\n row++;\n }\n\n const evalRequired = () => {\n for (const portId in this.__ctrlLinkMap) {\n this.evalFieldRequired(portId);\n }\n }\n this.getNode().addListener(\"changeInputsRequired\", () => evalRequired());\n evalRequired();\n\n // add port button\n const addPortButton = this.__addInputPortButton = new qx.ui.form.Button().set({\n label: this.tr(\"Input\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n marginTop: 6,\n allowGrowX: false,\n minWidth: 70\n });\n addPortButton.addListener(\"execute\", () => this.__addInputPortButtonClicked());\n this._add(addPortButton, {\n row,\n column: this.self().GRID_POS.LABEL\n });\n },\n\n // overridden\n setAccessLevel: function(data) {\n const entry = this.self().GRID_POS;\n const disableables = osparc.form.renderer.PropFormBase.getDisableables();\n Object.entries(data).forEach(([portId, visibility]) => {\n Object.values(entry).forEach(entryPos => {\n const layoutElement = this._getLayoutChild(portId, entryPos);\n if (layoutElement && layoutElement.child) {\n const control = layoutElement.child;\n if (control) {\n const vis = visibility === this._visibility.hidden ? \"excluded\" : \"visible\";\n const enabled = visibility === this._visibility.readWrite;\n control.setVisibility(vis);\n if (disableables.includes(entryPos)) {\n control.setEnabled(enabled);\n }\n }\n }\n });\n });\n this.fireEvent(\"changeChildVisibility\");\n },\n\n setPortErrorMessage: function(portId, msg) {\n const infoButton = this._getInfoFieldChild(portId);\n if (infoButton && \"child\" in infoButton) {\n const infoHint = infoButton.child;\n infoHint.setPortErrorMsg(msg);\n }\n },\n\n retrievingPortData: function(portId, status) {\n if (status === undefined) {\n status = this.self().RETRIEVE_STATUS.retrieving;\n }\n if (portId) {\n let data = this._getCtrlFieldChild(portId);\n if (data) {\n let child = data.child;\n let idx = data.idx;\n const layoutProps = child.getLayoutProperties();\n this.__setRetrievingStatus(status, portId, idx+1, layoutProps.row);\n }\n } else {\n for (let i = this._getChildren().length; i--;) {\n let child = this._getChildren()[i];\n const layoutProps = child.getLayoutProperties();\n if (layoutProps.column === this.self().GRID_POS.CTRL_FIELD) {\n const ctrl = this._form.getControl(child.key);\n if (ctrl && ctrl[\"link\"]) {\n this.__setRetrievingStatus(status, child.key, i, layoutProps.row);\n }\n }\n }\n }\n },\n\n retrievedPortData: function(portId, succeed, dataSize = -1) {\n let status = succeed ? this.self().RETRIEVE_STATUS.succeed : this.self().RETRIEVE_STATUS.failed;\n if (parseInt(dataSize) === 0) {\n status = this.self().RETRIEVE_STATUS.empty;\n }\n if (portId) {\n let data = this._getCtrlFieldChild(portId);\n if (data) {\n let child = data.child;\n let idx = data.idx;\n const layoutProps = child.getLayoutProperties();\n this.__setRetrievingStatus(status, portId, idx+1, layoutProps.row);\n }\n } else {\n let children = this._getChildren();\n for (let i=0; i {\n if (node1Id === node2Id) {\n resolve(false);\n return;\n }\n const workbench = this.getStudy().getWorkbench();\n const node1 = workbench.getNode(node1Id);\n const node2 = workbench.getNode(node2Id);\n if (workbench && node1 && node2) {\n osparc.utils.Ports.arePortsCompatible(node1, port1Id, node2, port2Id)\n .then(compatible => {\n resolve(compatible);\n })\n .catch(err => {\n console.error(err);\n reject(err);\n });\n } else {\n resolve(false);\n }\n });\n },\n\n __createDropMechanism: function(uiElement, portId) {\n if (this.getNode()) {\n uiElement.set({\n droppable: true\n });\n\n uiElement.addListener(\"dragover\", e => {\n if (e.supportsType(\"osparc-port-link\")) {\n const data = e.getData(\"osparc-port-link\");\n const node1 = data[\"node1\"];\n const port1Key = data[\"port1Key\"];\n const destinations = data[\"destinations\"];\n const port2Key = portId;\n\n const node2Id = this.getNode().getNodeId();\n if (!(node2Id in destinations)) {\n destinations[node2Id] = {};\n }\n if (!(port2Key in destinations[node2Id])) {\n destinations[node2Id][port2Key] = \"fetching\";\n osparc.utils.Ports.arePortsCompatible(node1, port1Key, this.getNode(), port2Key)\n .then(compatible => {\n destinations[node2Id][port2Key] = compatible;\n });\n }\n\n const compatible = destinations[node2Id][portId];\n if (compatible) {\n // stop propagation, so that the form doesn't attend it (and preventDefault it)\n e.stopPropagation();\n this.__highlightCompatibles(portId);\n }\n }\n\n if (e.supportsType(\"osparc-file-link\")) {\n const data = e.getData(\"osparc-file-link\");\n if (\"dragData\" in data && \"type\" in uiElement) {\n const compatible = uiElement.type.includes(\"data:\");\n if (compatible) {\n // stop propagation, so that the form doesn't attend it (and preventDefault it)\n e.stopPropagation();\n this.__highlightCompatibles(portId);\n }\n }\n }\n }, this);\n\n uiElement.addListener(\"drop\", e => {\n if (e.supportsType(\"osparc-port-link\")) {\n const port2Key = portId;\n const data = e.getData(\"osparc-port-link\");\n const node1Id = data[\"node1\"].getNodeId();\n const port1Key = data[\"port1Key\"];\n this.getNode().addPortLink(port2Key, node1Id, port1Key);\n }\n if (e.supportsType(\"osparc-file-link\")) {\n const data = e.getData(\"osparc-file-link\");\n this.fireDataEvent(\"filePickerRequested\", {\n portId,\n file: {\n data: data[\"dragData\"]\n }\n });\n }\n }, this);\n }\n },\n\n __highlightCompatibles: function(compatiblePorts) {\n this._getChildren().forEach(child => {\n if (\"key\" in child && compatiblePorts.includes(child.key)) {\n child.setDecorator(\"material-textfield-focused\");\n }\n });\n },\n\n __unhighlightAll: function() {\n this._getChildren().forEach(child => {\n if (\"key\" in child) {\n child.resetDecorator();\n }\n });\n },\n\n __attachDragoverHighlighter: function() {\n this.addListener(\"dragover\", e => {\n if (e.supportsType(\"osparc-port-link\")) {\n const data = e.getData(\"osparc-port-link\");\n const node1 = data[\"node1\"];\n const dragPortId = data[\"port1Key\"];\n\n const destinations = data[\"destinations\"];\n const node2Id = this.getNode().getNodeId();\n if (!(node2Id in destinations)) {\n destinations[node2Id] = {};\n }\n this.getPortIds().forEach(portId => {\n if (!(portId in destinations[node2Id])) {\n destinations[node2Id][portId] = \"fetching\";\n }\n });\n osparc.data.Resources.getCompatibleInputs(node1, dragPortId, this.getNode())\n .then(compatiblePorts => {\n this.getPortIds().forEach(portId => {\n destinations[node2Id][portId] = compatiblePorts.includes(portId);\n });\n this.__highlightCompatibles(compatiblePorts);\n })\n .catch(err => {\n console.error(err);\n });\n\n e.preventDefault();\n }\n }, this);\n this.addListener(\"dragleave\", e => {\n if (e.supportsType(\"osparc-port-link\")) {\n this.__unhighlightAll();\n }\n }, this);\n this.addListener(\"mouseup\", e => {\n this.__unhighlightAll();\n });\n },\n\n __isPortAvailable: function(portId) {\n const port = this._form.getControl(portId);\n if (!port ||\n !port.getEnabled() ||\n Object.prototype.hasOwnProperty.call(port, \"link\") ||\n Object.prototype.hasOwnProperty.call(port, \"parameter\")) {\n return false;\n }\n return true;\n },\n\n __createFieldCtrl: function(portId) {\n const controlParam = new qx.ui.form.TextField().set({\n enabled: false\n });\n controlParam.key = portId;\n return controlParam;\n },\n\n __resetCtrlField: function(portId) {\n let data = this._getCtrlFieldChild(portId);\n if (data) {\n const {child, idx} = data;\n const layoutProps = child.getLayoutProperties();\n if (layoutProps.column === this.self().GRID_POS.CTRL_FIELD) {\n this._remove(child);\n const item = this._form.getControl(portId);\n item.show();\n this._addAt(item, idx, {\n row: layoutProps.row,\n column: this.self().GRID_POS.CTRL_FIELD\n });\n\n return true;\n }\n }\n return false;\n },\n\n getPortIds: function() {\n return Object.keys(this._form.getControls());\n },\n\n /* LINKS */\n getControlLink: function(portId) {\n return this.__ctrlLinkMap[portId];\n },\n\n __addLinkCtrl: function(portId) {\n const controlLink = this.__createFieldCtrl(portId);\n this.__ctrlLinkMap[portId] = controlLink;\n },\n\n __addLinkCtrls: function() {\n this.getPortIds().forEach(portId => {\n this.__addLinkCtrl(portId);\n });\n },\n\n __portLinkAdded: function(portId, fromNodeId, fromPortId) {\n let data = this._getCtrlFieldChild(portId);\n if (data) {\n let child = data.child;\n const idx = data.idx;\n const layoutProps = child.getLayoutProperties();\n this._remove(child);\n\n const ctrlLink = this.getControlLink(portId);\n ctrlLink.setEnabled(false);\n ctrlLink.key = portId;\n this._addAt(ctrlLink, idx, {\n row: layoutProps.row,\n column: this.self().GRID_POS.CTRL_FIELD\n });\n\n if (portId in this.__linkUnlinkStackMap) {\n const stack = this.__linkUnlinkStackMap[portId];\n if (stack.getSelectables().length > 1) {\n stack.setSelection([stack.getSelectables()[1]]);\n }\n }\n\n const linkFieldModified = {\n portId,\n fromNodeId,\n fromPortId,\n added: true\n };\n this.fireDataEvent(\"linkFieldModified\", linkFieldModified);\n }\n },\n\n __portLinkRemoved: function(portId) {\n if (this.__resetCtrlField(portId)) {\n if (portId in this.__linkUnlinkStackMap) {\n const stack = this.__linkUnlinkStackMap[portId];\n if (stack.getSelectables().length > 0) {\n stack.setSelection([stack.getSelectables()[0]]);\n }\n }\n\n const linkFieldModified = {\n portId,\n added: false\n };\n this.fireDataEvent(\"linkFieldModified\", linkFieldModified);\n }\n },\n\n getLink: function(portId) {\n if (\"link\" in this._form.getControl(portId)) {\n return this._form.getControl(portId)[\"link\"];\n }\n return null;\n },\n\n getLinks: function() {\n const links = [];\n Object.keys(this.__ctrlLinkMap).forEach(portId => {\n const link = this.getLink(portId);\n if (link) {\n links.push(link);\n }\n });\n return links;\n },\n\n addPortLink: function(toPortId, fromNodeId, fromPortId) {\n const study = this.getStudy();\n if (!study) {\n return null;\n }\n if (!this.__isPortAvailable(toPortId)) {\n return false;\n }\n const ctrlLink = this.getControlLink(toPortId);\n ctrlLink.setEnabled(false);\n this._form.getControl(toPortId)[\"link\"] = {\n nodeUuid: fromNodeId,\n output: fromPortId\n };\n const highlightEdgeUI = highlight => {\n this.fireDataEvent(\"highlightEdge\", {\n highlight,\n toNodeId: this.getNode().getNodeId(),\n toPortId,\n fromNodeId,\n fromPortId,\n });\n };\n ctrlLink.addListener(\"mouseover\", () => highlightEdgeUI(true));\n ctrlLink.addListener(\"mouseout\", () => highlightEdgeUI(false));\n\n const workbench = study.getWorkbench();\n const fromNode = workbench.getNode(fromNodeId);\n const port = fromNode.getOutput(fromPortId);\n const fromPortLabel = port ? port.label : null;\n fromNode.bind(\"label\", ctrlLink, \"value\", {\n converter: label => label + \": \" + fromPortLabel\n });\n // Hack: Show tooltip if element is disabled\n const addToolTip = () => {\n ctrlLink.getContentElement().removeAttribute(\"title\");\n const toolTipText = fromNode.getLabel() + \":\\n\" + fromPortLabel;\n ctrlLink.getContentElement().setAttribute(\"title\", toolTipText);\n };\n fromNode.addListener(\"changeLabel\", () => addToolTip());\n addToolTip();\n\n this.__portLinkAdded(toPortId, fromNodeId, fromPortId);\n\n this.makeInputsDynamic();\n\n return true;\n },\n\n setInputLinks: function(inputLinks) {\n for (let key in inputLinks) {\n if (osparc.utils.Ports.isDataALink(inputLinks[key])) {\n this.addPortLink(key, inputLinks[key].nodeUuid, inputLinks[key].output);\n }\n }\n },\n\n removePortLink: function(toPortId) {\n this.getControlLink(toPortId).setEnabled(false);\n if (\"link\" in this._form.getControl(toPortId)) {\n delete this._form.getControl(toPortId)[\"link\"];\n }\n\n this.__portLinkRemoved(toPortId);\n }\n /* /LINKS */\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.widget.NodesSlidesTree\", {\n extend: qx.ui.core.Widget,\n\n construct: function(study) {\n this.base(arguments);\n\n this.__study = study;\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.getChildControl(\"instructions\");\n\n this.__tree = this.getChildControl(\"tree\");\n\n const disable = this.getChildControl(\"disable\");\n disable.addListener(\"execute\", () => this.__disableSlides(), this);\n const enable = this.getChildControl(\"save-button\");\n enable.addListener(\"execute\", () => this.__saveSlides(), this);\n\n const model = this.__initRoot();\n this.__tree.setModel(model);\n\n this.__initTree();\n this.__initData();\n },\n\n events: {\n \"changeSelectedNode\": \"qx.event.type.Data\",\n \"finished\": \"qx.event.type.Event\"\n },\n\n members: {\n __study: null,\n __tree: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"instructions\": {\n let msg = this.tr(\"Use the eye icons to display/hide nodes in the App Mode.\");\n msg += \"
\";\n msg += this.tr(\"Use the up and down arrows to sort them.\");\n msg += \"
\";\n msg += this.tr(\"You can also display nodes by clicking on them on the Workbench or Nodes list.\");\n control = new qx.ui.basic.Label(msg).set({\n rich: true,\n wrap: true,\n paddingLeft: 5,\n paddingRight: 5\n });\n this._add(control);\n break;\n }\n case \"tree\":\n control = this.__buildTree();\n this._add(control, {\n flex: 1\n });\n break;\n case \"buttons\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\"\n }));\n this._add(control);\n break;\n case \"disable\": {\n control = new qx.ui.form.Button(this.tr(\"Disable\")).set({\n allowGrowX: false,\n appearance: \"no-shadow-button\"\n });\n const buttons = this.getChildControl(\"buttons\");\n buttons.add(control);\n break;\n }\n case \"save-button\": {\n control = new qx.ui.form.Button(this.tr(\"Save\")).set({\n allowGrowX: false,\n appearance: \"no-shadow-button\"\n });\n const buttons = this.getChildControl(\"buttons\");\n buttons.add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildTree: function() {\n const tree = new qx.ui.tree.VirtualTree(null, \"label\", \"children\").set({\n hideRoot: true,\n decorator: \"service-tree\",\n openMode: \"none\",\n contentPadding: 0,\n padding: 0,\n backgroundColor: \"background-main-2\"\n });\n return tree;\n },\n\n __initRoot: function() {\n const study = this.__study;\n let rootData = {\n label: study.getName(),\n children: [],\n nodeId: study.getUuid(),\n position: null,\n instructions: null\n };\n return qx.data.marshal.Json.createModel(rootData, true);\n },\n\n __initTree: function() {\n this.__tree.setDelegate({\n createItem: () => new osparc.widget.NodeSlideTreeItem(),\n bindItem: (c, item, id) => {\n c.bindDefaultProperties(item, id);\n c.bindProperty(\"nodeId\", \"nodeId\", null, item, id);\n c.bindProperty(\"label\", \"label\", null, item, id);\n c.bindProperty(\"position\", \"position\", null, item, id);\n c.bindProperty(\"instructions\", \"instructions\", null, item, id);\n },\n configureItem: item => {\n item.addListener(\"showNode\", () => this.__itemActioned(item, \"show\"), this);\n item.addListener(\"hideNode\", () => this.__itemActioned(item, \"hide\"), this);\n item.addListener(\"moveUp\", () => this.__itemActioned(item, \"moveUp\"), this);\n item.addListener(\"moveDown\", () => this.__itemActioned(item, \"moveDown\"), this);\n item.addListener(\"saveInstructions\", e => this.__saveInstructions(item, e.getData()), this);\n item.addListener(\"tap\", () => this.fireDataEvent(\"changeSelectedNode\", item.getNodeId()), this);\n },\n sorter: (a, b) => {\n const aPos = a.getPosition();\n if (aPos === -1) {\n return 1;\n }\n const bPos = b.getPosition();\n if (bPos === -1) {\n return -1;\n }\n return aPos - bPos;\n }\n });\n },\n\n /**\n * Converts an object of nodes into an array of children to be consumed by the tree model.\n * The tree is expecting to bind the children into NodeSlideTreeItem with nodeId and position as props.\n * @param {Object.} nodes Object with nodes \n * @returns {Array} Array of objects with label, nodeId and position.\n */\n __convertToModel: function(nodes) {\n const children = [];\n for (let nodeId in nodes) {\n const node = nodes[nodeId];\n const nodeInTree = {\n label: node.getLabel(),\n nodeId: node.getNodeId()\n };\n const pos = this.__study.getUi().getSlideshow().getPosition(nodeId);\n nodeInTree.position = pos;\n const instructions = this.__study.getUi().getSlideshow().getInstructions(nodeId);\n nodeInTree.instructions = instructions;\n children.push(nodeInTree);\n }\n return children;\n },\n\n __initData: function() {\n const topLevelNodes = this.__study.getWorkbench().getNodes();\n\n this.__tree.getModel().getChildren().removeAll();\n const allChildren = this.__convertToModel(topLevelNodes);\n this.__tree.getModel().setChildren(qx.data.marshal.Json.createModel(allChildren));\n\n this.__tree.refresh();\n },\n\n changeSelectedNode: function(nodeId) {\n const children = this.__tree.getModel().getChildren().toArray();\n const idx = children.findIndex(elem => elem.getNodeId() === nodeId);\n if (idx > -1) {\n const item = children[idx];\n this.__tree.setSelection(new qx.data.Array([item]));\n // show by default\n if (item.getPosition() === -1) {\n this.__show(item);\n this.__tree.refresh();\n }\n }\n },\n\n __itemActioned: function(item, action) {\n let fnct;\n switch (action) {\n case \"show\":\n fnct = this.__show;\n break;\n case \"hide\":\n fnct = this.__hide;\n break;\n case \"moveUp\":\n fnct = this.__moveUp;\n break;\n case \"moveDown\":\n fnct = this.__moveDown;\n break;\n }\n if (fnct.call(this, item.getModel())) {\n this.__tree.refresh();\n }\n },\n\n __getVisibleItems: function() {\n const children = this.__tree.getModel().getChildren().toArray();\n return children.filter(elem => elem.getPosition() !== -1);\n },\n\n __show: function(itemMdl) {\n const last = this.__getVisibleItems().length;\n itemMdl.setPosition(last);\n return true;\n },\n\n __hide: function(itemMdl) {\n const oldPos = itemMdl.getPosition();\n itemMdl.setPosition(-1);\n // the rest moves one pos up\n this.__getVisibleItems().forEach(item => {\n const p = item.getPosition();\n if (p >= oldPos) {\n item.setPosition(p-1);\n }\n });\n return true;\n },\n\n __moveUp: function(itemMdl) {\n const children = this.__tree.getModel().getChildren().toArray();\n const nodeId = itemMdl.getNodeId();\n const idx = children.findIndex(elem => elem.getNodeId() === nodeId);\n if (idx > -1) {\n const oldPos = children[idx].getPosition();\n const newPos = oldPos-1;\n if (newPos === -1) {\n return false;\n }\n const idx2 = children.findIndex(elem => elem.getPosition() === newPos);\n if (idx2 > -1) {\n children[idx].setPosition(newPos);\n children[idx2].setPosition(oldPos);\n return true;\n }\n }\n return false;\n },\n\n __moveDown: function(itemMdl) {\n const children = this.__tree.getModel().getChildren().toArray();\n const nodeId = itemMdl.getNodeId();\n const idx = children.findIndex(elem => elem.getNodeId() === nodeId);\n if (idx > -1) {\n const oldPos = children[idx].getPosition();\n const newPos = oldPos+1;\n if (newPos === this.__getVisibleItems().length) {\n return false;\n }\n const idx2 = children.findIndex(elem => elem.getPosition() === newPos);\n if (idx2 > -1) {\n children[idx].setPosition(newPos);\n children[idx2].setPosition(oldPos);\n return true;\n }\n }\n return false;\n },\n\n __saveInstructions: function(item, instructions) {\n const itemMdl = item.getModel();\n itemMdl.setInstructions(instructions);\n\n // save instructions\n const nodeId = itemMdl.getNodeId();\n this.__study.getUi().getSlideshow().setInstructions(nodeId, instructions);\n },\n\n __serialize: function() {\n const slideshow = {};\n const model = this.__tree.getModel();\n const children = model.getChildren().toArray();\n children.forEach(child => {\n slideshow[child.getNodeId()] = {\n \"position\": child.getPosition(),\n \"instructions\": child.getInstructions()\n };\n });\n return slideshow;\n },\n\n __saveSlides: function() {\n const slideshow = this.__serialize();\n this.__study.getUi().getSlideshow().setData(slideshow);\n this.fireEvent(\"finished\");\n },\n\n __disableSlides: function() {\n this.__getVisibleItems().forEach(item => {\n item.setPosition(-1);\n });\n const slideshow = this.__serialize();\n this.__study.getUi().getSlideshow().setData(slideshow);\n this.fireEvent(\"finished\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/**\n * HTTP requests to simcore's rest API\n */\nqx.Class.define(\"osparc.io.request.ApiRequest\", {\n extend: qx.io.request.Xhr,\n\n construct: function(url, method) {\n const baseURL = osparc.io.rest.AbstractResource.API;\n\n this.base(arguments, baseURL+url, method);\n this.set({\n accept: \"application/json\"\n });\n\n this.setRequestHeader(\"Content-Type\", \"application/json\");\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.snapshots.EditSnapshotView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__buildForm();\n },\n\n events: {\n \"takeSnapshot\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __form: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tags\":\n control = new qx.ui.form.TextField();\n break;\n case \"message\":\n control = new qx.ui.form.TextArea().set({\n autoSize: true,\n minimalLineHeight: 3\n });\n break;\n case \"cancel-button\": {\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\",\n allowGrowX: false\n });\n const commandEsc = new qx.ui.command.Command(\"Enter\");\n control.setCommand(commandEsc);\n control.addListener(\"execute\", () => this.fireEvent(\"cancel\"));\n break;\n }\n case \"ok-button\": {\n control = new qx.ui.form.Button(this.tr(\"OK\")).set({\n appearance: \"form-button\",\n allowGrowX: false\n });\n const commandEnter = new qx.ui.command.Command(\"Enter\");\n control.setCommand(commandEnter);\n control.addListener(\"execute\", () => {\n // releaseCapture to make sure all changes are applied\n this.__renderer.releaseCapture();\n this.fireEvent(\"takeSnapshot\");\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildForm: function() {\n const form = this.__form = new qx.ui.form.Form();\n const renderer = this.__renderer = new qx.ui.form.renderer.Single(form);\n this._add(renderer);\n\n const tags = this.getChildControl(\"tags\");\n form.add(tags, \"Tags\", null, \"tags\");\n\n const message = this.getChildControl(\"message\");\n form.add(message, \"Message\", null, \"message\");\n\n // buttons\n const cancelButton = this.getChildControl(\"cancel-button\");\n form.addButton(cancelButton);\n const okButton = this.getChildControl(\"ok-button\");\n form.addButton(okButton);\n },\n\n getTag: function() {\n return this.__form.getItem(\"tags\").getValue();\n },\n\n getMessage: function() {\n return this.__form.getItem(\"message\").getValue();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(fetch)\n */\n\nqx.Class.define(\"osparc.snapshots.SnapshotsView\", {\n extend: qx.ui.splitpane.Pane,\n\n construct: function(study) {\n this.base(arguments, \"horizontal\");\n\n this.__study = study;\n this.__buildLayout();\n },\n\n events: {\n \"updateSnapshot\": \"qx.event.type.Data\",\n \"openSnapshot\": \"qx.event.type.Data\"\n },\n\n members: {\n __snapshotsSection: null,\n __gitGraphScrollLayout: null,\n __gitGraphWrapper: null,\n __snapshotPreview: null,\n __editSnapshotBtn: null,\n __openSnapshotBtn: null,\n __snapshots: null,\n __currentSnapshot: null,\n __selectedSnapshotId: null,\n\n __buildLayout: function() {\n const snapshotsSection = this.__snapshotsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this.add(snapshotsSection, 1);\n\n this.__rebuildSnapshots();\n this.__buildSnapshotButtons();\n\n const snapshotPreview = this.__snapshotPreview = new osparc.workbench.WorkbenchUIPreview();\n this.add(snapshotPreview, 1);\n },\n\n __rebuildSnapshots: function() {\n Promise.all([\n this.__study.getSnapshots(),\n this.__study.getCurrentSnapshot()\n ])\n .then(values => {\n this.__snapshots = values[0];\n this.__currentSnapshot = values[1];\n this.__rebuildSnapshotsGraph();\n });\n },\n\n __rebuildSnapshotsGraph: function() {\n if (this.__gitGraphScrollLayout) {\n this.__snapshotsSection.remove(this.__gitGraphScrollLayout);\n }\n\n const gitGraphLayout = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n const gitGraphCanvas = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n const gitGraphInteract = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n gitGraphLayout.add(gitGraphCanvas, {\n top: 20,\n right: 0,\n bottom: 0,\n left: 0\n });\n gitGraphLayout.add(gitGraphInteract, {\n top: 20 + 2,\n right: 0,\n bottom: 0,\n left: 0\n });\n\n gitGraphCanvas.addListenerOnce(\"appear\", () => {\n const gitGraphWrapper = this.__gitGraphWrapper = new osparc.wrapper.GitGraph();\n gitGraphWrapper.init(gitGraphCanvas, gitGraphInteract)\n .then(() => {\n gitGraphWrapper.populateGraph(this.__snapshots, this.__currentSnapshot);\n this.__snapshotSelected(this.__currentSnapshot[\"id\"]);\n });\n gitGraphWrapper.addListener(\"snapshotTap\", e => {\n const snapshotId = e.getData();\n this.__snapshotSelected(snapshotId);\n });\n });\n\n const scroll = this.__gitGraphScrollLayout = new qx.ui.container.Scroll();\n scroll.add(gitGraphLayout);\n this._add(scroll, {\n flex: 1\n });\n\n this.__snapshotsSection.addAt(scroll, 0, {\n flex: 1\n });\n },\n\n __buildSnapshotButtons: function() {\n const buttonsSection = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(buttonsSection);\n\n const editSnapshotBtn = this.__editSnapshotBtn = this.__createEditSnapshotBtn();\n editSnapshotBtn.setEnabled(false);\n editSnapshotBtn.addListener(\"execute\", () => {\n if (this.__selectedSnapshotId) {\n this.__editSnapshot(this.__selectedSnapshotId);\n }\n });\n buttonsSection.add(editSnapshotBtn);\n\n const openSnapshotBtn = this.__openSnapshotBtn = this.__createOpenSnapshotBtn();\n openSnapshotBtn.setEnabled(false);\n openSnapshotBtn.addListener(\"execute\", () => {\n if (this.__selectedSnapshotId) {\n this.fireDataEvent(\"openSnapshot\", this.__selectedSnapshotId);\n }\n });\n buttonsSection.add(openSnapshotBtn);\n\n this.__snapshotsSection.addAt(buttonsSection, 1);\n },\n\n __createEditSnapshotBtn: function() {\n const editSnapshotBtn = new qx.ui.form.Button(this.tr(\"Edit Tag\")).set({\n allowGrowX: false,\n alignX: \"left\"\n });\n return editSnapshotBtn;\n },\n\n __createOpenSnapshotBtn: function() {\n const openSnapshotBtn = new qx.ui.form.Button(this.tr(\"Open\")).set({\n allowGrowX: false,\n alignX: \"right\"\n });\n return openSnapshotBtn;\n },\n\n __editSnapshot: function(snapshotId) {\n const selectedSnapshot = this.__snapshots.find(snapshot => snapshot[\"id\"] === snapshotId);\n if (selectedSnapshot) {\n const editSnapshotView = new osparc.snapshots.EditSnapshotView();\n const tagCtrl = editSnapshotView.getChildControl(\"tags\");\n tagCtrl.setValue(selectedSnapshot[\"tags\"][0]);\n const msgCtrl = editSnapshotView.getChildControl(\"message\");\n msgCtrl.setValue(selectedSnapshot[\"message\"]);\n const title = this.tr(\"Edit Snapshot\");\n const win = osparc.ui.window.Window.popUpInWindow(editSnapshotView, title, 400, 180);\n editSnapshotView.addListener(\"takeSnapshot\", () => {\n const params = {\n url: {\n \"studyId\": this.__study.getUuid(),\n \"snapshotId\": snapshotId\n },\n data: {\n \"tag\": editSnapshotView.getTag(),\n \"message\": editSnapshotView.getMessage()\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"updateSnapshot\", params)\n .then(() => {\n this.__rebuildSnapshots();\n })\n .catch(err => osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\"));\n win.close();\n }, this);\n editSnapshotView.addListener(\"cancel\", () => {\n win.close();\n }, this);\n }\n },\n\n __snapshotSelected: function(snapshotId) {\n this.__selectedSnapshotId = snapshotId;\n\n if (this.__gitGraphWrapper) {\n this.__gitGraphWrapper.setSelection(snapshotId);\n }\n\n this.__loadSnapshotsPreview(snapshotId);\n\n if (this.__editSnapshotBtn) {\n this.__editSnapshotBtn.setEnabled(true);\n }\n\n if (this.__openSnapshotBtn) {\n this.__openSnapshotBtn.setEnabled(true);\n }\n },\n\n __loadSnapshotsPreview: function(snapshotId) {\n const params = {\n url: {\n \"studyId\": this.__study.getUuid(),\n \"snapshotId\": snapshotId\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"preview\", params)\n .then(data => {\n const studyData = this.__study.serialize();\n studyData[\"workbench\"] = data[\"workbench\"];\n studyData[\"ui\"] = data[\"ui\"];\n const study = new osparc.data.model.Study(studyData);\n study.setReadOnly(true);\n this.__snapshotPreview.setStudy(study);\n // this.__snapshotPreview.loadModel(study.getWorkbench());\n if (study.getWorkbench().isDeserialized()) {\n this.__snapshotPreview.loadModel(study.getWorkbench())\n } else {\n study.getWorkbench().addListener(\"changeDeserialized\", e => {\n if (e.getData()) {\n this.__snapshotPreview.loadModel(study.getWorkbench())\n }\n }, this);\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(fetch)\n */\n\nqx.Class.define(\"osparc.snapshots.IterationsView\", {\n extend: qx.ui.splitpane.Pane,\n\n construct: function(study) {\n this.base(arguments, \"horizontal\");\n\n this.__study = study;\n this.__iterations = [];\n this.__buildLayout();\n },\n\n events: {\n \"openIteration\": \"qx.event.type.Data\"\n },\n\n members: {\n __study: null,\n __iterations: null,\n __iterationsSection: null,\n __loadingTable: null,\n __iterationsTable: null,\n __iterationPreview: null,\n __tagIterationBtn: null,\n __deleteIterationBtn: null,\n __openIterationBtn: null,\n __selectedIterationId: null,\n // throttling\n __lastUpdate: null,\n __lastFunc: null,\n\n __buildLayout: function() {\n const iterationsSection = this.__iterationsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this.add(iterationsSection, 1);\n\n this.__buildIterations();\n this.__buildSnapshotButtons();\n\n const iterationsPreview = this.__iterationPreview = new osparc.workbench.WorkbenchUIPreview();\n this.add(iterationsPreview, 1);\n },\n\n __buildIterations: function() {\n const loadingTable = this.__loadingTable = new osparc.snapshots.Loading(this.tr(\"iterations\"));\n this.__iterationsSection.addAt(loadingTable, 0, {\n flex: 1\n });\n\n this.__study.getIterations()\n .then(iterations => {\n if (iterations.length) {\n const iterationPromises = [];\n iterations.forEach(iteration => {\n const params = {\n url: {\n \"studyId\": iteration[\"workcopy_project_id\"]\n }\n };\n iterationPromises.push(osparc.data.Resources.getOne(\"studies\", params));\n });\n Promise.all(iterationPromises)\n .then(values => {\n this.__iterations = values;\n this.__listenToNodeUpdates();\n this.__rebuildIterationsTable();\n });\n }\n });\n },\n\n __buildSnapshotButtons: function() {\n const buttonsSection = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(buttonsSection);\n\n const tagIterationBtn = this.__tagIterationBtn = this.__createTagIterationBtn();\n tagIterationBtn.setEnabled(false);\n tagIterationBtn.addListener(\"execute\", () => {\n if (this.__selectedIterationId) {\n this.__tagIteration(this.__selectedIterationId);\n }\n });\n buttonsSection.add(tagIterationBtn);\n\n const deleteIterationBtn = this.__deleteIterationBtn = this.__createDeleteIterationBtn();\n deleteIterationBtn.setEnabled(false);\n buttonsSection.add(deleteIterationBtn);\n\n const openIterationBtn = this.__openIterationBtn = this.__createOpenIterationBtn();\n openIterationBtn.setEnabled(false);\n openIterationBtn.addListener(\"execute\", () => {\n if (this.__selectedIterationId) {\n this.fireDataEvent(\"openIteration\", this.__selectedIterationId);\n }\n });\n buttonsSection.add(openIterationBtn);\n\n this.__iterationsSection.addAt(buttonsSection, 1);\n },\n\n __listenToNodeUpdates: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n socket.on(\"nodeUpdated\", data => {\n const idx = this.__iterations.findIndex(it => it.uuid === data[\"project_id\"]);\n if (idx === -1) {\n return;\n }\n this.__iterationUpdated(data);\n }, this);\n },\n\n __iterationUpdated: function(dataUpdate) {\n const idx = this.__iterations.findIndex(it => it[\"uuid\"] === dataUpdate[\"project_id\"]);\n if (idx === -1) {\n return;\n }\n\n const iterationData = this.__iterations[idx];\n const iteration = new osparc.data.model.Study(iterationData);\n iteration.setReadOnly(true);\n iteration.nodeUpdated(dataUpdate);\n const iterationDataUpdated = iteration.serialize(false);\n this.__iterations.splice(idx, 1, iterationDataUpdated);\n\n // update maximum once every 2\"\n const throttleTime = 2000;\n this.__throttleUpdate(this.__updateNewData.bind(this), throttleTime);\n },\n\n __throttleUpdate: function(callback, time) {\n if (this.__lastUpdate) {\n if (this.__lastFunc) {\n clearTimeout(this.__lastFunc);\n }\n this.__lastFunc = setTimeout(() => {\n if ((Date.now() - this.__lastUpdate) >= time) {\n callback();\n this.__lastUpdate = Date.now();\n }\n }, time - (Date.now() - this.__lastUpdate));\n } else {\n callback();\n this.__lastUpdate = Date.now();\n }\n },\n\n __updateNewData: function() {\n const idx = this.__iterations.findIndex(it => it[\"uuid\"] === this.__selectedIterationId);\n if (idx > -1) {\n const iterationData = this.__iterations[idx];\n const iteration = new osparc.data.model.Study(iterationData);\n iteration.setReadOnly(true);\n this.__iterationPreview.setStudy(iteration);\n this.__iterationPreview.loadModel(iteration.getWorkbench());\n }\n\n this.__iterationsTable.iterationsToTable(this.__iterations);\n },\n\n __rebuildIterationsTable: function() {\n if (this.__loadingTable) {\n this.__iterationsSection.remove(this.__loadingTable);\n this.__loadingTable = null;\n }\n if (this.__iterationsTable) {\n this.__iterationsSection.remove(this.__iterationsTable);\n }\n\n const iterationsTable = this.__iterationsTable = new osparc.snapshots.Iterations(this.__study.serialize(false));\n iterationsTable.populateTable(this.__iterations);\n iterationsTable.addListener(\"cellTap\", e => {\n const selectedRow = e.getRow();\n const iterationId = iterationsTable.getRowData(selectedRow)[\"uuid\"];\n this.__iterationSelected(iterationId);\n });\n\n this.__iterationsSection.addAt(iterationsTable, 0, {\n flex: 1\n });\n },\n\n __reloadIteration: function(iterationId) {\n const params = {\n url: {\n \"studyId\": iterationId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(data => {\n const studyData = this.__study.serialize();\n studyData[\"workbench\"] = data[\"workbench\"];\n studyData[\"ui\"] = data[\"ui\"];\n\n const idx = this.__iterations.findIndex(it => it[\"uuid\"] === data[\"uuid\"]);\n if (idx !== -1) {\n this.__iterations.splice(idx, 1, data);\n this.__iterationsTable.iterationsToTable(this.__iterations);\n }\n\n const study = new osparc.data.model.Study(studyData);\n study.setReadOnly(true);\n this.__iterationPreview.set({\n study: study\n });\n this.__iterationPreview.loadModel(study.getWorkbench());\n });\n },\n\n __createTagIterationBtn: function() {\n const tagIterationBtn = new qx.ui.form.Button(this.tr(\"Edit Tag\")).set({\n allowGrowX: false,\n alignX: \"left\"\n });\n return tagIterationBtn;\n },\n\n __createDeleteIterationBtn: function() {\n const deleteIterationBtn = new qx.ui.form.Button(this.tr(\"Delete\")).set({\n appearance: \"danger-button\",\n allowGrowX: false,\n alignX: \"left\"\n });\n return deleteIterationBtn;\n },\n\n __createOpenIterationBtn: function() {\n const openIterationBtn = new qx.ui.form.Button(this.tr(\"Open\")).set({\n allowGrowX: false,\n alignX: \"right\"\n });\n return openIterationBtn;\n },\n\n __tagIteration: function(iterationId) {\n const selectedSnapshot = this.__iterations.find(iteration => iteration[\"uuid\"] === iterationId);\n if (selectedSnapshot) {\n const editSnapshotView = new osparc.snapshots.EditSnapshotView();\n const tagCtrl = editSnapshotView.getChildControl(\"tags\");\n tagCtrl.setValue(selectedSnapshot[\"tags\"][0]);\n const msgCtrl = editSnapshotView.getChildControl(\"message\");\n msgCtrl.setValue(selectedSnapshot[\"message\"]);\n const title = this.tr(\"Edit Iteration\");\n const win = osparc.ui.window.Window.popUpInWindow(editSnapshotView, title, 400, 180);\n editSnapshotView.addListener(\"takeSnapshot\", () => {\n const params = {\n url: {\n \"studyId\": this.__study.getUuid(),\n \"snapshotId\": iterationId\n },\n data: {\n \"tag\": editSnapshotView.getTag(),\n \"message\": editSnapshotView.getMessage()\n }\n };\n osparc.data.Resources.fetch(\"snapshots\", \"updateSnapshot\", params)\n .then(() => {\n this.__rebuildSnapshots();\n })\n .catch(err => osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\"));\n win.close();\n }, this);\n editSnapshotView.addListener(\"cancel\", () => {\n win.close();\n }, this);\n }\n },\n\n __iterationSelected: function(iterationId) {\n this.__selectedIterationId = iterationId;\n\n this.__reloadIteration(iterationId);\n\n if (this.__openIterationBtn) {\n this.__openIterationBtn.setEnabled(true);\n }\n },\n\n unlistenToNodeUpdated: function() {\n osparc.wrapper.WebSocket.getInstance().removeSlot(\"nodeUpdated\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.StudyEditorIdlingTracker\", {\n extend: qx.core.Object,\n\n construct: function(studyUuid) {\n this.base(arguments);\n this.__studyUuid = studyUuid;\n this.__resetIdlingTimeBound = this.__resetIdlingTime.bind(this);\n },\n\n events: {\n \"userIdled\": \"qx.event.type.Event\"\n },\n\n statics: {\n INACTIVITY_REQUEST_PERIOD_S: 5\n },\n\n members: {\n __resetIdlingTimeBound: null,\n __idlingTime: null,\n __idleInterval: null,\n __idleFlashMessage: null,\n __idleFlashMessageIsShowing: false,\n __idleFlashMessageTimeoutId: null,\n\n __updateFlashMessage: function(timeoutSec) {\n if (this.__idleFlashMessage === null) {\n this.__idleFlashMessage = osparc.FlashMessenger.getInstance().logAs(qx.locale.Manager.tr(\"Are you still there?\"), \"WARNING\", timeoutSec*1000);\n }\n\n let msg = qx.locale.Manager.tr(\"Are you still there?\") + \"
\";\n msg += `If not, ${osparc.store.StaticInfo.getInstance().getDisplayName()} will try to close the ${osparc.product.Utils.getStudyAlias()} in:`;\n msg += osparc.utils.Utils.formatSeconds(timeoutSec);\n this.__idleFlashMessage.setMessage(msg);\n },\n\n __removeIdleFlashMessage: function() {\n // removes a flash message if displaying\n if (this.__idleFlashMessageTimeoutId) {\n osparc.utils.WebWorkerScheduler.getInstance().clearInterval(this.__idleFlashMessageTimeoutId);\n this.__idleFlashMessageTimeoutId = null;\n this.__idleFlashMessageIsShowing = false;\n }\n if (this.__idleFlashMessage) {\n osparc.FlashMessenger.getInstance().removeMessage(this.__idleFlashMessage);\n this.__idleFlashMessage = null;\n }\n },\n\n __displayFlashMessage: function(displayDurationS) {\n this.__idleFlashMessageIsShowing = true;\n\n const updateFlashMessage = () => {\n if (displayDurationS <= 0) {\n // close and reset popup\n this.__removeIdleFlashMessage();\n this.__userIdled();\n return;\n }\n\n this.__updateFlashMessage(displayDurationS);\n displayDurationS--;\n };\n this.__idleFlashMessageTimeoutId = osparc.utils.WebWorkerScheduler.getInstance().setInterval(updateFlashMessage, 1000);\n },\n\n __userIdled: function() {\n this.stop();\n this.fireEvent(\"userIdled\");\n },\n\n __startTimer: function() {\n const inactivityThresholdT = osparc.Preferences.getInstance().getUserInactivityThreshold();\n if (inactivityThresholdT === 0) {\n // If 0, \"Automatic Shutdown of Idle Instances\" is disabled\n return;\n }\n\n const checkFn = () => {\n const flashMessageDurationS = Math.round(inactivityThresholdT * 0.2);\n this.__idlingTime++;\n\n if (this.__idlingTime >= (inactivityThresholdT-flashMessageDurationS) && !this.__idleFlashMessageIsShowing) {\n const timeSinceInactivityThreshold = this.__idlingTime - inactivityThresholdT;\n if (timeSinceInactivityThreshold % this.self().INACTIVITY_REQUEST_PERIOD_S == 0) {\n // check if backend reports project as inactive\n const params = {\n url: {\n studyId: this.__studyUuid\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"getInactivity\", params)\n .then(data => {\n if (data[\"is_inactive\"]) {\n this.__displayFlashMessage(flashMessageDurationS);\n }\n })\n .catch(err => console.error(err));\n }\n }\n };\n this.__idleInterval = osparc.utils.WebWorkerScheduler.getInstance().setInterval(checkFn, 1000);\n },\n\n __stopTimer: function() {\n if (this.__idleInterval) {\n osparc.utils.WebWorkerScheduler.getInstance().clearInterval(this.__idleInterval);\n this.__idleInterval = null;\n }\n },\n\n __resetIdlingTime: function() {\n this.__idlingTime = 0;\n this.__removeIdleFlashMessage();\n },\n\n start: function() {\n this.__resetIdlingTime()\n const cb = this.__resetIdlingTimeBound;\n window.addEventListener(\"mousemove\", cb);\n window.addEventListener(\"mousedown\", cb);\n window.addEventListener(\"keydown\", cb);\n\n this.__startTimer();\n },\n\n stop: function() {\n const cb = this.__resetIdlingTimeBound;\n window.removeEventListener(\"mousemove\", cb);\n window.removeEventListener(\"mousedown\", cb);\n window.removeEventListener(\"keydown\", cb);\n\n this.__removeIdleFlashMessage();\n this.__stopTimer();\n },\n\n /**\n * Destructor\n */\n destruct: function() {\n this.stop();\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n * Sebastian Werner (wpbasti)\n\n************************************************************************ */\n\n/**\n * The background class contains methods to compute and set the background image\n * of a DOM element.\n *\n * It fixes a background position issue in Firefox 2.\n */\nqx.Class.define(\"qx.bom.element.Background\",\n{\n statics :\n {\n /** @type {Array} Internal helper to improve compile performance */\n __tmpl :\n [\n \"background-image:url(\", null, \");\",\n \"background-position:\", null, \";\",\n \"background-repeat:\", null, \";\"\n ],\n\n\n /** @type {Map} Empty styles when no image is given */\n __emptyStyles :\n {\n backgroundImage : null,\n backgroundPosition : null,\n backgroundRepeat : null\n },\n\n\n /**\n * Computes the background position CSS value\n *\n * @param left {Integer|String} either an integer pixel value or a CSS\n * string value\n * @param top {Integer|String} either an integer pixel value or a CSS\n * string value\n * @return {String} The background position CSS value\n */\n __computePosition : function(left, top)\n {\n // Correcting buggy Firefox background-position implementation\n // Have problems with identical values\n var engine = qx.core.Environment.get(\"engine.name\");\n var version = qx.core.Environment.get(\"engine.version\");\n if (engine == \"gecko\" && version < 1.9 && left == top && typeof left == \"number\") {\n top += 0.01;\n }\n\n if (left) {\n var leftCss = (typeof left == \"number\") ? left + \"px\" : left;\n } else {\n leftCss = \"0\";\n }\n if (top) {\n var topCss = (typeof top == \"number\") ? top + \"px\" : top;\n } else {\n topCss = \"0\";\n }\n\n return leftCss + \" \" + topCss;\n },\n\n\n /**\n * Compiles the background into a CSS compatible string.\n *\n * @param source {String?null} The URL of the background image\n * @param repeat {String?null} The background repeat property. valid values\n * are repeat, repeat-x,\n * repeat-y, no-repeat\n * @param left {Integer|String?null} The horizontal offset of the image\n * inside of the image element. If the value is an integer it is\n * interpreted as pixel value otherwise the value is taken as CSS value.\n * CSS the values are \"center\", \"left\" and \"right\"\n * @param top {Integer|String?null} The vertical offset of the image\n * inside of the image element. If the value is an integer it is\n * interpreted as pixel value otherwise the value is taken as CSS value.\n * CSS the values are \"top\", \"bottom\" and \"center\"\n * @return {String} CSS string\n */\n compile : function(source, repeat, left, top)\n {\n var position = this.__computePosition(left, top);\n var backgroundImageUrl = qx.util.ResourceManager.getInstance().toUri(source);\n\n // Updating template\n var tmpl = this.__tmpl;\n\n tmpl[1] = \"'\" + backgroundImageUrl + \"'\"; // Put in quotes so spaces work\n tmpl[4] = position;\n tmpl[7] = repeat;\n\n return tmpl.join(\"\");\n },\n\n\n /**\n * Get standard css background styles\n *\n * @param source {String} The URL of the background image\n * @param repeat {String?null} The background repeat property. valid values\n * are repeat, repeat-x,\n * repeat-y, no-repeat\n * @param left {Integer|String?null} The horizontal offset of the image\n * inside of the image element. If the value is an integer it is\n * interpreted as pixel value otherwise the value is taken as CSS value.\n * CSS the values are \"center\", \"left\" and \"right\"\n * @param top {Integer|String?null} The vertical offset of the image\n * inside of the image element. If the value is an integer it is\n * interpreted as pixel value otherwise the value is taken as CSS value.\n * CSS the values are \"top\", \"bottom\" and \"center\"\n * @return {Map} A map of CSS styles\n */\n getStyles : function(source, repeat, left, top)\n {\n if (!source) {\n return this.__emptyStyles;\n }\n\n var position = this.__computePosition(left, top);\n var backgroundImageUrl = qx.util.ResourceManager.getInstance().toUri(source);\n\n var backgroundImageCssString = \"url('\" + backgroundImageUrl + \"')\"; // Put in quotes so spaces work\n var map = {\n backgroundPosition : position,\n backgroundImage : backgroundImageCssString\n };\n\n if (repeat != null) {\n map.backgroundRepeat = repeat;\n }\n return map;\n },\n\n\n /**\n * Set the background on the given DOM element\n *\n * @param element {Element} The element to modify\n * @param source {String?null} The URL of the background image\n * @param repeat {String?null} The background repeat property. valid values\n * are repeat, repeat-x,\n * repeat-y, no-repeat\n * @param left {Integer?null} The horizontal offset of the image inside of\n * the image element.\n * @param top {Integer?null} The vertical offset of the image inside of\n * the image element.\n */\n set : function(element, source, repeat, left, top)\n {\n var styles = this.getStyles(source, repeat, left, top);\n for (var prop in styles) {\n element.style[prop] = styles[prop];\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Workbench data.\n *\n * It takes care of creating, storing and managing nodes and edges.\n *\n * -> {EDGES}\n * STUDY -> METADATA + WORKBENCH ->|\n * -> {LINKS}\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * const workbench = new osparc.data.model.Workbench(study.workbench, study.workbenchUI)\n * study.setWorkbench(workbench);\n * workbench.initWorkbench();\n *
\n */\n\nqx.Class.define(\"osparc.data.model.Workbench\", {\n extend: qx.core.Object,\n\n /**\n * @param workbenchData {Object} Object containing the workbench raw data\n * @param workbenchUIData {Object} Object containing the workbenchUI raw data\n */\n construct: function(workbenchData, workbenchUIData = null) {\n this.base(arguments);\n\n this.__workbenchInitData = workbenchData;\n this.__workbenchUIInitData = workbenchUIData;\n },\n\n events: {\n \"updateStudyDocument\": \"qx.event.type.Event\",\n \"restartAutoSaveTimer\": \"qx.event.type.Event\",\n \"pipelineChanged\": \"qx.event.type.Event\",\n \"reloadModel\": \"qx.event.type.Event\",\n \"retrieveInputs\": \"qx.event.type.Data\",\n \"fileRequested\": \"qx.event.type.Data\",\n \"openNode\": \"qx.event.type.Data\",\n \"showInLogger\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false,\n event: \"changeStudy\"\n },\n\n deserialized: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeDeserialized\"\n }\n },\n\n statics: {\n CANT_ADD_NODE: qx.locale.Manager.tr(\"Nodes can't be added while the pipeline is running\"),\n CANT_DELETE_NODE: qx.locale.Manager.tr(\"Nodes can't be deleted while the pipeline is running\"),\n\n getLinkedNodeIds: function(workbenchData) {\n const linkedNodeIDs = new Set([]);\n Object.values(workbenchData).forEach(nodeData => {\n const linkedNodes = osparc.data.model.Node.getLinkedNodeIds(nodeData);\n linkedNodes.forEach(linkedNodeID => linkedNodeIDs.add(linkedNodeID))\n });\n return Array.from(linkedNodeIDs);\n },\n },\n\n members: {\n __workbenchInitData: null,\n __workbenchUIInitData: null,\n __nodes: null,\n __edges: null,\n\n getWorkbenchInitData: function() {\n return this.__workbenchInitData;\n },\n\n // deserializes the workbenchInitData\n buildWorkbench: function() {\n this.__nodes = {};\n this.__edges = {};\n this.__deserialize(this.__workbenchInitData, this.__workbenchUIInitData);\n this.__workbenchInitData = null;\n this.__workbenchUIInitData = null;\n },\n\n // starts the dynamic services\n initWorkbench: function() {\n const allModels = this.getNodes();\n const nodes = Object.values(allModels);\n nodes.forEach(node => node.checkState());\n },\n\n getUpstreamCompNodes: function(node, recursive = true, upstreamNodes = new Set()) {\n const links = node.getLinks();\n links.forEach(link => {\n upstreamNodes.add(link[\"nodeUuid\"]);\n if (recursive) {\n const linkNode = this.getNode(link[\"nodeUuid\"]);\n if (linkNode.isComputational()) {\n this.getUpstreamCompNodes(linkNode, recursive, upstreamNodes);\n }\n }\n });\n return Array.from(upstreamNodes).reverse();\n },\n\n __getDownstreamNodes: function(node) {\n const downstreamNodes = [];\n Object.values(this.getNodes()).forEach(n => {\n const inputNodes = n.getInputNodes();\n if (inputNodes.includes(node.getNodeId())) {\n downstreamNodes.push(n);\n }\n });\n return downstreamNodes;\n },\n\n isPipelineLinear: function() {\n const nodes = this.getNodes();\n const inputNodeIds = [];\n const nodesWithoutInputs = [];\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const inputNodes = node.getInputNodes();\n if (inputNodes.length === 0) {\n nodesWithoutInputs.push(nodeId);\n } else if (inputNodes.length > 1) {\n return false;\n } else {\n inputNodeIds.push(...inputNodes);\n }\n }\n // if duplicates exist, it means that there is a branching\n const duplicateExists = new Set(inputNodeIds).size !== inputNodeIds.length;\n if (duplicateExists) {\n return false;\n }\n\n // Make sure there are no more than one upstream nodes\n return nodesWithoutInputs.length < 2;\n },\n\n getPipelineLinearSorted: function() {\n if (!this.isPipelineLinear()) {\n return null;\n }\n\n const sortedPipeline = [];\n const nodes = this.getNodes();\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const inputNodes = node.getInputNodes();\n if (inputNodes.length === 0) {\n // first node\n sortedPipeline.splice(0, 0, nodeId);\n } else {\n // insert right after its input node\n const idx = sortedPipeline.indexOf(inputNodes[0]);\n sortedPipeline.splice(idx+1, 0, nodeId);\n }\n }\n return sortedPipeline;\n },\n\n getNode: function(nodeId) {\n const allNodes = this.getNodes();\n const exists = Object.prototype.hasOwnProperty.call(allNodes, nodeId);\n if (exists) {\n return allNodes[nodeId];\n }\n return null;\n },\n\n getNodes: function() {\n let nodes = Object.assign({}, this.__nodes);\n return nodes;\n },\n\n getConnectedEdges: function(nodeId) {\n const connectedEdges = [];\n const edges = Object.values(this.__edges);\n for (const edge of edges) {\n const inputNodeId = edge.getInputNodeId();\n const outputNodeId = edge.getOutputNodeId();\n if ([inputNodeId, outputNodeId].includes(nodeId)) {\n connectedEdges.push(edge.getEdgeId());\n }\n }\n return connectedEdges;\n },\n\n getEdge: function(edgeId, node1Id, node2Id) {\n const exists = Object.prototype.hasOwnProperty.call(this.__edges, edgeId);\n if (exists) {\n return this.__edges[edgeId];\n }\n const edges = Object.values(this.__edges);\n for (const edge of edges) {\n if (edge.getInputNodeId() === node1Id &&\n edge.getOutputNodeId() === node2Id) {\n return edge;\n }\n }\n return null;\n },\n\n createEdge: function(edgeId, nodeLeftId, nodeRightId, autoConnect = true) {\n const existingEdge = this.getEdge(edgeId, nodeLeftId, nodeRightId);\n if (existingEdge) {\n return existingEdge;\n }\n if (!osparc.data.Permissions.getInstance().canDo(\"study.edge.create\", true)) {\n return null;\n }\n const nodeLeft = this.getNode(nodeLeftId);\n const nodeRight = this.getNode(nodeRightId);\n if (nodeLeft && nodeRight) {\n const edge = new osparc.data.model.Edge(edgeId, nodeLeft, nodeRight);\n this.addEdge(edge);\n\n if (autoConnect) {\n nodeRight.createAutoPortConnection(nodeLeft, nodeRight);\n }\n\n nodeRight.addInputNode(nodeLeftId);\n\n return edge;\n }\n return null;\n },\n\n addEdge: function(edge) {\n const edgeId = edge.getEdgeId();\n const node1Id = edge.getInputNodeId();\n const node2Id = edge.getOutputNodeId();\n\n const exists = this.getEdge(edgeId, node1Id, node2Id);\n if (!exists) {\n this.__edges[edgeId] = edge;\n }\n\n const nodeLeft = this.getNode(node1Id);\n const nodeRight = this.getNode(node2Id);\n nodeLeft.setOutputConnected(true);\n nodeRight.setInputConnected(true);\n },\n\n __createNode: function(study, metadata, uuid) {\n osparc.utils.Utils.localCache.serviceToFavs(metadata.key);\n const node = new osparc.data.model.Node(study, metadata, uuid);\n node.addListener(\"keyChanged\", () => this.fireEvent(\"reloadModel\"), this);\n node.addListener(\"changeInputNodes\", () => this.fireDataEvent(\"pipelineChanged\"), this);\n node.addListener(\"reloadModel\", () => this.fireEvent(\"reloadModel\"), this);\n node.addListener(\"updateStudyDocument\", () => this.fireEvent(\"updateStudyDocument\"), this);\n return node;\n },\n\n createNode: async function(key, version) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.node.create\", true)) {\n osparc.FlashMessenger.getInstance().logAs(qx.locale.Manager.tr(\"You are not allowed to add nodes\"), \"ERROR\");\n return null;\n }\n if (this.getStudy().isPipelineRunning()) {\n osparc.FlashMessenger.getInstance().logAs(this.self().CANT_ADD_NODE, \"ERROR\");\n return null;\n }\n\n this.fireEvent(\"restartAutoSaveTimer\");\n // create the node in the backend first\n const params = {\n url: {\n studyId: this.getStudy().getUuid()\n },\n data: {\n \"service_key\": key,\n \"service_version\": version\n }\n };\n\n try {\n const metadata = await osparc.store.Services.getService(key, version);\n const resp = await osparc.data.Resources.fetch(\"studies\", \"addNode\", params);\n const nodeId = resp[\"node_id\"];\n\n this.fireEvent(\"restartAutoSaveTimer\");\n const node = this.__createNode(this.getStudy(), metadata, nodeId);\n this.__initNodeSignals(node);\n this.__addNode(node);\n\n node.populateNodeData();\n this.giveUniqueNameToNode(node, node.getLabel());\n node.checkState();\n\n return node;\n } catch (err) {\n let errorMsg = \"\";\n if (\"status\" in err && err.status === 406) {\n errorMsg = key + \":\" + version + qx.locale.Manager.tr(\" is retired\");\n } else {\n errorMsg = err.message || qx.locale.Manager.tr(\"Error creating \") + key + \":\" + version;\n }\n const errorMsgData = {\n msg: errorMsg,\n level: \"ERROR\"\n };\n this.fireDataEvent(\"showInLogger\", errorMsgData);\n osparc.FlashMessenger.getInstance().logAs(errorMsg, \"ERROR\");\n return null;\n }\n },\n\n __initNodeSignals: function(node) {\n if (node) {\n node.addListener(\"showInLogger\", e => this.fireDataEvent(\"showInLogger\", e.getData()), this);\n node.addListener(\"retrieveInputs\", e => this.fireDataEvent(\"retrieveInputs\", e.getData()), this);\n node.addListener(\"fileRequested\", e => this.fireDataEvent(\"fileRequested\", e.getData()), this);\n node.addListener(\"filePickerRequested\", e => {\n const {\n portId,\n nodeId,\n file\n } = e.getData();\n this.__filePickerNodeRequested(nodeId, portId, file);\n }, this);\n node.addListener(\"parameterRequested\", e => {\n const {\n portId,\n nodeId\n } = e.getData();\n this.__parameterNodeRequested(nodeId, portId);\n }, this);\n node.addListener(\"probeRequested\", e => {\n const {\n portId,\n nodeId\n } = e.getData();\n this.__probeNodeRequested(nodeId, portId);\n }, this);\n node.addListener(\"fileUploaded\", () => {\n // downstream nodes might have started downloading file picker's output.\n // show feedback to the user\n const downstreamNodes = this.__getDownstreamNodes(node);\n downstreamNodes.forEach(downstreamNode => {\n downstreamNode.getPortIds().forEach(portId => {\n const link = downstreamNode.getLink(portId);\n if (link && link[\"nodeUuid\"] === node.getNodeId() && link[\"output\"] === \"outFile\") {\n // connected to file picker's output\n setTimeout(() => {\n // start retrieving state after 2\"\n downstreamNode.retrieveInputs(portId);\n }, 2000);\n }\n });\n });\n }, this);\n }\n },\n\n getFreePosition: function(node, toTheLeft = true) {\n // do not overlap the new node2 with other nodes\n const pos = node.getPosition();\n const nodeWidth = osparc.workbench.NodeUI.NODE_WIDTH;\n const nodeHeight = osparc.workbench.NodeUI.NODE_HEIGHT;\n const xPos = toTheLeft ? Math.max(0, pos.x-nodeWidth-30) : pos.x+nodeWidth+30;\n let yPos = pos.y;\n const allNodes = this.getNodes();\n const avoidY = [];\n for (const nId in allNodes) {\n const node2 = allNodes[nId];\n if (node2.getPosition().x >= xPos-nodeWidth && node2.getPosition().x <= (xPos+nodeWidth)) {\n avoidY.push(node2.getPosition().y);\n }\n }\n avoidY.sort((a, b) => a - b); // For ascending sort\n avoidY.forEach(y => {\n if (yPos >= y-nodeHeight && yPos <= (y+nodeHeight)) {\n yPos = y+nodeHeight+20;\n }\n });\n\n return {\n x: xPos,\n y: yPos\n };\n },\n\n getFarthestPosition: function() {\n let x = 0;\n let y = 0;\n Object.values(this.getNodes()).forEach(node => {\n x = Math.max(x, node.getPosition().x);\n y = Math.max(y, node.getPosition().y);\n });\n x += osparc.workbench.NodeUI.NODE_WIDTH;\n y += osparc.workbench.NodeUI.NODE_HEIGHT;\n return {\n x,\n y\n };\n },\n\n __filePickerNodeRequested: async function(nodeId, portId, file) {\n const filePickerMetadata = osparc.service.Utils.getFilePicker();\n const filePicker = await this.createNode(filePickerMetadata[\"key\"], filePickerMetadata[\"version\"]);\n if (filePicker === null) {\n return;\n }\n\n const requesterNode = this.getNode(nodeId);\n const freePos = this.getFreePosition(requesterNode);\n filePicker.setPosition(freePos);\n\n // create connection\n const filePickerId = filePicker.getNodeId();\n requesterNode.addInputNode(filePickerId);\n // reload also before port connection happens\n this.fireEvent(\"reloadModel\");\n requesterNode.addPortLink(portId, filePickerId, \"outFile\")\n .then(success => {\n if (success) {\n if (file) {\n const fileObj = file.data;\n osparc.file.FilePicker.setOutputValueFromStore(\n filePicker,\n fileObj.getLocation(),\n fileObj.getDatasetId(),\n fileObj.getFileId(),\n fileObj.getLabel()\n );\n }\n this.fireDataEvent(\"openNode\", filePicker.getNodeId());\n this.fireEvent(\"reloadModel\");\n } else {\n this.removeNode(filePickerId);\n const msg = qx.locale.Manager.tr(\"File couldn't be assigned\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n }\n });\n },\n\n __parameterNodeRequested: async function(nodeId, portId) {\n const requesterNode = this.getNode(nodeId);\n\n // create a new ParameterNode\n const type = osparc.utils.Ports.getPortType(requesterNode.getMetaData()[\"inputs\"], portId);\n const parameterMetadata = osparc.service.Utils.getParameterMetadata(type);\n if (parameterMetadata) {\n const parameterNode = await this.createNode(parameterMetadata[\"key\"], parameterMetadata[\"version\"]);\n if (parameterNode === null) {\n return;\n }\n\n // do not overlap the new Parameter Node with other nodes\n const freePos = this.getFreePosition(requesterNode);\n parameterNode.setPosition(freePos);\n\n // create connection\n const pmId = parameterNode.getNodeId();\n requesterNode.addInputNode(pmId);\n // bypass the compatibility check\n if (requesterNode.getPropsForm().addPortLink(portId, pmId, \"out_1\") !== true) {\n this.removeNode(pmId);\n const msg = qx.locale.Manager.tr(\"Parameter couldn't be assigned\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n }\n this.fireEvent(\"reloadModel\");\n }\n },\n\n __probeNodeRequested: async function(nodeId, portId) {\n const requesterNode = this.getNode(nodeId);\n\n // create a new ProbeNode\n const requesterPortMD = requesterNode.getMetaData()[\"outputs\"][portId];\n const type = osparc.utils.Ports.getPortType(requesterNode.getMetaData()[\"outputs\"], portId);\n const probeMetadata = osparc.service.Utils.getProbeMetadata(type);\n if (probeMetadata) {\n const probeNode = await this.createNode(probeMetadata[\"key\"], probeMetadata[\"version\"]);\n if (probeNode === null) {\n return;\n }\n\n probeNode.setLabel(requesterPortMD.label);\n\n // do not overlap the new Parameter Node with other nodes\n const freePos = this.getFreePosition(requesterNode, false);\n probeNode.setPosition(freePos);\n\n // create connection\n const probeId = probeNode.getNodeId();\n probeNode.addInputNode(nodeId);\n // bypass the compatibility check\n if (probeNode.getPropsForm().addPortLink(\"in_1\", nodeId, portId) !== true) {\n this.removeNode(probeId);\n const msg = qx.locale.Manager.tr(\"Probe couldn't be assigned\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n }\n this.fireEvent(\"reloadModel\");\n }\n },\n\n __addNode: function(node) {\n const nodeId = node.getNodeId();\n this.__nodes[nodeId] = node;\n this.fireEvent(\"pipelineChanged\");\n },\n\n removeNode: async function(nodeId) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.node.delete\", true)) {\n return false;\n }\n if (this.getStudy().isPipelineRunning()) {\n osparc.FlashMessenger.getInstance().logAs(this.self().CANT_DELETE_NODE, \"ERROR\");\n return false;\n }\n\n let node = this.getNode(nodeId);\n if (node) {\n this.fireEvent(\"restartAutoSaveTimer\");\n // remove the node in the backend first\n const removed = await node.removeNode();\n if (removed) {\n this.fireEvent(\"restartAutoSaveTimer\");\n\n delete this.__nodes[nodeId];\n\n // remove first the connected edges\n const connectedEdges = this.getConnectedEdges(nodeId);\n connectedEdges.forEach(connectedEdgeId => {\n this.removeEdge(connectedEdgeId);\n });\n\n // remove it from ui model\n if (this.getStudy()) {\n this.getStudy().getUi().removeNode(nodeId);\n }\n\n this.fireEvent(\"pipelineChanged\");\n return true;\n }\n }\n return false;\n },\n\n addServiceBetween: async function(service, leftNodeId, rightNodeId) {\n // create node\n const node = await this.createNode(service.getKey(), service.getVersion());\n if (node === null) {\n return null;\n }\n if (leftNodeId) {\n const leftNode = this.getNode(leftNodeId);\n node.setPosition(this.getFreePosition(leftNode, false));\n } else if (rightNodeId) {\n const rightNode = this.getNode(rightNodeId);\n node.setPosition(this.getFreePosition(rightNode, true));\n } else {\n node.setPosition({\n x: 20,\n y: 20\n });\n }\n\n // break previous connection\n if (leftNodeId && rightNodeId) {\n const edge = this.getEdge(null, leftNodeId, rightNodeId);\n if (edge) {\n this.removeEdge(edge.getEdgeId());\n }\n }\n\n // create connections\n if (leftNodeId) {\n this.createEdge(null, leftNodeId, node.getNodeId(), true);\n }\n if (rightNodeId) {\n this.createEdge(null, node.getNodeId(), rightNodeId, true);\n }\n this.fireEvent(\"reloadModel\");\n\n return node;\n },\n\n removeEdge: function(edgeId) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.edge.delete\", true)) {\n return false;\n }\n\n const edge = this.getEdge(edgeId);\n if (edge) {\n const rightNodeId = edge.getOutputNodeId();\n const leftNodeId = edge.getInputNodeId();\n\n const rightNode = this.getNode(rightNodeId);\n if (rightNode) {\n // no need to make any changes to a just removed node (it would trigger a patch call)\n rightNode.removeInputNode(leftNodeId);\n rightNode.removeNodePortConnections(leftNodeId);\n }\n\n delete this.__edges[edgeId];\n\n // update the port decorations (remove dot if there are no more connections)\n const edges = Object.values(this.__edges);\n if (edges.findIndex(edg => edg.getInputNodeId() === leftNodeId) === -1) {\n const leftNode = this.getNode(leftNodeId);\n if (leftNode) {\n leftNode.setOutputConnected(false);\n }\n }\n if (edges.findIndex(edg => edg.getOutputNodeId() === rightNodeId) === -1) {\n if (rightNode) {\n rightNode.setInputConnected(false);\n }\n }\n\n return true;\n }\n return false;\n },\n\n giveUniqueNameToNode: function(node, label, suffix = 2) {\n const newLabel = label + \"_\" + suffix;\n const allModels = this.getNodes();\n const nodes = Object.values(allModels);\n for (const node2 of nodes) {\n if (node2.getNodeId() !== node.getNodeId() &&\n node2.getLabel().localeCompare(node.getLabel()) === 0) {\n node.setLabel(newLabel);\n this.giveUniqueNameToNode(node, label, suffix+1);\n }\n }\n },\n\n __populateNodesData: function(workbenchData, workbenchUIData) {\n Object.entries(workbenchData).forEach(([nodeId, nodeData]) => {\n this.getNode(nodeId).populateNodeData(nodeData);\n\n if (\"position\" in nodeData) {\n // old way for storing the position\n this.getNode(nodeId).populateNodeUIData(nodeData);\n }\n if (workbenchUIData && \"workbench\" in workbenchUIData && nodeId in workbenchUIData.workbench) {\n this.getNode(nodeId).populateNodeUIData(workbenchUIData.workbench[nodeId]);\n }\n });\n },\n\n __deserialize: function(workbenchInitData, workbenchUIInitData) {\n this.__deserializeNodes(workbenchInitData, workbenchUIInitData)\n .then(() => {\n this.__deserializeEdges(workbenchInitData);\n workbenchInitData = null;\n workbenchUIInitData = null;\n this.setDeserialized(true);\n });\n },\n\n __deserializeNodes: function(workbenchData, workbenchUIData = {}) {\n const nodeIds = Object.keys(workbenchData);\n\n const metadataPromises = [];\n nodeIds.forEach(nodeId => {\n const nodeData = workbenchData[nodeId];\n metadataPromises.push(osparc.store.Services.getService(nodeData.key, nodeData.version));\n });\n\n return Promise.all(metadataPromises)\n .then(values => {\n // Create first all the nodes\n for (let i=0; i {\n const node = this.getNode(nodeId);\n this.giveUniqueNameToNode(node, node.getLabel());\n });\n });\n },\n\n __deserializeEdges: function(workbenchData) {\n for (const nodeId in workbenchData) {\n const nodeData = workbenchData[nodeId];\n const node = this.getNode(nodeId);\n if (node === null) {\n continue;\n }\n this.__addInputOutputNodesAndEdges(node, nodeData.inputNodes);\n }\n },\n\n __addInputOutputNodesAndEdges: function(node, inputOutputNodeIds) {\n if (inputOutputNodeIds) {\n inputOutputNodeIds.forEach(inputOutputNodeId => {\n const node1 = this.getNode(inputOutputNodeId);\n if (node1 === null) {\n return;\n }\n const edge = new osparc.data.model.Edge(null, node1, node);\n this.addEdge(edge);\n node.addInputNode(inputOutputNodeId);\n });\n }\n },\n\n serialize: function(clean = true) {\n if (this.__workbenchInitData !== null) {\n // workbench is not initialized\n return this.__workbenchInitData;\n }\n let workbench = {};\n const allModels = this.getNodes();\n const nodes = Object.values(allModels);\n for (const node of nodes) {\n const data = node.serialize(clean);\n if (data) {\n workbench[node.getNodeId()] = data;\n }\n }\n return workbench;\n },\n\n serializeUI: function() {\n if (this.__workbenchUIInitData !== null) {\n // workbenchUI is not initialized\n return this.__workbenchUIInitData;\n }\n let workbenchUI = {};\n const nodes = this.getNodes();\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n workbenchUI[nodeId] = {};\n workbenchUI[nodeId][\"position\"] = node.getPosition();\n const marker = node.getMarker();\n if (marker) {\n workbenchUI[nodeId][\"marker\"] = {\n color: marker.getColor()\n };\n }\n }\n return workbenchUI;\n },\n\n /**\n * Call patch Node, but the changes were already applied on the frontend\n * @param workbenchDiffs {Object} Diff Object coming from the JsonDiffPatch lib. Use only the keys, not the changes.\n */\n patchWorkbenchDelayed: function(workbenchDiffs) {\n const promises = [];\n Object.keys(workbenchDiffs).forEach(nodeId => {\n const node = this.getNode(nodeId);\n if (node === null) {\n // the node was removed\n return;\n }\n\n const nodeData = node.serialize();\n let patchData = {};\n if (workbenchDiffs[nodeId] instanceof Array) {\n // if workbenchDiffs is an array means that the node was either added or removed\n // the node was added\n patchData = nodeData;\n } else {\n // patch only what was changed\n Object.keys(workbenchDiffs[nodeId]).forEach(changedFieldKey => {\n if (nodeData[changedFieldKey] !== undefined) {\n // do not patch if it's undefined\n patchData[changedFieldKey] = nodeData[changedFieldKey];\n }\n });\n }\n const params = {\n url: {\n \"studyId\": this.getStudy().getUuid(),\n \"nodeId\": nodeId\n },\n data: patchData\n };\n if (Object.keys(patchData).length) {\n promises.push(osparc.data.Resources.fetch(\"studies\", \"patchNode\", params));\n }\n })\n return Promise.all(promises);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.data.model.StudyUI\", {\n extend: qx.core.Object,\n\n /**\n * @param studyDataUI {Object} Object containing the serialized Study UI Data\n */\n construct: function(studyDataUI) {\n this.base(arguments);\n\n this.set({\n workbench: studyDataUI && studyDataUI.workbench ? studyDataUI.workbench : this.getWorkbench(),\n slideshow: new osparc.data.model.Slideshow(studyDataUI && studyDataUI.slideshow ? studyDataUI.slideshow : this.getSlideshow()),\n currentNodeId: studyDataUI && studyDataUI.currentNodeId ? studyDataUI.currentNodeId : this.initCurrentNodeId(),\n mode: studyDataUI && studyDataUI.mode ? studyDataUI.mode : this.initMode(),\n annotations: {}\n });\n\n if (\"annotations\" in studyDataUI) {\n this.__annotationsInitData = studyDataUI[\"annotations\"];\n }\n },\n\n properties: {\n // stores position and/or marker\n workbench: {\n check: \"Object\",\n init: {},\n nullable: true\n },\n\n slideshow: {\n check: \"osparc.data.model.Slideshow\",\n init: {},\n nullable: true\n },\n\n currentNodeId: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeCurrentNodeId\"\n },\n\n mode: {\n check: [\"workbench\", \"guided\", \"app\", \"standalone\"], // \"guided\" is no longer used\n init: \"workbench\",\n nullable: true,\n event: \"changeMode\",\n apply: \"__applyMode\"\n },\n\n annotations: {\n check: \"Object\",\n init: {},\n nullable: true\n }\n },\n\n members: {\n __annotationsInitData: null,\n\n __applyMode: function(mode) {\n if (mode === \"guided\") {\n this.setMode(\"app\");\n }\n },\n\n getAnnotationsInitData: function() {\n return this.__annotationsInitData;\n },\n\n nullAnnotationsInitData: function() {\n this.__annotationsInitData = null;\n },\n\n addAnnotation: function(annotation) {\n this.getAnnotations()[annotation.getId()] = annotation;\n },\n\n removeAnnotation: function(annotationId) {\n if (annotationId in this.getAnnotations()) {\n delete this.getAnnotations()[annotationId];\n }\n },\n\n removeNode: function(nodeId) {\n // remove it from slideshow\n this.getSlideshow().removeNode(nodeId);\n },\n\n serialize: function() {\n const currentStudy = osparc.store.Store.getInstance().getCurrentStudy();\n let jsonObject = {};\n jsonObject[\"workbench\"] = currentStudy ? currentStudy.getWorkbench().serializeUI() : this.getWorkbench();\n jsonObject[\"slideshow\"] = this.getSlideshow().serialize();\n jsonObject[\"currentNodeId\"] = this.getCurrentNodeId() || \"\";\n jsonObject[\"mode\"] = this.getMode();\n const annotations = this.getAnnotations();\n if (Object.keys(annotations).length) {\n jsonObject[\"annotations\"] = {};\n Object.keys(annotations).forEach(annotationId => {\n jsonObject[\"annotations\"][annotationId] = annotations[annotationId].serialize();\n });\n }\n return jsonObject;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Node data.\n *\n * For the given version-key, this class will take care of pulling the metadata, store it and\n * fill in all the information.\n *\n * -> {EDGES}\n * STUDY -> METADATA + WORKBENCH ->|\n * -> {LINKS}\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let node = new osparc.data.model.Node(key, version, uuid);\n * node.populateNodeData(nodeData);\n *
\n */\n\nqx.Class.define(\"osparc.data.model.Node\", {\n extend: qx.core.Object,\n include: qx.locale.MTranslation,\n\n /**\n * @param study {osparc.data.model.Study} Study or Serialized Study Object\n * @param metadata {Object} service's metadata\n * @param nodeId {String} uuid of the service represented by the node (not needed for new Nodes)\n */\n construct: function(study, metadata, nodeId) {\n this.base(arguments);\n\n this.__metaData = metadata;\n this.setOutputs({});\n this.__inputNodes = [];\n this.__inputsRequired = [];\n\n if (study) {\n this.setStudy(study);\n }\n this.set({\n nodeId: nodeId || osparc.utils.Utils.uuidV4(),\n key: metadata[\"key\"],\n version: metadata[\"version\"],\n status: new osparc.data.model.NodeStatus(this)\n });\n\n this.populateWithMetadata();\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false,\n event: \"changeStudy\"\n },\n\n key: {\n check: \"String\",\n nullable: true,\n apply: \"__applyNewMetaData\"\n },\n\n version: {\n check: \"String\",\n nullable: true,\n event: \"changeVersion\",\n apply: \"__applyNewMetaData\"\n },\n\n nodeId: {\n check: \"String\",\n nullable: false\n },\n\n label: {\n check: \"String\",\n init: \"Node\",\n nullable: true,\n event: \"changeLabel\"\n },\n\n inputAccess: {\n check: \"Object\",\n nullable: true\n },\n\n dynamicV2: {\n check: \"Boolean\",\n init: false,\n nullable: true\n },\n\n serviceUrl: {\n check: \"String\",\n nullable: true,\n event: \"changeServiceUrl\"\n },\n\n portsConnected: {\n check: \"Array\",\n init: [],\n event: \"changePortsConnected\"\n },\n\n inputs: {\n check: \"Object\",\n // nullable: false,\n event: \"changeInputs\"\n },\n\n outputs: {\n check: \"Object\",\n nullable: false,\n event: \"changeOutputs\",\n apply: \"__applyOutputs\",\n },\n\n status: {\n check: \"osparc.data.model.NodeStatus\",\n nullable: false\n },\n\n errors: {\n check: \"Array\",\n init: [],\n nullable: true,\n event: \"changeErrors\",\n apply: \"__applyErrors\"\n },\n\n bootOptions: {\n check: \"Object\",\n init: null,\n nullable: true\n },\n\n // GUI elements //\n propsForm: {\n check: \"osparc.form.renderer.PropForm\",\n init: null,\n nullable: true,\n apply: \"__applyPropsForm\"\n },\n\n outputsForm: {\n check: \"osparc.widget.NodeOutputs\",\n init: null,\n nullable: true\n },\n\n marker: {\n check: \"qx.core.Object\",\n init: null,\n nullable: true,\n event: \"changeMarker\"\n },\n\n inputConnected: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeInputConnected\"\n },\n\n outputConnected: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeOutputConnected\"\n },\n\n logger: {\n check: \"osparc.widget.logger.LoggerView\",\n init: null,\n nullable: true\n }\n // GUI elements //\n },\n\n events: {\n \"updateStudyDocument\": \"qx.event.type.Event\",\n \"reloadModel\": \"qx.event.type.Event\",\n \"retrieveInputs\": \"qx.event.type.Data\",\n \"keyChanged\": \"qx.event.type.Event\",\n \"fileRequested\": \"qx.event.type.Data\",\n \"parameterRequested\": \"qx.event.type.Data\",\n \"filePickerRequested\": \"qx.event.type.Data\",\n \"probeRequested\": \"qx.event.type.Data\",\n \"fileUploaded\": \"qx.event.type.Event\",\n \"showInLogger\": \"qx.event.type.Data\",\n \"outputListChanged\": \"qx.event.type.Event\",\n \"changeInputNodes\": \"qx.event.type.Event\",\n \"changeInputsRequired\": \"qx.event.type.Event\"\n },\n\n statics: {\n isFrontend: function(metadata) {\n return (metadata && metadata.key && metadata.key.includes(\"/frontend/\"));\n },\n\n isFilePicker: function(metadata) {\n return (metadata && metadata.key && metadata.key.includes(\"file-picker\"));\n },\n\n isParameter: function(metadata) {\n return (metadata && metadata.key && metadata.key.includes(\"/parameter/\"));\n },\n\n isIterator: function(metadata) {\n return (metadata && metadata.key && metadata.key.includes(\"/data-iterator/\"));\n },\n\n isProbe: function(metadata) {\n return (metadata && metadata.key && metadata.key.includes(\"/iterator-consumer/\"));\n },\n\n isDynamic: function(metadata) {\n return (metadata && metadata.type && metadata.type === \"dynamic\");\n },\n\n isComputational: function(metadata) {\n return (metadata && metadata.type && metadata.type === \"computational\");\n },\n\n isUpdatable: function(metadata) {\n return osparc.service.Utils.isUpdatable(metadata);\n },\n\n isDeprecated: function(metadata) {\n return osparc.service.Utils.isDeprecated(metadata);\n },\n\n isRetired: function(metadata) {\n return osparc.service.Utils.isRetired(metadata);\n },\n\n hasBootModes: function(metadata) {\n if (metadata[\"bootOptions\"] && \"boot_mode\" in metadata[\"bootOptions\"] && \"items\" in metadata[\"bootOptions\"][\"boot_mode\"]) {\n return Object.keys(metadata[\"bootOptions\"][\"boot_mode\"][\"items\"]).length;\n }\n return false;\n },\n\n populateBootModes: function(bootModeSB, nodeMetadata, workbench, nodeId) {\n if (!osparc.data.model.Node.hasBootModes(nodeMetadata)) {\n return;\n }\n\n const bootModesMD = nodeMetadata[\"bootOptions\"][\"boot_mode\"];\n const sbItems = [];\n bootModeSB.removeAll();\n Object.entries(bootModesMD[\"items\"]).forEach(([bootModeId, bootModeMD]) => {\n const sbItem = new qx.ui.form.ListItem(bootModeMD[\"label\"]);\n sbItem.bootModeId = bootModeId;\n bootModeSB.add(sbItem);\n sbItems.push(sbItem);\n });\n let defaultBMId = null;\n if (workbench && nodeId && \"bootOptions\" in workbench[nodeId] && \"boot_mode\" in workbench[nodeId][\"bootOptions\"]) {\n defaultBMId = workbench[nodeId][\"bootOptions\"][\"boot_mode\"];\n } else {\n defaultBMId = bootModesMD[\"default\"];\n }\n sbItems.forEach(sbItem => {\n if (defaultBMId === sbItem.bootModeId) {\n bootModeSB.setSelection([sbItem]);\n }\n });\n },\n\n getBootModesSelectBox: function(nodeMetadata, workbench, nodeId) {\n if (!osparc.data.model.Node.hasBootModes(nodeMetadata)) {\n return null;\n }\n\n const bootModeSB = new qx.ui.form.SelectBox();\n this.populateBootModes(bootModeSB, nodeMetadata, workbench, nodeId);\n return bootModeSB;\n },\n\n getMinVisibleInputs: function(metadata) {\n return (\"minVisibleInputs\" in metadata) ? metadata[\"minVisibleInputs\"] : null;\n },\n\n getOutput: function(outputs, outputKey) {\n if (outputKey in outputs && \"value\" in outputs[outputKey]) {\n return outputs[outputKey][\"value\"];\n }\n return null;\n },\n\n getLinkedNodeIds: function(nodeData) {\n const linkedNodeIds = new Set([]);\n if (\"inputs\" in nodeData) {\n Object.values(nodeData[\"inputs\"]).forEach(link => {\n if (link && typeof link === \"object\" && \"nodeUuid\" in link) {\n linkedNodeIds.add(link[\"nodeUuid\"]);\n }\n });\n }\n return Array.from(linkedNodeIds);\n },\n },\n\n members: {\n __metaData: null,\n __inputNodes: null,\n __inputsRequired: null,\n __settingsForm: null,\n __posX: null,\n __posY: null,\n __iframeHandler: null,\n\n getWorkbench: function() {\n return this.getStudy().getWorkbench();\n },\n\n getSlideshowInstructions: function() {\n const slideshow = this.getStudy().getUi().getSlideshow();\n return slideshow.getInstructions(this.getNodeId());\n },\n\n isInKey: function(str) {\n if (this.getMetaData() === null) {\n return false;\n }\n if (this.getKey() === null) {\n return false;\n }\n return this.getKey().includes(str);\n },\n\n isFilePicker: function() {\n return osparc.data.model.Node.isFilePicker(this.getMetaData());\n },\n\n isParameter: function() {\n return osparc.data.model.Node.isParameter(this.getMetaData());\n },\n\n isIterator: function() {\n return osparc.data.model.Node.isIterator(this.getMetaData());\n },\n\n isProbe: function() {\n return osparc.data.model.Node.isProbe(this.getMetaData());\n },\n\n isDynamic: function() {\n return osparc.data.model.Node.isDynamic(this.getMetaData());\n },\n\n isComputational: function() {\n return osparc.data.model.Node.isComputational(this.getMetaData());\n },\n\n isUpdatable: function() {\n return osparc.data.model.Node.isUpdatable(this.getMetaData());\n },\n\n isDeprecated: function() {\n return osparc.data.model.Node.isDeprecated(this.getMetaData());\n },\n\n isRetired: function() {\n return osparc.data.model.Node.isRetired(this.getMetaData());\n },\n\n hasBootModes: function() {\n return osparc.data.model.Node.hasBootModes(this.getMetaData());\n },\n\n getMinVisibleInputs: function() {\n return osparc.data.model.Node.getMinVisibleInputs(this.getMetaData());\n },\n\n __applyNewMetaData: function(newV, oldV) {\n if (oldV !== null) {\n const metadata = osparc.store.Services.getMetadata(this.getKey(), this.getVersion());\n if (metadata) {\n this.__metaData = metadata;\n }\n }\n },\n\n getMetaData: function() {\n return this.__metaData;\n },\n\n __getInputData: function() {\n if (this.isPropertyInitialized(\"propsForm\") && this.getPropsForm()) {\n return this.getPropsForm().getValues();\n }\n return {};\n },\n\n __getInputUnits: function() {\n if (this.isPropertyInitialized(\"propsForm\") && this.getPropsForm()) {\n const changedUnits = this.getPropsForm().getChangedXUnits();\n if (Object.keys(changedUnits).length) {\n return changedUnits;\n }\n }\n return null;\n },\n\n getInput: function(inputId) {\n return this.getInputs()[inputId];\n },\n\n getOutput: function(outputId) {\n return this.getOutputs()[outputId];\n },\n\n getFirstOutput: function() {\n const outputs = this.getOutputs();\n if (Object.keys(outputs).length) {\n return outputs[Object.keys(outputs)[0]];\n }\n return null;\n },\n\n hasInputs: function() {\n return Object.keys(this.getInputs()).length;\n },\n\n hasOutputs: function() {\n return Object.keys(this.getOutputs()).length;\n },\n\n populateWithMetadata: function() {\n const metadata = this.__metaData;\n if (metadata) {\n if (metadata.name) {\n this.setLabel(metadata.name);\n }\n if (metadata.inputs) {\n this.setInputs(metadata.inputs);\n if (Object.keys(metadata.inputs).length) {\n this.__addSettings(metadata.inputs);\n }\n if (this.getPropsForm()) {\n this.getPropsForm().makeInputsDynamic();\n }\n }\n if (metadata.outputs) {\n this.setOutputs(metadata.outputs);\n }\n }\n },\n\n populateNodeData: function(nodeData) {\n if (nodeData) {\n if (nodeData.label) {\n this.setLabel(nodeData.label);\n }\n this.populateInputOutputData(nodeData);\n this.populateStates(nodeData);\n if (nodeData.bootOptions) {\n this.setBootOptions(nodeData.bootOptions);\n }\n }\n\n this.__initLogger();\n\n this.initIframeHandler();\n\n if (this.isParameter()) {\n this.__initParameter();\n }\n },\n\n populateNodeUIData: function(nodeUIData) {\n if (\"position\" in nodeUIData) {\n this.setPosition(nodeUIData.position);\n }\n if (\"marker\" in nodeUIData) {\n this.__addMarker(nodeUIData.marker);\n }\n },\n\n populateInputOutputData: function(nodeData) {\n this.__setInputData(nodeData.inputs);\n this.__setInputUnits(nodeData.inputsUnits);\n this.__setInputDataAccess(nodeData.inputAccess);\n if (this.getPropsForm()) {\n this.getPropsForm().makeInputsDynamic();\n }\n this.setOutputData(nodeData.outputs);\n this.addInputNodes(nodeData.inputNodes);\n // backwards compatible\n this.setInputsRequired(nodeData.inputsRequired || []);\n },\n\n populateStates: function(nodeData) {\n if (\"progress\" in nodeData) {\n const progress = Number.parseInt(nodeData[\"progress\"]);\n const oldProgress = this.getStatus().getProgress();\n if (this.isFilePicker() && oldProgress > 0 && oldProgress < 100) {\n // file is being uploaded\n this.getStatus().setProgress(oldProgress);\n } else {\n this.getStatus().setProgress(progress);\n }\n }\n if (\"state\" in nodeData) {\n this.getStatus().setState(nodeData.state);\n }\n },\n\n initIframeHandler: function() {\n if (this.isDynamic()) {\n this.__iframeHandler = new osparc.data.model.IframeHandler(this.getStudy(), this);\n }\n },\n\n getIframeHandler: function() {\n return this.__iframeHandler;\n },\n\n getIFrame: function() {\n return this.getIframeHandler() ? this.getIframeHandler().getIFrame() : null;\n },\n\n setIFrame: function(iframe) {\n return this.getIframeHandler() ? this.getIframeHandler().setIFrame(iframe) : null;\n },\n\n getLoadingPage: function() {\n return this.getIframeHandler() ? this.getIframeHandler().getLoadingPage() : null;\n },\n\n __applyPropsForm: function(propsForm) {\n osparc.utils.Utils.setIdToWidget(propsForm, \"settingsForm_\" + this.getNodeId());\n\n const checkIsPipelineRunning = () => {\n const isPipelineRunning = this.getStudy().isPipelineRunning();\n this.getPropsForm().setEnabled(!isPipelineRunning);\n };\n this.getStudy().addListener(\"changeState\", () => checkIsPipelineRunning(), this);\n\n // potentially disabling the inputs form might have side effects if the deserialization is not over\n if (this.getWorkbench().isDeserialized()) {\n checkIsPipelineRunning();\n } else {\n this.getWorkbench().addListener(\"changeDeserialized\", e => {\n if (e.getData()) {\n checkIsPipelineRunning();\n }\n }, this);\n }\n },\n\n /**\n * Add settings widget with those inputs that can be represented in a form\n */\n __addSettings: function(inputs) {\n const form = this.__settingsForm = new osparc.form.Auto(inputs);\n const propsForm = new osparc.form.renderer.PropForm(form, this, this.getStudy());\n this.setPropsForm(propsForm);\n propsForm.addListener(\"linkFieldModified\", e => {\n const linkFieldModified = e.getData();\n const portId = linkFieldModified.portId;\n\n const oldPortsConnected = this.getPortsConnected();\n const portConnected = oldPortsConnected.find(connection => Object.keys(connection)[0] === portId);\n if (linkFieldModified.added && !(portConnected)) {\n const newConnection = {};\n newConnection[portId] = linkFieldModified.fromNodeId;\n const portsConnected = [];\n oldPortsConnected.forEach(oldPortConnected => portsConnected.push(oldPortConnected));\n portsConnected.push(newConnection);\n this.setPortsConnected(portsConnected);\n }\n if (!linkFieldModified.added && portConnected) {\n const idx = oldPortsConnected.indexOf(portConnected);\n if (idx > -1) {\n oldPortsConnected.splice(idx, 1);\n }\n const portsConnected = [];\n oldPortsConnected.forEach(oldPortConnected => portsConnected.push(oldPortConnected));\n this.setPortsConnected(portsConnected);\n }\n\n this.callRetrieveInputs(portId);\n }, this);\n\n [\n \"fileRequested\",\n \"parameterRequested\"\n ].forEach(nodeRequestSignal => {\n propsForm.addListener(nodeRequestSignal, e => {\n const portId = e.getData();\n this.fireDataEvent(nodeRequestSignal, {\n portId,\n nodeId: this.getNodeId()\n });\n }, this);\n });\n\n propsForm.addListener(\"filePickerRequested\", e => {\n const data = e.getData();\n this.fireDataEvent(\"filePickerRequested\", {\n portId: data.portId,\n nodeId: this.getNodeId(),\n file: data.file\n });\n }, this);\n },\n\n __applyOutputs: function() {\n if (!this.isPropertyInitialized(\"outputsForm\") || !this.getOutputsForm()) {\n const nodeOutputs = new osparc.widget.NodeOutputs(this);\n this.setOutputsForm(nodeOutputs);\n }\n },\n\n removeNodePortConnections: function(inputNodeId) {\n let inputs = this.__getInputData();\n for (const portId in inputs) {\n if (inputs[portId] && Object.prototype.hasOwnProperty.call(inputs[portId], \"nodeUuid\")) {\n if (inputs[portId][\"nodeUuid\"] === inputNodeId) {\n this.getPropsForm().removePortLink(portId);\n }\n }\n }\n },\n\n toggleMarker: function() {\n if (this.getMarker()) {\n this.__removeMarker();\n } else {\n this.__addMarker();\n }\n },\n\n __addMarker: function(marker) {\n if (marker === undefined) {\n marker = {\n color: osparc.utils.Utils.getRandomColor()\n };\n }\n const markerModel = qx.data.marshal.Json.createModel(marker, true);\n this.setMarker(markerModel);\n },\n\n __removeMarker: function() {\n this.setMarker(null);\n },\n\n __setInputData: function(inputs) {\n if (this.__settingsForm && inputs) {\n const inputData = {};\n const inputLinks = {};\n const inputsCopy = osparc.utils.Utils.deepCloneObject(inputs);\n for (let key in inputsCopy) {\n if (osparc.utils.Ports.isDataALink(inputsCopy[key])) {\n inputLinks[key] = inputsCopy[key];\n } else {\n inputData[key] = inputsCopy[key];\n }\n }\n this.getPropsForm().setInputLinks(inputLinks);\n this.__settingsForm.setData(inputData);\n }\n },\n\n __setInputUnits: function(inputsUnits) {\n if (this.__settingsForm && inputsUnits) {\n this.getPropsForm().setInputsUnits(inputsUnits);\n }\n },\n\n __setInputDataAccess: function(inputAccess) {\n if (inputAccess) {\n this.setInputAccess(inputAccess);\n this.getPropsForm().setAccessLevel(inputAccess);\n }\n\n const study = this.getStudy();\n if (study && study.isReadOnly() && this.getPropsForm()) {\n this.getPropsForm().setEnabled(false);\n }\n },\n\n setOutputData: function(outputs) {\n if (outputs) {\n let hasOutputs = false;\n Object.keys(this.getOutputs()).forEach(outputKey => {\n if (outputKey in outputs) {\n this.setOutputs({\n ...this.getOutputs(),\n [outputKey]: {\n ...this.getOutputs()[outputKey],\n value: outputs[outputKey]\n }\n });\n hasOutputs = true;\n } else {\n this.setOutputs({\n ...this.getOutputs(),\n [outputKey]: {\n ...this.getOutputs()[outputKey],\n value: \"\"\n }\n });\n }\n })\n this.getStatus().setHasOutputs(hasOutputs);\n\n if (hasOutputs && (this.isFilePicker() || this.isParameter() || this.isDynamic())) {\n this.getStatus().setModified(false);\n }\n\n this.fireDataEvent(\"changeOutputs\", this.getOutputs());\n }\n },\n\n __getOutputData: function(outputKey) {\n const outputs = this.getOutputs();\n if (outputKey in outputs && \"value\" in outputs[outputKey]) {\n return outputs[outputKey][\"value\"];\n }\n return null;\n },\n\n __getOutputsData: function() {\n const outputsData = {};\n Object.keys(this.getOutputs()).forEach(outKey => {\n const outData = this.__getOutputData(outKey);\n if (outData !== null) {\n outputsData[outKey] = outData;\n }\n });\n return outputsData;\n },\n\n requestFileUploadAbort: function() {\n if (this.isFilePicker()) {\n this[\"fileUploadAbortRequested\"] = true;\n }\n },\n\n __applyErrors: function(errors) {\n if (errors && errors.length) {\n errors.forEach(error => {\n const loc = error[\"loc\"];\n if (loc.length < 2) {\n return;\n }\n if (loc[1] === this.getNodeId()) {\n const errorMsgData = {\n nodeId: this.getNodeId(),\n msg: error[\"msg\"],\n level: \"ERROR\"\n };\n\n // errors to port\n if (loc.length > 2) {\n const portKey = loc[2];\n if (this.hasInputs() && portKey in this.getMetaData()[\"inputs\"]) {\n errorMsgData[\"msg\"] = this.getMetaData()[\"inputs\"][portKey][\"label\"] + \": \" + errorMsgData[\"msg\"];\n } else {\n errorMsgData[\"msg\"] = portKey + \": \" + errorMsgData[\"msg\"];\n }\n this.getPropsForm().setPortErrorMessage(portKey, errorMsgData[\"msg\"]);\n }\n\n // errors to logger\n this.fireDataEvent(\"showInLogger\", errorMsgData);\n }\n });\n } else if (this.hasInputs()) {\n // reset port errors\n Object.keys(this.getMetaData()[\"inputs\"]).forEach(portKey => {\n this.getPropsForm().setPortErrorMessage(portKey, null);\n });\n }\n },\n\n // Iterate over output ports and connect them to first compatible input port\n createAutoPortConnection: async function(node1, node2) {\n const preferencesSettings = osparc.Preferences.getInstance();\n if (!preferencesSettings.getAutoConnectPorts()) {\n return;\n }\n\n // create automatic port connections\n let autoConnections = 0;\n const outPorts = node1.getOutputs();\n const inPorts = node2.getInputs();\n for (const outPort in outPorts) {\n for (const inPort in inPorts) {\n if (await node2.addPortLink(inPort, node1.getNodeId(), outPort)) {\n autoConnections++;\n break;\n }\n }\n }\n if (autoConnections) {\n const flashMessenger = osparc.FlashMessenger.getInstance();\n flashMessenger.logAs(autoConnections + this.tr(\" ports auto connected\"), \"INFO\");\n }\n },\n\n addPortLink: function(toPortId, fromNodeId, fromPortId) {\n return new Promise(resolve => {\n const fromNode = this.getWorkbench().getNode(fromNodeId);\n osparc.utils.Ports.arePortsCompatible(fromNode, fromPortId, this, toPortId)\n .then(compatible => {\n if (compatible) {\n resolve(this.getPropsForm().addPortLink(toPortId, fromNodeId, fromPortId));\n } else {\n resolve(false);\n }\n });\n });\n },\n\n getLink: function(portId) {\n const link = this.getPropsForm() ? this.getPropsForm().getLink(portId) : null;\n return link;\n },\n\n getLinks: function() {\n const links = this.getPropsForm() ? this.getPropsForm().getLinks() : [];\n return links;\n },\n\n getPortIds: function() {\n const portIds = this.getPropsForm() ? this.getPropsForm().getPortIds() : [];\n return portIds;\n },\n\n // ----- Input Nodes -----\n getInputNodes: function() {\n return this.__inputNodes;\n },\n\n addInputNode: function(inputNodeId) {\n if (!this.__inputNodes.includes(inputNodeId)) {\n this.__inputNodes.push(inputNodeId);\n this.fireEvent(\"changeInputNodes\");\n return true;\n }\n return false;\n },\n\n addInputNodes: function(inputNodes) {\n if (inputNodes) {\n inputNodes.forEach(inputNode => {\n this.addInputNode(inputNode);\n });\n }\n },\n\n removeInputNode: function(inputNodeId) {\n const index = this.__inputNodes.indexOf(inputNodeId);\n if (index > -1) {\n // remove node connection\n this.__inputNodes.splice(index, 1);\n this.fireDataEvent(\"changeInputNodes\");\n return true;\n }\n return false;\n },\n\n isInputNode: function(inputNodeId) {\n const index = this.__inputNodes.indexOf(inputNodeId);\n return (index > -1);\n },\n // !---- Input Nodes -----\n\n // ----- Inputs Required -----\n getInputsRequired: function() {\n return this.__inputsRequired;\n },\n\n setInputsRequired: function(inputsRequired) {\n this.__inputsRequired = inputsRequired;\n this.fireEvent(\"changeInputsRequired\");\n },\n\n toggleInputRequired: function(portId) {\n const inputsRequired = this.getInputsRequired();\n const index = inputsRequired.indexOf(portId);\n if (index > -1) {\n inputsRequired.splice(index, 1);\n } else {\n inputsRequired.push(portId);\n }\n this.setInputsRequired(inputsRequired);\n },\n // !---- Inputs Required -----\n\n canNodeStart: function() {\n return this.isDynamic() && [\"idle\", \"failed\"].includes(this.getStatus().getInteractive());\n },\n\n requestStartNode: function() {\n if (!this.canNodeStart()) {\n return false;\n }\n const params = {\n url: {\n studyId: this.getStudy().getUuid(),\n nodeId: this.getNodeId()\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"startNode\", params)\n .then(() => this.checkState())\n .catch(err => {\n if (\"status\" in err && (err.status === 409 || err.status === 402)) {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"WARNING\");\n } else {\n console.error(err);\n }\n });\n return true;\n },\n\n requestStopNode: function(withConfirmationDialog=false) {\n const self = this;\n const stopService = () => {\n const params = {\n url: {\n studyId: self.getStudy().getUuid(),\n nodeId: self.getNodeId()\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"stopNode\", params)\n .then(() => self.stopDynamicService())\n .catch(err => console.error(err));\n };\n\n if (withConfirmationDialog) {\n const preferencesSettings = osparc.Preferences.getInstance();\n if (preferencesSettings.getConfirmStopNode()) {\n const msg = this.tr(\"Do you really want Stop and Save the current state?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Stop\"),\n confirmText: this.tr(\"Stop\")\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n stopService();\n }\n }, this);\n }\n } else {\n stopService();\n }\n },\n\n renameNode: function(newLabel) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.node.rename\", true)) {\n return false;\n }\n this.setLabel(newLabel);\n return true;\n },\n\n __initLogger: function() {\n this.setLogger(new osparc.widget.logger.LoggerView());\n },\n\n __initParameter: function() {\n if (this.isParameter() && this.__getOutputData(\"out_1\") === null) {\n const type = osparc.node.ParameterEditor.getParameterOutputType(this);\n // set default values if none\n let val = null;\n switch (type) {\n case \"boolean\":\n val = true;\n break;\n case \"number\":\n case \"integer\":\n val = 1;\n break;\n case \"array\":\n val = \"[1]\";\n break;\n }\n if (val !== null) {\n osparc.node.ParameterEditor.setParameterOutputValue(this, val);\n }\n }\n },\n\n callRetrieveInputs: function(portKey) {\n const data = {\n node: this,\n portKey\n };\n if (this.isDynamic()) {\n this.fireDataEvent(\"retrieveInputs\", data);\n }\n },\n\n retrieveInputs: function(portKey) {\n if (this.isDynamic()) {\n if (!osparc.data.Permissions.getInstance().canDo(\"study.update\")) {\n return;\n }\n const srvUrl = this.getServiceUrl();\n if (srvUrl) {\n const urlRetrieve = this.isDynamicV2() ? osparc.utils.Utils.computeServiceV2RetrieveUrl(this.getStudy().getUuid(), this.getNodeId()) : osparc.utils.Utils.computeServiceRetrieveUrl(srvUrl);\n const updReq = new qx.io.request.Xhr();\n const reqData = {\n \"port_keys\": portKey ? [portKey] : []\n };\n updReq.setRequestHeader(\"Content-Type\", \"application/json\");\n updReq.set({\n url: urlRetrieve,\n method: \"POST\",\n requestData: qx.util.Serializer.toJson(reqData)\n });\n updReq.addListener(\"success\", e => {\n let resp = e.getTarget().getResponse();\n if (typeof resp === \"string\") {\n resp = JSON.parse(resp);\n }\n const {\n data\n } = resp;\n if (portKey) {\n const sizeBytes = (data && (\"size_bytes\" in data)) ? data[\"size_bytes\"] : 0;\n this.getPropsForm().retrievedPortData(portKey, true, sizeBytes);\n }\n }, this);\n [\n \"fail\",\n \"error\"\n ].forEach(failure => {\n updReq.addListener(failure, e => {\n const {\n error\n } = e.getTarget().getResponse();\n if (portKey) {\n this.getPropsForm().retrievedPortData(portKey, false);\n }\n console.error(failure, error);\n const errorMsgData = {\n nodeId: this.getNodeId(),\n msg: \"Failed retrieving inputs\",\n level: \"ERROR\"\n };\n this.fireDataEvent(\"showInLogger\", errorMsgData);\n }, this);\n });\n updReq.send();\n\n if (portKey) {\n this.getPropsForm().retrievingPortData(portKey);\n }\n }\n }\n },\n\n checkState: function() {\n if (this.isDynamic()) {\n const metadata = this.getMetaData();\n const msg = \"Starting \" + metadata.key + \":\" + metadata.version + \"...\";\n const msgData = {\n nodeId: this.getNodeId(),\n msg,\n level: \"INFO\"\n };\n this.fireDataEvent(\"showInLogger\", msgData);\n\n if (this.getIframeHandler()) {\n this.getIframeHandler().checkState();\n } else {\n console.error(this.getLabel() + \" iframe handler not ready\");\n }\n }\n },\n\n stopDynamicService: function() {\n if (this.isDynamic()) {\n const metadata = this.getMetaData();\n const msg = \"Stopping \" + metadata.key + \":\" + metadata.version + \"...\";\n const msgData = {\n nodeId: this.getNodeId(),\n msg,\n level: \"INFO\"\n };\n this.fireDataEvent(\"showInLogger\", msgData);\n\n this.getIframeHandler().stopIframe();\n }\n },\n\n setNodeProgressSequence: function(progressType, progressReport) {\n const nodeStatus = this.getStatus();\n if (nodeStatus.getProgressSequence()) {\n nodeStatus.getProgressSequence().addProgressMessage(progressType, progressReport);\n }\n // there might be some pending ``service_message`` still shown, remove it\n if (this.getIframeHandler()) {\n const loadingPage = this.getIframeHandler().getLoadingPage();\n loadingPage.clearMessages();\n }\n },\n\n attachHandlersToStartButton: function(startButton) {\n this.getStatus().bind(\"interactive\", startButton, \"visibility\", {\n converter: state => (state === \"ready\") ? \"excluded\" : \"visible\"\n });\n this.getStatus().bind(\"interactive\", startButton, \"enabled\", {\n converter: state => [\"idle\", \"failed\"].includes(state)\n });\n const executeListenerId = startButton.addListener(\"execute\", this.requestStartNode, this);\n startButton.executeListenerId = executeListenerId;\n },\n\n attachHandlersToStopButton: function(stopButton) {\n this.getStatus().bind(\"interactive\", stopButton, \"visibility\", {\n converter: state => (state === \"ready\") ? \"visible\" : \"excluded\"\n });\n this.getStatus().bind(\"interactive\", stopButton, \"enabled\", {\n converter: state => state === \"ready\"\n });\n const executeListenerId = stopButton.addListener(\"execute\", this.requestStopNode, this);\n stopButton.executeListenerId = executeListenerId;\n },\n\n removeNode: function() {\n return new Promise(resolve => {\n this.__deleteInBackend()\n .then(() => {\n resolve(true);\n this.removeIFrame();\n })\n .catch(err => {\n console.error(err);\n resolve(false);\n });\n });\n },\n\n __deleteInBackend: function() {\n // remove node in the backend\n const params = {\n url: {\n studyId: this.getStudy().getUuid(),\n nodeId: this.getNodeId()\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"deleteNode\", params);\n },\n\n stopRequestingStatus: function() {\n this.__stopRequestingStatus = true;\n },\n\n removeIFrame: function() {\n let iFrame = this.getIFrame();\n if (iFrame) {\n iFrame.destroy();\n this.setIFrame(null);\n }\n },\n\n setPosition: function(pos) {\n const {\n x,\n y\n } = pos;\n // keep positions positive\n this.__posX = parseInt(x) < 0 ? 0 : parseInt(x);\n this.__posY = parseInt(y) < 0 ? 0 : parseInt(y);\n },\n\n getPosition: function() {\n return {\n x: this.__posX || 0,\n y: this.__posY || 0\n };\n },\n\n // \"number\", \"boolean\", \"integer\"\n convertToParameter: function(type) {\n if (![\"int\"].includes(type)) {\n return;\n }\n const newMetadata = osparc.service.Utils.getParameterMetadata(\"integer\");\n if (newMetadata) {\n const value = this.__getInputData()[\"linspace_start\"];\n const label = this.getLabel();\n this.setKey(newMetadata[\"key\"]);\n this.populateWithMetadata();\n this.populateNodeData();\n this.setLabel(label);\n osparc.node.ParameterEditor.setParameterOutputValue(this, value);\n this.fireEvent(\"keyChanged\");\n }\n },\n\n convertToIterator: function(type) {\n if (![\"int\"].includes(type)) {\n return;\n }\n const metadata = osparc.service.Utils.getLatest(\"simcore/services/frontend/data-iterator/int-range\")\n if (metadata) {\n const value = this.__getOutputData(\"out_1\");\n const label = this.getLabel();\n this.setKey(metadata[\"key\"]);\n this.populateWithMetadata();\n this.populateNodeData();\n this.setLabel(label);\n this.__setInputData({\n \"linspace_start\": value,\n \"linspace_stop\": value,\n \"linspace_step\": 1\n });\n this.fireEvent(\"keyChanged\");\n }\n },\n\n serialize: function(clean = true) {\n // node generic\n let nodeEntry = {\n key: this.getKey(),\n version: this.getVersion(),\n label: this.getLabel(),\n inputs: this.__getInputData(),\n inputsUnits: this.__getInputUnits(),\n inputAccess: this.getInputAccess(),\n inputNodes: this.getInputNodes(),\n inputsRequired: this.getInputsRequired(),\n bootOptions: this.getBootOptions()\n };\n if (!clean) {\n nodeEntry.progress = this.getStatus().getProgress();\n nodeEntry.outputs = this.__getOutputsData();\n nodeEntry.state = this.getStatus().serialize();\n }\n\n if (this.isFilePicker()) {\n nodeEntry.outputs = osparc.file.FilePicker.serializeOutput(this.getOutputs());\n nodeEntry.progress = this.getStatus().getProgress();\n } else if (this.isParameter()) {\n nodeEntry.outputs = this.__getOutputsData();\n }\n\n // remove null entries from the payload\n let filteredNodeEntry = {};\n for (const key in nodeEntry) {\n if (nodeEntry[key] !== null) {\n filteredNodeEntry[key] = nodeEntry[key];\n }\n }\n\n return filteredNodeEntry;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Folders\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.foldersCached = [];\n },\n\n events: {\n \"folderAdded\": \"qx.event.type.Data\",\n \"folderRemoved\": \"qx.event.type.Data\",\n },\n\n statics: {\n curateOrderBy: function(orderBy) {\n const curatedOrderBy = osparc.utils.Utils.deepCloneObject(orderBy);\n if (curatedOrderBy.field !== \"name\") {\n // only \"modified_at\" and \"name\" supported\n curatedOrderBy.field = \"modified_at\";\n }\n return curatedOrderBy;\n },\n },\n\n members: {\n foldersCached: null,\n\n fetchFolders: function(\n folderId = null,\n workspaceId = null,\n orderBy = {\n field: \"modified_at\",\n direction: \"desc\"\n },\n ) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n const curatedOrderBy = this.self().curateOrderBy(orderBy);\n const params = {\n url: {\n workspaceId,\n folderId,\n orderBy: JSON.stringify(curatedOrderBy),\n }\n };\n return osparc.data.Resources.getInstance().getAllPages(\"folders\", params)\n .then(foldersData => {\n const folders = [];\n foldersData.forEach(folderData => {\n const folder = this.__addToCache(folderData);\n folders.push(folder);\n });\n return folders;\n });\n },\n\n fetchAllTrashedFolders: function(orderBy = {\n field: \"modified_at\",\n direction: \"desc\"\n }) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n const curatedOrderBy = this.self().curateOrderBy(orderBy);\n const params = {\n url: {\n orderBy: JSON.stringify(curatedOrderBy),\n }\n };\n return osparc.data.Resources.getInstance().getAllPages(\"folders\", params, \"getPageTrashed\")\n .then(trashedFoldersData => {\n const folders = [];\n trashedFoldersData.forEach(folderData => {\n const folder = this.__addToCache(folderData);\n folders.push(folder);\n });\n return folders;\n });\n },\n\n searchFolders: function(\n text,\n orderBy = {\n field: \"modified_at\",\n direction: \"desc\"\n },\n ) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n const curatedOrderBy = this.self().curateOrderBy(orderBy);\n const params = {\n url: {\n text,\n orderBy: JSON.stringify(curatedOrderBy),\n }\n };\n return osparc.data.Resources.getInstance().getAllPages(\"folders\", params, \"getPageSearch\")\n .then(foldersData => {\n const folders = [];\n foldersData.forEach(folderData => {\n const folder = this.__addToCache(folderData);\n folders.push(folder);\n });\n return folders;\n });\n },\n\n postFolder: function(name, parentFolderId = null, workspaceId = null) {\n const newFolderData = {\n name,\n parentFolderId,\n workspaceId,\n };\n const params = {\n data: newFolderData\n };\n return osparc.data.Resources.getInstance().fetch(\"folders\", \"post\", params)\n .then(folderData => {\n const folder = this.__addToCache(folderData);\n this.fireDataEvent(\"folderAdded\", folder);\n return folder;\n });\n },\n\n trashFolder: function(folderId, workspaceId) {\n const params = {\n \"url\": {\n folderId\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"folders\", \"trash\", params)\n .then(() => {\n const folder = this.getFolder(folderId);\n if (folder) {\n this.__deleteFromCache(folderId, workspaceId);\n this.fireDataEvent(\"folderRemoved\", folder);\n }\n })\n .catch(console.error);\n },\n\n untrashFolder: function(folder) {\n const params = {\n \"url\": {\n folderId: folder.getFolderId(),\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"folders\", \"untrash\", params)\n .then(() => {\n this.foldersCached.unshift(folder);\n this.fireDataEvent(\"folderAdded\", folder);\n })\n .catch(console.error);\n },\n\n deleteFolder: function(folderId, workspaceId) {\n const params = {\n \"url\": {\n folderId\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"folders\", \"delete\", params)\n .then(() => {\n const folder = this.getFolder(folderId);\n if (folder) {\n this.__deleteFromCache(folderId, workspaceId);\n this.fireDataEvent(\"folderRemoved\", folder);\n }\n })\n .catch(console.error);\n },\n\n putFolder: function(folderId, updateData) {\n const folder = this.getFolder(folderId);\n const oldParentFolderId = folder.getParentFolderId();\n const params = {\n \"url\": {\n folderId\n },\n data: updateData\n };\n return osparc.data.Resources.getInstance().fetch(\"folders\", \"update\", params)\n .then(folderData => {\n const folderMoved = updateData.parentFolderId !== oldParentFolderId;\n if (folderMoved) {\n this.fireDataEvent(\"folderRemoved\", folder);\n }\n this.__addToCache(folderData); // it will update the folder model\n if (folderMoved) {\n this.fireDataEvent(\"folderAdded\", folder);\n }\n })\n .catch(console.error);\n },\n\n moveFolderToFolder: function(folderId, destFolderId) {\n if (folderId === destFolderId) {\n // resolve right away\n return new Promise(resolve => resolve());\n }\n\n const folder = this.getFolder(folderId);\n const updatedData = {\n name: folder.getName(),\n parentFolderId: destFolderId,\n };\n return this.putFolder(folderId, updatedData)\n .then(() => folder.setParentFolderId(destFolderId))\n .catch(err => console.error(err));\n },\n\n moveFolderToWorkspace: function(folderId, destWorkspaceId) {\n const folder = this.getFolder(folderId);\n if (folder.getWorkspaceId() === destWorkspaceId) {\n // resolve right away\n return new Promise(resolve => resolve());\n }\n\n const params = {\n url: {\n folderId,\n workspaceId: destWorkspaceId,\n }\n };\n return osparc.data.Resources.fetch(\"folders\", \"moveToWorkspace\", params)\n .then(() => {\n this.fireDataEvent(\"folderRemoved\", folder);\n folder.setWorkspaceId(destWorkspaceId);\n this.fireDataEvent(\"folderAdded\", folder);\n })\n .catch(err => console.error(err));\n },\n\n getFolder: function(folderId = null) {\n return this.foldersCached.find(f => f.getFolderId() === folderId);\n },\n\n __addToCache: function(folderData) {\n let folder = this.foldersCached.find(f => f.getFolderId() === folderData[\"folderId\"] && f.getWorkspaceId() === folderData[\"workspaceId\"]);\n if (folder) {\n const props = Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Folder));\n // put\n Object.keys(folderData).forEach(key => {\n if (key === \"createdAt\") {\n folder.set(\"createdAt\", new Date(folderData[\"createdAt\"]));\n } else if (key === \"modifiedAt\") {\n folder.set(\"lastModified\", new Date(folderData[\"modifiedAt\"]));\n } else if (key === \"trashedAt\") {\n folder.set(\"trashedAt\", new Date(folderData[\"trashedAt\"]));\n } else if (props.includes(key)) {\n folder.set(key, folderData[key]);\n }\n });\n } else {\n // get and post\n folder = new osparc.data.model.Folder(folderData);\n this.foldersCached.unshift(folder);\n }\n return folder;\n },\n\n __deleteFromCache: function(folderId, workspaceId) {\n const idx = this.foldersCached.findIndex(f => f.getFolderId() === folderId && f.getWorkspaceId() === workspaceId);\n if (idx > -1) {\n this.foldersCached.splice(idx, 1);\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Workspaces\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.workspacesCached = [];\n },\n\n events: {\n \"workspaceAdded\": \"qx.event.type.Data\",\n \"workspaceRemoved\": \"qx.event.type.Data\",\n },\n\n statics: {\n iconPath: function(iconsSize = 18) {\n const source = \"@MaterialIcons/folder_shared/\";\n if (iconsSize === -1) {\n return source;\n }\n return source+iconsSize;\n },\n\n createNewWorkspaceData: function(name, description = \"\", thumbnail = \"\") {\n return {\n name,\n description,\n thumbnail,\n };\n },\n\n curateOrderBy: function(orderBy) {\n const curatedOrderBy = osparc.utils.Utils.deepCloneObject(orderBy);\n if (curatedOrderBy.field !== \"name\") {\n // only \"modified_at\" and \"name\" supported\n curatedOrderBy.field = \"modified_at\";\n }\n return curatedOrderBy;\n },\n },\n\n members: {\n workspacesCached: null,\n\n fetchWorkspaces: function() {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n return osparc.data.Resources.getInstance().getAllPages(\"workspaces\")\n .then(workspacesData => {\n workspacesData.forEach(workspaceData => {\n this.__addToCache(workspaceData);\n });\n return this.workspacesCached;\n });\n },\n\n fetchAllTrashedWorkspaces: function(orderBy = {\n field: \"modified_at\",\n direction: \"desc\"\n }) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n const curatedOrderBy = this.self().curateOrderBy(orderBy);\n const params = {\n url: {\n orderBy: JSON.stringify(curatedOrderBy),\n }\n };\n return osparc.data.Resources.getInstance().getAllPages(\"workspaces\", params, \"getPageTrashed\")\n .then(trashedWorkspacesData => {\n const workspaces = [];\n trashedWorkspacesData.forEach(workspaceData => {\n const workspace = this.__addToCache(workspaceData);\n workspaces.push(workspace);\n });\n return workspaces;\n });\n },\n\n searchWorkspaces: function(\n text,\n orderBy = {\n field: \"modified_at\",\n direction: \"desc\"\n },\n ) {\n if (osparc.auth.Data.getInstance().isGuest()) {\n return new Promise(resolve => {\n resolve([]);\n });\n }\n\n const curatedOrderBy = this.self().curateOrderBy(orderBy);\n const params = {\n url: {\n filters: JSON.stringify({text: text}),\n orderBy: JSON.stringify(curatedOrderBy),\n }\n };\n return osparc.data.Resources.getInstance().getAllPages(\"workspaces\", params, \"getPageSearch\")\n .then(workspacesData => {\n const workspaces = [];\n workspacesData.forEach(workspaceData => {\n const workspace = this.__addToCache(workspaceData);\n workspaces.push(workspace);\n });\n return workspaces;\n });\n },\n\n postWorkspace: function(newWorkspaceData) {\n const params = {\n data: newWorkspaceData\n };\n return osparc.data.Resources.getInstance().fetch(\"workspaces\", \"post\", params)\n .then(workspaceData => {\n const newWorkspace = this.__addToCache(workspaceData);\n this.fireDataEvent(\"workspaceAdded\", newWorkspace);\n return newWorkspace;\n });\n },\n\n trashWorkspace: function(workspaceId) {\n const params = {\n \"url\": {\n workspaceId\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"workspaces\", \"trash\", params)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n if (workspace) {\n this.__deleteFromCache(workspaceId);\n this.fireDataEvent(\"workspaceRemoved\", workspace);\n }\n })\n .catch(console.error);\n },\n\n untrashWorkspace: function(workspace) {\n const params = {\n \"url\": {\n workspaceId: workspace.getWorkspaceId(),\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"workspaces\", \"untrash\", params)\n .then(() => {\n this.workspacesCached.unshift(workspace);\n this.fireDataEvent(\"workspaceAdded\", workspace);\n })\n .catch(console.error);\n },\n\n deleteWorkspace: function(workspaceId) {\n const params = {\n \"url\": {\n workspaceId\n }\n };\n return osparc.data.Resources.getInstance().fetch(\"workspaces\", \"delete\", params)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n if (workspace) {\n this.__deleteFromCache(workspaceId);\n this.fireDataEvent(\"workspaceRemoved\", workspace);\n }\n })\n .catch(console.error);\n },\n\n putWorkspace: function(workspaceId, updateData) {\n return new Promise((resolve, reject) => {\n const params = {\n \"url\": {\n workspaceId\n },\n data: updateData\n };\n osparc.data.Resources.getInstance().fetch(\"workspaces\", \"update\", params)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n Object.keys(updateData).forEach(propKey => {\n const upKey = qx.lang.String.firstUp(propKey);\n const setter = \"set\" + upKey;\n if (workspace && setter in workspace) {\n workspace[setter](updateData[propKey]);\n }\n });\n workspace.set({\n modifiedAt: new Date()\n });\n resolve(workspace);\n })\n .catch(err => reject(err));\n });\n },\n\n addCollaborators: function(workspaceId, newCollaborators) {\n const promises = [];\n Object.keys(newCollaborators).forEach(groupId => {\n const params = {\n url: {\n workspaceId,\n groupId,\n },\n data: newCollaborators[groupId]\n };\n promises.push(osparc.data.Resources.fetch(\"workspaces\", \"postAccessRights\", params));\n });\n return Promise.all(promises)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n const newAccessRights = workspace.getAccessRights();\n Object.keys(newCollaborators).forEach(gid => {\n newAccessRights[gid] = newCollaborators[gid];\n });\n workspace.set({\n accessRights: newAccessRights,\n modifiedAt: new Date()\n });\n })\n .catch(console.error);\n },\n\n removeCollaborator: function(workspaceId, groupId) {\n const params = {\n url: {\n workspaceId,\n groupId,\n }\n };\n return osparc.data.Resources.fetch(\"workspaces\", \"deleteAccessRights\", params)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n const newAccessRights = workspace.getAccessRights();\n delete newAccessRights[groupId];\n workspace.set({\n accessRights: newAccessRights,\n modifiedAt: new Date()\n });\n })\n .catch(console.error);\n },\n\n updateCollaborator: function(workspaceId, groupId, newPermissions) {\n const params = {\n url: {\n workspaceId,\n groupId,\n },\n data: newPermissions\n };\n return osparc.data.Resources.fetch(\"workspaces\", \"putAccessRights\", params)\n .then(() => {\n const workspace = this.getWorkspace(workspaceId);\n const newAccessRights = workspace.getAccessRights();\n newAccessRights[groupId] = newPermissions;\n workspace.set({\n accessRights: workspace.newAccessRights,\n modifiedAt: new Date()\n });\n })\n .catch(console.error);\n },\n\n getWorkspace: function(workspaceId = null) {\n return this.workspacesCached.find(w => w.getWorkspaceId() === workspaceId);\n },\n\n getWorkspaces: function() {\n return this.workspacesCached;\n },\n\n __addToCache: function(workspaceData) {\n let workspace = this.workspacesCached.find(w => w.getWorkspaceId() === workspaceData[\"workspaceId\"]);\n if (workspace) {\n const props = Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Workspace));\n // put\n Object.keys(workspaceData).forEach(key => {\n if (key === \"createdAt\") {\n workspace.set(\"createdAt\", new Date(workspaceData[\"createdAt\"]));\n } else if (key === \"modifiedAt\") {\n workspace.set(\"modifiedAt\", new Date(workspaceData[\"modifiedAt\"]));\n } else if (key === \"trashedAt\") {\n workspace.set(\"trashedAt\", new Date(workspaceData[\"trashedAt\"]));\n } else if (props.includes(key)) {\n workspace.set(key, workspaceData[key]);\n }\n });\n } else {\n workspace = new osparc.data.model.Workspace(workspaceData);\n this.workspacesCached.unshift(workspace);\n }\n return workspace;\n },\n\n __deleteFromCache: function(workspaceId) {\n const idx = this.workspacesCached.findIndex(w => w.getWorkspaceId() === workspaceId);\n if (idx > -1) {\n this.workspacesCached.splice(idx, 1);\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.widget.ProgressSequence\", {\n extend: qx.ui.core.Widget,\n\n construct: function(title) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(9));\n\n this.set({\n backgroundColor: \"window-popup-background\",\n paddingBottom: 8,\n minWidth: 400,\n });\n\n this.__initLayout(title);\n\n this.__tasks = [];\n },\n\n statics: {\n POS: {\n LABEL: 0,\n CALC: 1,\n HALO: 2,\n },\n\n createTaskLayout: function(label) {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n })).set({\n padding: [2, 10]\n });\n\n const lbl = new qx.ui.basic.Label(label);\n lbl.set({\n textColor: \"text\",\n allowGrowX: true,\n allowShrinkX: true,\n });\n layout.addAt(lbl, this.POS.LABEL, {\n flex: 1\n });\n\n const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignY: \"middle\",\n alignX: \"center\",\n })).set({\n height: 18,\n width: 18,\n allowGrowY: false,\n allowGrowX: false,\n });\n const icon = new qx.ui.basic.Image(\"@FontAwesome5Solid/check/10\").set({\n visibility: \"excluded\",\n textColor: \"success\"\n });\n iconContainer.add(icon);\n const progressColor = qx.theme.manager.Color.getInstance().resolve(\"progressbar\");\n osparc.service.StatusUI.getStatusHalo(iconContainer, progressColor, 0);\n layout.addAt(iconContainer, this.POS.HALO);\n\n const progressState = new qx.ui.basic.Label();\n progressState.set({\n value: qx.locale.Manager.tr(\"Waiting ...\"),\n textColor: \"text\",\n allowGrowX: true,\n allowShrinkX: true\n });\n layout.addAt(progressState, this.POS.CALC);\n\n return layout;\n },\n\n createProgressBar: function(max = 1) {\n const progressBar = new qx.ui.indicator.ProgressBar().set({\n maximum: max,\n height: 4,\n margin: 0,\n padding: 0\n });\n progressBar.exclude();\n return progressBar;\n },\n\n updateTaskProgress: function(atom, {value, progressLabel}) {\n if ([null, undefined].includes(value)) {\n return;\n }\n\n if (atom) {\n const halo = atom.getChildren()[this.POS.HALO];\n const icon = halo.getChildren()[0];\n icon.setVisibility(value === 1 ? \"visible\" : \"excluded\");\n const progressColor = qx.theme.manager.Color.getInstance().resolve(\"progressbar\")\n osparc.service.StatusUI.getStatusHalo(halo, progressColor, value * 100);\n\n const label = atom.getChildren()[this.POS.CALC];\n label.setValue(progressLabel);\n }\n },\n\n progressUpdate: function(pBar, value) {\n if ([null, undefined].includes(value)) {\n return;\n }\n\n if (pBar) {\n pBar.set({\n value,\n visibility: (value >= 0) ? \"visible\" : \"excluded\"\n });\n }\n }\n },\n\n properties: {\n overallProgress: {\n check: \"Number\",\n init: 0,\n nullable: false,\n apply: \"__applyOverallProgress\"\n }\n },\n\n members: {\n __tasks: null,\n\n __initLayout: function(title) {\n title = title || qx.locale.Manager.tr(\"CREATING ...\");\n const progressTitle = new qx.ui.basic.Label(title).set({\n font: \"text-12\",\n alignX: \"center\",\n alignY: \"middle\",\n margin: 10\n });\n this._add(progressTitle);\n },\n\n __applyOverallProgress: function(value) {\n this.self().progressUpdate(this.__overallProgressBar, value);\n },\n\n getTask: function(text) {\n const taskFound = this.__tasks.find(task => {\n if (task.getChildren().length > this.self().POS.LABEL) {\n return task.getChildren()[this.self().POS.LABEL].getValue() === text;\n }\n return false;\n });\n return taskFound;\n },\n\n getTasks: function() {\n return this.__tasks;\n },\n\n addOverallProgressBar: function(nTasks = 1) {\n const overallPBar = this.__overallProgressBar = osparc.widget.ProgressSequence.createProgressBar(nTasks);\n this._add(overallPBar);\n return overallPBar;\n },\n\n addNewTask: function(text) {\n const taskFound = this.getTask(text);\n if (taskFound) {\n return taskFound;\n }\n const newTask = osparc.widget.ProgressSequence.createTaskLayout(text);\n this._add(newTask);\n this.__tasks.push(newTask);\n return newTask;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Built-in service used for selecting a single file from storage and make it available in the workflow\n *\n * It consists of a widget containing a FilesTree, Add button and Select button:\n * - FilesTree will be populated with data provided by storage service (simcore.S3 and datcore)\n * - Add button will open a dialogue where the selected file will be upload to S3\n * - Select button puts the file in the output of the FilePicker node so that connected nodes can access it.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let filePicker = new osparc.file.FilePicker(node);\n * this.getRoot().add(filePicker);\n *
\n */\n\nqx.Class.define(\"osparc.file.FilePicker\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(node, viewContext = \"workbench\") {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(20));\n\n this.set({\n node,\n });\n\n this.__buildLayout(viewContext);\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\"\n },\n },\n\n events: {\n \"itemReset\": \"qx.event.type.Event\",\n \"itemSelected\": \"qx.event.type.Event\",\n \"fileUploaded\": \"qx.event.type.Event\"\n },\n\n statics: {\n getOutput: function(outputs) {\n return osparc.data.model.Node.getOutput(outputs, \"outFile\");\n },\n\n getFilenameFromPath: function(output) {\n if (\"path\" in output) {\n const splitFilename = output.path.split(\"/\");\n return splitFilename[splitFilename.length-1];\n }\n return null;\n },\n\n getOutputLabel: function(outputs) {\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n if (outFileValue) {\n if (\"label\" in outFileValue && outFileValue[\"label\"]) {\n return outFileValue.label;\n }\n if (\"path\" in outFileValue && outFileValue[\"path\"]) {\n return this.self().getFilenameFromPath(outFileValue);\n }\n if (\"downloadLink\" in outFileValue && outFileValue[\"downloadLink\"]) {\n return osparc.file.FileDownloadLink.extractLabelFromLink(outFileValue[\"downloadLink\"]);\n }\n }\n return null;\n },\n\n isOutputFromStore: function(outputs) {\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n return (osparc.utils.Utils.isObject(outFileValue) && \"path\" in outFileValue);\n },\n\n isOutputDownloadLink: function(outputs) {\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n return (osparc.utils.Utils.isObject(outFileValue) && \"downloadLink\" in outFileValue);\n },\n\n extractLabelFromLink: function(outputs) {\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n return osparc.file.FileDownloadLink.extractLabelFromLink(outFileValue[\"downloadLink\"]);\n },\n\n hasOutputAssigned: function(outputs) {\n return osparc.file.FilePicker.isOutputFromStore(outputs) || osparc.file.FilePicker.isOutputDownloadLink(outputs);\n },\n\n setOutputValue: function(node, outputValue) {\n node.setOutputData({\n \"outFile\": outputValue\n });\n const outputs = node.getOutputs();\n const outLabel = osparc.file.FilePicker.getOutputLabel(outputs);\n if (outLabel && node.getLabel().includes(\"File Picker\")) {\n node.setLabel(outputValue.label);\n } else {\n node.setLabel(\"File Picker\");\n }\n node.getStatus().setProgress(outputValue ? 100 : 0);\n },\n\n setOutputValueFromStore: function(node, store, dataset, path, label) {\n if (store !== undefined && path) {\n osparc.file.FilePicker.setOutputValue(node, {\n store,\n dataset,\n path,\n label\n });\n }\n },\n\n setOutputValueFromLink: function(node, downloadLink, label) {\n if (downloadLink) {\n osparc.file.FilePicker.setOutputValue(node, {\n downloadLink,\n label: label ? label : \"\"\n });\n }\n },\n\n resetOutputValue: function(node) {\n osparc.file.FilePicker.setOutputValue(node, null);\n },\n\n getOutputFileMetadata: function(node) {\n return new Promise((resolve, reject) => {\n const outValue = osparc.file.FilePicker.getOutput(node.getOutputs());\n const params = {\n url: {\n locationId: outValue.store,\n datasetId: outValue.dataset\n }\n };\n osparc.data.Resources.fetch(\"storageFiles\", \"getByLocationAndDataset\", params)\n .then(files => {\n const fileMetadata = files.find(file => file.file_id === outValue.path);\n if (fileMetadata) {\n resolve(fileMetadata);\n } else {\n reject();\n }\n })\n .catch(() => reject());\n });\n },\n\n buildFileFromStoreInfoView: function(node, form) {\n const showFields = [\"file_name\", \"file_size\", \"last_modified\"];\n this.self().getOutputFileMetadata(node)\n .then(fileMetadata => {\n for (let [key, value] of Object.entries(fileMetadata)) {\n if (osparc.data.Permissions.getInstance().canDo(\"services.filePicker.read.all\") || showFields.includes(key)) {\n const entry = new qx.ui.form.TextField();\n form.add(entry, key, null, key);\n if (value) {\n if (key === \"file_size\") {\n const val = osparc.utils.Utils.bytesToSize(value);\n entry.setValue(val);\n } else if (key === \"last_modified\") {\n const val = osparc.utils.Utils.formatDateAndTime(new Date(value));\n entry.setValue(val);\n } else {\n entry.setValue(value.toString());\n }\n }\n }\n }\n });\n },\n\n buildDownloadLinkInfoView: function(node, form) {\n const outputs = node.getOutputs();\n\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n const urlEntry = new qx.ui.form.TextField().set({\n value: outFileValue[\"downloadLink\"]\n });\n form.add(urlEntry, \"url\", null, \"url\");\n\n const label = osparc.file.FilePicker.extractLabelFromLink(outputs);\n if (label) {\n const labelEntry = new qx.ui.form.TextField().set({\n value: label\n });\n form.add(labelEntry, \"label\", null, \"label\");\n }\n },\n\n downloadOutput: function(node, downloadFileBtn) {\n const progressCb = () => downloadFileBtn.setFetching(true);\n const loadedCb = () => downloadFileBtn.setFetching(false);\n if (osparc.file.FilePicker.isOutputFromStore(node.getOutputs())) {\n this.self().getOutputFileMetadata(node)\n .then(fileMetadata => {\n if (\"location_id\" in fileMetadata && \"file_id\" in fileMetadata) {\n const locationId = fileMetadata[\"location_id\"];\n const fileId = fileMetadata[\"file_id\"];\n osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)\n .then(data => {\n if (data) {\n osparc.utils.Utils.downloadLink(data.link, \"GET\", data.fileName, progressCb, loadedCb);\n }\n });\n }\n });\n } else if (osparc.file.FilePicker.isOutputDownloadLink(node.getOutputs())) {\n const outFileValue = osparc.file.FilePicker.getOutput(node.getOutputs());\n if (osparc.utils.Utils.isObject(outFileValue) && \"downloadLink\" in outFileValue) {\n osparc.utils.Utils.downloadLink(outFileValue[\"downloadLink\"], \"GET\", outFileValue[\"label\"], progressCb, loadedCb);\n }\n }\n },\n\n serializeOutput: function(outputs) {\n let output = {};\n const outFileValue = osparc.file.FilePicker.getOutput(outputs);\n if (outFileValue) {\n output[\"outFile\"] = outFileValue;\n }\n return output;\n },\n\n POS: {\n RELOAD: 0,\n FILES_TREE: 1,\n TOOLBAR: 2,\n DOWNLOAD_LINK: 3\n }\n },\n\n members: {\n __filesTree: null,\n __selectButton: null,\n __selectedFile: null,\n __selectedFileFound: null,\n __fileDownloadLink: null,\n\n setOutputValueFromStore: function(store, dataset, path, label) {\n this.self().setOutputValueFromStore(this.getNode(), store, dataset, path, label);\n },\n\n __setOutputValueFromLink: function(downloadLink, label) {\n this.self().setOutputValueFromLink(this.getNode(), downloadLink, label);\n },\n\n __reloadFilesTree: function() {\n if (this.__filesTree) {\n this.__selectedFileFound = false;\n this.__filesTree.resetCache();\n this.__filesTree.populateTree();\n }\n },\n\n __buildLayout: function(viewContext) {\n this._removeAll();\n const hasOutput = osparc.file.FilePicker.hasOutputAssigned(this.getNode().getOutputs());\n if (hasOutput) {\n this.__buildInfoLayout();\n } else {\n this.__addProgressBar();\n if (viewContext === \"workbench\") {\n this.__buildWorkbenchLayout();\n } else {\n this.setMargin(10);\n this.__buildAppModeLayout();\n }\n }\n },\n\n __addProgressBar: function() {\n const progressLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n progressLayout.alwaysEnabled = true;\n\n const progressBar = new qx.ui.indicator.ProgressBar();\n const nodeStatus = this.getNode().getStatus();\n nodeStatus.bind(\"progress\", progressBar, \"value\", {\n converter: val => osparc.data.model.NodeStatus.getValidProgress(val)\n });\n progressLayout.add(progressBar, {\n flex: 1\n });\n\n const stopButton = new osparc.ui.form.FetchButton().set({\n minHeight: 24,\n icon: \"@FontAwesome5Solid/times/16\",\n toolTipText: this.tr(\"Cancel upload\"),\n appearance: \"danger-button\",\n allowGrowX: false\n });\n stopButton.addListener(\"tap\", () => {\n stopButton.setFetching(true);\n this.getNode().requestFileUploadAbort();\n });\n progressLayout.add(stopButton);\n\n const progressChanged = () => {\n const progress = this.getNode().getStatus().getProgress();\n const validProgress = osparc.data.model.NodeStatus.getValidProgress(progress);\n const uploading = (validProgress > 0 && validProgress < 100);\n progressLayout.setVisibility(uploading ? \"visible\" : \"excluded\");\n this._getChildren().forEach(child => {\n if (!child.alwaysEnabled) {\n child.setEnabled(!uploading);\n }\n });\n };\n nodeStatus.addListener(\"changeProgress\", () => progressChanged());\n progressChanged();\n\n this._add(progressLayout);\n },\n\n __buildInfoLayout: function() {\n const node = this.getNode();\n\n const form = new qx.ui.form.Form();\n if (osparc.file.FilePicker.isOutputFromStore(node.getOutputs())) {\n this.self().buildFileFromStoreInfoView(node, form);\n } else if (osparc.file.FilePicker.isOutputDownloadLink(node.getOutputs())) {\n this.self().buildDownloadLinkInfoView(node, form);\n }\n const formRend = new qx.ui.form.renderer.Single(form);\n formRend.setEnabled(false);\n this._add(formRend);\n\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n const downloadFileBtn = this.__getDownloadFileButton();\n hBox.add(downloadFileBtn);\n const resetFileBtn = this.__getResetFileButton();\n hBox.add(resetFileBtn);\n this._add(hBox);\n },\n\n __getDownloadFileButton: function() {\n const node = this.getNode();\n const downloadFileBtn = new osparc.ui.form.FetchButton(this.tr(\"Download\"), \"@FontAwesome5Solid/cloud-download-alt/14\").set({\n allowGrowX: false\n });\n downloadFileBtn.addListener(\"execute\", () => osparc.file.FilePicker.downloadOutput(node, downloadFileBtn));\n return downloadFileBtn;\n },\n\n __getResetFileButton: function() {\n const resetFileBtn = new qx.ui.form.Button(this.tr(\"Reset\"), \"@FontAwesome5Solid/sync-alt/14\").set({\n allowGrowX: false\n });\n resetFileBtn.addListener(\"execute\", () => this.__resetOutput());\n return resetFileBtn;\n },\n\n __getUploadFileSection: function() {\n const uploadFileSection = new osparc.ui.form.FileInput();\n uploadFileSection.addListener(\"selectionChanged\", () => {\n const file = uploadFileSection.getFile();\n if (file) {\n if (this.uploadPendingFiles([file])) {\n setTimeout(() => this.fireEvent(\"itemSelected\"), 500);\n }\n }\n });\n return uploadFileSection;\n },\n\n __getFileDropSection: function() {\n const fileDrop = new osparc.file.FileDrop();\n fileDrop.addListener(\"localFileDropped\", e => {\n const files = e.getData()[\"data\"];\n if (this.uploadPendingFiles(files)) {\n setTimeout(() => this.fireEvent(\"itemSelected\"), 500);\n }\n fileDrop.resetDropAction();\n });\n fileDrop.addListener(\"fileLinkDropped\", e => {\n const data = e.getData()[\"data\"];\n const node = this.getNode();\n osparc.file.FilePicker.setOutputValueFromStore(node, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());\n this.fireEvent(\"itemSelected\");\n fileDrop.resetDropAction();\n });\n return fileDrop;\n },\n\n uploadPendingFiles: function(files) {\n if (files.length) {\n if (files.length === 1) {\n const fileUploader = new osparc.file.FileUploader(this.getNode());\n fileUploader.addListener(\"uploadAborted\", () => this.__resetOutput());\n fileUploader.addListener(\"fileUploaded\", e => {\n const fileMetadata = e.getData();\n if (\n \"location\" in fileMetadata &&\n \"dataset\" in fileMetadata &&\n \"path\" in fileMetadata &&\n \"name\" in fileMetadata\n ) {\n osparc.file.FilePicker.setOutputValueFromStore(this.getNode(), fileMetadata[\"location\"], fileMetadata[\"dataset\"], fileMetadata[\"path\"], fileMetadata[\"name\"]);\n } else {\n console.error(\"metadata info missing\", fileMetadata);\n }\n this.fireEvent(\"fileUploaded\");\n this.getNode().fireEvent(\"fileUploaded\");\n }, this);\n fileUploader.retrieveUrlAndUpload(files[0]);\n return true;\n }\n osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, \"ERROR\");\n }\n return false;\n },\n\n __getDownloadLinkSection: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n layout.add(new qx.ui.basic.Label(this.tr(\"Provide Link\")));\n\n const fileDownloadLink = this.__fileDownloadLink = new osparc.file.FileDownloadLink().set({\n allowGrowY: false\n });\n fileDownloadLink.addListener(\"fileLinkAdded\", e => {\n const downloadLink = e.getData();\n const label = osparc.file.FileDownloadLink.extractLabelFromLink(downloadLink);\n this.__setOutputValueFromLink(downloadLink, label);\n this.fireEvent(\"itemSelected\");\n }, this);\n layout.add(fileDownloadLink);\n\n return layout;\n },\n\n __buildWorkbenchLayout: function() {\n const uploadFileSection = this.__getUploadFileSection();\n this._add(uploadFileSection);\n\n const fileDrop = this.__getFileDropSection();\n this._add(fileDrop, {\n flex: 1\n });\n\n const downloadLinkSection = this.__getDownloadLinkSection();\n this._add(downloadLinkSection);\n },\n\n __buildAppModeLayout: function() {\n const msg = this.tr(\"In order to Select a File you have three options:\");\n const intro = new qx.ui.basic.Label(msg).set({\n font: \"text-16\",\n rich: true\n });\n this._add(intro);\n\n const collapsibleViews = [];\n const contentMargin = 10;\n\n const newFileSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n const uploadFileSection = this.__getUploadFileSection();\n uploadFileSection.getButton().set({\n appearance: \"strong-button\",\n font: \"text-14\"\n });\n newFileSection.add(uploadFileSection);\n const fileDrop = this.__getFileDropSection();\n fileDrop.setDropHereMessage(this.tr(\"Drop file here\"));\n newFileSection.add(fileDrop, {\n flex: 1\n });\n const newFilePView = new osparc.desktop.PanelView().set({\n title: this.tr(\"Select New File\"),\n content: newFileSection\n });\n collapsibleViews.push(newFilePView);\n\n const downloadLinkSection = this.__getDownloadLinkSection();\n const downloadLinkPView = new osparc.desktop.PanelView().set({\n title: this.tr(\"Select Download Link\"),\n content: downloadLinkSection\n });\n collapsibleViews.push(downloadLinkPView);\n\n const fileBrowserLayout = this.__getFileBrowserLayout();\n const usedFilePView = new osparc.desktop.PanelView().set({\n title: this.tr(\"Select File from other \") + osparc.product.Utils.getStudyAlias(),\n content: fileBrowserLayout\n });\n collapsibleViews.push(usedFilePView);\n\n const radioCollapsibleViews = new osparc.desktop.RadioCollapsibleViews();\n collapsibleViews.forEach(cv => {\n cv.getInnerContainer().set({\n margin: contentMargin\n });\n this._add(cv, {\n flex: 1\n });\n radioCollapsibleViews.addCollapsibleView(cv);\n });\n radioCollapsibleViews.openCollapsibleView(0);\n },\n\n __getFileBrowserLayout: function() {\n const treeLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n const reloadButton = new qx.ui.form.Button().set({\n label: this.tr(\"Reload\"),\n icon: \"@FontAwesome5Solid/sync-alt/16\",\n allowGrowX: false\n });\n reloadButton.addListener(\"execute\", () => this.__reloadFilesTree(), this);\n treeLayout.add(reloadButton);\n\n const treeFolderLayout = new qx.ui.splitpane.Pane(\"horizontal\");\n treeFolderLayout.getChildControl(\"splitter\").set({\n width: 2\n });\n const filesTree = this.__filesTree = new osparc.file.FilesTree().set({\n showLeafs: false,\n minWidth: 150,\n width: 250\n });\n treeLayout.add(filesTree, {\n flex: 1\n });\n treeFolderLayout.add(treeLayout, 0);\n const allowMultiSelection = false;\n const folderViewer = new osparc.file.FolderViewer(allowMultiSelection);\n treeFolderLayout.add(folderViewer, 1);\n\n filesTree.addListener(\"selectionChanged\", () => {\n const selectionData = filesTree.getSelectedItem();\n this.__selectionChanged(selectionData);\n if (osparc.file.FilesTree.isDir(selectionData) || (selectionData.getChildren && selectionData.getChildren().length)) {\n folderViewer.setFolder(selectionData);\n }\n }, this);\n filesTree.addListener(\"filesAddedToTree\", () => this.__checkSelectedFileIsListed(), this);\n this.__reloadFilesTree();\n\n folderViewer.addListener(\"selectionChanged\", e => {\n const selectionData = e.getData();\n this.__selectionChanged(selectionData);\n }, this);\n folderViewer.addListener(\"openItemSelected\", e => {\n const selectionData = e.getData();\n this.__selectionChanged(selectionData);\n if (osparc.file.FilesTree.isFile(selectionData)) {\n this.__itemSelected();\n } else if (osparc.file.FilesTree.isDir(selectionData)) {\n filesTree.openNodeAndParents(selectionData);\n filesTree.setSelection(new qx.data.Array([selectionData]));\n }\n }, this);\n folderViewer.addListener(\"folderUp\", e => {\n const currentFolder = e.getData();\n const parent = filesTree.getParent(currentFolder);\n if (parent) {\n filesTree.setSelection(new qx.data.Array([parent]));\n folderViewer.setFolder(parent);\n }\n }, this);\n folderViewer.addListener(\"requestDatasetFiles\", e => {\n const data = e.getData();\n filesTree.requestDatasetFiles(data.locationId, data.datasetId);\n }, this);\n\n const selectBtn = this.__selectButton = new qx.ui.form.Button(this.tr(\"Select\")).set({\n allowGrowX: false,\n alignX: \"right\"\n });\n selectBtn.setEnabled(false);\n selectBtn.addListener(\"execute\", () => this.__itemSelected(), this);\n // eslint-disable-next-line no-underscore-dangle\n folderViewer._add(selectBtn);\n\n return treeFolderLayout;\n },\n\n init: function() {\n if (this.self().isOutputFromStore(this.getNode().getOutputs())) {\n const outFile = this.__getOutputFile();\n this.__filesTree.loadFilePath(outFile.value);\n }\n\n if (this.self().isOutputDownloadLink(this.getNode().getOutputs())) {\n const outFile = this.__getOutputFile();\n if (this.__fileDownloadLink) {\n this.__fileDownloadLink.setValue(outFile.value[\"downloadLink\"]);\n }\n }\n },\n\n __selectionChanged: function(selectedData) {\n this.__selectedFile = selectedData;\n const isFile = osparc.file.FilesTree.isFile(selectedData);\n if (this.__selectButton) {\n this.__selectButton.setEnabled(isFile);\n }\n },\n\n __itemSelected: function() {\n const selectedItem = this.__selectedFile;\n if (selectedItem && osparc.file.FilesTree.isFile(selectedItem)) {\n this.setOutputValueFromStore(selectedItem.getLocation(), selectedItem.getDatasetId(), selectedItem.getFileId(), selectedItem.getLabel());\n this.fireEvent(\"itemSelected\");\n }\n },\n\n __resetOutput: function() {\n const node = this.getNode();\n osparc.file.FilePicker.resetOutputValue(node);\n this.fireEvent(\"itemReset\");\n },\n\n __getOutputFile: function() {\n const outputs = this.getNode().getOutputs();\n return outputs[\"outFile\"];\n },\n\n __checkSelectedFileIsListed: function() {\n if (this.__selectedFileFound === false && this.self().isOutputFromStore(this.getNode().getOutputs())) {\n const outFile = this.__getOutputFile();\n const selected = this.__filesTree.setSelectedFile(outFile.value.path);\n if (selected) {\n this.__selectedFileFound = true;\n this.__filesTree.fireEvent(\"selectionChanged\");\n }\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.ui.basic.Chip\", {\n extend: qx.ui.basic.Atom,\n\n construct: function(label, icon) {\n this.base(arguments, label, icon);\n },\n\n properties: {\n appearance: {\n init: \"chip\",\n refine: true\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.Tasks\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n this.__tasks = new qx.data.Array();\n\n const tasksContainer = this.__tasksContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(3)).set({\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,\n visibility: \"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(tasksContainer, \"tasks\");\n const root = qx.core.Init.getApplication().getRoot();\n root.add(tasksContainer, {\n top: 0,\n right: 0\n });\n },\n\n members: {\n __tasks: null,\n __tasksContainer: null,\n\n addTask: function(task) {\n this.__tasks.push(task);\n this.__tasksContainer.addAt(task, 0);\n },\n\n removeTask: function(task) {\n if (this.__tasks.indexOf(task) > -1) {\n this.__tasks.remove(task);\n }\n if (this.__tasksContainer.indexOf(task) > -1) {\n this.__tasksContainer.remove(task);\n }\n },\n\n getTasks: function() {\n return this.__tasks;\n },\n\n getTasksContainer: function() {\n return this.__tasksContainer;\n },\n\n setTasksContainerPosition: function(x, y) {\n const root = qx.core.Init.getApplication().getRoot();\n if (root && root.getBounds()) {\n this.__tasksContainer.setLayoutProperties({\n left: x-osparc.task.TaskUI.MAX_WIDTH,\n top: y\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Service data.\n */\n\nqx.Class.define(\"osparc.data.model.Service\", {\n extend: qx.core.Object,\n\n /**\n * @param serviceData {Object} Object containing the serialized Service Data\n */\n construct: function(serviceData) {\n this.base(arguments);\n\n this.set({\n key: serviceData.key,\n version: serviceData.version,\n versionDisplay: serviceData.versionDisplay,\n name: serviceData.name,\n description: serviceData.description,\n thumbnail: serviceData.thumbnail,\n serviceType: serviceData.type,\n contact: serviceData.contact,\n authors: serviceData.authors,\n owner: serviceData.owner || \"\",\n accessRights: serviceData.accessRights,\n bootOptions: serviceData.bootOptions,\n classifiers: serviceData.classifiers || [],\n quality: serviceData.quality || null,\n xType: serviceData.xType || null,\n hits: serviceData.hits || 0,\n });\n },\n\n properties: {\n key: {\n check: \"String\",\n nullable: false,\n event: \"changeKey\",\n init: null\n },\n\n version: {\n check: \"String\",\n nullable: false,\n event: \"changeVersion\",\n init: null\n },\n\n versionDisplay: {\n check: \"String\",\n nullable: true,\n event: \"changeVersionDisplay\",\n init: null\n },\n\n name: {\n check: \"String\",\n nullable: false,\n event: \"changeName\",\n init: null\n },\n\n description: {\n check: \"String\",\n nullable: true,\n event: \"changeDescription\",\n init: null\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n event: \"changeThumbnail\",\n init: null\n },\n\n serviceType: {\n check: \"String\",\n nullable: true,\n event: \"changeServiceType\",\n init: \"\"\n },\n\n contact: {\n check: \"String\",\n nullable: true,\n event: \"changeContact\",\n init: \"\"\n },\n\n authors: {\n check: \"Object\",\n nullable: true,\n event: \"changeAuthors\",\n init: {}\n },\n\n owner: {\n check: \"String\",\n nullable: true,\n event: \"changeOwner\",\n init: \"\"\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n event: \"changeAccessRights\",\n init: {}\n },\n\n bootOptions: {\n check: \"Object\",\n init: {},\n event: \"changeBootOptions\",\n nullable: true\n },\n\n classifiers: {\n check: \"Array\",\n init: [],\n event: \"changeClassifiers\",\n nullable: false\n },\n\n quality: {\n check: \"Object\",\n init: {},\n event: \"changeQuality\",\n nullable: false\n },\n\n // ------ ignore for serializing ------\n xType: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeXType\",\n },\n\n hits: {\n check: \"Number\",\n init: 0,\n event: \"changeHits\",\n nullable: false\n }\n // ------ ignore for serializing ------\n },\n\n statics: {\n IgnoreSerializationProps: [\n \"xType\",\n \"hits\",\n ]\n },\n\n members: {\n __serviceData: null,\n\n serialize: function() {\n let jsonObject = {};\n const propertyKeys = this.self().getProperties();\n propertyKeys.forEach(key => {\n if (this.self().IgnoreSerializationProps.includes(key)) {\n return;\n }\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.resources.pages.BasePage\", {\n extend: osparc.desktop.preferences.pages.BasePage,\n\n construct: function(title, iconSrc = null, id) {\n this.base(arguments, title, iconSrc);\n\n this.tabId = id;\n\n const grid = new qx.ui.layout.Grid(10, 10);\n grid.setColumnFlex(0, 1);\n grid.setRowFlex(0, 0); // header\n grid.setRowFlex(1, 1); // content\n grid.setRowFlex(2, 0); // footer\n grid.setRowAlign(0, \"right\", \"top\"); // header\n grid.setRowAlign(0, \"left\", \"top\"); // content\n grid.setRowAlign(0, \"right\", \"top\"); // footer\n\n this.setLayout(grid);\n },\n\n statics: {\n decorateHeaderButton: function(btn) {\n btn.set({\n appearance: \"form-button\",\n font: \"text-14\",\n alignX: \"right\",\n minWidth: 150,\n maxWidth: 150,\n height: 35,\n center: true\n });\n }\n },\n\n members: {\n addToHeader: function(widget) {\n this.add(widget, {\n column: 0,\n row: 0\n });\n },\n\n addToContent: function(widget) {\n const scrollContainer = new qx.ui.container.Scroll(widget);\n this.add(scrollContainer, {\n column: 0,\n row: 1\n });\n },\n\n addToFooter: function(widget) {\n this.add(widget, {\n column: 0,\n row: 2\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for studies\n */\n\nqx.Class.define(\"osparc.utils.Resources\", {\n type: \"static\",\n\n statics: {\n isStudy: function(studyData) {\n return ((studyData[\"resourceType\"] === \"study\") && (\"uuid\" in studyData));\n },\n\n isTemplate: function(templateData) {\n return ((templateData[\"resourceType\"] === \"template\") && (\"uuid\" in templateData));\n },\n\n isService: function(serviceData) {\n return ((serviceData[\"resourceType\"] === \"service\") && (\"key\" in serviceData) && (\"version\" in serviceData));\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * Widget that displays the services and their versions included in the Study\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * const servicesInStudy = new osparc.metadata.ServicesInStudy(study);\n * this.add(servicesInStudy);\n *
\n */\n\nqx.Class.define(\"osparc.metadata.ServicesInStudy\", {\n type: \"abstract\",\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyData {Object|osparc.data.model.Study} studyData (metadata)\n */\n construct: function(studyData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this._introText = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(this._introText);\n\n const grid = this.__grid = new qx.ui.layout.Grid(20, 5);\n grid.setColumnAlign(this.self().GRID_POS.LABEL, \"left\", \"middle\");\n grid.setColumnMinWidth(this.self().GRID_POS.LABEL, 80);\n grid.setColumnFlex(this.self().GRID_POS.LABEL, 1);\n this._servicesGrid = new qx.ui.container.Composite(grid);\n this._add(this._servicesGrid);\n\n this._studyData = osparc.data.model.Study.deepCloneStudyObject(studyData);\n\n const servicesInStudy = osparc.study.Utils.extractUniqueServices(this._studyData[\"workbench\"]);\n if (servicesInStudy.length) {\n const promises = [];\n servicesInStudy.forEach(srv => promises.push(osparc.store.Services.getService(srv.key, srv.version)));\n Promise.all(promises)\n .then(() => this._populateLayout());\n } else {\n this.__populateEmptyLayout();\n }\n },\n\n events: {\n \"updateService\": \"qx.event.type.Data\"\n },\n\n statics: {\n GRID_POS: {\n INFO_BUTTON: 0,\n LABEL: 1\n }\n },\n\n members: {\n _studyData: null,\n _introText: null,\n __grid: null,\n _servicesGrid: null,\n\n _patchNode: function(nodeId, patchData, fetchButton) {\n if (fetchButton) {\n fetchButton.setFetching(true);\n }\n this.setEnabled(false);\n\n osparc.store.Study.patchNodeData(this._studyData, nodeId, patchData)\n .then(() => {\n this.fireDataEvent(\"updateService\", this._studyData);\n this._populateLayout();\n })\n .catch(err => {\n if (\"message\" in err) {\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n } else {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong updating the Service\"), \"ERROR\");\n }\n })\n .finally(() => {\n if (fetchButton) {\n fetchButton.setFetching(false);\n }\n this.setEnabled(true);\n });\n },\n\n __populateEmptyLayout: function() {\n this._introText.removeAll();\n\n const emptyStudy = new qx.ui.basic.Label(this.tr(\"The Study is empty\")).set({\n font: \"text-14\"\n });\n this._introText.add(emptyStudy);\n },\n\n _populateLayout: function() {\n this._introText.removeAll();\n this._populateIntroText();\n\n this._servicesGrid.removeAll();\n this._populateHeader();\n this._populateRows();\n },\n\n _populateIntroText: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _populateHeader: function() {\n this._servicesGrid.add(new qx.ui.basic.Label(this.tr(\"Name\")).set({\n font: \"title-14\"\n }), {\n row: 0,\n column: this.self().GRID_POS.LABEL\n });\n this.__grid.setRowHeight(0, 24);\n },\n\n _populateRows: function() {\n let i=0;\n const workbench = this._studyData[\"workbench\"];\n for (const nodeId in workbench) {\n i++;\n const node = workbench[nodeId];\n\n const infoButton = new qx.ui.form.Button(null, \"@MaterialIcons/info_outline/14\");\n infoButton.addListener(\"execute\", () => {\n const metadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n if (metadata === null) {\n osparc.FlashMessenger.logAs(this.tr(\"Service information could not be retrieved\"), \"WARNING\");\n return;\n }\n const serviceDetails = new osparc.info.ServiceLarge(metadata, {\n nodeId,\n studyId: this._studyData[\"uuid\"],\n label: node[\"label\"]\n });\n osparc.info.ServiceLarge.popUpInWindow(serviceDetails);\n }, this);\n this._servicesGrid.add(infoButton, {\n row: i,\n column: this.self().GRID_POS.INFO_BUTTON\n });\n\n const labelLabel = new qx.ui.basic.Label(node[\"label\"]).set({\n toolTipText: node[\"label\"],\n font: \"text-14\"\n });\n this._servicesGrid.add(labelLabel, {\n row: i,\n column: this.self().GRID_POS.LABEL\n });\n this.__grid.setRowHeight(i, 24);\n\n const nodeMetadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n if (nodeMetadata === null) {\n osparc.FlashMessenger.logAs(this.tr(\"Some service information could not be retrieved\"), \"WARNING\");\n break;\n }\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2022 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.metadata.ServicesInStudyUpdate\", {\n extend: osparc.metadata.ServicesInStudy,\n\n /**\n * @param studyData {Object|osparc.data.model.Study} studyData (metadata)\n */\n construct: function(studyData) {\n this.base(arguments, studyData);\n\n const grid = this._servicesGrid.getLayout();\n grid.setColumnAlign(this.self().GRID_POS.CURRENT_VERSION, \"center\", \"middle\");\n grid.setColumnAlign(this.self().GRID_POS.COMPATIBLE_VERSION, \"center\", \"middle\");\n },\n\n statics: {\n GRID_POS: {\n ...osparc.metadata.ServicesInStudy.GRID_POS,\n CURRENT_VERSION: Object.keys(osparc.metadata.ServicesInStudy.GRID_POS).length,\n COMPATIBLE_VERSION: Object.keys(osparc.metadata.ServicesInStudy.GRID_POS).length+1,\n UPDATE_BUTTON: Object.keys(osparc.metadata.ServicesInStudy.GRID_POS).length+2\n },\n\n anyServiceDeprecated: function(studyData) {\n if (\"workbench\" in studyData) {\n return osparc.study.Utils.isWorkbenchDeprecated(studyData[\"workbench\"]);\n }\n return false;\n },\n\n anyServiceRetired: function(studyData) {\n if (\"workbench\" in studyData) {\n return osparc.study.Utils.isWorkbenchRetired(studyData[\"workbench\"]);\n }\n return false;\n },\n\n anyServiceInaccessible: function(studyData) {\n if (\"workbench\" in studyData) {\n const inaccessibles = osparc.study.Utils.getInaccessibleServices(studyData[\"workbench\"]);\n return inaccessibles.length;\n }\n return false;\n },\n\n updatableNodeIds: function(workbench) {\n const nodeIds = [];\n for (const nodeId in workbench) {\n const node = workbench[nodeId];\n if (osparc.service.Utils.isUpdatable(node)) {\n nodeIds.push(nodeId);\n }\n }\n return nodeIds;\n },\n\n getLatestVersion: function(studyData, nodeId) {\n if (nodeId in studyData[\"workbench\"]) {\n const node = studyData[\"workbench\"][nodeId];\n if (osparc.service.Utils.isUpdatable(node)) {\n const latestCompatible = osparc.service.Utils.getLatestCompatible(node[\"key\"], node[\"version\"]);\n if (latestCompatible[\"version\"] !== node[\"version\"]) {\n return latestCompatible[\"version\"];\n }\n }\n }\n return null;\n },\n\n colorVersionLabel: function(versionLabel, metadata) {\n const isDeprecated = osparc.service.Utils.isDeprecated(metadata);\n const isRetired = osparc.service.Utils.isRetired(metadata);\n if (isDeprecated) {\n versionLabel.set({\n textColor: \"text-on-warning\", // because the background is always yellow\n backgroundColor: osparc.service.StatusUI.getColor(\"deprecated\"),\n toolTipText: qx.locale.Manager.tr(\"Service deprecated, please update\")\n });\n } else if (isRetired) {\n versionLabel.set({\n textColor: \"text-on-warning\", // because the background is always red\n backgroundColor: osparc.service.StatusUI.getColor(\"retired\"),\n toolTipText: qx.locale.Manager.tr(\"Service retired, please update\")\n });\n }\n }\n },\n\n members: {\n __updateAllButton: null,\n\n _populateIntroText: async function() {\n const canIWrite = osparc.data.model.Study.canIWrite(this._studyData[\"accessRights\"]);\n const labels = [];\n if (this.self().anyServiceInaccessible(this._studyData)) {\n const inaccessibleText = this.tr(\"Some services' information is not accessible. Please contact service owner:\");\n const inaccessibleLabel = new qx.ui.basic.Label(inaccessibleText);\n labels.push(inaccessibleLabel);\n }\n if (this.self().anyServiceDeprecated(this._studyData)) {\n let deprecatedText = this.tr(\"Services marked in yellow are deprecated, they will be retired soon.\");\n if (canIWrite) {\n deprecatedText += \" \" + this.tr(\"They can be updated by pressing the Update button.\");\n }\n const deprecatedLabel = new qx.ui.basic.Label(deprecatedText);\n labels.push(deprecatedLabel);\n }\n if (this.self().anyServiceRetired(this._studyData)) {\n let retiredText = this.tr(\"Services marked in red are retired: you cannot use them anymore.\");\n if (canIWrite) {\n retiredText += \"
\" + this.tr(\"If the Update button is disabled, they might require manual intervention to be updated:\");\n retiredText += \"
- \" + this.tr(\"Open the study\");\n retiredText += \"
- \" + this.tr(\"Click on the retired service, download the data\");\n retiredText += \"
- \" + this.tr(\"Upload the data to an updated version\");\n }\n const retiredLabel = new qx.ui.basic.Label(retiredText);\n labels.push(retiredLabel);\n }\n const updatableServices = this.self().updatableNodeIds(this._studyData[\"workbench\"]);\n if (updatableServices.length === 0) {\n const upToDateText = this.tr(\"All services are up to date to their latest compatible version.\");\n const upToDateLabel = new qx.ui.basic.Label(upToDateText);\n labels.push(upToDateLabel);\n } else if (canIWrite) {\n const useUpdateButtonText = this.tr(\"Use the Update buttons to bring the services to their latest compatible version.\");\n const useUpdateButtonLabel = new qx.ui.basic.Label(useUpdateButtonText);\n labels.push(useUpdateButtonLabel);\n } else {\n const notUpToDateText = this.tr(\"Some services are not up to date.\");\n const notUpToDateLabel = new qx.ui.basic.Label(notUpToDateText);\n labels.push(notUpToDateLabel);\n }\n\n labels.forEach(label => {\n label.set({\n font: \"text-14\",\n rich: true\n });\n this._introText.add(label);\n });\n },\n\n __updateService: async function(nodeId, key, version, button) {\n const latestCompatible = osparc.service.Utils.getLatestCompatible(key, version);\n const patchData = {};\n if (key !== latestCompatible[\"key\"]) {\n patchData[\"key\"] = latestCompatible[\"key\"];\n }\n if (version !== latestCompatible[\"version\"]) {\n patchData[\"version\"] = latestCompatible[\"version\"];\n }\n await this._patchNode(nodeId, patchData, button);\n },\n\n __updateAllServices: async function(updatableNodeIds, button) {\n for (const nodeId of updatableNodeIds) {\n const workbench = this._studyData[\"workbench\"];\n await this.__updateService(nodeId, workbench[nodeId].key, workbench[nodeId].version, button);\n }\n },\n\n _populateHeader: function() {\n this.base(arguments);\n\n this._servicesGrid.add(new qx.ui.basic.Label(this.tr(\"Current\")).set({\n font: \"title-14\"\n }), {\n row: 0,\n column: this.self().GRID_POS.CURRENT_VERSION\n });\n\n this._servicesGrid.add(new qx.ui.basic.Label(this.tr(\"Compatible\")).set({\n font: \"title-14\",\n toolTipText: this.tr(\"Latest compatible version\")\n }), {\n row: 0,\n column: this.self().GRID_POS.COMPATIBLE_VERSION\n });\n\n const updateAllButton = this.__updateAllButton = new osparc.ui.form.FetchButton(this.tr(\"Update all\"), \"@MaterialIcons/update/14\").set({\n appearance: \"form-button\",\n padding: [2, 5],\n visibility: \"excluded\",\n center: true\n });\n this._servicesGrid.add(updateAllButton, {\n row: 0,\n column: this.self().GRID_POS.UPDATE_BUTTON\n });\n },\n\n _populateRows: function() {\n this.base(arguments);\n\n const canIWrite = osparc.data.model.Study.canIWrite(this._studyData[\"accessRights\"]);\n\n let i = 0;\n const workbench = this._studyData[\"workbench\"];\n for (const nodeId in workbench) {\n i++;\n const node = workbench[nodeId];\n const metadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n const currentVersionLabel = new qx.ui.basic.Label(osparc.service.Utils.extractVersionDisplay(metadata)).set({\n font: \"text-14\"\n });\n this.self().colorVersionLabel(currentVersionLabel, metadata);\n this._servicesGrid.add(currentVersionLabel, {\n row: i,\n column: this.self().GRID_POS.CURRENT_VERSION\n });\n\n const compatibleVersionLabel = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n const latestCompatible = osparc.service.Utils.getLatestCompatible(node[\"key\"], node[\"version\"]);\n if (latestCompatible) {\n // updatable\n osparc.store.Services.getService(latestCompatible[\"key\"], latestCompatible[\"version\"])\n .then(latestMetadata => {\n let label = osparc.service.Utils.extractVersionDisplay(latestMetadata)\n if (node[\"key\"] !== latestMetadata[\"key\"]) {\n label = latestMetadata[\"name\"] + \":\" + label;\n }\n compatibleVersionLabel.setValue(label);\n })\n .catch(err => console.error(err));\n } else if (metadata) {\n // up to date\n compatibleVersionLabel.setValue(metadata[\"version\"]);\n } else {\n compatibleVersionLabel.setValue(this.tr(\"Unknown\"));\n }\n this._servicesGrid.add(compatibleVersionLabel, {\n row: i,\n column: this.self().GRID_POS.COMPATIBLE_VERSION\n });\n\n const isUpdatable = osparc.service.Utils.isUpdatable(node);\n if (latestCompatible && canIWrite) {\n const updateButton = new osparc.ui.form.FetchButton(null, \"@MaterialIcons/update/14\");\n updateButton.set({\n enabled: isUpdatable\n });\n if ((latestCompatible[\"key\"] === node[\"key\"]) && (latestCompatible[\"version\"] === node[\"version\"])) {\n updateButton.setLabel(this.tr(\"Up-to-date\"));\n }\n if (isUpdatable) {\n updateButton.set({\n appearance: \"form-button-outlined\",\n padding: [2, 5],\n label: this.tr(\"Update\"),\n center: true\n });\n }\n updateButton.addListener(\"execute\", () => this.__updateService(nodeId, node[\"key\"], node[\"version\"], updateButton), this);\n this._servicesGrid.add(updateButton, {\n row: i,\n column: this.self().GRID_POS.UPDATE_BUTTON\n });\n }\n }\n\n const updatableServices = osparc.metadata.ServicesInStudyUpdate.updatableNodeIds(workbench);\n if (updatableServices.length && canIWrite) {\n const updateAllButton = this.__updateAllButton;\n updateAllButton.show();\n updateAllButton.addListener(\"execute\", () => this.__updateAllServices(updatableServices, updateAllButton), this);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.ResourceUpgradeHelper\", {\n extend: osparc.ui.window.Dialog,\n /**\n * @extends osparc.ui.window.Dialog\n * @param {String} message Message that will be displayed to the user.\n */\n construct: function(message) {\n this.base(arguments, this.tr(\"Outdated services\"));\n\n if (message) {\n this.setMessage(message);\n }\n\n // Secondary action - Left button\n const secondaryButton = this.__secondaryButton = new qx.ui.form.Button();\n secondaryButton.set({\n center: true,\n minWidth: 100\n });\n this.bind(\"secondaryText\", secondaryButton, \"label\");\n secondaryButton.addListener(\"execute\", () => {\n this.setConfirmed(false);\n }, this);\n this.addButton(secondaryButton);\n\n // Primary action - Right button\n const primaryButton = this.__confirmButton = new qx.ui.form.Button();\n primaryButton.set({\n center: true,\n minWidth: 100\n });\n this.bind(\"primaryText\", primaryButton, \"label\");\n primaryButton.addListener(\"execute\", () => {\n this.setConfirmed(true);\n }, this);\n const command = new qx.ui.command.Command(\"Enter\");\n primaryButton.setCommand(command);\n this.addButton(primaryButton);\n },\n\n properties: {\n primaryText: {\n check: \"String\",\n init: \"Yes\",\n event: \"changeConfirmText\"\n },\n\n primaryAction: {\n check: [null, \"create\", \"delete\"],\n init: null,\n nullable: true,\n apply: \"__applyPrimaryAppearance\"\n },\n\n secondaryText: {\n check: \"String\",\n init: \"No\",\n event: \"changeSecondaryText\"\n },\n\n secondaryAction: {\n check: [null, \"primary\", \"secondary\", \"text\"],\n init: null,\n nullable: true,\n apply: \"__applySecondaryAppearance\"\n },\n\n confirmed: {\n check: \"Boolean\",\n init: null,\n event: \"changeConfirmed\"\n }\n },\n\n members: {\n __primaryButton: null,\n __secondaryButton: null,\n\n getPrimaryButton: function() {\n return this.__primaryButton;\n },\n\n getSecondaryButton: function() {\n return this.__secondaryButton;\n },\n\n __applyPrimaryAppearance: function(primaryAction) {\n const primaryBtn = this.__confirmButton;\n switch (primaryAction) {\n case \"create\":\n primaryBtn.setAppearance(\"form-button\");\n break;\n default:\n primaryBtn.resetAppearance();\n break;\n }\n },\n\n __applySecondaryAppearance: function(secondaryAction) {\n const secondBtn = this.__secondaryButton;\n switch (secondaryAction) {\n case \"primary\":\n secondBtn.setAppearance(\"form-button-outlined\");\n break;\n default:\n secondBtn.setAppearance(\"form-button-text\");\n break;\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * SelectBox with its padding and margins adapted to be show inside a qx.ui.toolbar.ToolBar.\n */\nqx.Class.define(\"osparc.ui.toolbar.SelectBox\", {\n extend: qx.ui.form.SelectBox,\n\n construct: function() {\n this.base(arguments);\n },\n\n properties: {\n appearance: {\n refine: true,\n init: \"toolbar-selectbox\"\n }\n },\n\n members : {\n // overridden\n _applyVisibility : function(value, old) {\n this.base(arguments, value, old);\n // trigger a appearance recalculation of the parent\n var parent = this.getLayoutParent();\n if (parent && parent instanceof qx.ui.toolbar.PartContainer) {\n qx.ui.core.queue.Appearance.add(parent);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.CardLarge\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n minHeight: 350,\n padding: this.self().PADDING\n });\n this._setLayout(new qx.ui.layout.VBox(15));\n },\n\n events: {\n \"openAccessRights\": \"qx.event.type.Event\",\n \"openClassifiers\": \"qx.event.type.Event\",\n \"openQuality\": \"qx.event.type.Event\",\n \"openTags\": \"qx.event.type.Event\"\n },\n\n properties: {\n openOptions: {\n check: \"Boolean\",\n init: true,\n nullable: false\n }\n },\n\n statics: {\n WIDTH: 650,\n HEIGHT: 700,\n PADDING: 5,\n EXTRA_INFO_WIDTH: 250,\n THUMBNAIL_MIN_WIDTH: 150,\n THUMBNAIL_MAX_WIDTH: 230\n },\n\n members: {\n _attachHandlers: function() {\n this.addListenerOnce(\"appear\", () => this._rebuildLayout(), this);\n // OM: Not so sure about this one\n // this.addListener(\"resize\", () => this._rebuildLayout(), this);\n },\n\n _rebuildLayout: function() {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.ServiceLarge\", {\n extend: osparc.info.CardLarge,\n\n /**\n * @param metadata {Object} Serialized Service Object\n * @param instance {Object} instance related data\n * @param openOptions {Boolean} open edit options in new window or fire event\n */\n construct: function(metadata, instance = null, openOptions = true) {\n this.base(arguments);\n\n this.setService(metadata);\n\n if (instance) {\n if (\"nodeId\" in instance) {\n this.setNodeId(instance[\"nodeId\"]);\n }\n if (\"label\" in instance) {\n this.setInstanceLabel(instance[\"label\"]);\n }\n if (\"studyId\" in instance) {\n this.setStudyId(instance[\"studyId\"]);\n }\n }\n\n if (openOptions !== undefined) {\n this.setOpenOptions(openOptions);\n }\n\n this._attachHandlers();\n },\n\n events: {\n \"updateService\": \"qx.event.type.Data\"\n },\n\n properties: {\n service: {\n check: \"Object\",\n init: null,\n nullable: false,\n apply: \"_rebuildLayout\"\n },\n\n nodeId: {\n check: \"String\",\n init: null,\n nullable: true\n },\n\n instanceLabel: {\n check: \"String\",\n init: null,\n nullable: true\n },\n\n studyId: {\n check: \"String\",\n init: null,\n nullable: true\n }\n },\n\n statics: {\n popUpInWindow: function(serviceLarge) {\n const metadata = serviceLarge.getService();\n const versionDisplay = osparc.service.Utils.extractVersionDisplay(metadata);\n const title = `${metadata[\"name\"]} ${versionDisplay}`;\n const width = osparc.info.CardLarge.WIDTH;\n const height = osparc.info.CardLarge.HEIGHT;\n osparc.ui.window.Window.popUpInWindow(serviceLarge, title, width, height).set({\n maxHeight: height\n });\n },\n },\n\n members: {\n _rebuildLayout: function() {\n this._removeAll();\n\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));\n\n const deprecated = this.__createDeprecated();\n if (deprecated) {\n vBox.add(deprecated);\n }\n\n const description = this.__createDescription();\n const editInTitle = this.__createViewWithEdit(description.getChildren()[0], this.__openDescriptionEditor);\n description.addAt(editInTitle, 0);\n\n const copyMetadataButton = new qx.ui.form.Button(this.tr(\"Copy Raw metadata\"), \"@FontAwesome5Solid/copy/12\").set({\n allowGrowX: false\n });\n copyMetadataButton.addListener(\"execute\", () => osparc.utils.Utils.copyTextToClipboard(osparc.utils.Utils.prettifyJson(this.getService())), this);\n\n if (\n this.getService()[\"descriptionUi\"] &&\n !osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"]) &&\n description.getChildren().length > 1\n ) {\n // Show also the copy Id buttons too\n const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n if (this.getNodeId()) {\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n const copyStudyIdButton = new qx.ui.form.Button(this.tr(`Copy ${studyAlias} Id`), \"@FontAwesome5Solid/copy/12\").set({\n toolTipText: qx.locale.Manager.tr(\"Copy to clipboard\"),\n });\n copyStudyIdButton.addListener(\"execute\", this.__copyStudyIdToClipboard, this);\n buttonsLayout.add(copyStudyIdButton);\n vBox.add(buttonsLayout);\n\n const copyNodeIdButton = new qx.ui.form.Button(this.tr(\"Copy Service Id\"), \"@FontAwesome5Solid/copy/12\").set({\n toolTipText: qx.locale.Manager.tr(\"Copy to clipboard\"),\n });\n copyNodeIdButton.addListener(\"execute\", this.__copyNodeIdToClipboard, this);\n buttonsLayout.add(copyNodeIdButton);\n vBox.add(buttonsLayout);\n }\n // Also copyMetadataButton if tester\n if (osparc.data.Permissions.getInstance().isTester()) {\n buttonsLayout.add(copyMetadataButton);\n vBox.add(buttonsLayout);\n }\n // Show description only\n vBox.add(description.getChildren()[1]);\n } else {\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n const icon = this.__createIcon();\n const iconLayout = this.__createViewWithEdit(icon, this.__openIconEditor);\n hBox.add(iconLayout);\n const title = this.__createName();\n const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);\n hBox.add(titleLayout);\n vBox.add(hBox);\n\n const extraInfo = this.__extraInfo();\n const extraInfoLayout = this.__createExtraInfo(extraInfo);\n const bounds = this.getBounds();\n const offset = 30;\n const maxThumbnailHeight = extraInfo.length*20;\n let widgetWidth = bounds ? bounds.width - offset : 500 - offset;\n let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING - osparc.info.CardLarge.EXTRA_INFO_WIDTH;\n thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH);\n const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight);\n const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor);\n thumbnailLayout.getLayout().set({\n alignX: \"center\"\n });\n const infoAndThumbnail = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({\n alignX: \"center\"\n }));\n infoAndThumbnail.add(extraInfoLayout);\n infoAndThumbnail.add(thumbnailLayout, {\n flex: 1\n });\n vBox.add(infoAndThumbnail);\n\n if (osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"])) {\n const descriptionUi = this.__createDescriptionUi();\n if (descriptionUi) {\n vBox.add(descriptionUi);\n }\n }\n vBox.add(description);\n\n if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const resources = this.__createResources();\n if (resources) {\n vBox.add(resources);\n }\n }\n vBox.add(copyMetadataButton);\n }\n\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(vBox);\n this._add(scrollContainer, {\n flex: 1\n });\n },\n\n __createViewWithEdit: function(view, cb) {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n layout.add(view);\n if (osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"])) {\n const editBtn = osparc.utils.Utils.getEditButton();\n editBtn.addListener(\"execute\", () => cb.call(this), this);\n layout.add(editBtn);\n }\n\n return layout;\n },\n\n __createDeprecated: function() {\n const isDeprecated = osparc.service.Utils.isDeprecated(this.getService());\n const isRetired = osparc.service.Utils.isRetired(this.getService());\n if (isDeprecated) {\n return osparc.service.StatusUI.createServiceDeprecatedChip();\n } else if (isRetired) {\n return osparc.service.StatusUI.createServiceRetiredChip();\n }\n return null;\n },\n\n __createIcon: function() {\n const serviceIcon = this.getService()[\"icon\"] || \"osparc/no_photography_black_24dp.svg\";\n const icon = osparc.dashboard.CardBase.createCardIcon().set({\n source: serviceIcon,\n });\n osparc.utils.Utils.setAltToImage(icon.getChildControl(\"image\"), \"card-icon\");\n return icon;\n },\n\n __createName: function() {\n const serviceName = this.getService()[\"name\"];\n let text = \"\";\n if (this.getInstanceLabel()) {\n text = `${this.getInstanceLabel()} [${serviceName}]`;\n } else {\n text = serviceName;\n }\n const title = osparc.info.ServiceUtils.createTitle(text).set({\n font: \"text-14\"\n });\n return title;\n },\n\n __extraInfo: function() {\n const extraInfo = [];\n\n if (this.getNodeId()) {\n extraInfo.push({\n label: this.tr(\"SERVICE ID\"),\n view: this.__createNodeId(),\n action: {\n button: osparc.utils.Utils.getCopyButton(),\n callback: this.__copyNodeIdToClipboard,\n ctx: this\n }\n });\n }\n\n extraInfo.push({\n label: this.tr(\"KEY\"),\n view: this.__createKey(),\n action: {\n button: osparc.utils.Utils.getCopyButton(),\n callback: this.__copyKeyToClipboard,\n ctx: this\n }\n });\n\n if (osparc.data.Permissions.getInstance().isTester() || osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"])) {\n extraInfo.push({\n label: this.tr(\"INTEGRATION VERSION\"),\n view: this.__createIntegrationVersion(),\n action: null\n });\n }\n\n extraInfo.push({\n label: this.tr(\"VERSION\"),\n view: this.__createDisplayVersion(),\n action: {\n button: osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"]) ? osparc.utils.Utils.getEditButton() : null,\n callback: this.__openVersionDisplayEditor,\n ctx: this\n }\n }, {\n label: this.tr(\"RELEASE DATE\"),\n view: this.__createReleasedDate(),\n action: null\n }, {\n label: this.tr(\"CONTACT\"),\n view: this.__createContact(),\n action: null\n }, {\n label: this.tr(\"AUTHORS\"),\n view: this.__createAuthors(),\n action: null\n }, {\n label: this.tr(\"ACCESS RIGHTS\"),\n view: this.__createAccessRights(),\n action: {\n button: osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"]) ? osparc.utils.Utils.getEditButton() : null,\n callback: this.isOpenOptions() ? this.__openAccessRights : \"openAccessRights\",\n ctx: this\n }\n });\n\n if (\n osparc.product.Utils.showClassifiers() &&\n this.getService()[\"classifiers\"]\n ) {\n extraInfo.push({\n label: this.tr(\"CLASSIFIERS\"),\n view: this.__createClassifiers(),\n action: {\n button: osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"]) ? osparc.utils.Utils.getEditButton() : null,\n callback: this.isOpenOptions() ? this.__openClassifiers : \"openClassifiers\",\n ctx: this\n }\n });\n }\n\n if (\n osparc.product.Utils.showQuality() &&\n this.getService()[\"quality\"] &&\n osparc.metadata.Quality.isEnabled(this.getService()[\"quality\"])\n ) {\n extraInfo.push({\n label: this.tr(\"QUALITY\"),\n view: this.__createQuality(),\n action: {\n button: osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"]) ? osparc.utils.Utils.getEditButton() : null,\n callback: this.isOpenOptions() ? this.__openQuality : \"openQuality\",\n ctx: this\n }\n });\n }\n\n return extraInfo;\n },\n\n __createExtraInfo: function(extraInfo) {\n const moreInfo = osparc.info.Utils.extraInfosToGrid(extraInfo).set({\n width: osparc.info.CardLarge.EXTRA_INFO_WIDTH\n });\n return moreInfo;\n },\n\n __createNodeId: function() {\n return osparc.info.ServiceUtils.createNodeId(this.getNodeId());\n },\n\n __createKey: function() {\n return osparc.info.ServiceUtils.createKey(this.getService()[\"key\"]);\n },\n\n __createIntegrationVersion: function() {\n return osparc.info.ServiceUtils.createVersion(this.getService()[\"version\"]);\n },\n\n __createDisplayVersion: function() {\n return osparc.info.ServiceUtils.createVersionDisplay(this.getService()[\"key\"], this.getService()[\"version\"]);\n },\n\n __createReleasedDate: function() {\n return osparc.info.ServiceUtils.createReleasedDate(this.getService()[\"key\"], this.getService()[\"version\"]);\n },\n\n __createContact: function() {\n return osparc.info.ServiceUtils.createContact(this.getService());\n },\n\n __createAuthors: function() {\n return osparc.info.ServiceUtils.createAuthors(this.getService());\n },\n\n __createAccessRights: function() {\n return osparc.info.ServiceUtils.createAccessRights(this.getService());\n },\n\n __createClassifiers: function() {\n return osparc.info.ServiceUtils.createClassifiers(this.getService());\n },\n\n __createQuality: function() {\n return osparc.info.ServiceUtils.createQuality(this.getService());\n },\n\n __createThumbnail: function(maxWidth, maxHeight = 160) {\n const serviceData = this.getService();\n const thumbnail = osparc.info.Utils.createThumbnail(maxWidth, maxHeight);\n if (serviceData[\"thumbnail\"]) {\n thumbnail.set({\n source: serviceData[\"thumbnail\"]\n });\n } else {\n const noThumbnail = \"osparc/no_photography_black_24dp.svg\";\n thumbnail.set({\n source: noThumbnail\n });\n thumbnail.getChildControl(\"image\").set({\n minWidth: Math.max(120, maxWidth),\n minHeight: Math.max(139, maxHeight)\n });\n }\n return thumbnail;\n },\n\n __createDescriptionUi: function() {\n const cbAutoPorts = new qx.ui.form.CheckBox().set({\n label: this.tr(\"Show Description only\"),\n toolTipText: this.tr(\"From all the metadata shown in this view,\\nonly the Description will be shown to Users.\"),\n iconPosition: \"right\",\n });\n cbAutoPorts.setValue(Boolean(this.getService()[\"descriptionUi\"]));\n cbAutoPorts.addListener(\"changeValue\", e => {\n this.__patchService(\"descriptionUi\", e.getData());\n });\n return cbAutoPorts;\n },\n\n __createDescription: function() {\n return osparc.info.ServiceUtils.createDescription(this.getService());\n },\n\n __createResources: function() {\n const resourcesLayout = osparc.info.ServiceUtils.createResourcesInfoCompact();\n resourcesLayout.exclude();\n let promise = null;\n if (this.getNodeId()) {\n const params = {\n url: {\n studyId: this.getStudyId(),\n nodeId: this.getNodeId()\n }\n };\n promise = osparc.data.Resources.get(\"nodesInStudyResources\", params);\n } else {\n promise = osparc.store.Services.getResources(this.getService()[\"key\"], this.getService()[\"version\"])\n }\n promise\n .then(serviceResources => {\n resourcesLayout.show();\n osparc.info.ServiceUtils.resourcesToResourcesInfoCompact(resourcesLayout, serviceResources);\n })\n .catch(err => console.error(err));\n return resourcesLayout;\n },\n\n __createRawMetadata: function() {\n const container = new qx.ui.container.Scroll();\n container.add(new osparc.ui.basic.JsonTreeWidget(this.getService(), \"serviceDescriptionSettings\"));\n return container;\n },\n\n __openIconEditor: function() {\n const iconEditor = new osparc.widget.Renamer(this.getService()[\"icon\"], null, this.tr(\"Edit Icon\"));\n iconEditor.addListener(\"labelChanged\", e => {\n iconEditor.close();\n const newIcon = e.getData()[\"newLabel\"];\n this.__patchService(\"icon\", newIcon);\n }, this);\n iconEditor.center();\n iconEditor.open();\n },\n\n __openTitleEditor: function() {\n const titleEditor = new osparc.widget.Renamer(this.getService()[\"name\"], null, this.tr(\"Edit Name\"));\n titleEditor.addListener(\"labelChanged\", e => {\n titleEditor.close();\n const newLabel = e.getData()[\"newLabel\"];\n this.__patchService(\"name\", newLabel);\n }, this);\n titleEditor.center();\n titleEditor.open();\n },\n\n __copyStudyIdToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getStudyId());\n },\n\n __copyNodeIdToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getNodeId());\n },\n\n __copyKeyToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getService()[\"key\"]);\n },\n\n __openVersionDisplayEditor: function() {\n const title = this.tr(\"Edit Version Display\");\n const oldVersionDisplay = osparc.service.Utils.extractVersionDisplay(this.getService());\n const versionDisplayEditor = new osparc.widget.Renamer(oldVersionDisplay, null, title);\n versionDisplayEditor.addListener(\"labelChanged\", e => {\n versionDisplayEditor.close();\n const newVersionDisplay = e.getData()[\"newLabel\"];\n this.__patchService(\"versionDisplay\", newVersionDisplay);\n }, this);\n versionDisplayEditor.center();\n versionDisplayEditor.open();\n },\n\n __openAccessRights: function() {\n const permissionsView = osparc.info.ServiceUtils.openAccessRights(this.getService());\n permissionsView.addListener(\"updateAccessRights\", e => {\n const updatedServiceData = e.getData();\n this.setService(updatedServiceData);\n this.fireDataEvent(\"updateService\", updatedServiceData);\n }, this);\n },\n\n __openClassifiers: function() {\n const title = this.tr(\"Classifiers\");\n let classifiers = null;\n if (osparc.service.Utils.canIWrite(this.getService()[\"accessRights\"])) {\n classifiers = new osparc.metadata.ClassifiersEditor(this.getService());\n const win = osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);\n classifiers.addListener(\"updateClassifiers\", e => {\n win.close();\n const updatedServiceData = e.getData();\n this.setService(updatedServiceData);\n this.fireDataEvent(\"updateService\", updatedServiceData);\n }, this);\n } else {\n classifiers = new osparc.metadata.ClassifiersViewer(this.getService());\n osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);\n }\n },\n\n __openQuality: function() {\n const qualityEditor = osparc.info.ServiceUtils.openQuality(this.getService());\n qualityEditor.addListener(\"updateQuality\", e => {\n const updatedServiceData = e.getData();\n this.setService(updatedServiceData);\n this.fireDataEvent(\"updateService\", updatedServiceData);\n });\n },\n\n __openThumbnailEditor: function() {\n const title = this.tr(\"Edit Thumbnail\");\n const thumbnailEditor = new osparc.editor.ThumbnailEditor(this.getService()[\"thumbnail\"]);\n const win = osparc.ui.window.Window.popUpInWindow(thumbnailEditor, title, 300, 115);\n thumbnailEditor.addListener(\"updateThumbnail\", e => {\n win.close();\n const validUrl = e.getData();\n this.__patchService(\"thumbnail\", validUrl);\n }, this);\n thumbnailEditor.addListener(\"cancel\", () => win.close());\n },\n\n __openDescriptionEditor: function() {\n const title = this.tr(\"Edit Description\");\n const textEditor = new osparc.editor.MarkdownEditor(this.getService()[\"description\"]);\n const win = osparc.ui.window.Window.popUpInWindow(textEditor, title, 400, 300);\n textEditor.addListener(\"textChanged\", e => {\n win.close();\n const newDescription = e.getData();\n this.__patchService(\"description\", newDescription);\n }, this);\n textEditor.addListener(\"cancel\", () => {\n win.close();\n }, this);\n },\n\n __patchService: function(key, value) {\n this.setEnabled(false);\n const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.getService());\n osparc.store.Services.patchServiceData(serviceDataCopy, key, value)\n .then(() => {\n this.setService(serviceDataCopy);\n this.fireDataEvent(\"updateService\", this.getService());\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"There was an error while updating the information.\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => this.setEnabled(true));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.StudyLarge\", {\n extend: osparc.info.CardLarge,\n\n /**\n * @param study {osparc.data.model.Study} Study model\n * @param openOptions {Boolean} open edit options in new window or fire event\n */\n construct: function(study, openOptions = true) {\n this.base(arguments);\n\n this.setStudy(study);\n if (\"resourceType\" in study) {\n this.__isTemplate = study[\"resourceType\"] === \"template\";\n }\n\n if (openOptions !== undefined) {\n this.setOpenOptions(openOptions);\n }\n\n this._attachHandlers();\n },\n\n events: {\n \"updateStudy\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false\n }\n },\n\n members: {\n __isTemplate: null,\n\n __canIWrite: function() {\n return osparc.data.model.Study.canIWrite(this.getStudy().getAccessRights());\n },\n\n _rebuildLayout: function() {\n this._removeAll();\n\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n\n const infoElements = this.__infoElements();\n const infoLayout = osparc.info.StudyUtils.infoElementsToLayout(infoElements);\n vBox.add(infoLayout);\n\n let text = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + \" Id\";\n if (this.__isTemplate) {\n text = osparc.product.Utils.getTemplateAlias({firstUpperCase: true}) + \" Id\";\n }\n const copyIdButton = new qx.ui.form.Button(null, \"@FontAwesome5Solid/copy/12\").set({\n label: text,\n toolTipText: \"Copy \" + text,\n marginTop: 15,\n allowGrowX: false\n });\n copyIdButton.addListener(\"execute\", () => osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid()));\n vBox.add(copyIdButton);\n\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(vBox);\n\n this._add(scrollContainer, {\n flex: 1\n });\n },\n\n __infoElements: function() {\n const infoLayout = {\n \"TITLE\": {\n label: this.tr(\"Title:\"),\n view: osparc.info.StudyUtils.createTitle(this.getStudy()),\n action: {\n button: osparc.utils.Utils.getEditButton(this.__canIWrite()),\n callback: this.__canIWrite() ? this.__openTitleEditor : null,\n ctx: this\n }\n },\n \"THUMBNAIL\": {\n label: this.tr(\"Thumbnail:\"),\n view: this.__createThumbnail(),\n action: {\n button: osparc.utils.Utils.getEditButton(this.__canIWrite()),\n callback: this.__canIWrite() ? this.__openThumbnailEditor : null,\n ctx: this\n }\n },\n \"DESCRIPTION\": {\n label: this.tr(\"Description:\"),\n view: osparc.info.StudyUtils.createDescriptionMD(this.getStudy(), 150),\n action: {\n button: osparc.utils.Utils.getEditButton(this.__canIWrite()),\n callback: this.__canIWrite() ? this.__openDescriptionEditor : null,\n ctx: this\n }\n },\n \"AUTHOR\": {\n label: this.tr(\"Author:\"),\n view: osparc.info.StudyUtils.createOwner(this.getStudy()),\n action: null\n },\n \"ACCESS_RIGHTS\": {\n label: this.tr(\"Access:\"),\n view: osparc.info.StudyUtils.createAccessRights(this.getStudy()),\n action: {\n button: osparc.utils.Utils.getLinkButton(this.__canIWrite()),\n callback: this.isOpenOptions() ? this.__openAccessRights : \"openAccessRights\",\n ctx: this\n }\n },\n \"CREATED\": {\n label: this.tr(\"Created:\"),\n view: osparc.info.StudyUtils.createCreationDate(this.getStudy()),\n action: null\n },\n \"MODIFIED\": {\n label: this.tr(\"Modified:\"),\n view: osparc.info.StudyUtils.createLastChangeDate(this.getStudy()),\n action: null\n },\n \"TAGS\": {\n label: this.tr(\"Tags:\"),\n view: osparc.info.StudyUtils.createTags(this.getStudy()),\n action: {\n button: osparc.utils.Utils.getLinkButton(this.__canIWrite()),\n callback: this.isOpenOptions() ? this.__openTagsEditor : \"openTags\",\n ctx: this\n }\n }\n };\n\n if (\n osparc.product.Utils.showQuality() &&\n this.getStudy().getQuality() &&\n osparc.metadata.Quality.isEnabled(this.getStudy().getQuality())\n ) {\n infoLayout[\"QUALITY\"] = {\n label: this.tr(\"Quality:\"),\n view: osparc.info.StudyUtils.createQuality(this.getStudy()),\n action: {\n button: osparc.utils.Utils.getLinkButton(),\n callback: this.isOpenOptions() ? this.__openQuality : \"openQuality\",\n ctx: this\n }\n };\n }\n\n if (osparc.product.Utils.showClassifiers()) {\n infoLayout[\"CLASSIFIERS\"] = {\n label: this.tr(\"Classifiers:\"),\n view: osparc.info.StudyUtils.createClassifiers(this.getStudy()),\n action: (this.getStudy().getClassifiers().length || this.__canIWrite()) ? {\n button: osparc.utils.Utils.getLinkButton(),\n callback: this.isOpenOptions() ? this.__openClassifiers : \"openClassifiers\",\n ctx: this\n } : null\n };\n }\n\n if (!this.__isTemplate) {\n const pathLabel = new qx.ui.basic.Label();\n pathLabel.setValue(this.getStudy().getLocationString());\n infoLayout[\"LOCATION\"] = {\n label: this.tr(\"Location:\"),\n view: pathLabel,\n action: null\n };\n }\n\n return infoLayout;\n },\n\n __createStudyId: function() {\n return osparc.info.StudyUtils.createUuid(this.getStudy());\n },\n\n __createThumbnail: function(maxWidth = 190, maxHeight = 220) {\n const thumb = osparc.info.StudyUtils.createThumbnail(this.getStudy(), maxWidth, maxHeight);\n thumb.set({\n maxWidth: 120,\n maxHeight: 139\n });\n thumb.getChildControl(\"image\").set({\n width: 120,\n height: 139,\n scale: true,\n });\n\n return thumb;\n },\n\n __openTitleEditor: function() {\n const title = this.tr(\"Edit Title\");\n const titleEditor = new osparc.widget.Renamer(this.getStudy().getName(), null, title);\n titleEditor.addListener(\"labelChanged\", e => {\n titleEditor.close();\n const newLabel = e.getData()[\"newLabel\"];\n this.__patchStudy(\"name\", newLabel);\n }, this);\n titleEditor.center();\n titleEditor.open();\n },\n\n __openAccessRights: function() {\n const studyData = this.getStudy().serialize();\n studyData[\"resourceType\"] = this.__isTemplate ? \"template\" : \"study\";\n const permissionsView = osparc.info.StudyUtils.openAccessRights(studyData);\n permissionsView.addListener(\"updateAccessRights\", e => {\n const updatedData = e.getData();\n this.getStudy().setAccessRights(updatedData[\"accessRights\"]);\n this.fireDataEvent(\"updateStudy\", updatedData);\n }, this);\n },\n\n __openClassifiers: function() {\n const title = this.tr(\"Classifiers\");\n let classifiers = null;\n if (this.__canIWrite()) {\n classifiers = new osparc.metadata.ClassifiersEditor(this.getStudy().serialize());\n const win = osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);\n classifiers.addListener(\"updateClassifiers\", e => {\n win.close();\n const updatedData = e.getData();\n this.getStudy().setClassifiers(updatedData[\"classifiers\"]);\n this.fireDataEvent(\"updateStudy\", updatedData);\n }, this);\n } else {\n classifiers = new osparc.metadata.ClassifiersViewer(this.getStudy().serialize());\n osparc.ui.window.Window.popUpInWindow(classifiers, title, 400, 400);\n }\n },\n\n __openQuality: function() {\n const qualityEditor = osparc.info.StudyUtils.openQuality(this.getStudy().serialize());\n qualityEditor.addListener(\"updateQuality\", e => {\n const updatedData = e.getData();\n this.getStudy().setQuality(updatedData[\"quality\"]);\n this.fireDataEvent(\"updateStudy\", updatedData);\n });\n },\n\n __openTagsEditor: function() {\n const tagManager = new osparc.form.tag.TagManager(this.getStudy().serialize());\n const win = osparc.form.tag.TagManager.popUpInWindow(tagManager);\n tagManager.addListener(\"updateTags\", e => {\n win.close();\n const updatedData = e.getData();\n this.getStudy().setTags(updatedData[\"tags\"]);\n this.fireDataEvent(\"updateStudy\", updatedData);\n }, this);\n },\n\n __openThumbnailEditor: function() {\n osparc.editor.ThumbnailSuggestions.extractThumbnailSuggestions(this.getStudy())\n .then(suggestions => {\n const title = this.tr(\"Edit Thumbnail\");\n const oldThumbnail = this.getStudy().getThumbnail();\n const thumbnailEditor = new osparc.editor.ThumbnailEditor(oldThumbnail, suggestions);\n const win = osparc.ui.window.Window.popUpInWindow(thumbnailEditor, title, suggestions.length > 2 ? 500 : 350, suggestions.length ? 280 : 115);\n thumbnailEditor.addListener(\"updateThumbnail\", e => {\n win.close();\n const validUrl = e.getData();\n this.__patchStudy(\"thumbnail\", validUrl);\n }, this);\n thumbnailEditor.addListener(\"cancel\", () => win.close());\n })\n .catch(err => console.error(err));\n },\n\n __openDescriptionEditor: function() {\n const title = this.tr(\"Edit Description\");\n const textEditor = new osparc.editor.MarkdownEditor(this.getStudy().getDescription());\n textEditor.setMaxHeight(570);\n const win = osparc.ui.window.Window.popUpInWindow(textEditor, title, 400, 300);\n textEditor.addListener(\"textChanged\", e => {\n win.close();\n const newDescription = e.getData();\n this.__patchStudy(\"description\", newDescription);\n }, this);\n textEditor.addListener(\"cancel\", () => {\n win.close();\n }, this);\n },\n\n __patchStudy: function(fieldKey, value) {\n this.getStudy().patchStudy({[fieldKey]: value})\n .then(studyData => {\n studyData[\"resourceType\"] = this.__isTemplate ? \"template\" : \"study\";\n this.fireDataEvent(\"updateStudy\", studyData);\n qx.event.message.Bus.getInstance().dispatchByName(\"updateStudy\", studyData);\n if (this.__isTemplate) {\n // reload templates\n osparc.data.Resources.get(\"templates\", {}, false)\n }\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"There was an error while updating the information.\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.BillingSettings\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyData {Object} Object containing part or the entire serialized Study Data\n */\n construct: function(studyData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__studyData = studyData;\n\n this.__buildLayout();\n },\n\n events: {\n \"debtPayed\": \"qx.event.type.Event\",\n },\n\n members: {\n __studyData: null,\n __studyWalletId: null,\n __debtMessage: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"credit-account-box\":\n control = osparc.study.StudyOptions.createGroupBox(this.tr(\"Credit Account\"));\n this._add(control);\n break;\n case \"wallet-selector\":\n control = osparc.desktop.credits.Utils.createWalletSelector(\"read\");\n this.getChildControl(\"credit-account-box\").add(control);\n break;\n case \"pay-debt-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\",\n }));\n this.getChildControl(\"credit-account-box\").add(control);\n break;\n case \"debt-explanation\":\n control = new qx.ui.basic.Label().set({\n rich: true,\n wrap: true,\n });\n this.getChildControl(\"pay-debt-layout\").add(control);\n break;\n case \"buy-credits-button\":\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Buy Credits\"),\n icon: \"@FontAwesome5Solid/dollar-sign/14\",\n allowGrowX: false\n });\n this.getChildControl(\"pay-debt-layout\").add(control);\n break;\n case \"transfer-debt-button\":\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Transfer from this Credit Account\"),\n icon: \"@FontAwesome5Solid/exchange-alt/14\",\n allowGrowX: false\n });\n this.getChildControl(\"pay-debt-layout\").add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n if (osparc.study.Utils.isInDebt(this.__studyData)) {\n this.__buildDebtMessage();\n }\n this.__buildWalletGroup();\n this.__buildPricingUnitsGroup();\n },\n\n __buildDebtMessage: function() {\n const border = new qx.ui.decoration.Decorator().set({\n radius: 4,\n width: 1,\n style: \"solid\",\n color: \"danger-red\",\n });\n const studyAlias = osparc.product.Utils.getStudyAlias();\n let msg = this.tr(`This ${studyAlias} is currently Embargoed.
`);\n msg += this.tr(\"Last charge:\") + \"
\";\n msg += this.__studyData[\"debt\"] + \" \" + this.tr(\"credits\");\n const debtMessage = this.__debtMessage = new qx.ui.basic.Label(msg).set({\n decorator: border,\n font: \"text-14\",\n rich: true,\n padding: 10,\n marginBottom: 5,\n });\n this._add(debtMessage);\n },\n\n __buildWalletGroup: function() {\n const boxContent = this.getChildControl(\"credit-account-box\");\n\n const walletSelector = this.getChildControl(\"wallet-selector\");\n\n const paramsGet = {\n url: {\n studyId: this.__studyData[\"uuid\"]\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"getWallet\", paramsGet)\n .then(wallet => {\n if (wallet) {\n this.__studyWalletId = wallet[\"walletId\"];\n const walletFound = walletSelector.getSelectables().find(selectables => selectables.walletId === wallet[\"walletId\"]);\n if (walletFound) {\n walletSelector.setSelection([walletFound]);\n if (osparc.study.Utils.isInDebt(this.__studyData)) {\n this.__addDebtLayout(wallet[\"walletId\"]);\n }\n } else {\n const emptyItem = new qx.ui.form.ListItem(\"\");\n emptyItem.walletId = null;\n walletSelector.add(emptyItem);\n walletSelector.setSelection([emptyItem]);\n const label = new qx.ui.basic.Label(this.tr(\"You don't have access to the last used Credit Account\"));\n boxContent.add(label);\n }\n }\n })\n .finally(() => {\n walletSelector.addListener(\"changeSelection\", () => {\n const wallet = this.__getSelectedWallet();\n if (wallet) {\n const walletId = wallet.getWalletId();\n if (osparc.study.Utils.isInDebt(this.__studyData)) {\n this.__addDebtLayout(walletId);\n } else {\n this.__switchWallet(walletId);\n }\n }\n });\n });\n },\n\n __getSelectedWallet: function() {\n const walletSelector = this.getChildControl(\"wallet-selector\");\n const selection = walletSelector.getSelection();\n if (selection.length) {\n const walletId = selection[0].walletId;\n if (walletId) {\n const wallet = osparc.desktop.credits.Utils.getWallet(walletId);\n if (wallet) {\n return wallet;\n }\n }\n }\n return null;\n },\n\n __getStudyWallet: function() {\n if (this.__studyWalletId) {\n const wallet = osparc.desktop.credits.Utils.getWallet(this.__studyWalletId);\n if (wallet) {\n return wallet;\n }\n }\n return null;\n },\n\n __addDebtLayout: function(walletId) {\n const payDebtLayout = this.getChildControl(\"pay-debt-layout\");\n payDebtLayout.removeAll();\n\n const wallet = osparc.desktop.credits.Utils.getWallet(walletId);\n const myWallets = osparc.desktop.credits.Utils.getMyWallets();\n if (myWallets.find(wllt => wllt === wallet)) {\n // It's my wallet\n this._createChildControlImpl(\"debt-explanation\").set({\n value: this.tr(\"Top up the Credit Account:
Purchase additional credits to bring the Credit Account balance back to a positive value.\")\n });\n const buyCreditsButton = this._createChildControlImpl(\"buy-credits-button\");\n buyCreditsButton.addListener(\"execute\", () => this.__openBuyCreditsWindow(), this);\n } else {\n // It's a shared wallet\n this._createChildControlImpl(\"debt-explanation\").set({\n value: this.tr(\"Transfer credits from another Account:
Use this Credit Account to cover the negative balance.\")\n });\n const transferDebtButton = this._createChildControlImpl(\"transfer-debt-button\");\n transferDebtButton.addListener(\"execute\", () => this.__transferCredits(), this);\n }\n },\n\n __openBuyCreditsWindow: function() {\n const wallet = this.__getSelectedWallet();\n if (wallet) {\n osparc.desktop.credits.Utils.getPaymentMethods(wallet.getWalletId())\n .then(paymentMethods => {\n const {\n buyCreditsWidget\n } = osparc.desktop.credits.Utils.openBuyCredits(paymentMethods);\n buyCreditsWidget.addListener(\"completed\", () => {\n // at this point we can assume that the study got unblocked\n this.__debtPayed();\n })\n });\n }\n },\n\n __transferCredits: function() {\n const originWallet = this.__getSelectedWallet();\n const destWallet = this.__getStudyWallet();\n let msg = this.tr(\"A credits transfer will be initiated to cover the negative balance:\");\n msg += \"
- \" + this.tr(\"Credits to transfer: \") + -1*this.__studyData[\"debt\"];\n msg += \"
- \" + this.tr(\"From: \") + originWallet.getName();\n msg += \"
- \" + this.tr(\"To: \") + destWallet.getName();\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n confirmText: this.tr(\"Transfer\"),\n });\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__doTransferCredits();\n }\n }, this);\n },\n\n __doTransferCredits: function() {\n const wallet = this.__getSelectedWallet();\n const params = {\n url: {\n studyId: this.__studyData[\"uuid\"],\n walletId: wallet.getWalletId(),\n },\n data: {\n amount: this.__studyData[\"debt\"],\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"payDebt\", params)\n .then(() => {\n // at this point we can assume that the study got unblocked\n this.__debtPayed();\n // also switch the study's wallet to this one\n this.__switchWallet(wallet.getWalletId());\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n },\n\n __debtPayed: function() {\n delete this.__studyData[\"debt\"];\n osparc.store.Store.getInstance().setStudyDebt(this.__studyData[\"uuid\"], 0);\n this.fireEvent(\"debtPayed\");\n if (this.__debtMessage) {\n this._remove(this.__debtMessage);\n }\n this.getChildControl(\"pay-debt-layout\").removeAll();\n },\n\n __switchWallet: function(walletId) {\n const creditAccountBox = this.getChildControl(\"credit-account-box\");\n creditAccountBox.setEnabled(false);\n const paramsPut = {\n url: {\n studyId: this.__studyData[\"uuid\"],\n walletId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"selectWallet\", paramsPut)\n .then(() => {\n this.__studyWalletId = walletId;\n const msg = this.tr(\"Credit Account saved\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => {\n creditAccountBox.setEnabled(true);\n });\n },\n\n __buildPricingUnitsGroup: function() {\n const pricingUnitsLayout = osparc.study.StudyOptions.createGroupBox(this.tr(\"Tiers\"));\n const pricingUnits = new osparc.study.StudyPricingUnits(this.__studyData);\n pricingUnitsLayout.add(pricingUnits);\n this._add(pricingUnitsLayout);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.service.PricingUnitsList\", {\n extend: qx.ui.core.Widget,\n\n construct: function(serviceMetadata) {\n this.base(arguments);\n\n this.__serviceMetadata = serviceMetadata;\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.getChildControl(\"pricing-units-container\");\n\n this.__fetchUnits();\n },\n\n members: {\n __serviceMetadata: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"pricing-units-container\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._addAt(control, 0, {\n flex: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __fetchUnits: function() {\n osparc.store.Pricing.getInstance().fetchPricingPlansService(this.__serviceMetadata[\"key\"], this.__serviceMetadata[\"version\"])\n .then(data => this.__populateList(data[\"pricingUnits\"]))\n .catch(err => {\n console.error(err);\n this.__populateList([]);\n });\n },\n\n __populateList: function(pricingUnitsData) {\n this.getChildControl(\"pricing-units-container\").removeAll();\n\n if (pricingUnitsData.length) {\n const pUnits = new osparc.study.PricingUnitTiers(pricingUnitsData, null, false);\n this.getChildControl(\"pricing-units-container\").add(pUnits);\n } else {\n const notFound = new qx.ui.basic.Label().set({\n value: this.tr(\"No Tiers found\"),\n font: \"text-14\"\n });\n this.getChildControl(\"pricing-units-container\").add(notFound);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.StudyPreview\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param study {osparc.data.model.Study} Study model\n */\n construct: function(study) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.__study = study;\n\n this.__buildPreview();\n },\n\n members: {\n __study: null,\n\n __buildPreview: function() {\n const study = this.__study;\n const uiMode = study.getUi().getMode();\n if (uiMode === \"workbench\" && !study.isPipelineEmpty()) {\n const workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview();\n workbenchUIPreview.setStudy(study);\n workbenchUIPreview.loadModel(study.getWorkbench());\n workbenchUIPreview.setMaxHeight(550);\n this._add(workbenchUIPreview);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.CommentsList\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyId {String} Study Id\n */\n construct: function(studyId) {\n this.base(arguments);\n\n this.__studyId = studyId;\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__buildLayout();\n\n this.fetchComments();\n },\n\n members: {\n __nextRequestParams: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"title\":\n control = new qx.ui.basic.Label().set({\n value: this.tr(\"0 Comments\")\n });\n this._add(control);\n break;\n case \"comments-list\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n alignY: \"middle\"\n });\n this._add(control);\n break;\n case \"load-more-button\":\n control = new osparc.ui.form.FetchButton(this.tr(\"Load more comments...\"));\n control.addListener(\"execute\", () => this.fetchComments(false));\n this._add(control);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"title\");\n this.getChildControl(\"comments-list\");\n this.getChildControl(\"load-more-button\");\n },\n\n fetchComments: function(removeComments = true) {\n const loadMoreButton = this.getChildControl(\"load-more-button\");\n loadMoreButton.show();\n loadMoreButton.setFetching(true);\n\n if (removeComments) {\n this.getChildControl(\"comments-list\").removeAll();\n }\n\n this.__getNextRequest()\n .then(resp => {\n const comments = resp[\"data\"];\n this.__addComments(comments);\n this.__nextRequestParams = resp[\"_links\"][\"next\"];\n if (this.__nextRequestParams === null) {\n loadMoreButton.exclude();\n }\n })\n .finally(() => loadMoreButton.setFetching(false));\n },\n\n __getNextRequest: function() {\n const params = {\n url: {\n studyId: this.__studyId,\n offset: 0,\n limit: 20\n }\n };\n const nextRequestParams = this.__nextRequestParams;\n if (nextRequestParams) {\n params.url.offset = nextRequestParams.offset;\n params.url.limit = nextRequestParams.limit;\n }\n const options = {\n resolveWResponse: true\n };\n return osparc.data.Resources.fetch(\"studyComments\", \"getPage\", params, options);\n },\n\n __addComments: function(comments) {\n const commentsTitle = this.getChildControl(\"title\");\n if (comments.length === 1) {\n commentsTitle.setValue(this.tr(\"1 Comment\"));\n } else if (comments.length > 1) {\n commentsTitle.setValue(comments.length + this.tr(\" Comments\"));\n }\n\n const commentsList = this.getChildControl(\"comments-list\");\n comments.forEach(comment => {\n const commentUi = new osparc.info.CommentUI(comment);\n commentsList.add(commentUi);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.CommentAdd\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyId {String} Study Id\n */\n construct: function(studyId) {\n this.base(arguments);\n\n this.__studyId = studyId;\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.__buildLayout();\n },\n\n events: {\n \"commentAdded\": \"qx.event.type.Event\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"add-comment-label\":\n control = new qx.ui.basic.Label().set({\n value: this.tr(\"Add comment\")\n });\n this._add(control);\n break;\n case \"add-comment-layout\": {\n const grid = new qx.ui.layout.Grid(8, 5);\n grid.setColumnWidth(0, 32);\n grid.setColumnFlex(1, 1);\n control = new qx.ui.container.Composite(grid);\n this._add(control, {\n flex: 1\n });\n break;\n }\n case \"thumbnail\": {\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n scale: true,\n allowGrowX: true,\n allowGrowY: true,\n allowShrinkX: true,\n allowShrinkY: true,\n maxWidth: 32,\n maxHeight: 32,\n decorator: \"rounded\",\n });\n const authData = osparc.auth.Data.getInstance();\n const myUsername = authData.getUsername();\n const myEmail = authData.getEmail();\n control.set({\n source: osparc.utils.Avatar.emailToThumbnail(myEmail, myUsername, 32)\n });\n const layout = this.getChildControl(\"add-comment-layout\");\n layout.add(control, {\n row: 0,\n column: 0\n });\n break;\n }\n case \"comment-field\": {\n control = new osparc.editor.MarkdownEditor();\n control.getChildControl(\"buttons\").exclude();\n const layout = this.getChildControl(\"add-comment-layout\");\n layout.add(control, {\n row: 0,\n column: 1\n });\n break;\n }\n case \"add-comment-button\": {\n control = new qx.ui.form.Button(this.tr(\"Add\")).set({\n appearance: \"form-button\",\n allowGrowX: false,\n alignX: \"right\"\n });\n this._add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"thumbnail\");\n const commentField = this.getChildControl(\"comment-field\");\n const addButton = this.getChildControl(\"add-comment-button\");\n addButton.addListener(\"execute\", () => {\n const commentText = commentField.getChildControl(\"text-area\").getValue();\n if (commentText) {\n const params = {\n url: {\n studyId: this.__studyId\n },\n data: {\n \"contents\": commentText\n }\n };\n osparc.data.Resources.fetch(\"studyComments\", \"addComment\", params)\n .then(() => {\n this.fireEvent(\"commentAdded\");\n commentField.getChildControl(\"text-area\").setValue(\"\");\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget for modifying Service permissions. This is the way for sharing studies\n * - Creates a copy of service data\n * - It allows changing study's access right, so that the study owners can:\n * - Share it with Organizations and/or Organization Members (Editors)\n * - Make other Editors Owner\n * - Remove Editors\n */\n\nqx.Class.define(\"osparc.share.CollaboratorsService\", {\n extend: osparc.share.Collaborators,\n\n /**\n * @param serviceData {Object} Object containing the Service Data\n */\n construct: function(serviceData) {\n this._resourceType = \"service\";\n const serviceDataCopy = osparc.utils.Utils.deepCloneObject(serviceData);\n\n this.base(arguments, serviceDataCopy);\n },\n\n statics: {\n canGroupsWrite: function(accessRights, gIds) {\n let canWrite = false;\n for (let i=0; i {\n newAccessRights[gid] = this.self().getCollaboratorAccessRight();\n });\n osparc.store.Services.patchServiceData(this._serializedDataCopy, \"accessRights\", newAccessRights)\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this._serializedDataCopy);\n const text = this.tr(\"Service successfully shared\");\n osparc.FlashMessenger.getInstance().logAs(text);\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong sharing the Service\"), \"ERROR\");\n });\n },\n\n _deleteMember: function(collaborator, item) {\n if (item) {\n item.setEnabled(false);\n }\n\n const success = delete this._serializedDataCopy[\"accessRights\"][collaborator[\"gid\"]];\n if (!success) {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong removing Member\"), \"ERROR\");\n if (item) {\n item.setEnabled(true);\n }\n return;\n }\n\n osparc.store.Services.patchServiceData(this._serializedDataCopy, \"accessRights\", this._serializedDataCopy[\"accessRights\"])\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this._serializedDataCopy);\n osparc.FlashMessenger.getInstance().logAs(collaborator[\"name\"] + this.tr(\" successfully removed\"));\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong removing \") + collaborator[\"name\"], \"ERROR\");\n })\n .finally(() => {\n if (item) {\n item.setEnabled(true);\n }\n });\n },\n\n __make: function(collaboratorGId, newAccessRights, successMsg, failureMsg, item) {\n item.setEnabled(false);\n this._serializedDataCopy[\"accessRights\"][collaboratorGId] = newAccessRights;\n osparc.store.Services.patchServiceData(this._serializedDataCopy, \"accessRights\", this._serializedDataCopy[\"accessRights\"])\n .then(() => {\n this.fireDataEvent(\"updateAccessRights\", this._serializedDataCopy);\n osparc.FlashMessenger.getInstance().logAs(successMsg);\n this._reloadCollaboratorsList();\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(failureMsg, \"ERROR\");\n })\n .finally(() => item.setEnabled(true));\n },\n\n _promoteToEditor: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getOwnerAccessRight(),\n this.tr(`Successfully promoted to ${osparc.data.Roles.SERVICE[2].label}`),\n this.tr(`Something went wrong promoting to ${osparc.data.Roles.SERVICE[2].label}`),\n item\n );\n },\n\n _promoteToOwner: function(collaborator, item) {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Operation not available\"), \"WARNING\");\n },\n\n _demoteToUser: function(collaborator, item) {\n this.__make(\n collaborator[\"gid\"],\n this.self().getCollaboratorAccessRight(),\n this.tr(`Successfully demoted to ${osparc.data.Roles.SERVICE[1].label}`),\n this.tr(`Something went wrong demoting ${osparc.data.Roles.SERVICE[1].label}`),\n item\n );\n },\n\n _demoteToEditor: function(collaborator, item) {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Operation not available\"), \"WARNING\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.metadata.ClassifiersEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(resourceData) {\n this.base(arguments);\n\n if (osparc.utils.Resources.isService(resourceData)) {\n this.__resourceData = osparc.utils.Utils.deepCloneObject(resourceData);\n } else {\n this.__resourceData = osparc.data.model.Study.deepCloneStudyObject(resourceData);\n }\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__buildLayout();\n },\n\n events: {\n \"updateClassifiers\": \"qx.event.type.Data\"\n },\n\n members: {\n __resourceData: null,\n __classifiersTree: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"rrid\": {\n control = this.__createRRIDSection();\n break;\n }\n case \"classifiers\": {\n control = this.__createClassifiersTree();\n break;\n }\n case \"buttons\": {\n control = this.__createButtons();\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this._add(this.getChildControl(\"rrid\"));\n this._add(this.getChildControl(\"classifiers\"), {\n flex: 1\n });\n this._add(this.getChildControl(\"buttons\"));\n },\n\n __createRRIDSection: function() {\n const rridLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const logo = new qx.ui.basic.Image(\"osparc/rrid-logo.png\").set({\n height: 22,\n width: 20,\n scale: true\n });\n rridLayout.add(logo);\n\n const linkLabel = new osparc.ui.basic.LinkLabel(this.tr(\"RRID:\"), \"https://scicrunch.org/resources\").set({\n alignY: \"middle\"\n });\n rridLayout.add(linkLabel);\n\n const textField = new qx.ui.form.TextField().set({\n placeholder: \"SCR_018997\"\n });\n rridLayout.add(textField, {\n flex: 1\n });\n\n const addRRIDClassifierBtn = new osparc.ui.form.FetchButton(this.tr(\"Add Classifier\"));\n addRRIDClassifierBtn.addListener(\"execute\", () => {\n this.__addRRIDClassifier(textField.getValue(), addRRIDClassifierBtn);\n }, this);\n rridLayout.add(addRRIDClassifierBtn);\n\n return rridLayout;\n },\n\n __createClassifiersTree: function() {\n const resourceData = this.__resourceData;\n const classifiers = resourceData.classifiers && resourceData.classifiers ? resourceData.classifiers : [];\n const classifiersTree = this.__classifiersTree = new osparc.filter.ClassifiersFilter(\"classifiersEditor\", \"searchBarFilter\", classifiers);\n osparc.store.Store.getInstance().addListener(\"changeClassifiers\", e => {\n classifiersTree.recreateTree();\n }, this);\n return classifiersTree;\n },\n\n __createButtons: function() {\n const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const saveBtn = new osparc.ui.form.FetchButton(this.tr(\"Save\"));\n saveBtn.addListener(\"execute\", () => {\n this.__saveClassifiers(saveBtn);\n }, this);\n buttons.add(saveBtn);\n return buttons;\n },\n\n __addRRIDClassifier: function(rrid, btn) {\n rrid = rrid.replace(\"RRID:\", \"\");\n const params = {\n url: {\n \"rrid\": rrid\n }\n };\n btn.setFetching(true);\n osparc.data.Resources.fetch(\"classifiers\", \"postRRID\", params)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"RRID classifier successfully added\"), \"INFO\");\n osparc.store.Store.getInstance().getAllClassifiers(true);\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(err, \"ERROR\");\n })\n .finally(() => {\n btn.setFetching(false);\n });\n },\n\n __saveClassifiers: function(saveBtn) {\n saveBtn.setFetching(true);\n\n const newClassifiers = this.__classifiersTree.getCheckedClassifierIDs();\n if (osparc.utils.Resources.isStudy(this.__resourceData) || osparc.utils.Resources.isTemplate(this.__resourceData)) {\n osparc.store.Study.patchStudyData(this.__resourceData, \"classifiers\", newClassifiers)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Classifiers successfully edited\"));\n saveBtn.setFetching(false);\n this.fireDataEvent(\"updateClassifiers\", this.__resourceData);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong editing Classifiers\"), \"ERROR\");\n });\n } else {\n const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.__resourceData);\n osparc.store.Services.patchServiceData(serviceDataCopy, \"classifiers\", newClassifiers)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Classifiers successfully edited\"));\n saveBtn.setFetching(false);\n this.fireDataEvent(\"updateClassifiers\", serviceDataCopy);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong editing Classifiers\"), \"ERROR\");\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.metadata.ClassifiersViewer\", {\n extend: qx.ui.core.Widget,\n\n construct: function(studyData) {\n this.base(arguments);\n\n let studyDataCopy = null;\n if (osparc.utils.Resources.isService(studyData)) {\n studyDataCopy = osparc.utils.Utils.deepCloneObject(studyData);\n } else {\n studyDataCopy = osparc.data.model.Study.deepCloneStudyObject(studyData);\n }\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__createClassifiersTree(studyDataCopy);\n },\n\n members: {\n __createClassifiersTree: function(studyData) {\n const selectedClassifiers = studyData.classifiers && studyData.classifiers ? studyData.classifiers : [];\n osparc.utils.Classifiers.getClassifiersAsTree(false, selectedClassifiers)\n .then(classifiers => {\n this._removeAll();\n let control = null;\n if (classifiers && classifiers.children.length) {\n control = new osparc.ui.tree.ClassifiersTree(classifiers);\n } else {\n control = new qx.ui.basic.Label(this.tr(\"No Classifiers assigned\"));\n }\n this._add(control, {\n flex: 1\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @asset(form/resource-quality.json)\n * @asset(object-path/object-path-0-11-4.min.js)\n * @asset(ajv/ajv-6-11-0.min.js)\n * @ignore(Ajv)\n */\n\nqx.Class.define(\"osparc.metadata.QualityEditor\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param resourceData {Object} Object containing the Resource Data\n */\n construct: function(resourceData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n this.set({\n height: 600\n });\n\n this.__initResourceData(resourceData);\n },\n\n events: {\n \"updateQuality\": \"qx.event.type.Data\"\n },\n\n properties: {\n mode: {\n check: [\"display\", \"edit\"],\n init: \"display\",\n nullable: false,\n event: \"changeMode\"\n }\n },\n\n statics: {\n GridPos: {\n rule: 0,\n clCurrent: 1,\n clTarget: 2,\n reference: 3,\n edit: 4\n }\n },\n\n members: {\n __resourceData: null,\n __copyQualityData: null,\n __schema: null,\n __enabledQuality: null,\n __TSRSection: null,\n __tsrGrid: null,\n\n __initResourceData: function(resourceData) {\n if (!(\"quality\" in resourceData)) {\n osparc.FlashMessenger.logAs(this.tr(\"Quality Assessment data not found\"), \"ERROR\");\n return;\n }\n\n this.__resourceData = resourceData;\n this.__copyQualityData = osparc.utils.Utils.deepCloneObject(resourceData[\"quality\"]);\n\n const ajvLoader = new qx.util.DynamicScriptLoader([\n \"/resource/ajv/ajv-6-11-0.min.js\",\n \"/resource/object-path/object-path-0-11-4.min.js\"\n ]);\n ajvLoader.addListener(\"ready\", () => {\n this.__ajv = new Ajv();\n const schemaUrl = \"/resource/form/resource-quality.json\";\n osparc.utils.Utils.fetchJSON(schemaUrl)\n .then(schema => {\n if (this.__validate(schema.$schema, schema)) {\n // Schema is valid\n const data = resourceData[\"quality\"];\n if (this.__validate(schema, data)) {\n // Validate data if present\n this.__resourceData = resourceData;\n }\n return schema;\n }\n return null;\n })\n .then(schema => {\n this.__render(schema);\n this.setMode(\"display\");\n })\n .catch(err => {\n console.error(err);\n this.__render(null);\n });\n }, this);\n ajvLoader.addListener(\"failed\", console.error, this);\n this.__render = this.__render.bind(this);\n ajvLoader.start();\n },\n\n /**\n * Uses Ajv library to validate data against a schema.\n *\n * @param {Object} schema JSONSchema to validate against\n * @param {Object} data Data to be validated\n * @param {Boolean} showMessage Determines whether an error message is displayed to the user\n */\n __validate: function(schema, data, showMessage=true) {\n this.__ajv.validate(schema, data);\n const errors = this.__ajv.errors;\n if (errors) {\n console.error(errors);\n if (showMessage) {\n let message = `${errors[0].dataPath} ${errors[0].message}`;\n osparc.FlashMessenger.logAs(message, \"ERROR\");\n }\n return false;\n }\n return true;\n },\n\n __render: function(schema) {\n if (schema) {\n this._removeAll();\n\n this.__schema = schema;\n\n if (this.__canIWrite()) {\n this.__createEditButtons();\n }\n\n this.__createTSRSection();\n\n this.__createEnableSection();\n if (!this.__canIWrite()) {\n this.__enabledQuality.exclude();\n }\n\n this.__populateForms();\n } else {\n osparc.FlashMessenger.logAs(this.tr(\"There was an error validating the metadata.\"), \"ERROR\");\n }\n },\n\n __createEnableSection: function() {\n const enabledQuality = this.__enabledQuality = new qx.ui.form.CheckBox(this.tr(\"Enabled\"));\n this.bind(\"mode\", enabledQuality, \"enabled\", {\n converter: value => value === \"edit\"\n });\n this._add(enabledQuality);\n },\n\n __createTSRSection: function() {\n const box = this.__TSRSection = new qx.ui.groupbox.GroupBox(this.tr(\"Ten Simple Rules\"));\n box.getChildControl(\"legend\").set({\n font: \"text-14\"\n });\n box.getChildControl(\"frame\").set({\n backgroundColor: \"transparent\"\n });\n box.setLayout(new qx.ui.layout.VBox(10));\n\n const helpText = \"[10 Simple Rules with Conformance Rubric](https://www.imagwiki.nibib.nih.gov/content/10-simple-rules-conformance-rubric)\";\n const helpTextMD = new osparc.ui.markdown.Markdown(helpText).set({\n noMargin: true,\n });\n box.add(helpTextMD);\n\n const grid = new qx.ui.layout.Grid(10, 6);\n Object.values(this.self().GridPos).forEach(gridPos => {\n grid.setColumnAlign(gridPos, \"left\", \"middle\");\n });\n grid.setColumnFlex(this.self().GridPos.reference, 1);\n this.__tsrGrid = new qx.ui.container.Composite(grid);\n box.add(this.__tsrGrid);\n\n this._add(box);\n },\n\n __populateForms: function() {\n this.__populateEnable();\n this.__populateTSR();\n },\n\n __populateEnable: function() {\n this.__enabledQuality.setValue(this.__copyQualityData[\"enabled\"]);\n this.__enabledQuality.addListener(\"changeValue\", e => {\n const value = e.getData();\n this.__copyQualityData[\"enabled\"] = value;\n }, this);\n this.__enabledQuality.bind(\"value\", this.__TSRSection, \"visibility\", {\n converter: value => value ? \"visible\" : \"excluded\"\n });\n },\n\n __populateTSR: function() {\n this.__tsrGrid.removeAll();\n this.__populateTSRHeaders();\n this.__populateTSRData();\n },\n\n __populateTSRHeaders: function() {\n const schemaRules = this.__schema[\"properties\"][\"tsr_current\"][\"properties\"];\n\n const headerTSR = new qx.ui.basic.Label(this.tr(\"Rules\")).set({\n font: \"text-14\"\n });\n this.__tsrGrid.add(headerTSR, {\n row: 0,\n column: this.self().GridPos.rule\n });\n\n const headerCL = new qx.ui.basic.Label(this.tr(\"Conformance Level\")).set({\n font: \"text-14\"\n });\n this.__tsrGrid.add(headerCL, {\n row: 0,\n column: this.self().GridPos.clCurrent\n });\n\n const headerTargetCL = new qx.ui.basic.Label(this.tr(\"Target\")).set({\n toolTipText: this.tr(\"Conformance Level Target\"),\n font: \"text-14\"\n });\n this.bind(\"mode\", headerTargetCL, \"visibility\", {\n converter: mode => mode === \"edit\" ? \"visible\" : \"excluded\"\n });\n this.__tsrGrid.add(headerTargetCL, {\n row: 0,\n column: this.self().GridPos.clTarget\n });\n\n const headerRef = new qx.ui.basic.Label(this.tr(\"References\")).set({\n font: \"text-14\"\n });\n this.__tsrGrid.add(headerRef, {\n row: 0,\n column: this.self().GridPos.reference\n });\n\n let row = 1;\n Object.values(schemaRules).forEach(rule => {\n const label = new qx.ui.basic.Label(rule.title).set({\n marginTop: 5\n });\n const ruleWHint = new osparc.form.FieldWHint(null, rule.description, label).set({\n allowGrowX: false\n });\n this.__tsrGrid.add(ruleWHint, {\n row,\n column: this.self().GridPos.rule\n });\n row++;\n });\n const label = new qx.ui.basic.Label(this.tr(\"TSR SCORE\")).set({\n font: \"text-14\"\n });\n this.__tsrGrid.add(label, {\n row,\n column: this.self().GridPos.rule\n });\n row++;\n },\n\n __populateTSRData: function() {\n const copyTSRCurrent = this.__copyQualityData[\"tsr_current\"];\n const copyTSRTarget = this.__copyQualityData[\"tsr_target\"];\n const tsrTotalRating = new osparc.ui.basic.StarsRating();\n tsrTotalRating.set({\n nStars: 4,\n showScore: true,\n marginTop: 5\n });\n const updateTotalTSR = () => {\n osparc.ui.basic.StarsRating.scoreToStarsRating(copyTSRCurrent, copyTSRTarget, tsrTotalRating);\n };\n updateTotalTSR();\n\n let row = 1;\n const schemaRules = this.__schema[\"properties\"][\"tsr_current\"][\"properties\"];\n Object.keys(schemaRules).forEach(ruleKey => {\n const currentRule = copyTSRCurrent[ruleKey];\n\n // current\n const currentRuleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n const updateCurrentLevel = value => {\n currentRuleLayout.removeAll();\n const ruleRating = new osparc.ui.basic.StarsRating();\n ruleRating.set({\n maxScore: copyTSRTarget[ruleKey].level,\n nStars: copyTSRTarget[ruleKey].level,\n score: value,\n marginTop: 5,\n showEmptyStars: true\n });\n this.bind(\"mode\", ruleRating, \"mode\");\n ruleRating.addListener(\"changeScore\", e => {\n const newScore = e.getData();\n copyTSRCurrent[ruleKey].level = newScore;\n updateCurrentLevel(newScore);\n updateTotalTSR();\n }, this);\n const confLevel = osparc.metadata.Quality.findConformanceLevel(value);\n let hint = confLevel.title + \"
\" + confLevel.description;\n if (copyTSRTarget[ruleKey].level === 0) {\n hint = this.tr(\"Not Applicable\");\n }\n const ruleRatingWHint = new osparc.form.FieldWHint(null, hint, ruleRating).set({\n hintPosition: \"left\"\n });\n currentRuleLayout.add(ruleRatingWHint);\n };\n if (currentRule.level !== undefined) {\n updateCurrentLevel(currentRule.level);\n this.__tsrGrid.add(currentRuleLayout, {\n row,\n column: this.self().GridPos.clCurrent\n });\n }\n\n // target\n const targetRule = copyTSRTarget[ruleKey];\n if (targetRule.level !== undefined) {\n const targetsBox = new qx.ui.form.SelectBox();\n const conformanceLevels = osparc.metadata.Quality.getConformanceLevel();\n Object.values(conformanceLevels).forEach(conformanceLevel => {\n let text = `${conformanceLevel.level} - `;\n if (conformanceLevel.level === 0) {\n text += \"Not Applicable\";\n } else {\n text += conformanceLevel.title;\n }\n const targetItem = new qx.ui.form.ListItem(text);\n targetItem.level = conformanceLevel.level;\n targetsBox.add(targetItem);\n if (targetRule.level === conformanceLevel.level) {\n targetsBox.setSelection([targetItem]);\n }\n });\n targetsBox.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const newMaxScore = selection[0].level;\n copyTSRTarget[ruleKey].level = newMaxScore;\n copyTSRCurrent[ruleKey].level = Math.min(newMaxScore, copyTSRCurrent[ruleKey].level);\n updateCurrentLevel(copyTSRCurrent[ruleKey].level);\n updateTotalTSR();\n }\n }, this);\n this.bind(\"mode\", targetsBox, \"visibility\", {\n converter: mode => mode === \"edit\" ? \"visible\" : \"excluded\"\n });\n this.__tsrGrid.add(targetsBox, {\n row,\n column: this.self().GridPos.clTarget\n });\n }\n\n // reference\n if (currentRule.references !== undefined) {\n const referenceMD = new osparc.ui.markdown.Markdown(currentRule.references).set({\n noMargin: true,\n });\n this.__tsrGrid.add(referenceMD, {\n row,\n column: this.self().GridPos.reference\n });\n\n const button = osparc.utils.Utils.getEditButton();\n button.addListener(\"execute\", () => {\n const title = this.tr(\"Edit References\");\n const textEditor = new osparc.editor.MarkdownEditor(currentRule.references);\n textEditor.getChildControl(\"accept-button\").setLabel(this.tr(\"Accept\"));\n const win = osparc.ui.window.Window.popUpInWindow(textEditor, title, 400, 300);\n textEditor.addListener(\"textChanged\", e => {\n const newText = e.getData();\n referenceMD.setValue(newText);\n currentRule.references = newText;\n win.close();\n }, this);\n textEditor.addListener(\"cancel\", () => {\n win.close();\n }, this);\n }, this);\n this.bind(\"mode\", button, \"visibility\", {\n converter: mode => mode === \"edit\" ? \"visible\" : \"excluded\"\n });\n this.__tsrGrid.add(button, {\n row,\n column: this.self().GridPos.edit\n });\n }\n\n row++;\n });\n\n this.__tsrGrid.add(tsrTotalRating, {\n row,\n column: this.self().GridPos.clCurrent\n });\n },\n\n __createEditButtons: function() {\n const editButton = new qx.ui.form.Button(this.tr(\"Edit\"));\n this.bind(\"mode\", editButton, \"visibility\", {\n converter: value => value === \"display\" ? \"visible\" : \"excluded\"\n });\n editButton.addListener(\"execute\", () => this.setMode(\"edit\"), this);\n\n const saveButton = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n this.bind(\"mode\", saveButton, \"visibility\", {\n converter: value => value === \"edit\" ? \"visible\" : \"excluded\"\n });\n saveButton.addListener(\"execute\", () => this.__save(saveButton), this);\n\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n this.bind(\"mode\", cancelButton, \"visibility\", {\n converter: value => value === \"edit\" ? \"visible\" : \"excluded\"\n });\n cancelButton.addListener(\"execute\", () => this.setMode(\"display\"), this);\n\n const buttonsToolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n buttonsToolbar.add(cancelButton);\n buttonsToolbar.add(editButton);\n buttonsToolbar.add(saveButton);\n this._add(buttonsToolbar);\n },\n\n __save: function(btn) {\n const newQuality = {\n \"enabled\": this.__copyQualityData[\"enabled\"],\n \"tsr_current\": this.__copyQualityData[\"tsr_current\"],\n \"tsr_target\": this.__copyQualityData[\"tsr_target\"]\n };\n const patchData = {\n \"quality\": newQuality\n };\n if (this.__validate(this.__schema, patchData[\"quality\"])) {\n btn.setFetching(true);\n if (osparc.utils.Resources.isService(this.__resourceData)) {\n const serviceDataCopy = osparc.utils.Utils.deepCloneObject(this.__resourceData);\n osparc.store.Services.patchServiceData(serviceDataCopy, \"quality\", newQuality)\n .then(() => {\n this.__initResourceData(serviceDataCopy);\n this.fireDataEvent(\"updateQuality\", serviceDataCopy);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"There was an error while updating the Quality Assessment.\"), \"ERROR\");\n })\n .finally(() => btn.setFetching(false));\n } else {\n osparc.store.Study.patchStudyData(this.__resourceData, \"quality\", newQuality)\n .then(() => {\n this.__initResourceData(this.__resourceData);\n this.fireDataEvent(\"updateQuality\", this.__resourceData);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"There was an error while updating the Quality Assessment.\"), \"ERROR\");\n })\n .finally(() => btn.setFetching(false));\n }\n }\n },\n\n __canIWrite: function() {\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n if (myGid) {\n if (osparc.utils.Resources.isService(this.__resourceData)) {\n return osparc.service.Utils.canIWrite(this.__resourceData[\"accessRights\"]);\n }\n return osparc.data.model.Study.canIWrite(this.__resourceData[\"accessRights\"]);\n }\n return false;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\n/**\n * Tag manager server to manage one resource's related tags.\n */\nqx.Class.define(\"osparc.form.tag.TagManager\", {\n extend: qx.ui.core.Widget,\n\n construct: function(studyData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n this.__selectedTags = new qx.data.Array();\n this.__renderLayout();\n this.__attachEventHandlers();\n\n this.setStudyData(studyData);\n },\n\n events: {\n \"updateTags\": \"qx.event.type.Data\",\n \"changeSelected\": \"qx.event.type.Data\"\n },\n\n properties: {\n liveUpdate: {\n check: \"Boolean\",\n event: \"changeLiveUpdate\",\n init: false\n }\n },\n\n statics: {\n popUpInWindow: function(tagManager, title) {\n if (!title) {\n title = qx.locale.Manager.tr(\"Apply Tags\");\n }\n return osparc.ui.window.Window.popUpInWindow(tagManager, title, 280, null).set({\n allowMinimize: false,\n allowMaximize: false,\n showMinimize: false,\n showMaximize: false,\n clickAwayClose: true,\n movable: true,\n resizable: true,\n showClose: true\n });\n }\n },\n\n members: {\n __studyData: null,\n __resourceId: null,\n __selectedTags: null,\n __tagsContainer: null,\n __addTagButton: null,\n\n __renderLayout: function() {\n const filter = new osparc.filter.TextFilter(\"name\", \"studyBrowserTagManager\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n this._add(filter);\n\n const tagsContainer = this.__tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const scrollTags = new qx.ui.container.Scroll();\n scrollTags.add(tagsContainer);\n this._add(scrollTags, {\n flex: 1\n });\n\n const addTagButton = this.__addTagButton = new qx.ui.form.Button().set({\n appearance: \"form-button-outlined\",\n label: this.tr(\"New Tag\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n alignX: \"center\",\n allowGrowX: false\n });\n addTagButton.addListener(\"execute\", () => {\n this.__repopulateTags();\n const newItem = new osparc.form.tag.TagItem().set({\n mode: osparc.form.tag.TagItem.modes.EDIT\n });\n newItem.addListener(\"tagSaved\", () => this.__repopulateTags(), this);\n newItem.addListener(\"cancelNewTag\", e => tagsContainer.remove(e.getTarget()), this);\n newItem.addListener(\"deleteTag\", e => tagsContainer.remove(e.getTarget()), this);\n tagsContainer.add(newItem);\n\n // scroll down\n const height = scrollTags.getSizeHint().height;\n scrollTags.scrollToY(height);\n });\n this._add(addTagButton);\n\n const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"right\"\n }));\n const saveButton = new osparc.ui.form.FetchButton(this.tr(\"Save\"));\n saveButton.set({\n appearance: \"strong-button\"\n });\n osparc.utils.Utils.setIdToWidget(saveButton, \"saveTagsBtn\");\n saveButton.addListener(\"execute\", () => this.__save(saveButton), this);\n buttons.add(saveButton);\n this.bind(\"liveUpdate\", buttons, \"visibility\", {\n converter: value => value ? \"excluded\" : \"visible\"\n });\n this._add(buttons);\n },\n\n setStudyData: function(studyData) {\n this.__studyData = studyData;\n this.__resourceId = studyData[\"uuid\"];\n this.__selectedTags.removeAll();\n this.__selectedTags.append(studyData[\"tags\"]);\n this.__repopulateTags();\n },\n\n __repopulateTags: function() {\n this.__tagsContainer.removeAll();\n const tags = osparc.store.Tags.getInstance().getTags();\n const tagButtons = [];\n tags.forEach(tag => tagButtons.push(this.__tagButton(tag)));\n // list the selected tags first\n tagButtons.sort((a, b) => b.getValue() - a.getValue());\n tagButtons.forEach(tagButton => this.__tagsContainer.add(tagButton));\n },\n\n __tagButton: function(tag) {\n const tagId = tag.getTagId();\n const tagButton = new osparc.form.tag.TagToggleButton(tag, this.__selectedTags.includes(tagId));\n tagButton.addListener(\"changeValue\", evt => {\n const selected = evt.getData();\n if (this.isLiveUpdate()) {\n tagButton.setFetching(true);\n if (selected) {\n this.__saveAddTag(tagId, tagButton);\n } else {\n this.__saveRemoveTag(tagId, tagButton);\n }\n } else if (selected) {\n this.__selectedTags.push(tagId);\n } else {\n this.__selectedTags.remove(tagId);\n }\n }, this);\n tagButton.subscribeToFilterGroup(\"studyBrowserTagManager\");\n return tagButton;\n },\n\n __getAddTagPromise: function(tagId) {\n const params = {\n url: {\n tagId,\n studyId: this.__resourceId\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"addTag\", params);\n },\n\n __getRemoveTagPromise: function(tagId) {\n const params = {\n url: {\n tagId,\n studyId: this.__resourceId\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"removeTag\", params);\n },\n\n __saveAddTag: function(tagId, tagButton) {\n this.__getAddTagPromise(tagId)\n .then(() => this.__selectedTags.push(tagId))\n .catch(err => {\n console.error(err);\n tagButton.setValue(false);\n })\n .finally(() => tagButton.setFetching(false));\n },\n\n __saveRemoveTag: function(tagId, tagButton) {\n this.__getRemoveTagPromise(tagId)\n .then(() => this.__selectedTags.remove(tagId))\n .catch(err => {\n console.error(err);\n tagButton.setValue(true);\n })\n .finally(() => tagButton.setFetching(false));\n },\n\n __save: async function(saveButton) {\n saveButton.setFetching(true);\n\n // call them sequentially\n let updatedStudy = null;\n for (let i=0; i updatedData);\n }\n }\n for (let i=0; i updatedData);\n }\n }\n\n saveButton.setFetching(false);\n if (updatedStudy) {\n this.fireDataEvent(\"updateTags\", updatedStudy);\n }\n },\n\n __attachEventHandlers: function() {\n this.__selectedTags.addListener(\"change\", evt => {\n this.fireDataEvent(\"changeSelected\", {\n ...evt.getData(),\n selected: this.__selectedTags.toArray()\n });\n }, this);\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2022 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.metadata.ServicesInStudyBootOpts\", {\n extend: osparc.metadata.ServicesInStudy,\n\n /**\n * @param studyData {Object|osparc.data.model.Study} studyData (metadata)\n */\n construct: function(studyData) {\n this.base(arguments, studyData);\n },\n\n statics: {\n GRID_POS: {\n ...osparc.metadata.ServicesInStudy.GRID_POS,\n BOOT_MODE: Object.keys(osparc.metadata.ServicesInStudy.GRID_POS).length\n },\n\n anyBootOptions: function(studyData) {\n if (\"workbench\" in studyData) {\n for (const nodeId in studyData[\"workbench\"]) {\n const node = studyData[\"workbench\"][nodeId];\n const metadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n if (metadata && osparc.data.model.Node.hasBootModes(metadata)) {\n return true;\n }\n }\n }\n return false;\n }\n },\n\n members: {\n _populateIntroText: function() {\n const text = this.tr(\"Here you can select in which mode the services will be started:\");\n const introText = new qx.ui.basic.Label(text).set({\n font: \"text-14\"\n });\n this._introText.add(introText);\n },\n\n __updateBootMode: function(nodeId, newBootModeId) {\n const workbench = this._studyData[\"workbench\"];\n let newBootOptions = \"bootOptions\" in workbench[nodeId] ? osparc.utils.Utils.deepCloneObject(workbench[nodeId][\"bootOptions\"]) : {};\n newBootOptions[\"boot_mode\"] = newBootModeId;\n\n this._patchNode(nodeId, {\n \"bootOptions\": newBootOptions\n });\n },\n\n _populateHeader: function() {\n this.base(arguments);\n\n this._servicesGrid.add(new qx.ui.basic.Label(this.tr(\"Boot Mode\")).set({\n font: \"title-14\",\n toolTipText: this.tr(\"Select boot type\")\n }), {\n row: 0,\n column: this.self().GRID_POS.BOOT_MODE\n });\n },\n\n _populateRows: function() {\n this.base(arguments);\n\n let i = 0;\n const workbench = this._studyData[\"workbench\"];\n for (const nodeId in workbench) {\n i++;\n const node = workbench[nodeId];\n const nodeMetadata = osparc.store.Services.getMetadata(node[\"key\"], node[\"version\"]);\n if (nodeMetadata === null) {\n osparc.FlashMessenger.logAs(this.tr(\"Some service information could not be retrieved\"), \"WARNING\");\n break;\n }\n const canIWrite = osparc.data.model.Study.canIWrite(this._studyData[\"accessRights\"]);\n const hasBootModes = osparc.data.model.Node.hasBootModes(nodeMetadata);\n if (canIWrite && hasBootModes) {\n const bootModeSB = osparc.data.model.Node.getBootModesSelectBox(nodeMetadata, workbench, nodeId);\n bootModeSB.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const newBootModeId = selection[0].bootModeId;\n this.__updateBootMode(nodeId, newBootModeId);\n }\n }, this);\n this._servicesGrid.add(bootModeSB, {\n row: i,\n column: this.self().GRID_POS.BOOT_MODE\n });\n }\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.StudyUtils\", {\n type: \"static\",\n\n statics: {\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createTitle: function(study) {\n const title = osparc.info.Utils.createTitle();\n study.bind(\"name\", title, \"value\");\n return title;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createUuid: function(study) {\n const uuid = osparc.info.Utils.createLabel();\n study.bind(\"uuid\", uuid, \"value\");\n study.bind(\"uuid\", uuid, \"toolTipText\");\n return uuid;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createOwner: function(study) {\n const owner = new qx.ui.basic.Label();\n study.bind(\"prjOwner\", owner, \"value\", {\n converter: email => {\n if (email === osparc.auth.Data.getInstance().getEmail()) {\n return qx.locale.Manager.tr(\"me\");\n }\n return osparc.utils.Utils.getNameFromEmail(email);\n },\n onUpdate: (source, target) => {\n target.setToolTipText(source.getPrjOwner());\n }\n });\n return owner;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createCreationDate: function(study) {\n const creationDate = new qx.ui.basic.Label();\n study.bind(\"creationDate\", creationDate, \"value\", {\n converter: date => osparc.utils.Utils.formatDateAndTime(date)\n });\n return creationDate;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createLastChangeDate: function(study) {\n const lastChangeDate = new qx.ui.basic.Label();\n study.bind(\"lastChangeDate\", lastChangeDate, \"value\", {\n converter: date => osparc.utils.Utils.formatDateAndTime(date)\n });\n return lastChangeDate;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createAccessRights: function(study) {\n const accessRights = new qx.ui.basic.Label();\n let permissions = \"\";\n const myGID = osparc.auth.Data.getInstance().getGroupId();\n const ar = study.getAccessRights();\n if (myGID in ar) {\n if (ar[myGID][\"delete\"]) {\n permissions = qx.locale.Manager.tr(\"Owner\");\n } else if (ar[myGID][\"write\"]) {\n permissions = qx.locale.Manager.tr(\"Editor\");\n } else if (ar[myGID][\"read\"]) {\n permissions = qx.locale.Manager.tr(\"User\");\n }\n }\n accessRights.setValue(permissions);\n return accessRights;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createClassifiers: function(study) {\n const nClassifiers = new qx.ui.basic.Label();\n study.bind(\"classifiers\", nClassifiers, \"value\", {\n converter: classifiers => `(${classifiers.length})`\n });\n return nClassifiers;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createQuality: function(study) {\n const tsrLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2)).set({\n toolTipText: qx.locale.Manager.tr(\"Ten Simple Rules score\")\n });\n const addStars = model => {\n tsrLayout.removeAll();\n const quality = model.getQuality();\n if (osparc.metadata.Quality.isEnabled(quality)) {\n const tsrRating = new osparc.ui.basic.StarsRating();\n tsrRating.set({\n nStars: 4,\n showScore: true\n });\n osparc.ui.basic.StarsRating.scoreToStarsRating(quality[\"tsr_current\"], quality[\"tsr_target\"], tsrRating);\n tsrLayout.add(tsrRating);\n } else {\n tsrLayout.exclude();\n }\n };\n study.addListener(\"changeQuality\", () => addStars(study), this);\n addStars(study);\n return tsrLayout;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n * @param maxWidth {Number} thumbnail's maxWidth\n * @param maxHeight {Number} thumbnail's maxHeight\n */\n createThumbnail: function(study, maxWidth, maxHeight) {\n const thumbnail = osparc.info.Utils.createThumbnail(maxWidth, maxHeight);\n const noThumbnail = \"osparc/no_photography_black_24dp.svg\";\n study.bind(\"thumbnail\", thumbnail, \"source\", {\n converter: thumb => thumb ? thumb : noThumbnail,\n onUpdate: (source, target) => {\n if (source.getThumbnail() === \"\") {\n target.getChildControl(\"image\").set({\n minWidth: 120,\n minHeight: 139\n });\n }\n }\n });\n return thumbnail;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n * @param maxHeight {Number} description's maxHeight\n */\n createDescriptionMD: function(study, maxHeight) {\n const description = new osparc.ui.markdown.Markdown();\n study.bind(\"description\", description, \"value\", {\n converter: desc => desc ? desc : \"Add description\"\n });\n const scrollContainer = new qx.ui.container.Scroll();\n if (maxHeight) {\n scrollContainer.setMaxHeight(maxHeight);\n }\n scrollContainer.add(description);\n return scrollContainer;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createDisableServiceAutoStart: function(study) {\n // the wording is now opposite to the value of the property\n // Autostart services to true by default\n const devObj = study.getDev();\n const cb = new qx.ui.form.CheckBox().set({\n value: \"disableServiceAutoStart\" in devObj ? !devObj[\"disableServiceAutoStart\"] : true,\n label: qx.locale.Manager.tr(\"Autostart services\"),\n font: \"text-14\",\n toolTipText: qx.locale.Manager.tr(\"Disabling this will help opening and closing studies/projects faster\"),\n iconPosition: \"right\"\n });\n cb.addListener(\"changeValue\", e => {\n const newVal = e.getData();\n const devObjCopy = osparc.utils.Utils.deepCloneObject(devObj);\n devObjCopy[\"disableServiceAutoStart\"] = !newVal;\n study.patchStudy({\"dev\": devObjCopy});\n });\n return cb;\n },\n\n /**\n * @param study {osparc.data.model.Study} Study Model\n */\n createTags: function(study) {\n const tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 5)).set({\n maxWidth: 420\n });\n\n const addTags = model => {\n tagsContainer.removeAll();\n const noTagsLabel = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Add tags\"));\n tagsContainer.add(noTagsLabel);\n osparc.store.Tags.getInstance().getTags().filter(tag => model.getTags().includes(tag.getTagId()))\n .forEach(selectedTag => {\n if (tagsContainer.indexOf(noTagsLabel) > -1) {\n tagsContainer.remove(noTagsLabel);\n }\n tagsContainer.add(new osparc.ui.basic.Tag(selectedTag));\n });\n };\n study.addListener(\"changeTags\", () => addTags(study), this);\n osparc.store.Tags.getInstance().addListener(\"tagsChanged\", () => addTags(study), this);\n addTags(study);\n\n return tagsContainer;\n },\n\n __titleWithEditLayout: function(data, titleWidth = 75) {\n const titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const hasButton = Boolean(data.action && data.action.button);\n // use the width for aligning the buttons\n const title = new qx.ui.basic.Label(data.label).set({\n allowGrowX: true,\n maxWidth: hasButton ? titleWidth : titleWidth + 35 // spacer for the button\n });\n titleLayout.add(title, {\n flex: 1\n });\n if (hasButton) {\n const button = data.action.button;\n titleLayout.add(button);\n button.addListener(\"execute\", () => {\n const cb = data.action.callback;\n if (typeof cb === \"string\") {\n data.action.ctx.fireEvent(cb);\n } else {\n cb.call(data.action.ctx);\n }\n }, this);\n }\n return titleLayout;\n },\n\n infoElementsToLayout: function(extraInfos) {\n const positions = {\n TITLE: {\n column: 0,\n row: 0,\n },\n THUMBNAIL: {\n column: 0,\n row: 1,\n },\n DESCRIPTION: {\n column: 0,\n row: 2,\n },\n AUTHOR: {\n inline: true,\n column: 0,\n row: 0,\n },\n CREATED: {\n inline: true,\n column: 0,\n row: 1,\n },\n MODIFIED: {\n inline: true,\n column: 0,\n row: 2,\n },\n ACCESS_RIGHTS: {\n inline: true,\n column: 0,\n row: 3,\n },\n TAGS: {\n inline: true,\n column: 0,\n row: 4,\n },\n QUALITY: {\n inline: true,\n column: 0,\n row: 5,\n },\n CLASSIFIERS: {\n inline: true,\n column: 0,\n row: 6,\n },\n LOCATION: {\n inline: true,\n column: 0,\n row: 7,\n },\n };\n\n const mainInfoGrid = new qx.ui.layout.Grid(15, 5);\n mainInfoGrid.setColumnAlign(0, \"left\", \"top\");\n mainInfoGrid.setColumnFlex(0, 1);\n const mainInfoLayout = new qx.ui.container.Composite(mainInfoGrid);\n\n const extraInfoGrid = new qx.ui.layout.Grid(15, 5);\n const extraInfoLayout = new qx.ui.container.Composite(extraInfoGrid);\n extraInfoGrid.setColumnFlex(0, 1);\n\n let row = 0;\n let row2 = 0;\n Object.keys(positions).forEach(key => {\n if (key in extraInfos) {\n const extraInfo = extraInfos[key];\n const gridInfo = positions[key];\n\n if (gridInfo.inline) {\n const titleLayout = this.__titleWithEditLayout(extraInfo);\n if (extraInfo.action && extraInfo.action.button) {\n extraInfo.action.button.set({\n marginRight: 15\n });\n }\n titleLayout.add(extraInfo.view, {\n flex: 1\n });\n extraInfoLayout.add(titleLayout, {\n row: row2,\n column: gridInfo.column\n });\n row2++;\n extraInfoGrid.setRowHeight(row2, 5); // spacer\n row2++;\n } else {\n const titleLayout = this.__titleWithEditLayout(extraInfo);\n mainInfoLayout.add(titleLayout, {\n row,\n column: gridInfo.column\n });\n row++;\n mainInfoLayout.add(extraInfo.view, {\n row,\n column: gridInfo.column\n });\n row++;\n mainInfoGrid.setRowHeight(row, 5); // spacer\n row++;\n }\n }\n });\n\n\n const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const box1 = this.__createSectionBox(qx.locale.Manager.tr(\"Details\"));\n box1.add(mainInfoLayout);\n container.addAt(box1, 0);\n\n const box2 = this.__createSectionBox(qx.locale.Manager.tr(\"Meta details\"));\n box2.add(extraInfoLayout);\n container.addAt(box2, 1);\n\n return container;\n },\n\n /**\n * @param studyData {Object} Serialized Study Object\n */\n openAccessRights: function(studyData) {\n const permissionsView = new osparc.share.CollaboratorsStudy(studyData);\n const title = qx.locale.Manager.tr(\"Share with Editors and Organizations\");\n osparc.ui.window.Window.popUpInWindow(permissionsView, title, 500, 500);\n return permissionsView;\n },\n\n /**\n * @param resourceData {Object} Serialized Resource Object\n */\n openQuality: function(resourceData) {\n const qualityEditor = new osparc.metadata.QualityEditor(resourceData);\n const title = resourceData[\"name\"] + \" - \" + qx.locale.Manager.tr(\"Quality Assessment\");\n osparc.ui.window.Window.popUpInWindow(qualityEditor, title, 650, 700);\n return qualityEditor;\n },\n\n /**\n * Common layout of section's box\n * @param {page section's name} sectionName\n */\n __createSectionBox: function(sectionName) {\n const box = new qx.ui.groupbox.GroupBox(sectionName);\n box.getChildControl(\"legend\").set({\n font: \"text-14\"\n });\n box.getChildControl(\"frame\").set({\n backgroundColor: \"transparent\"\n });\n box.setLayout(new qx.ui.layout.VBox(10));\n return box;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget for creating a template from a study\n * - Creates a copy of study data\n * - Using the ShareWith widget allows to publish the template\n */\n\nqx.Class.define(\"osparc.study.SaveAsTemplate\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyData {Object} Object containing part or the entire serialized Study Data\n */\n construct: function(studyData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(20));\n\n this.__studyDataClone = osparc.data.model.Study.deepCloneStudyObject(studyData);\n\n this.__buildLayout();\n },\n\n events: {\n \"publishTemplate\": \"qx.event.type.Data\"\n },\n\n members: {\n __studyDataClone: null,\n __shareWith: null,\n __publishTemplateBtn: null,\n __copyWData: null,\n\n __buildLayout: function() {\n const publishWithData = this.__copyWData = new qx.ui.form.CheckBox(this.tr(\"Publish with data\")).set({\n value: true\n });\n this._add(publishWithData);\n\n const shareWith = this.__shareWith = new osparc.share.PublishTemplate(this.__studyDataClone);\n this._add(shareWith);\n\n const publishTemplateBtn = this.__publishTemplateBtn = new qx.ui.form.Button().set({\n appearance: \"strong-button\",\n label: this.tr(\"Publish\"),\n allowGrowX: false,\n alignX: \"right\"\n });\n publishTemplateBtn.addListener(\"execute\", () => this.__publishTemplate(), this);\n this._add(publishTemplateBtn);\n },\n\n __publishTemplate: function() {\n // AccessRights will be POSTed after the template is created.\n // No need to add myself, backend will automatically do it\n const accessRights = {}\n this.__studyDataClone[\"accessRights\"] = {};\n const selectedGroupIDs = this.__shareWith.getSelectedGroups();\n selectedGroupIDs.forEach(gid => {\n accessRights[gid] = osparc.share.CollaboratorsStudy.getViewerAccessRight();\n });\n\n this.fireDataEvent(\"publishTemplate\", {\n \"studyData\": this.__studyDataClone,\n \"copyData\": this.__copyWData.getValue(),\n \"accessRights\": accessRights\n });\n },\n\n getPublishTemplateButton: function() {\n return this.__publishTemplateBtn;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.StudyOptions\", {\n extend: qx.ui.core.Widget,\n\n construct: function(studyId) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n this.__buildLayout();\n\n if (studyId) {\n this.setStudyId(studyId);\n }\n },\n\n properties: {\n studyId: {\n check: \"String\",\n init: null,\n nullable: false,\n apply: \"__fetchStudy\"\n },\n\n wallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changeWallet\",\n apply: \"__applyWallet\"\n },\n\n patchStudy: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changePatchStudy\",\n },\n },\n\n events: {\n \"startStudy\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n statics: {\n popUpInWindow: function(resourceSelector) {\n const title = osparc.product.Utils.getStudyAlias({\n firstUpperCase: true\n }) + qx.locale.Manager.tr(\" Options\");\n const width = 550;\n const minHeight = 270;\n const win = osparc.ui.window.Window.popUpInWindow(resourceSelector, title, width, minHeight).set({\n clickAwayClose: false\n });\n\n win.set({\n maxHeight: 600\n });\n return win;\n },\n\n createGroupBox: function(label) {\n const box = new qx.ui.groupbox.GroupBox(label);\n box.getChildControl(\"legend\").set({\n font: \"text-14\",\n padding: 2\n });\n box.getChildControl(\"frame\").set({\n backgroundColor: \"transparent\",\n marginTop: 15,\n padding: 2\n });\n box.setLayout(new qx.ui.layout.VBox(5));\n return box;\n },\n\n updateName: function(studyData, name) {\n return osparc.store.Study.patchStudyData(studyData, \"name\", name)\n .catch(err => {\n console.error(err);\n const msg = err.message || qx.locale.Manager.tr(\"Something went wrong Renaming\");\n osparc.FlashMessenger.logAs(msg, \"ERROR\");\n });\n },\n\n updateWallet: function(studyId, walletId) {\n const params = {\n url: {\n studyId,\n walletId,\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"selectWallet\", params)\n .catch(err => {\n console.error(err);\n const msg = err.message || qx.locale.Manager.tr(\"Error selecting Credit Account\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n });\n },\n },\n\n members: {\n __studyData: null,\n __studyWalletId: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"title-layout\":\n control = osparc.study.StudyOptions.createGroupBox(this.tr(\"Title\"));\n this._addAt(control, 0);\n break;\n case \"title-field\":\n control = new qx.ui.form.TextField().set({\n maxWidth: 220\n });\n control.addListener(\"changeValue\", () => this.__evaluateOpenButton());\n osparc.utils.Utils.setIdToWidget(control, \"studyTitleField\");\n this.getChildControl(\"title-layout\").add(control);\n break;\n case \"wallet-selector-layout\":\n control = osparc.study.StudyOptions.createGroupBox(this.tr(\"Credit Account\"));\n this._addAt(control, 1);\n break;\n case \"wallet-selector\":\n control = osparc.desktop.credits.Utils.createWalletSelector(\"read\").set({\n allowGrowX: false\n });\n control.addListener(\"changeSelection\", () => this.__evaluateOpenButton());\n this.getChildControl(\"wallet-selector-layout\").add(control);\n break;\n case \"advanced-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(15));\n this._addAt(control, 2, {\n flex: 1\n });\n break;\n case \"advanced-checkbox\":\n control = new qx.ui.form.CheckBox().set({\n label: this.tr(\"Advanced options\"),\n value: false\n });\n this.getChildControl(\"advanced-layout\").add(control);\n break;\n case \"options-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n const scroll = new qx.ui.container.Scroll();\n this.getChildControl(\"advanced-checkbox\").bind(\"value\", scroll, \"visibility\", {\n converter: checked => checked ? \"visible\" : \"excluded\"\n });\n scroll.add(control);\n this.getChildControl(\"advanced-layout\").add(scroll, {\n flex: 1\n });\n break;\n }\n case \"loading-units-spinner\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/circle-notch/48\",\n alignX: \"center\",\n alignY: \"middle\",\n marginTop: 20\n });\n control.getContentElement().addClass(\"rotate\");\n this.getChildControl(\"options-layout\").add(control);\n break;\n case \"services-resources-layout\":\n control = this.self().createGroupBox(this.tr(\"Tiers\"));\n this.getChildControl(\"options-layout\").add(control);\n break;\n case \"study-pricing-units\": {\n control = new osparc.study.StudyPricingUnits();\n const loadingImage = this.getChildControl(\"loading-units-spinner\");\n const unitsBoxesLayout = this.getChildControl(\"services-resources-layout\");\n const unitsLoading = () => {\n loadingImage.show();\n unitsBoxesLayout.exclude();\n };\n const unitsReady = () => {\n loadingImage.exclude();\n unitsBoxesLayout.show();\n control.getNodePricingUnits().forEach(nodePricingUnits => {\n this.bind(\"patchStudy\", nodePricingUnits, \"patchNode\");\n });\n };\n unitsLoading();\n control.addListener(\"loadingUnits\", () => unitsLoading());\n control.addListener(\"unitsReady\", () => unitsReady());\n unitsBoxesLayout.add(control);\n break;\n }\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignX: \"right\"\n }));\n this._addAt(control, 3);\n break;\n case \"cancel-button\":\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\",\n font: \"text-14\",\n minWidth: 150,\n maxWidth: 150,\n height: 35,\n center: true\n });\n this.getChildControl(\"buttons-layout\").addAt(control, 0);\n break;\n case \"open-button\":\n control = new osparc.ui.form.FetchButton(this.tr(\"Open\")).set({\n appearance: \"form-button\",\n font: \"text-14\",\n minWidth: 150,\n maxWidth: 150,\n height: 35,\n center: true,\n enabled: false,\n });\n this.getChildControl(\"buttons-layout\").addAt(control, 1);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __fetchStudy: function(studyId) {\n const params = {\n url: {\n studyId\n }\n };\n Promise.all([\n osparc.data.Resources.getOne(\"studies\", params),\n osparc.data.Resources.fetch(\"studies\", \"getWallet\", params)\n ])\n .then(values => {\n const studyData = values[0];\n this.setStudyData(studyData);\n\n if (values[1] && \"walletId\" in values[1]) {\n this.__studyWalletId = values[1][\"walletId\"];\n }\n this.__buildLayout();\n });\n },\n\n setStudyData: function(studyData) {\n this.__studyData = osparc.data.model.Study.deepCloneStudyObject(studyData);\n\n const titleField = this.getChildControl(\"title-field\");\n titleField.setValue(this.__studyData[\"name\"]);\n\n const studyPricingUnits = this.getChildControl(\"study-pricing-units\");\n studyPricingUnits.setStudyData(this.__studyData);\n },\n\n __applyWallet: function(wallet) {\n if (wallet) {\n const walletSelector = this.getChildControl(\"wallet-selector\");\n walletSelector.getSelectables().forEach(selectable => {\n if (selectable.walletId === wallet.getWalletId()) {\n walletSelector.setSelection([selectable]);\n }\n });\n osparc.utils.Utils.growSelectBox(walletSelector, 220);\n }\n },\n\n __evaluateOpenButton: function() {\n const hasTitle = Boolean(this.getChildControl(\"title-field\").getValue());\n const walletSelected = Boolean(this.getChildControl(\"wallet-selector\").getSelection().length);\n const openButton = this.getChildControl(\"open-button\");\n openButton.setEnabled(hasTitle && walletSelected);\n if (hasTitle && walletSelected) {\n osparc.utils.Utils.setIdToWidget(openButton, \"openWithResources\");\n } else {\n osparc.utils.Utils.removeIdAttribute(openButton);\n }\n },\n\n __buildLayout: function() {\n this.__buildTopSummaryLayout();\n this.__buildOptionsLayout();\n this.__buildButtons();\n\n this.__evaluateOpenButton();\n },\n\n __buildTopSummaryLayout: function() {\n const store = osparc.store.Store.getInstance();\n\n const titleField = this.getChildControl(\"title-field\");\n titleField.addListener(\"appear\", () => {\n titleField.focus();\n titleField.activate();\n });\n\n // Wallet Selector\n const walletSelector = this.getChildControl(\"wallet-selector\");\n\n const wallets = store.getWallets();\n const selectWallet = walletId => {\n const found = wallets.find(wallet => wallet.getWalletId() === parseInt(walletId));\n if (found) {\n this.setWallet(found);\n } else {\n this.setWallet(null);\n }\n };\n walletSelector.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n selectWallet(selection[0].walletId);\n }\n });\n const preferredWallet = store.getPreferredWallet();\n if (wallets.find(wallet => wallet.getWalletId() === parseInt(this.__studyWalletId))) {\n selectWallet(this.__studyWalletId);\n } else if (preferredWallet) {\n selectWallet(preferredWallet.getWalletId());\n } else if (!osparc.desktop.credits.Utils.autoSelectActiveWallet(walletSelector)) {\n walletSelector.setSelection([]);\n }\n },\n\n __buildOptionsLayout: function() {\n this.getChildControl(\"study-pricing-units\");\n },\n\n __buildButtons: function() {\n // Open/Cancel buttons\n const cancelButton = this.getChildControl(\"cancel-button\");\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"));\n\n const openButton = this.getChildControl(\"open-button\");\n openButton.addListener(\"execute\", () => this.__openStudy());\n },\n\n __openStudy: async function() {\n const openButton = this.getChildControl(\"open-button\");\n openButton.setFetching(true);\n\n if (this.isPatchStudy()) {\n // first, update the name if necessary\n const titleSelection = this.getChildControl(\"title-field\").getValue();\n if (this.__studyData[\"name\"] !== titleSelection) {\n await this.self().updateName(this.__studyData, titleSelection);\n }\n\n // second, update the wallet if necessary\n const store = osparc.store.Store.getInstance();\n const walletSelection = this.getChildControl(\"wallet-selector\").getSelection();\n if (walletSelection.length && walletSelection[0][\"walletId\"]) {\n const studyId = this.getStudyId();\n const walletId = walletSelection[0][\"walletId\"];\n this.self().updateWallet(studyId, walletId)\n .then(() => {\n store.setActiveWallet(this.getWallet());\n this.fireEvent(\"startStudy\");\n })\n .finally(() => openButton.setFetching(false));\n } else {\n store.setActiveWallet(this.getWallet());\n this.fireEvent(\"startStudy\");\n openButton.setFetching(false);\n }\n } else {\n this.fireEvent(\"startStudy\");\n openButton.setFetching(false);\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Tobias Oetiker (oetiker)\n\n************************************************************************ */\n\n/* eslint \"qx-rules/no-refs-in-members\": \"warn\" */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n *\n * It consists of a thumbnail and creator and last change as caption\n */\n\nqx.Class.define(\"osparc.dashboard.GridButtonNew\", {\n extend: osparc.dashboard.GridButtonBase,\n\n construct: function(title, description) {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);\n\n this.set({\n appearance: \"pb-new\"\n });\n\n if (title) {\n title = osparc.utils.Utils.replaceTokens(\n title,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n\n const titleLabel = this.getChildControl(\"title\");\n titleLabel.set({\n value: title,\n rich: true\n });\n }\n\n if (description) {\n description = osparc.utils.Utils.replaceTokens(\n description,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n\n const descLabel = this.getChildControl(\"subtitle-text\");\n descLabel.setValue(description.toString());\n }\n\n this.setThumbnail(osparc.dashboard.CardBase.NEW_ICON);\n\n this.getChildControl(\"footer\").exclude();\n },\n\n members: {\n _shouldApplyFilter: function(data) {\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n *\n * It consists of a thumbnail and creator and last change as caption\n */\n\nqx.Class.define(\"osparc.dashboard.ListButtonBase\", {\n extend: osparc.dashboard.CardBase,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid();\n layout.setSpacing(10);\n layout.setColumnFlex(osparc.dashboard.ListButtonBase.POS.SPACER, 1);\n this._setLayout(layout);\n\n this.set({\n minHeight: osparc.dashboard.ListButtonBase.ITEM_HEIGHT,\n allowGrowX: true\n });\n\n this.getChildControl(\"spacer\");\n },\n\n statics: {\n ITEM_HEIGHT: 35,\n SPACING: 5,\n POS: {\n THUMBNAIL: 0,\n LOCK_STATUS: 1,\n TITLE: 2,\n SPACER: 3,\n PROGRESS: 4,\n TAGS: 5,\n ICONS_LAYOUT: 6,\n OWNER: 7,\n SHARED: 8,\n LAST_CHANGE: 9,\n TSR: 10,\n HITS: 11,\n OPTIONS: 12\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = osparc.dashboard.CardBase.createCardIcon();\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.THUMBNAIL\n });\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-light\",\n font: \"text-14\",\n alignY: \"middle\",\n maxWidth: 300,\n rich: true,\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.TITLE\n });\n break;\n case \"spacer\":\n control = new qx.ui.core.Spacer();\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.SPACER\n });\n break;\n case \"owner\":\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-dark\",\n font: \"text-12\",\n alignY: \"middle\",\n allowGrowX: true\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.OWNER\n });\n break;\n case \"icons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }))\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.ICONS_LAYOUT\n });\n break;\n case \"project-status\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n textColor: \"text\",\n height: 12,\n width: 12\n });\n this.getChildControl(\"icons-layout\").add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _applyIcon: function(value, old) {\n if (value) {\n if (value.includes(\"@FontAwesome5Solid/\")) {\n value += \"22\";\n }\n const image = this.getChildControl(\"icon\").getChildControl(\"image\");\n image.set({\n source: value\n });\n osparc.utils.Utils.setAltToImage(image, \"card-icon\");\n }\n },\n\n _applyThumbnail: function(value, old) {\n // do not shot thumbnail in list button, icon takes over\n return;\n },\n\n _applyTitle: function(value, old) {\n const label = this.getChildControl(\"title\");\n label.setValue(value);\n },\n\n _applyDescription: function(value, old) {\n return;\n }\n },\n\n destruct : function() {\n this.removeListener(\"pointerover\", this._onPointerOver, this);\n this.removeListener(\"pointerout\", this._onPointerOut, this);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n *\n * It consists of a thumbnail and creator and last change as caption\n */\n\nqx.Class.define(\"osparc.dashboard.ListButtonNew\", {\n extend: osparc.dashboard.ListButtonBase,\n\n construct: function(title) {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);\n\n this.set({\n appearance: \"pb-new\"\n });\n\n if (title) {\n title = osparc.utils.Utils.replaceTokens(\n title,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n\n const titleLabel = this.getChildControl(\"title\");\n titleLabel.set({\n value: title,\n rich: true\n });\n }\n\n this.setIcon(osparc.dashboard.CardBase.NEW_ICON);\n },\n\n members: {\n _shouldApplyFilter: function(data) {\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Tobias Oetiker (oetiker)\n\n************************************************************************ */\n\n/* eslint \"qx-rules/no-refs-in-members\": \"warn\" */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n *\n * It consists of a thumbnail and creator and last change as caption\n */\n\nqx.Class.define(\"osparc.dashboard.GridButtonItem\", {\n extend: osparc.dashboard.GridButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.ITEM);\n },\n\n statics: {\n MENU_BTN_DIMENSIONS: 24\n },\n\n members: {\n // overridden\n _createChildControlImpl: function(id) {\n let control;\n let layout;\n switch (id) {\n case \"tsr-rating\":\n control = osparc.dashboard.CardBase.createTSRLayout();\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.TSR);\n break;\n case \"workbench-mode\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n padding: [0, 5]\n });\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.UI_MODE);\n break;\n case \"empty-workbench\": {\n control = this._getEmptyWorkbenchIcon();\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.UPDATES);\n break;\n }\n case \"update-study\":\n control = new qx.ui.basic.Image().set({\n source: \"@MaterialIcons/update/16\",\n visibility: \"excluded\",\n alignY: \"middle\",\n padding: [0, 5]\n });\n osparc.utils.Utils.setIdToWidget(control, \"updateStudyBtn\");\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.UPDATES);\n break;\n case \"hits-service\":\n control = new qx.ui.basic.Label().set({\n toolTipText: this.tr(\"Number of times you instantiated it\"),\n alignY: \"middle\"\n });\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.HITS);\n break;\n case \"tags\":\n control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 3)).set({\n anonymous: true,\n paddingLeft: osparc.dashboard.GridButtonBase.PADDING,\n paddingRight: osparc.dashboard.GridButtonBase.PADDING,\n paddingBottom: osparc.dashboard.GridButtonBase.PADDING / 2\n });\n layout = this.getChildControl(\"main-layout\");\n layout.add(control, osparc.dashboard.GridButtonBase.POS.TAGS);\n break;\n case \"menu-button\":\n this.getChildControl(\"title\").set({\n maxWidth: osparc.dashboard.GridButtonBase.ITEM_WIDTH - osparc.dashboard.CardBase.ICON_SIZE - this.self().MENU_BTN_DIMENSIONS - 2,\n });\n control = new qx.ui.form.MenuButton().set({\n appearance: \"form-button-outlined\",\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n padding: [0, 8, 0, 8],\n alignX: \"center\",\n alignY: \"middle\",\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n osparc.utils.Utils.setIdToWidget(control, \"studyItemMenuButton\");\n this._add(control, {\n top: 6,\n right: 6,\n });\n break;\n case \"tick-unselected\":\n control = new qx.ui.basic.Atom().set({\n appearance: \"form-button-outlined\",\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n this._add(control, {\n top: 8,\n right: 8\n });\n break;\n case \"tick-selected\":\n control = new qx.ui.basic.Image().set({\n appearance: \"form-button\",\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n padding: 5,\n alignX: \"center\",\n alignY: \"middle\",\n source: \"@FontAwesome5Solid/check/12\",\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n this._add(control, {\n top: 8,\n right: 8\n });\n break;\n case \"lock-status\":\n control = new osparc.ui.basic.Thumbnail();\n this._add(control, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n break;\n case \"permission-icon\":\n control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({\n alignY: \"middle\",\n padding: [0, 5],\n toolTipText: this.tr(\"Viewer only\")\n });\n layout = this.getChildControl(\"footer\");\n layout.add(control, osparc.dashboard.GridButtonBase.FPOS.PERMISSION);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n // overridden\n _applyLastChangeDate: function(value, old) {\n if (value) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Last modified\"),\n });\n }\n }\n },\n\n // overridden\n _applyTrashedAt: function(value) {\n if (value && value.getTime() !== new Date(0).getTime()) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Deleted\"),\n });\n }\n }\n },\n\n // overridden\n _applyTrashedBy: function(gid) {\n if (gid) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.setGroupId(gid);\n }\n }\n },\n\n __createOwner: function(label) {\n if (label === osparc.auth.Data.getInstance().getEmail()) {\n const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());\n return qx.locale.Manager.tr(`My ${resourceAlias}`);\n }\n return osparc.utils.Utils.getNameFromEmail(label);\n },\n\n // overridden\n _applyOwner: function(value, old) {\n const label = this.getChildControl(\"subtitle-text\");\n const user = this.__createOwner(value);\n label.setValue(user);\n label.setVisibility(value ? \"visible\" : \"excluded\");\n },\n\n _applyAccessRights: function(value) {\n if (value && Object.keys(value).length) {\n const shareIcon = this.getChildControl(\"subtitle-icon\");\n shareIcon.addListener(\"tap\", e => {\n e.stopPropagation();\n this.openAccessRights();\n }, this);\n shareIcon.addListener(\"pointerdown\", e => e.stopPropagation());\n osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);\n\n if (this.isResourceType(\"study\")) {\n this._setStudyPermissions(value);\n }\n }\n },\n\n _applyTags: function(tags) {\n if (osparc.data.Permissions.getInstance().canDo(\"study.tag\")) {\n const maxTags = 2;\n const tagsContainer = this.getChildControl(\"tags\");\n tagsContainer.setVisibility(tags.length ? \"visible\" : \"excluded\");\n tagsContainer.removeAll();\n for (let i=0; i<=tags.length && i this.fireDataEvent(\"tagClicked\", tag));\n tagsContainer.add(tagUI);\n }\n if (tags.length > maxTags) {\n const moreButton = new qx.ui.basic.Label(this.tr(\"More...\")).set({\n font: \"text-12\",\n backgroundColor: \"strong-main\",\n appearance: \"tag\",\n });\n tagsContainer.add(moreButton);\n }\n }\n },\n\n // overridden\n _applyMenu: function(menu, old) {\n const menuButton = this.getChildControl(\"menu-button\");\n if (menu) {\n menuButton.setMenu(menu).set({\n appearance: \"menu-wider\",\n position: \"bottom-left\",\n });\n osparc.utils.Utils.setIdToWidget(menu, \"studyItemMenuMenu\");\n this.evaluateMenuButtons();\n }\n menuButton.setVisibility(menu ? \"visible\" : \"excluded\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n */\n\nqx.Class.define(\"osparc.dashboard.ListButtonItem\", {\n extend: osparc.dashboard.ListButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.ITEM);\n },\n\n statics: {\n MENU_BTN_DIMENSIONS: 24\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"lock-status\":\n control = new osparc.ui.basic.Thumbnail().set({\n minWidth: 40\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.LOCK_STATUS\n });\n break;\n case \"tags\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(3).set({\n alignY: \"middle\"\n })).set({\n anonymous: true,\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.TAGS\n });\n break;\n case \"shared-icon\":\n control = new qx.ui.basic.Image().set({\n minWidth: 30,\n alignY: \"middle\"\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.SHARED\n });\n break;\n case \"date-by\":\n control = new osparc.ui.basic.DateAndBy();\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.LAST_CHANGE\n });\n break;\n case \"tsr-rating\":\n control = osparc.dashboard.CardBase.createTSRLayout();\n this.__makeItemResponsive(control);\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.TSR\n });\n break;\n case \"permission-icon\":\n control = new qx.ui.basic.Image(osparc.dashboard.CardBase.PERM_READ).set({\n alignY: \"middle\",\n });\n this.getChildControl(\"icons-layout\").add(control);\n break;\n case \"workbench-mode\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\"\n });\n this.getChildControl(\"icons-layout\").add(control);\n break;\n case \"empty-workbench\":\n control = this._getEmptyWorkbenchIcon();\n control.set({\n alignY: \"middle\",\n alignX: \"center\"\n });\n this.getChildControl(\"icons-layout\").add(control);\n break;\n case \"update-study\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n source: \"@MaterialIcons/update/18\",\n visibility: \"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"updateStudyBtn\");\n this.getChildControl(\"icons-layout\").add(control);\n break;\n case \"hits-service\":\n control = new qx.ui.basic.Label().set({\n alignY: \"middle\",\n toolTipText: this.tr(\"Number of times you instantiated it\")\n });\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.HITS\n });\n break;\n case \"menu-selection-stack\":\n control = new qx.ui.container.Stack();\n control.set({\n alignX: \"center\",\n alignY: \"middle\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"studyItemMenuButton\");\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.OPTIONS\n });\n break;\n case \"tick-unselected\": {\n const menuSelectionStack = this.getChildControl(\"menu-selection-stack\");\n control = new qx.ui.basic.Atom().set({\n appearance: \"form-button-outlined\",\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n focusable: false\n });\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n menuSelectionStack.addAt(control, 1);\n break;\n }\n case \"tick-selected\": {\n const menuSelectionStack = this.getChildControl(\"menu-selection-stack\");\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/check/12\").set({\n appearance: \"form-button-outlined\",\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n padding: [6, 5],\n focusable: false\n });\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n menuSelectionStack.addAt(control, 2);\n break;\n }\n case \"menu-button\": {\n const menuSelectionStack = this.getChildControl(\"menu-selection-stack\");\n control = new qx.ui.form.MenuButton().set({\n appearance: \"form-button-outlined\",\n padding: [0, 8],\n maxWidth: this.self().MENU_BTN_DIMENSIONS,\n maxHeight: this.self().MENU_BTN_DIMENSIONS,\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n osparc.utils.Utils.setIdToWidget(control, \"studyItemMenuButton\");\n menuSelectionStack.addAt(control, 0);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n // overridden\n _applyLastChangeDate: function(value, old) {\n if (value) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Last modified\"),\n });\n }\n }\n },\n\n // overridden\n _applyTrashedAt: function(value) {\n if (value && value.getTime() !== new Date(0).getTime()) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Deleted\"),\n });\n }\n }\n },\n\n // overridden\n _applyTrashedBy: function(gid) {\n if (gid) {\n if (this.isResourceType(\"study\") || this.isResourceType(\"template\")) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.setGroupId(gid);\n }\n }\n },\n\n __createOwner: function(label) {\n if (label === osparc.auth.Data.getInstance().getEmail()) {\n const resourceAlias = osparc.utils.Utils.resourceTypeToAlias(this.getResourceType());\n return qx.locale.Manager.tr(`My ${resourceAlias}`);\n }\n return osparc.utils.Utils.getNameFromEmail(label);\n },\n\n _applyOwner: function(value, old) {\n const label = this.getChildControl(\"owner\");\n const user = this.__createOwner(value);\n label.setValue(user);\n this.__makeItemResponsive(label);\n return;\n },\n\n _applyAccessRights: function(value) {\n if (value && Object.keys(value).length) {\n const shareIcon = this.getChildControl(\"shared-icon\");\n shareIcon.addListener(\"tap\", e => {\n e.stopPropagation();\n this.openAccessRights();\n }, this);\n shareIcon.addListener(\"pointerdown\", e => e.stopPropagation());\n osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);\n\n if (this.isResourceType(\"study\")) {\n this._setStudyPermissions(value);\n }\n }\n },\n\n _applyTags: function(tags) {\n if (osparc.data.Permissions.getInstance().canDo(\"study.tag\")) {\n const maxTags = 2;\n const tagsContainer = this.getChildControl(\"tags\");\n tagsContainer.removeAll();\n for (let i=0; i<=tags.length && i this.fireDataEvent(\"tagClicked\", tag));\n tagsContainer.add(tagUI);\n }\n if (tags.length > maxTags) {\n const moreButton = new qx.ui.basic.Label(this.tr(\"More...\")).set({\n font: \"text-12\",\n backgroundColor: \"strong-main\",\n appearance: \"tag\",\n });\n tagsContainer.add(moreButton);\n }\n this.__makeItemResponsive(tagsContainer);\n }\n },\n\n __makeItemResponsive: function(item) {\n [\n \"appear\",\n \"resize\",\n ].forEach(ev => {\n this.addListener(ev, () => {\n const bounds = this.getBounds() || this.getSizeHint();\n item.setVisibility(bounds.width > 700 ? \"visible\" : \"excluded\");\n });\n });\n },\n\n _applyMenu: function(menu, old) {\n const menuButton = this.getChildControl(\"menu-button\");\n if (menu) {\n menuButton.setMenu(menu).set({\n appearance: \"menu-wider\",\n position: \"bottom-left\",\n });\n osparc.utils.Utils.setIdToWidget(menu, \"studyItemMenuMenu\");\n this.evaluateMenuButtons();\n }\n menuButton.setVisibility(menu ? \"visible\" : \"excluded\");\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n/**\n * Radio buttons are used to manage a single selection. Radio buttons only\n * make sense used in a group of two or more of them. They are managed (connected)\n * to a {@link qx.ui.form.RadioGroup} to handle the selection.\n */\nqx.Class.define(\"qx.ui.toolbar.RadioButton\",\n{\n extend : qx.ui.toolbar.CheckBox,\n include : [qx.ui.form.MModelProperty],\n implement : [qx.ui.form.IModel, qx.ui.form.IRadioItem],\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _applyValue : function(value, old)\n {\n this.base(arguments, value, old);\n\n if (value)\n {\n var grp = this.getGroup();\n if (grp) {\n grp.setSelection([this]);\n }\n }\n },\n\n\n // overridden\n _onExecute : function(e) {\n var grp = this.getGroup();\n if (grp && grp.getAllowEmptySelection()) {\n this.toggleValue();\n } else {\n this.setValue(true);\n }\n }\n }\n});","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Defines the methods all UIFilter elements should implement.\n */\nqx.Interface.define(\"osparc.filter.IFilter\", {\n members:{\n /**\n * Function in charge of resetting the filter.\n */\n reset: function() {\n this.assertArgumentsCount(arguments, 0, 0);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Base class for GUI filters. Stores the filter id and group id and implements common filter operations\n * like dispatching changes.\n */\nqx.Class.define(\"osparc.filter.UIFilter\", {\n extend: qx.ui.core.Widget,\n implement: osparc.filter.IFilter,\n type: \"abstract\",\n\n /**\n * Base constructor for UIFilter takes the mandatory ids for the filter and the filter group it belongs to.\n *\n * @param {string} filterId Group-unique id for the filter.\n * @param {string} filterGroupId Unique group id where the filter belongs.\n */\n construct: function(filterId, filterGroupId) {\n this.base(arguments);\n this.set({\n filterId,\n filterGroupId\n });\n\n osparc.filter.UIFilterController.getInstance().registerFilter(this);\n },\n\n properties: {\n filterId: {\n nullable: false,\n check: \"String\"\n },\n filterGroupId: {\n nullable: false,\n check: \"String\"\n }\n },\n\n members: {\n /**\n * Function that returns the name of the dispatched message when a filter changes.\n *\n * @param {string} suffix Will be added at the end of the message name to decrease the probability of message name collision.\n */\n _getMessageName: function(suffix = \"filter\") {\n return osparc.utils.Utils.capitalize(this.getFilterId(), this.getFilterGroupId(), suffix);\n },\n\n /**\n * Function that should be call whenever the filter wants to send its data to the controller and trigger some filtering.\n *\n * @param {Object} data Raw data coming from the filter.\n */\n _filterChange: function(data) {\n const filterData = {\n filterGroupId: this.getFilterGroupId(),\n filterId: this.getFilterId(),\n data\n };\n osparc.filter.UIFilterController.getInstance().publish(filterData);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * GUI filter controller. Stores the state of all grouped filters and dispatches it when they trigger a change.\n */\nqx.Class.define(\"osparc.filter.UIFilterController\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n },\n\n statics: {\n registerFilter: function(filterId) {\n this.getInstance().registerFilter(filterId);\n },\n registerContainer: function(containerId, container) {\n this.getInstance().registerFilterContainer(containerId, container);\n },\n resetGroup: function(filterGroupId) {\n this.getInstance().resetGroup(filterGroupId);\n },\n setContainerVisibility: function(containerId, visibility) {\n this.getInstance().setFilterContainerVisibility(containerId, visibility);\n },\n dispatch: function(filterGroupId) {\n this.getInstance().dispatch(filterGroupId);\n }\n },\n\n members: {\n __state: null,\n __filters: null,\n __filterContainers: null,\n\n /**\n * Function called by the base filter class to register a filter when after creating it.\n *\n * @param {osparc.filter.UIFilter} filter The filter to be registered.\n */\n registerFilter: function(filter) {\n const filterId = filter.getFilterId();\n const filterGroupId = filter.getFilterGroupId();\n // Store filter reference for managing\n this.__filters = this.__filters || {};\n this.__filters[filterGroupId] = this.__filters[filterGroupId] || {};\n this.__filters[filterGroupId][filterId] = filter;\n },\n\n /**\n * Function that registers a filter container for changing its visibility when required.\n *\n * @param {string} containerId Given id for the container.\n * @param {qx.ui.core.Widget} container Container widget for the filters.\n */\n registerContainer: function(containerId, container) {\n this.__filterContainers = this.__filterContainers || {};\n this.__filterContainers[containerId] = container;\n },\n\n /**\n * Function that calls the reset functions for all filters in a group.\n *\n * @param {string} filterGroupId Id of the filter group to be reset.\n */\n resetGroup: function(filterGroupId) {\n if (this.__filters[filterGroupId]) {\n for (let filterId in this.__filters[filterGroupId]) {\n this.__filters[filterGroupId][filterId].reset();\n }\n }\n },\n\n /**\n * Function to set the visibility of a previously registered filter container.\n *\n * @param {string} containerId Id of the container to change the visibility.\n * @param {string} visibility New visibility setting for the container.\n */\n setContainerVisibility: function(containerId, visibility) {\n if (this.__filterContainers[containerId]) {\n this.__filterContainers[containerId].setVisibility(visibility);\n }\n },\n\n __getInputMessageName: function(filterId, filterGroupId, suffix = \"filter\") {\n return osparc.utils.Utils.capitalize(filterId, filterGroupId, suffix);\n },\n\n __getOutputMessageName: function(filterGroupId, suffix = \"filter\") {\n return osparc.utils.Utils.capitalize(filterGroupId, suffix);\n },\n\n /**\n * Function called when a filter state changes and it wants to publish those changes to trigger the filtering.\n *\n * @param {Object} filterData Mandatory data coming from the filter.\n * @param {String} filterData.filterGroupId Group id of the filter that changed.\n * @param {String} filterData.filterId Filter id of the filter that changed.\n * @param {Object} filterData.data Data contained by the filter.\n */\n publish: function(filterData) {\n // Update state\n const {\n filterGroupId,\n filterId,\n data\n } = filterData;\n this.__state = this.__state || {};\n this.__state[filterGroupId] = this.__state[filterGroupId] || {};\n this.__state[filterGroupId][filterId] = data;\n // Dispatch relevant message\n this.dispatch(filterGroupId);\n },\n\n /**\n * This function actually dispatches the data for a filter group to apply filtering. It gets called\n * whenever a filter changes or can also be programmatically called.\n *\n * @param {String} filterGroupId Id of the filtering group whose data needs to be dispatched.\n */\n dispatch: function(filterGroupId) {\n if (this.__state && this.__state[filterGroupId]) {\n qx.event.message.Bus.getInstance().dispatchByName(this.__getOutputMessageName(filterGroupId), this.__state[filterGroupId]);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.SearchBarFilter\", {\n extend: osparc.filter.UIFilter,\n\n construct: function(resourceType) {\n this.__resourceType = resourceType;\n\n this.base(arguments, \"searchBarFilter-\"+resourceType, \"searchBarFilter\");\n\n this._setLayout(new qx.ui.layout.HBox(5));\n\n this.set({\n backgroundColor: \"input_background\",\n paddingLeft: 6,\n height: this.self().HEIGHT,\n decorator: \"rounded\",\n });\n\n this.__buildLayout();\n\n this.__buildFiltersMenu();\n\n this.__attachEventHandlers();\n\n this.__currentFilter = null;\n },\n\n statics: {\n HEIGHT: 36,\n\n getSharedWithOptions: function(resourceType) {\n return [{\n id: \"show-all\",\n label: qx.locale.Manager.tr(\"All \") + osparc.product.Utils.resourceTypeToAlias(resourceType, {\n firstUpperCase: true,\n plural: true\n }),\n icon: \"@FontAwesome5Solid/home/20\"\n }, {\n id: \"my-resources\",\n label: qx.locale.Manager.tr(\"My \") + osparc.product.Utils.resourceTypeToAlias(resourceType, {\n firstUpperCase: true,\n plural: true\n }),\n icon: \"@FontAwesome5Solid/user/20\"\n }, {\n id: \"shared-with-me\",\n label: qx.locale.Manager.tr(\"Shared with Me\"),\n icon: \"@FontAwesome5Solid/users/20\"\n }, {\n id: \"shared-with-everyone\",\n label: qx.locale.Manager.tr(\"Shared with Everyone\"),\n icon: \"@FontAwesome5Solid/globe/20\"\n }];\n }\n },\n\n events: {\n \"filterChanged\": \"qx.event.type.Data\"\n },\n\n members: {\n __resourceType: null,\n __currentFilter: null,\n __filtersMenu: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"search-icon\":\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/search/16\").set({\n backgroundColor: \"transparent\",\n alignY: \"middle\",\n paddingLeft: 6,\n opacity: 0.5\n });\n this._add(control);\n break;\n case \"active-filters\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(4));\n this._add(control);\n break;\n case \"text-field\":\n control = new qx.ui.form.TextField().set({\n backgroundColor: \"input_background\",\n font: \"text-16\",\n placeholder: this.tr(\"search\"),\n alignY: \"bottom\",\n marginBottom: 4\n });\n control.getContentElement().setStyles({\n \"border-bottom\": \"none\"\n });\n this._add(control, {\n flex: 1\n });\n break;\n case \"reset-button\":\n control = new qx.ui.toolbar.Button(null, \"@MaterialIcons/close/20\").set({\n cursor: \"pointer\",\n paddingLeft: 0,\n paddingRight: 10,\n alignY: \"middle\",\n opacity: 0.7\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"search-icon\");\n this.getChildControl(\"active-filters\");\n this.getChildControl(\"text-field\");\n this.getChildControl(\"reset-button\");\n },\n\n __buildFiltersMenu: function() {\n if (this.__filtersMenu === null) {\n this.__filtersMenu = new qx.ui.menu.Menu();\n }\n const menu = this.__filtersMenu;\n menu.removeAll();\n\n const sharedWithButton = new qx.ui.menu.Button(this.tr(\"Shared with\"), \"@FontAwesome5Solid/share-alt/12\");\n this.__addSharedWith(sharedWithButton);\n menu.add(sharedWithButton);\n\n if (this.__resourceType !== \"service\") {\n const tagsButton = new qx.ui.menu.Button(this.tr(\"Tags\"), \"@FontAwesome5Solid/tags/12\");\n osparc.utils.Utils.setIdToWidget(tagsButton, \"searchBarFilter-tags-button\");\n this.__addTags(tagsButton);\n menu.add(tagsButton);\n\n const classifiersButton = new qx.ui.menu.Button(this.tr(\"Classifiers\"), \"@FontAwesome5Solid/search/12\");\n this.__addClassifiers(classifiersButton);\n menu.add(classifiersButton);\n }\n\n if (this.__resourceType === \"service\") {\n const serviceTypeButton = new qx.ui.menu.Button(this.tr(\"Service Type\"), \"@FontAwesome5Solid/cogs/12\");\n this.__addServiceTypes(serviceTypeButton);\n menu.add(serviceTypeButton);\n }\n },\n\n __attachEventHandlers: function() {\n const textField = this.getChildControl(\"text-field\");\n textField.addListener(\"tap\", () => this.__showFilterMenu(), this);\n textField.addListener(\"deactivate\", () => this.__hideFilterMenu(), this);\n textField.addListener(\"keypress\", e => {\n if (e.getKeyIdentifier() === \"Enter\") {\n this.__filter();\n } else {\n this.__hideFilterMenu();\n }\n }, this);\n textField.addListener(\"changeValue\", () => this.__filter(), this);\n\n const resetButton = this.getChildControl(\"reset-button\");\n resetButton.addListener(\"execute\", () => this.__resetFilters(), this);\n\n osparc.store.Store.getInstance().addListener(\"changeTags\", () => this.__buildFiltersMenu(), this);\n },\n\n getTextFilterValue: function() {\n return this.getChildControl(\"text-field\").getValue();\n },\n\n __showFilterMenu: function() {\n if (this.getTextFilterValue()) {\n return;\n }\n\n const textField = this.getChildControl(\"text-field\");\n const element = textField.getContentElement().getDomElement();\n const {\n top,\n left\n } = qx.bom.element.Location.get(element);\n this.__filtersMenu.setLayoutProperties({\n top: top + 30,\n left: left\n });\n\n this.__filtersMenu.show();\n },\n\n __hideFilterMenu: function() {\n this.__filtersMenu.exclude();\n },\n\n __addTags: function(menuButton) {\n const tags = osparc.store.Tags.getInstance().getTags();\n menuButton.setVisibility(tags.length ? \"visible\" : \"excluded\");\n if (tags.length) {\n const tagsMenu = new qx.ui.menu.Menu();\n osparc.utils.Utils.setIdToWidget(tagsMenu, \"searchBarFilter-tags-menu\");\n tags.forEach(tag => {\n const tagButton = new qx.ui.menu.Button(tag.getName(), \"@FontAwesome5Solid/tag/12\");\n tagButton.getChildControl(\"icon\").setTextColor(tag.getColor());\n tagsMenu.add(tagButton);\n tagButton.addListener(\"execute\", () => this.addTagActiveFilter(tag), this);\n });\n menuButton.setMenu(tagsMenu);\n }\n },\n\n __addSharedWith: function(menuButton) {\n const options = this.self().getSharedWithOptions(this.__resourceType);\n const sharedWithMenu = new qx.ui.menu.Menu();\n const sharedWithRadioGroup = new qx.ui.form.RadioGroup();\n options.forEach((option, idx) => {\n const button = new qx.ui.menu.RadioButton(option.label);\n sharedWithMenu.add(button);\n button.addListener(\"execute\", () => this.setSharedWithActiveFilter(option.id, option.label), this);\n sharedWithRadioGroup.add(button);\n // preselect show-all\n if (idx === 0) {\n sharedWithRadioGroup.setSelection([button]);\n }\n });\n menuButton.setMenu(sharedWithMenu);\n },\n\n __addClassifiers: function(menuButton) {\n const classifiers = osparc.store.Store.getInstance().getClassifiers();\n menuButton.setVisibility(classifiers && classifiers.length ? \"visible\" : \"excluded\");\n if (classifiers && classifiers.length) {\n const classifiersMenu = new qx.ui.menu.Menu();\n classifiers.forEach(classifier => {\n const classifierButton = new qx.ui.menu.Button(classifier.display_name);\n classifiersMenu.add(classifierButton);\n classifierButton.addListener(\"execute\", () => this.__addChip(\"classifier\", classifier.classifier, classifier.display_name), this);\n });\n menuButton.setMenu(classifiersMenu);\n }\n },\n\n __addServiceTypes: function(menuButton) {\n const serviceTypeMenu = new qx.ui.menu.Menu();\n menuButton.setMenu(serviceTypeMenu);\n const serviceTypes = osparc.service.Utils.TYPES;\n Object.keys(serviceTypes).forEach(serviceId => {\n if (![\"computational\", \"dynamic\"].includes(serviceId)) {\n return;\n }\n const serviceType = serviceTypes[serviceId];\n const iconSize = 12;\n const serviceTypeButton = new qx.ui.menu.Button(serviceType.label, serviceType.icon+iconSize);\n serviceTypeMenu.add(serviceTypeButton);\n serviceTypeButton.addListener(\"execute\", () => this.__addChip(\"service-type\", serviceId, serviceType.label), this);\n });\n },\n\n addTagActiveFilter: function(tag) {\n this.__addChip(\"tag\", tag.getTagId(), tag.getName());\n },\n\n setTagsActiveFilter: function(tagIds) {\n const tags = osparc.store.Tags.getInstance().getTags();\n tags.forEach(tag => {\n const tagId = tag.getTagId();\n if (tagIds.includes(tagId)) {\n this.__addChip(\"tag\", tagId, tag.getName());\n } else {\n this.__removeChip(\"tag\", tagId, tag.getName());\n }\n });\n },\n\n\n setSharedWithActiveFilter: function(optionId, optionLabel) {\n this.__removeChips(\"shared-with\");\n if (optionId === \"show-all\") {\n this.__filter();\n } else {\n this.__addChip(\"shared-with\", optionId, optionLabel);\n }\n },\n\n setServiceTypeActiveFilter: function(optionId, optionLabel) {\n this.__removeChips(\"service-type\");\n if (optionId && optionLabel) {\n this.__addChip(\"service-type\", optionId, optionLabel);\n } else {\n this.__filter();\n }\n },\n\n __addChip: function(type, id, label) {\n const activeFilter = this.getChildControl(\"active-filters\");\n const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);\n if (chipFound) {\n return;\n }\n const chip = this.__createChip(type, id, label);\n activeFilter.add(chip);\n this.__filter();\n },\n\n __createChip: function(chipType, chipId, chipLabel) {\n const chipButton = new qx.ui.form.Button().set({\n label: osparc.utils.Utils.capitalize(chipType) + \" = '\" + chipLabel + \"'\",\n icon: \"@MaterialIcons/close/12\",\n toolTipText: chipLabel,\n appearance: \"chip-button\"\n });\n chipButton.type = chipType;\n chipButton.id = chipId;\n chipButton.addListener(\"execute\", () => this.__removeChip(chipType, chipId), this);\n return chipButton;\n },\n\n __removeChip: function(type, id) {\n const activeFilter = this.getChildControl(\"active-filters\");\n const chipFound = activeFilter.getChildren().find(chip => chip.type === type && chip.id === id);\n if (chipFound) {\n activeFilter.remove(chipFound);\n this.__filter();\n }\n },\n\n __removeChips: function(type) {\n const activeFilter = this.getChildControl(\"active-filters\");\n if (type) {\n const chipsFounds = activeFilter.getChildren().filter(chip => chip.type === type);\n for (let i=chipsFounds.length-1; i>=0; i--) {\n activeFilter.remove(chipsFounds[i]);\n }\n } else {\n activeFilter.removeAll();\n }\n },\n\n resetFilters: function() {\n this.__removeChips();\n this.getChildControl(\"text-field\").resetValue();\n },\n\n __resetFilters: function() {\n this.resetFilters();\n this.__filter();\n },\n\n getFilterData: function() {\n const filterData = {\n tags: [],\n classifiers: [],\n sharedWith: null,\n serviceType: null,\n text: \"\"\n };\n const textFilter = this.getTextFilterValue();\n filterData[\"text\"] = textFilter ? textFilter : \"\";\n this.getChildControl(\"active-filters\").getChildren().forEach(chip => {\n switch (chip.type) {\n case \"tag\":\n filterData.tags.push(chip.id);\n break;\n case \"classifier\":\n filterData.classifiers.push(chip.id);\n break;\n case \"shared-with\":\n filterData.sharedWith = chip.id === \"show-all\" ? null : chip.id;\n break;\n case \"service-type\":\n filterData.serviceType = chip.id;\n break;\n }\n });\n return filterData;\n },\n\n __filter: function() {\n const filterData = this.getFilterData();\n if (JSON.stringify(this.__currentFilter) !== JSON.stringify(filterData)) {\n this.__currentFilter = filterData;\n this.fireDataEvent(\"filterChanged\", filterData);\n this._filterChange(filterData);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A part is a container for multiple toolbar buttons. Each part comes\n * with a handle which may be used in later versions to drag the part\n * around and move it to another position. Currently mainly used\n * for structuring large toolbars beyond the capabilities of the\n * {@link Separator}.\n *\n * @childControl handle {qx.ui.basic.Image} prat handle to visualize the separation\n * @childControl container {qx.ui.toolbar.PartContainer} holds the content of the toolbar part\n */\nqx.Class.define(\"qx.ui.toolbar.Part\",\n{\n extend : qx.ui.core.Widget,\n include : [qx.ui.core.MRemoteChildrenHandling],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n // Hard coded HBox layout\n this._setLayout(new qx.ui.layout.HBox);\n\n // Force creation of the handle\n this._createChildControl(\"handle\");\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n appearance :\n {\n refine : true,\n init : \"toolbar/part\"\n },\n\n /** Whether icons, labels, both or none should be shown. */\n show :\n {\n init : \"both\",\n check : [ \"both\", \"label\", \"icon\" ],\n inheritable : true,\n event : \"changeShow\"\n },\n\n /** The spacing between every child of the toolbar */\n spacing :\n {\n nullable : true,\n check : \"Integer\",\n themeable : true,\n apply : \"_applySpacing\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"handle\":\n control = new qx.ui.basic.Image();\n control.setAlignY(\"middle\");\n this._add(control);\n break;\n\n case \"container\":\n control = new qx.ui.toolbar.PartContainer();\n control.addListener(\"syncAppearance\", this.__onSyncAppearance, this);\n this._add(control);\n control.addListener(\"changeChildren\", function() {\n this.__onSyncAppearance();\n }, this);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n // overridden\n getChildrenContainer : function() {\n return this.getChildControl(\"container\");\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY ROUTINES\n ---------------------------------------------------------------------------\n */\n\n _applySpacing : function(value, old)\n {\n var layout = this.getChildControl(\"container\").getLayout();\n value == null ? layout.resetSpacing() : layout.setSpacing(value);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n UTILITIES\n ---------------------------------------------------------------------------\n */\n /**\n * Helper which applies the left, right and middle states.\n */\n __onSyncAppearance : function() {\n // check every child\n var children = this.getChildrenContainer().getChildren();\n children = children.filter(function(child) {\n return child.getVisibility() == \"visible\";\n });\n for (var i = 0; i < children.length; i++) {\n // if its the first child\n if (i == 0 && i != children.length - 1) {\n children[i].addState(\"left\");\n children[i].removeState(\"right\");\n children[i].removeState(\"middle\");\n // if its the last child\n } else if (i == children.length - 1 && i != 0) {\n children[i].addState(\"right\");\n children[i].removeState(\"left\");\n children[i].removeState(\"middle\");\n // if there is only one child\n } else if (i == 0 && i == children.length - 1) {\n children[i].removeState(\"left\");\n children[i].removeState(\"middle\");\n children[i].removeState(\"right\");\n } else {\n children[i].addState(\"middle\");\n children[i].removeState(\"right\");\n children[i].removeState(\"left\");\n }\n };\n },\n\n\n /**\n * Adds a separator to the toolbar part.\n */\n addSeparator : function() {\n this.add(new qx.ui.toolbar.Separator);\n },\n\n\n /**\n * Returns all nested buttons which contains a menu to show. This is mainly\n * used for keyboard support.\n *\n * @return {Array} List of all menu buttons\n */\n getMenuButtons : function()\n {\n var children = this.getChildren();\n var buttons = [];\n var child;\n\n for (var i=0, l=children.length; i {\n let sortingValue = a.getPriority() - b.getPriority();\n return sortingValue;\n });\n }\n },\n\n cardExists: function(container, newCard) {\n const cardKey = newCard.isPropertyInitialized(\"cardKey\") ? newCard.getCardKey() : null;\n if (cardKey) {\n const idx = container.getChildren().findIndex(card => card.isPropertyInitialized(\"cardKey\") && newCard.getCardKey() === card.getCardKey());\n if (idx > -1) {\n return true;\n }\n }\n return false;\n }\n },\n\n members: {\n __foldersList: null,\n __workspacesList: null,\n __resourcesList: null,\n __groupedContainersList: null,\n __foldersContainer: null,\n __workspacesContainer: null,\n __nonGroupedContainer: null,\n __groupedContainers: null,\n\n addNonResourceCard: function(card) {\n if (osparc.dashboard.CardContainer.isValidCard(card)) {\n if (this.getGroupBy()) {\n // it will always go to the no-group group\n const noGroupContainer = this.__getGroupContainer(\"no-group\");\n this.__addCardToContainer(card, noGroupContainer);\n this.self().sortListByPriority(noGroupContainer.getContentContainer());\n } else {\n this.__addCardToContainer(card, this.__nonGroupedContainer);\n this.self().sortListByPriority(this.__nonGroupedContainer);\n }\n } else {\n console.error(\"CardContainer only allows CardBase as its children.\");\n }\n },\n\n removeNonResourceCard: function(card) {\n if (osparc.dashboard.CardContainer.isValidCard(card)) {\n if (this.getGroupBy()) {\n const noGroupContainer = this.__getGroupContainer(\"no-group\");\n if (noGroupContainer.getContentContainer().getChildren().indexOf(card) > -1) {\n noGroupContainer.getContentContainer().remove(card);\n }\n } else if (this.__nonGroupedContainer.getChildren().indexOf(card) > -1) {\n this.__nonGroupedContainer.remove(card);\n }\n } else {\n console.error(\"CardContainer only allows CardBase as its children.\");\n }\n },\n\n removeCard: function(uuid) {\n if (this.getGroupBy()) {\n this.__groupedContainersList.forEach(groupedContainer => groupedContainer.removeCard(uuid));\n } else {\n this.__nonGroupedContainer.removeCard(uuid);\n }\n },\n\n getFlatList: function() {\n return this.__nonGroupedContainer;\n },\n\n __createGroupContainer: function(groupId, headerLabel, headerColor = \"text\") {\n const groupContainer = new osparc.dashboard.GroupedCardContainer().set({\n groupId: groupId.toString(),\n headerLabel,\n headerIcon: \"\",\n headerColor,\n visibility: \"excluded\"\n });\n this.__groupedContainersList.push(groupContainer);\n return groupContainer;\n },\n\n areMoreResourcesRequired: function(loadingResourcesBtn) {\n if (this.__nonGroupedContainer) {\n return this.__nonGroupedContainer.areMoreResourcesRequired(loadingResourcesBtn);\n }\n // If containers are grouped all the resources are expected to be fetched\n return false;\n },\n\n getCards: function() {\n if (this.__nonGroupedContainer) {\n return this.__nonGroupedContainer.getChildren();\n }\n const cards = [];\n this.__groupedContainersList.forEach(groupedContainer => cards.push(...groupedContainer.getCards()));\n return cards;\n },\n\n getSelection: function() {\n if (this.getGroupBy() === null) {\n return this.__nonGroupedContainer.getSelection();\n }\n return [];\n },\n\n resetSelection: function() {\n if (this.getGroupBy() === null && this.__nonGroupedContainer) {\n this.__nonGroupedContainer.resetSelection();\n }\n },\n\n __getGroupContainer: function(gid) {\n const idx = this.__groupedContainersList.findIndex(groupContainer => groupContainer.getGroupId() === gid.toString());\n if (idx > -1) {\n return this.__groupedContainersList[idx];\n }\n return null;\n },\n\n __createCard: function(resourceData) {\n const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];\n const card = this.getMode() === \"grid\" ? new osparc.dashboard.GridButtonItem() : new osparc.dashboard.ListButtonItem();\n card.set({\n appearance: resourceData.type ? `pb-${resourceData.type}` : `pb-${resourceData.resourceType}`,\n resourceData: resourceData,\n tags\n });\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n card.setMenu(menu);\n if (resourceData.type !== \"study\") {\n // the backend will do the projects:search\n card.subscribeToFilterGroup(\"searchBarFilter\");\n }\n\n [\n \"updateStudy\",\n \"updateTemplate\",\n \"updateService\",\n \"publishTemplate\",\n \"tagClicked\",\n \"emptyStudyClicked\"\n ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));\n return card;\n },\n\n __addCardToContainer: function(card, container) {\n if (container == null) {\n return;\n }\n\n container.add(card);\n\n if (this.getMode() === \"list\") {\n const fitToContainer = () => {\n const bounds = container.getBounds() || container.getSizeHint();\n card.setWidth(bounds.width);\n };\n [\n \"appear\",\n \"resize\",\n ].forEach(ev => {\n container.addListener(ev, () => fitToContainer());\n });\n fitToContainer();\n }\n },\n\n setResourcesToList: function(resourcesList) {\n this.__resourcesList = resourcesList;\n },\n\n __cleanAll: function() {\n if (this._getChildren().includes(this.__nonGroupedContainer)) {\n this._remove(this.__nonGroupedContainer);\n }\n if (this._getChildren().includes(this.__groupedContainers)) {\n this._remove(this.__groupedContainers);\n }\n\n if (this.__nonGroupedContainer) {\n this.__nonGroupedContainer.removeAll();\n this.__nonGroupedContainer = null;\n }\n if (this.__groupedContainers) {\n this.__groupedContainers.removeAll();\n }\n this.__groupedContainersList.forEach(groupedContainer => {\n groupedContainer.getContentContainer().removeAll();\n });\n this.__groupedContainersList = [];\n },\n\n __addFoldersContainer: function() {\n // add foldersContainer dynamically\n [\n \"addChildWidget\",\n \"removeChildWidget\"\n ].forEach(ev => {\n this.__foldersContainer.addListener(ev, () => {\n const children = this.__foldersContainer.getChildren();\n if (children.length && !children.includes(this.__foldersContainer)) {\n this._addAt(this.__foldersContainer, 0);\n return;\n }\n if (children.length === 0 && children.includes(this.__foldersContainer)) {\n this._remove(this.__foldersContainer);\n return;\n }\n })\n });\n },\n\n __rebuildLayout: function(resourceType) {\n this.__cleanAll();\n if (this.getGroupBy()) {\n const noGroupContainer = this.__createGroupContainer(\"no-group\", \"No Group\", \"transparent\");\n this.__groupedContainers.add(noGroupContainer);\n this._add(this.__groupedContainers);\n } else {\n const flatList = this.__nonGroupedContainer = this.__createFlatList();\n osparc.utils.Utils.setIdToWidget(flatList, resourceType + \"List\");\n this._add(flatList);\n }\n },\n\n __createFlatList: function() {\n const flatList = new osparc.dashboard.CardContainer();\n const setContainerSpacing = () => {\n const spacing = this.getMode() === \"grid\" ? osparc.dashboard.GridButtonBase.SPACING : osparc.dashboard.ListButtonBase.SPACING;\n flatList.getLayout().set({\n spacingX: spacing,\n spacingY: spacing\n });\n };\n setContainerSpacing();\n this.addListener(\"changeMode\", () => setContainerSpacing());\n [\n \"changeSelection\",\n \"changeVisibility\"\n ].forEach(signalName => {\n flatList.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);\n });\n return flatList;\n },\n\n reloadCards: function(resourceType) {\n this.__rebuildLayout(resourceType);\n\n const cards = [];\n this.__resourcesList.forEach(resourceData => {\n Array.prototype.push.apply(cards, this.__resourceToCards(resourceData));\n });\n return cards;\n },\n\n reloadNewCards: function() {\n let newCards = [];\n const currentCards = this.getCards();\n this.__resourcesList.forEach(resourceData => {\n const idx = currentCards.findIndex(card => card.isPropertyInitialized(\"uuid\") && resourceData[\"uuid\"] === card.getUuid());\n if (idx === -1) {\n Array.prototype.push.apply(newCards, this.__resourceToCards(resourceData));\n }\n });\n return newCards;\n },\n\n // WORKSPACES\n setWorkspacesToList: function(workspacesList) {\n this.__workspacesList = workspacesList;\n },\n\n reloadWorkspaces: function() {\n if (this.__workspacesContainer) {\n this.__workspacesContainer.removeAll();\n }\n let workspacesCards = [];\n this.__workspacesList.forEach(workspaceData => workspacesCards.push(this.__workspaceToCard(workspaceData)));\n return workspacesCards;\n },\n\n addNewWorkspaceCard: function(newWorkspaceCard) {\n this.__workspacesContainer.addAt(newWorkspaceCard, 0);\n },\n\n __workspaceToCard: function(workspaceData) {\n const card = this.__createWorkspaceCard(workspaceData);\n this.__workspacesContainer.add(card);\n return card;\n },\n\n __createWorkspaceCard: function(workspace) {\n const card = new osparc.dashboard.WorkspaceButtonItem(workspace);\n [\n \"workspaceSelected\",\n \"workspaceUpdated\",\n \"trashWorkspaceRequested\",\n \"untrashWorkspaceRequested\",\n \"deleteWorkspaceRequested\",\n ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));\n return card;\n },\n // /WORKSPACES\n\n // FOLDERS\n setFoldersToList: function(foldersList) {\n this.__foldersList = foldersList;\n },\n\n reloadFolders: function() {\n if (this.__foldersContainer) {\n this.__foldersContainer.removeAll();\n }\n let folderCards = [];\n this.__foldersList.forEach(folderData => folderCards.push(this.__folderToCard(folderData)));\n return folderCards;\n },\n\n addNewFolderCard: function(newFolderCard) {\n this.__foldersContainer.addAt(newFolderCard, 0);\n },\n\n __folderToCard: function(folderData) {\n const card = this.__createFolderCard(folderData);\n this.__foldersContainer.add(card);\n return card;\n },\n\n __createFolderCard: function(folder) {\n const card = new osparc.dashboard.FolderButtonItem(folder);\n [\n \"folderSelected\",\n \"folderUpdated\",\n \"moveFolderToRequested\",\n \"trashFolderRequested\",\n \"untrashFolderRequested\",\n \"deleteFolderRequested\",\n \"changeContext\",\n \"studyToFolderRequested\",\n \"folderToFolderRequested\",\n ].forEach(eName => card.addListener(eName, e => this.fireDataEvent(eName, e.getData())));\n return card;\n },\n // /FOLDERS\n\n __moveNoGroupToLast: function() {\n const idx = this.__groupedContainers.getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer(\"no-group\"));\n if (idx > -1) {\n this.__groupedContainers.getChildren().push(this.__groupedContainers.getChildren().splice(idx, 1)[0]);\n }\n },\n\n __groupByTags: function(cards, resourceData) {\n const tags = resourceData.tags ? osparc.store.Tags.getInstance().getTags().filter(tag => resourceData.tags.includes(tag.getTagId())) : [];\n if (tags.length === 0) {\n let noGroupContainer = this.__getGroupContainer(\"no-group\");\n const card = this.__createCard(resourceData);\n this.__addCardToContainer(card, noGroupContainer);\n this.self().sortListByPriority(noGroupContainer.getContentContainer());\n cards.push(card);\n } else {\n tags.forEach(tag => {\n let groupContainer = this.__getGroupContainer(tag.getTagId());\n if (groupContainer === null) {\n groupContainer = this.__createGroupContainer(tag.getTagId(), tag.getName(), tag.getColor());\n tag.bind(\"name\", groupContainer, \"headerLabel\");\n tag.bind(\"color\", groupContainer, \"headerColor\");\n groupContainer.setHeaderIcon(\"@FontAwesome5Solid/tag/24\");\n this.__groupedContainers.add(groupContainer);\n this.__groupedContainers.getChildren().sort((a, b) => a.getHeaderLabel().localeCompare(b.getHeaderLabel()));\n this.__moveNoGroupToLast();\n }\n const card = this.__createCard(resourceData);\n this.__addCardToContainer(card, groupContainer);\n this.self().sortListByPriority(groupContainer.getContentContainer());\n cards.push(card);\n });\n }\n },\n\n __groupByShareWith: function(cards, resourceData) {\n const orgIds = resourceData.accessRights ? Object.keys(resourceData[\"accessRights\"]) : [];\n if (orgIds.length === 0) {\n let noGroupContainer = this.__getGroupContainer(\"no-group\");\n const card = this.__createCard(resourceData);\n this.__addCardToContainer(card, noGroupContainer);\n this.self().sortListByPriority(noGroupContainer.getContentContainer());\n cards.push(card);\n } else {\n orgIds.forEach(orgId => {\n let groupContainer = this.__getGroupContainer(orgId);\n if (groupContainer === null) {\n groupContainer = this.__createGroupContainer(orgId, \"loading-label\");\n const groupsStore = osparc.store.Groups.getInstance();\n const group = groupsStore.getGroup(orgId);\n if (group) {\n let icon = \"\";\n if (group.getThumbnail()) {\n icon = group.getThumbnail();\n } else if (group[\"collabType\"] === 0) {\n icon = \"@FontAwesome5Solid/globe/24\";\n } else if (group[\"collabType\"] === 1) {\n icon = \"@FontAwesome5Solid/users/24\";\n } else if (group[\"collabType\"] === 2) {\n icon = \"@FontAwesome5Solid/user/24\";\n }\n groupContainer.set({\n headerIcon: icon,\n headerLabel: group.getLabel(),\n });\n } else {\n groupContainer.exclude();\n }\n this.__groupedContainers.add(groupContainer);\n this.__moveNoGroupToLast();\n }\n const card = this.__createCard(resourceData);\n this.__addCardToContainer(card, groupContainer);\n this.self().sortListByPriority(groupContainer.getContentContainer());\n cards.push(card);\n });\n }\n },\n\n __resourceToCards: function(resourceData) {\n const cardsCreated = [];\n if (this.getGroupBy() === \"tags\") {\n this.__groupByTags(cardsCreated, resourceData);\n } else if (this.getGroupBy() === \"shared\") {\n this.__groupByShareWith(cardsCreated, resourceData);\n } else {\n const card = this.__createCard(resourceData);\n this.__addCardToContainer(card, this.__nonGroupedContainer);\n this.self().sortListByPriority(this.__nonGroupedContainer);\n cardsCreated.push(card);\n }\n return cardsCreated;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Renders a special radio button inside a menu. The button behaves like\n * a normal {@link qx.ui.form.RadioButton} and shows a radio icon when\n * checked; normally shows no icon when not checked (depends on the theme).\n */\nqx.Class.define(\"qx.ui.menu.RadioButton\",\n{\n extend : qx.ui.menu.AbstractButton,\n include : [qx.ui.form.MModelProperty],\n implement : [qx.ui.form.IRadioItem, qx.ui.form.IBooleanForm, qx.ui.form.IModel],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param label {String} Initial label\n * @param menu {qx.ui.menu.Menu} Initial sub menu\n */\n construct : function(label, menu)\n {\n this.base(arguments);\n\n // Initialize with incoming arguments\n if (label != null) {\n this.setLabel(label);\n }\n\n if (menu != null) {\n this.setMenu(menu);\n }\n\n this.addListener(\"execute\", this._onExecute, this);\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"menu-radiobutton\"\n },\n\n /** The value of the widget. True, if the widget is checked. */\n value :\n {\n check : \"Boolean\",\n nullable : true,\n event : \"changeValue\",\n apply : \"_applyValue\",\n init : false\n },\n\n /** The assigned qx.ui.form.RadioGroup which handles the switching between registered buttons */\n group :\n {\n check : \"qx.ui.form.RadioGroup\",\n nullable : true,\n apply : \"_applyGroup\"\n }\n },\n\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // overridden (from MExecutable to keep the icon out of the binding)\n /**\n * @lint ignoreReferenceField(_bindableProperties)\n */\n _bindableProperties :\n [\n \"enabled\",\n \"label\",\n \"toolTipText\",\n \"value\",\n \"menu\"\n ],\n\n\n // property apply\n _applyValue : function(value, old) {\n value ? this.addState(\"checked\") : this.removeState(\"checked\");\n },\n\n\n // property apply\n _applyGroup : function(value, old)\n {\n if (old) {\n old.remove(this);\n }\n\n if (value) {\n value.add(this);\n }\n },\n\n\n /**\n * Handler for the execute event.\n *\n * @param e {qx.event.type.Event} The execute event.\n */\n _onExecute : function(e) {\n var grp = this.getGroup();\n if (grp && grp.getAllowEmptySelection()) {\n this.toggleValue();\n } else {\n this.setValue(true);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.dashboard.ResourceFilter\", {\n extend: qx.ui.core.Widget,\n\n construct: function(resourceType) {\n this.base(arguments);\n\n osparc.utils.Utils.setIdToWidget(this, resourceType + \"-resourceFilter\");\n\n this.__resourceType = resourceType;\n this.__sharedWithButtons = [];\n this.__tagButtons = [];\n this.__serviceTypeButtons = [];\n\n this._setLayout(new qx.ui.layout.VBox(15));\n this.__buildLayout();\n },\n\n events: {\n \"trashContext\": \"qx.event.type.Event\",\n \"changeTab\": \"qx.event.type.Data\",\n \"trashStudyRequested\": \"qx.event.type.Data\",\n \"trashFolderRequested\": \"qx.event.type.Data\",\n \"changeSharedWith\": \"qx.event.type.Data\",\n \"changeSelectedTags\": \"qx.event.type.Data\",\n \"changeServiceType\": \"qx.event.type.Data\"\n },\n\n members: {\n __resourceType: null,\n __workspacesAndFoldersTree: null,\n __trashButton: null,\n __sharedWithButtons: null,\n __tagButtons: null,\n __serviceTypeButtons: null,\n\n __buildLayout: function() {\n const filtersSpacer = new qx.ui.core.Spacer(10, 10);\n switch (this.__resourceType) {\n case \"study\": {\n this._add(this.__createWorkspacesAndFoldersTree());\n this._add(this.__createTrashBin());\n // this._add(this.__createResourceTypeContextButtons());\n this._add(filtersSpacer);\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(this.__createTagsFilterLayout());\n this._add(scrollView, {\n flex: 1\n });\n break;\n }\n case \"template\": {\n // this._add(this.__createResourceTypeContextButtons());\n this._add(filtersSpacer);\n this._add(this.__createSharedWithFilterLayout());\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(this.__createTagsFilterLayout());\n this._add(scrollView, {\n flex: 1\n });\n break;\n }\n case \"service\":\n // this._add(this.__createResourceTypeContextButtons());\n this._add(filtersSpacer);\n this._add(this.__createSharedWithFilterLayout());\n this._add(this.__createServiceTypeFilterLayout());\n break;\n }\n },\n\n contextChanged: function(context, workspaceId, folderId) {\n this.__workspacesAndFoldersTree.set({\n currentWorkspaceId: workspaceId,\n currentFolderId: folderId,\n });\n this.__workspacesAndFoldersTree.contextChanged(context);\n\n this.__trashButton.setValue(context === \"trash\");\n },\n\n /* WORKSPACES AND FOLDERS */\n __createWorkspacesAndFoldersTree: function() {\n const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();\n osparc.utils.Utils.setIdToWidget(workspacesAndFoldersTree, \"contextTree\");\n // Height needs to be calculated manually to make it flexible\n workspacesAndFoldersTree.set({\n minHeight: 60, // two entries\n maxHeight: 400,\n height: 60,\n });\n workspacesAndFoldersTree.addListener(\"openChanged\", () => {\n const rowConfig = workspacesAndFoldersTree.getPane().getRowConfig();\n const totalHeight = rowConfig.itemCount * rowConfig.defaultItemSize;\n workspacesAndFoldersTree.setHeight(totalHeight + 2);\n });\n return workspacesAndFoldersTree;\n },\n\n getWorkspacesAndFoldersTree: function() {\n return this.__workspacesAndFoldersTree;\n },\n /* /WORKSPACES AND FOLDERS */\n\n /* TRASH BIN */\n __createTrashBin: function() {\n const trashButton = this.__trashButton = new qx.ui.toolbar.RadioButton().set({\n value: false,\n appearance: \"filter-toggle-button\",\n label: this.tr(\"Recently Deleted\"),\n icon: \"@FontAwesome5Solid/trash-alt/16\",\n paddingLeft: 10, // align it with the context\n });\n trashButton.addListener(\"changeValue\", e => {\n const trashEnabled = e.getData();\n if (trashEnabled) {\n this.fireEvent(\"trashContext\");\n }\n });\n this.evaluateTrashEmpty();\n this.__attachDropHandlers(trashButton);\n return trashButton;\n },\n\n __attachDropHandlers: function(trashButton) {\n trashButton.setDroppable(true);\n\n trashButton.addListener(\"dragover\", e => {\n if (e.supportsType(\"osparc-moveStudy\")) {\n osparc.dashboard.DragDropHelpers.trashStudy.dragOver(e);\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n osparc.dashboard.DragDropHelpers.trashFolder.dragOver(e);\n }\n });\n\n trashButton.addListener(\"dragleave\", () => {\n osparc.dashboard.DragDropHelpers.dragLeave();\n });\n\n trashButton.addListener(\"drop\", e => {\n if (e.supportsType(\"osparc-moveStudy\")) {\n const studyData = osparc.dashboard.DragDropHelpers.trashStudy.drop(e);\n this.fireDataEvent(\"trashStudyRequested\", studyData);\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n const folderId = osparc.dashboard.DragDropHelpers.trashFolder.drop(e);\n this.fireDataEvent(\"trashFolderRequested\", folderId);\n }\n });\n },\n\n evaluateTrashEmpty: function() {\n if (osparc.auth.Data.getInstance().isGuest()) {\n // Guests do not have access to folders and workspaces\n return;\n }\n\n const studiesParams = {\n url: {\n offset: 0,\n limit: 1, // just one\n orderBy: JSON.stringify({\n field: \"last_change_date\",\n direction: \"desc\"\n }),\n }\n };\n const foldersParams = {\n url: {\n offset: 0,\n limit: 1, // just one\n orderBy: JSON.stringify({\n field: \"modified_at\",\n direction: \"desc\"\n }),\n }\n };\n const workspacesParams = {\n url: {\n offset: 0,\n limit: 1, // just one\n orderBy: JSON.stringify({\n field: \"modified_at\",\n direction: \"desc\"\n }),\n }\n };\n Promise.all([\n osparc.data.Resources.fetch(\"studies\", \"getPageTrashed\", studiesParams),\n osparc.data.Resources.fetch(\"folders\", \"getPageTrashed\", foldersParams),\n osparc.data.Resources.fetch(\"workspaces\", \"getPageTrashed\", workspacesParams),\n ])\n .then(values => {\n const nTrashedStudies = values[0].length;\n const nTrashedFolders = values[1].length;\n const nTrashedWorkspaces = values[2].length;\n this.setTrashEmpty((nTrashedStudies+nTrashedFolders+nTrashedWorkspaces) === 0);\n })\n .catch(err => console.error(err));\n },\n\n setTrashEmpty: function(isEmpty) {\n this.__trashButton.set({\n icon: isEmpty ? \"@FontAwesome5Solid/trash-alt/16\" : \"@FontAwesome5Solid/trash/16\"\n });\n },\n /* /TRASH BIN */\n\n /* RESOURCE TYPE CONTEXT */\n __createResourceTypeContextButtons: function() {\n const resourceTypeContextButtons = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));\n\n const studiesButton = this.__createStudiesButton().set({\n value: this.__resourceType === \"study\",\n visibility: this.__resourceType === \"study\" ? \"excluded\" : \"visible\",\n });\n resourceTypeContextButtons.add(studiesButton);\n\n const permissions = osparc.data.Permissions.getInstance();\n const templatesButton = this.__createTemplatesButton().set({\n value: this.__resourceType === \"template\",\n });\n if (permissions.canDo(\"dashboard.templates.read\")) {\n resourceTypeContextButtons.add(templatesButton);\n }\n\n const servicesButton = this.__createServicesButton().set({\n value: this.__resourceType === \"service\",\n });\n if (permissions.canDo(\"dashboard.services.read\")) {\n resourceTypeContextButtons.add(servicesButton);\n }\n\n return resourceTypeContextButtons;\n },\n\n __createStudiesButton: function() {\n const studyAlias = osparc.product.Utils.getStudyAlias({\n firstUpperCase: true,\n plural: true\n });\n const studiesButton = new qx.ui.toolbar.RadioButton().set({\n value: false,\n appearance: \"filter-toggle-button\",\n label: studyAlias,\n icon: \"@FontAwesome5Solid/file/16\",\n paddingLeft: 10, // align it with the context\n });\n osparc.utils.Utils.setIdToWidget(studiesButton, \"studiesTabBtn\");\n studiesButton.addListener(\"tap\", () => {\n studiesButton.setValue(this.__resourceType === \"study\");\n this.fireDataEvent(\"changeTab\", \"studiesTab\");\n });\n return studiesButton;\n },\n\n __createTemplatesButton: function() {\n const templateAlias = osparc.product.Utils.getTemplateAlias({\n firstUpperCase: true,\n plural: true\n });\n const templatesButton = new qx.ui.toolbar.RadioButton().set({\n value: false,\n appearance: \"filter-toggle-button\",\n label: templateAlias,\n icon: \"@FontAwesome5Solid/copy/16\",\n paddingLeft: 10, // align it with the context\n });\n osparc.utils.Utils.setIdToWidget(templatesButton, \"templatesTabBtn\");\n templatesButton.addListener(\"tap\", () => {\n templatesButton.setValue(this.__resourceType === \"template\");\n this.fireDataEvent(\"changeTab\", \"templatesTab\");\n });\n return templatesButton;\n },\n\n __createServicesButton: function() {\n const servicesButton = new qx.ui.toolbar.RadioButton().set({\n value: false,\n appearance: \"filter-toggle-button\",\n label: this.tr(\"Services\"),\n icon: \"@FontAwesome5Solid/cogs/16\",\n paddingLeft: 10, // align it with the context\n });\n osparc.utils.Utils.setIdToWidget(servicesButton, \"servicesTabBtn\");\n servicesButton.addListener(\"tap\", () => {\n servicesButton.setValue(this.__resourceType === \"service\");\n this.fireDataEvent(\"changeTab\", \"servicesTab\");\n });\n return servicesButton;\n },\n /* /RESOURCE TYPE CONTEXT */\n\n /* SHARED WITH */\n __createSharedWithFilterLayout: function() {\n const sharedWithLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));\n\n const sharedWithRadioGroup = new qx.ui.form.RadioGroup();\n sharedWithRadioGroup.setAllowEmptySelection(false);\n\n const options = osparc.dashboard.SearchBarFilter.getSharedWithOptions(this.__resourceType);\n options.forEach(option => {\n if (this.__resourceType === \"study\" && option.id === \"shared-with-everyone\") {\n return;\n }\n const button = new qx.ui.toolbar.RadioButton().set({\n appearance: \"filter-toggle-button\",\n label: option.label,\n icon: option.icon,\n });\n osparc.utils.Utils.setIdToWidget(button, this.__resourceType + \"-sharedWithFilterItem\");\n if (this.__resourceType === \"study\") {\n if (option.id === \"show-all\") {\n button.set({\n label: this.tr(\"My Workspace\")\n });\n } else if (option.id === \"shared-with-me\") {\n button.set({\n label: this.tr(\"Shared\") + \" \" + osparc.product.Utils.getStudyAlias({\n firstUpperCase: true,\n plural: true,\n })\n });\n }\n }\n button.id = option.id;\n\n sharedWithLayout.add(button);\n sharedWithRadioGroup.add(button);\n\n button.addListener(\"execute\", () => {\n this.fireDataEvent(\"changeSharedWith\", {\n id: option.id,\n label: option.label\n });\n }, this);\n\n this.__sharedWithButtons.push(button);\n });\n\n return sharedWithLayout;\n },\n /* /SHARED WITH */\n\n /* TAGS */\n __createTagsFilterLayout: function() {\n const tagsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));\n osparc.utils.Utils.setIdToWidget(tagsLayout, this.__resourceType + \"-tagsFilter\");\n\n this.__populateTags(tagsLayout, []);\n osparc.store.Tags.getInstance().addListener(\"tagsChanged\", () => {\n this.__populateTags(tagsLayout, this.__getSelectedTagIds());\n }, this);\n\n return tagsLayout;\n },\n\n __getSelectedTagIds: function() {\n const selectedTagIds = this.__tagButtons.filter(btn => btn.getValue()).map(btn => btn.id);\n return selectedTagIds;\n },\n\n __populateTags: function(tagsLayout, selectedTagIds) {\n const maxTags = 5;\n this.__tagButtons = [];\n tagsLayout.removeAll();\n osparc.store.Tags.getInstance().getTags().forEach((tag, idx) => {\n const button = new qx.ui.form.ToggleButton(null, \"@FontAwesome5Solid/tag/16\");\n button.id = tag.getTagId();\n tag.bind(\"name\", button, \"label\");\n tag.bind(\"name\", button, \"toolTipText\");\n tag.bind(\"color\", button.getChildControl(\"icon\"), \"textColor\");\n osparc.utils.Utils.setIdToWidget(button, this.__resourceType + \"-tagFilterItem\");\n button.set({\n appearance: \"filter-toggle-button\",\n value: selectedTagIds.includes(tag.getTagId())\n });\n\n tagsLayout.add(button);\n\n button.addListener(\"execute\", () => {\n const selection = this.__getSelectedTagIds();\n this.fireDataEvent(\"changeSelectedTags\", selection);\n }, this);\n\n button.setVisibility(idx >= maxTags ? \"excluded\" : \"visible\");\n\n this.__tagButtons.push(button);\n });\n\n\n if (this.__tagButtons.length > maxTags) {\n const showAllButton = new qx.ui.form.Button(this.tr(\"All Tags...\"), \"@FontAwesome5Solid/tags/16\");\n showAllButton.set({\n appearance: \"filter-toggle-button\"\n });\n showAllButton.showingAll = false;\n showAllButton.addListener(\"execute\", () => {\n if (showAllButton.showingAll) {\n this.__tagButtons.forEach((btn, idx) => btn.setVisibility(idx >= maxTags ? \"excluded\" : \"visible\"));\n showAllButton.setLabel(this.tr(\"All Tags...\"));\n showAllButton.showingAll = false;\n } else {\n this.__tagButtons.forEach(btn => btn.setVisibility(\"visible\"));\n showAllButton.setLabel(this.tr(\"Less Tags...\"));\n showAllButton.showingAll = true;\n }\n });\n tagsLayout.add(showAllButton);\n }\n\n const editTagsButton = new qx.ui.form.Button(this.tr(\"Edit Tags...\"), \"@FontAwesome5Solid/pencil-alt/14\");\n editTagsButton.set({\n appearance: \"filter-toggle-button\"\n });\n editTagsButton.addListener(\"execute\", () => {\n const myAccountWindow = osparc.desktop.account.MyAccountWindow.openWindow();\n myAccountWindow.openTags();\n });\n tagsLayout.add(editTagsButton);\n\n if (this.__resourceType === \"study\") {\n tagsLayout.getChildren().forEach(item => item.setPaddingLeft(10)); // align them with the context\n }\n },\n /* /TAGS */\n\n /* SERVICE TYPE */\n __createServiceTypeFilterLayout: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(2));\n\n const radioGroup = new qx.ui.form.RadioGroup();\n radioGroup.setAllowEmptySelection(true);\n\n const serviceTypes = osparc.service.Utils.TYPES;\n Object.keys(serviceTypes).forEach(serviceId => {\n if (![\"computational\", \"dynamic\"].includes(serviceId)) {\n return;\n }\n const serviceType = serviceTypes[serviceId];\n const iconSize = 20;\n const button = new qx.ui.toolbar.RadioButton(serviceType.label, serviceType.icon+iconSize);\n button.id = serviceId;\n osparc.utils.Utils.setIdToWidget(button, this.__resourceType + \"-serviceTypeFilterItem\");\n button.set({\n appearance: \"filter-toggle-button\",\n value: false\n });\n\n layout.add(button);\n radioGroup.add(button);\n\n button.addListener(\"execute\", () => {\n const checked = button.getValue();\n this.fireDataEvent(\"changeServiceType\", {\n id: checked ? serviceId : null,\n label: checked ? serviceType.label : null\n });\n }, this);\n\n this.__serviceTypeButtons.push(button);\n });\n\n return layout;\n },\n /* /SERVICE TYPE */\n\n filterChanged: function(filterData) {\n if (\"sharedWith\" in filterData) {\n const foundBtn = this.__sharedWithButtons.find(btn => btn.id === filterData[\"sharedWith\"]);\n if (foundBtn) {\n foundBtn.setValue(true);\n }\n }\n if (\"tags\" in filterData) {\n this.__tagButtons.forEach(btn => {\n btn.setValue(filterData[\"tags\"].includes(btn.id));\n });\n }\n if (\"serviceType\" in filterData) {\n this.__serviceTypeButtons.forEach(btn => {\n btn.setValue(filterData[\"serviceType\"] === btn.id);\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Reload button\n * -------------------------------- =/- -\n * | root | content1 content2 |\n * | folder1 | content3 content4 |\n * | folder2 | content5 content6 |\n * --------------------------------------\n * selected_file Down Del\n */\n\nqx.Class.define(\"osparc.file.TreeFolderView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__buildLayout();\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"reload-button\":\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Reload\"),\n font: \"text-14\",\n icon: \"@FontAwesome5Solid/sync-alt/14\",\n allowGrowX: false\n });\n this._add(control);\n break;\n case \"tree-folder-layout\":\n control = new qx.ui.splitpane.Pane(\"horizontal\");\n control.getChildControl(\"splitter\").set({\n width: 2,\n backgroundColor: \"scrollbar-passive\"\n });\n this._add(control, {\n flex: 1\n });\n break;\n case \"folder-tree\": {\n const treeFolderLayout = this.getChildControl(\"tree-folder-layout\");\n control = new osparc.file.FilesTree().set({\n showLeafs: false,\n minWidth: 150,\n width: 250\n });\n treeFolderLayout.add(control, 0);\n break;\n }\n case \"folder-viewer\": {\n const treeFolderLayout = this.getChildControl(\"tree-folder-layout\");\n control = new osparc.file.FolderViewer();\n treeFolderLayout.add(control, 1);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"reload-button\");\n const folderTree = this.getChildControl(\"folder-tree\");\n const folderViewer = this.getChildControl(\"folder-viewer\");\n\n // Connect elements\n folderTree.addListener(\"selectionChanged\", () => {\n const selectedFolder = folderTree.getSelectedItem();\n if (selectedFolder && (osparc.file.FilesTree.isDir(selectedFolder) || (selectedFolder.getChildren && selectedFolder.getChildren().length))) {\n folderViewer.setFolder(selectedFolder);\n }\n }, this);\n\n folderViewer.addListener(\"openItemSelected\", e => {\n const data = e.getData();\n folderTree.openNodeAndParents(data);\n folderTree.setSelection(new qx.data.Array([data]));\n }, this);\n\n folderViewer.addListener(\"folderUp\", e => {\n const currentFolder = e.getData();\n const parent = folderTree.getParent(currentFolder);\n if (parent) {\n folderTree.setSelection(new qx.data.Array([parent]));\n folderViewer.setFolder(parent);\n }\n }, this);\n\n folderViewer.addListener(\"requestDatasetFiles\", e => {\n const data = e.getData();\n folderTree.requestDatasetFiles(data.locationId, data.datasetId);\n }, this);\n },\n\n openPath: function(path) {\n const foldersTree = this.getChildControl(\"folder-tree\");\n const folderViewer = this.getChildControl(\"folder-viewer\");\n let found = false;\n while (!found && path.length) {\n found = foldersTree.findItemId(path.join(\"/\"));\n // look for next parent\n path.pop();\n }\n if (found) {\n foldersTree.openNodeAndParents(found);\n foldersTree.setSelection(new qx.data.Array([found]));\n foldersTree.fireEvent(\"selectionChanged\");\n } else {\n folderViewer.resetFolder();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.SlidesBase\", {\n extend: osparc.ui.window.SingletonWindow,\n type: \"abstract\",\n\n construct: function(id, caption, icon) {\n this.base(arguments, id, caption, icon);\n\n this.set({\n layout: new qx.ui.layout.VBox(20),\n modal: true,\n width: this.self().WINDOW_WIDTH,\n height: 700,\n contentPadding: this.self().CONTENT_PADDING,\n showMaximize: false,\n showMinimize: false\n });\n\n const closeBtn = this.getChildControl(\"close-button\");\n osparc.utils.Utils.setIdToWidget(closeBtn, \"quickStartWindowCloseBtn\");\n\n const arrowsLayout = this.__createArrows();\n this.add(arrowsLayout);\n\n const stack = this.__stack = this.__createStack();\n this.add(stack, {\n flex: 1\n });\n\n const footer = this.__createFooter();\n this.add(footer);\n\n this.__setSlideIdx(0);\n },\n\n statics: {\n WINDOW_WIDTH: 700,\n CONTENT_PADDING: 20,\n CONTENT_WIDTH: 660\n },\n\n members: {\n __currentIdx: null,\n __slideCounter: null,\n __prevBtn: null,\n __nextBtn: null,\n __stack: null,\n\n __createArrows: function() {\n const arrowsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n\n const prevBtn = this.__prevBtn = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/arrow-left/20\",\n allowGrowX: true,\n backgroundColor: \"transparent\",\n iconPosition: \"left\",\n alignX: \"left\"\n });\n prevBtn.addListener(\"execute\", () => this.__setSlideIdx(this.__currentIdx-1), this);\n arrowsLayout.add(prevBtn);\n\n arrowsLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const slideCounter = this.__slideCounter = new qx.ui.container.Composite(new qx.ui.layout.HBox(2)).set({\n alignY: \"middle\",\n maxWidth: 160,\n maxHeight: 10\n });\n arrowsLayout.add(slideCounter);\n\n arrowsLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const nextBtn = this.__nextBtn = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/arrow-right/20\",\n allowGrowX: true,\n backgroundColor: \"transparent\",\n iconPosition: \"right\",\n alignX: \"right\"\n });\n nextBtn.addListener(\"execute\", () => this.__setSlideIdx(this.__currentIdx+1), this);\n arrowsLayout.add(nextBtn);\n\n return arrowsLayout;\n },\n\n __setSlideIdx: function(idx) {\n const selectables = this.__stack.getSelectables();\n if (idx > -1 && idx < selectables.length) {\n this.__currentIdx = idx;\n this.__stack.setSelection([selectables[idx]]);\n const firstSlide = (idx === 0);\n const lastSlide = (idx === selectables.length-1);\n this.__prevBtn.setEnabled(!firstSlide);\n this.__nextBtn.setEnabled(!lastSlide);\n this.set({\n showClose: lastSlide\n });\n }\n this.__slideCounter.removeAll();\n for (let i=0; i {\n const slideContainer = new qx.ui.container.Scroll();\n slideContainer.add(slide);\n stack.add(slideContainer);\n });\n return stack;\n },\n\n __createFooter: function() {\n const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n alignX: \"center\"\n });\n\n const footerItems = this._getFooterItems();\n footerItems.forEach((footerItem, idx) => {\n footer.add(footerItem);\n if (idx !== footerItems.length-1) {\n footer.add(new qx.ui.core.Widget().set({\n maxHeight: 15\n }), {\n flex: 1\n });\n }\n });\n\n return footer;\n },\n\n _getSlides: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _getFooterItems: function() {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.Slides\", {\n extend: osparc.product.quickStart.SlidesBase,\n\n construct: function() {\n this.base(arguments, \"ti-slides\", this.tr(\"Quick Start\"));\n },\n\n statics: {\n footerLinks: function() {\n const footerLinks = [];\n\n const videoText = osparc.utils.Utils.createHTMLLink(\"TIP videos\", \"https://www.youtube.com/playlist?list=PLcJQYcVCSqDu5gXnJj-_vS_spGhZOe-jF\");\n const videoLabel = new qx.ui.basic.Label(videoText).set({\n textAlign: \"center\",\n rich : true\n });\n footerLinks.push(videoLabel);\n\n const manualsLabel = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const manuals = osparc.store.Support.getManuals();\n if (manuals.length > 0) {\n const manualText = osparc.utils.Utils.createHTMLLink(\"Documentation\", manuals[0].url);\n manualsLabel.setValue(manualText);\n manualsLabel.show();\n }\n footerLinks.push(manualsLabel);\n\n const licenseText = osparc.utils.Utils.createHTMLLink(\"Privacy Policy\", \"https://itis.swiss/meta-navigation/privacy-policy/\");\n const licenseLabel = new qx.ui.basic.Label(licenseText).set({\n textAlign: \"center\",\n rich : true\n });\n footerLinks.push(licenseLabel);\n\n return footerLinks;\n }\n },\n\n members: {\n // overriden\n _getSlides: function() {\n return [\n new osparc.product.quickStart.tis.Welcome(),\n new osparc.product.quickStart.tis.Dashboard(),\n new osparc.product.quickStart.tis.ElectrodeSelector(),\n new osparc.product.quickStart.tis.PostPro(),\n new osparc.product.quickStart.tis.S4LPostPro(),\n new osparc.product.quickStart.tis.MoreInformation()\n ];\n },\n\n // overriden\n _getFooterItems: function() {\n const footerItems = this.self().footerLinks();\n\n const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain(\"tiDontShowQuickStart\");\n footerItems.push(dontShowCB);\n\n return footerItems;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4llite.Slides\", {\n extend: osparc.product.quickStart.SlidesBase,\n\n construct: function() {\n this.base(arguments, \"s4llite-slides\", this.tr(\"Quick Start\"));\n },\n\n members: {\n _getSlides: function() {\n return [\n new osparc.product.quickStart.s4llite.Welcome(),\n new osparc.product.quickStart.s4llite.Dashboard(),\n new osparc.product.quickStart.s4llite.S4LLiteSpecs(),\n new osparc.product.quickStart.s4llite.S4LLiteUI()\n ];\n },\n // overriden\n _getFooterItems: function() {\n const footerItems = [];\n\n const docLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const manuals = osparc.store.Support.getManuals();\n if (manuals.length > 0) {\n const link = osparc.utils.Utils.createHTMLLink(\"Documentation\", manuals[0].url);\n docLink.setValue(link);\n docLink.show();\n }\n footerItems.push(docLink);\n\n const licenseLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const licenseUrl = osparc.store.Support.getLicenseURL();\n if (licenseUrl) {\n const link = osparc.utils.Utils.createHTMLLink(\"Licensing\", licenseUrl);\n licenseLink.setValue(link);\n licenseLink.show();\n }\n footerItems.push(licenseLink);\n\n const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain(\"s4lliteDontShowQuickStart\");\n footerItems.push(dontShowCB);\n\n return footerItems;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4l.Welcome\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function() {\n this.base(arguments, \"s4l-welcome\", this.tr(\"Welcome to Sim4Life\"));\n\n this.set({\n layout: new qx.ui.layout.VBox(20),\n contentPadding: 15,\n modal: true,\n width: 500,\n height: 500,\n showMaximize: false,\n showMinimize: false\n });\n\n this.__buildLayout();\n },\n\n members: {\n __buildLayout: function() {\n const content = this.__createContent();\n this.add(content, {\n flex: 1\n });\n\n const footer = this.__createFooter();\n this.add(footer);\n },\n\n __createContent: function() {\n const content = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n\n const introTitle = this.tr(\"Experience Most Advanced Simulations – All In The Cloud\");\n const intro1 = osparc.product.quickStart.Utils.createLabel(introTitle);\n intro1.set({\n font: \"text-16\"\n });\n content.add(intro1);\n\n const welcomeText = this.tr(\"Welcome onboard \") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getFriendlyUsername()) + \",\";\n const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText);\n content.add(welcome);\n\n const introText = this.tr(\"\\\n Sim4Life is a revolutionary simulation platform, combining computable human phantoms with the most powerful physics solvers and the most advanced tissue models, for directly analyzing biological real-world phenomena and complex technical devices in a validated biological and anatomical environment.\\\n
\\\n
\\\n In order to facilitate the introduction to the platform, we have some Guided Tours that can be found under the User Menu.\\\n
\\\n
\\\n For more specific technical information, please refer to the Manuals on the Navigation Bar.\\\n \");\n const intro2 = osparc.product.quickStart.Utils.createLabel(introText);\n content.add(intro2);\n\n content.add(new qx.ui.core.Spacer(null, 20));\n\n const logo = new osparc.ui.basic.Logo().set({\n width: 260,\n height: 110\n });\n content.add(logo);\n\n content.add(new qx.ui.core.Spacer(null, 20));\n\n return content;\n },\n\n __createFooter: function() {\n const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n alignX: \"center\"\n });\n\n const footerItems = this.__getFooterItems();\n footerItems.forEach((footerItem, idx) => {\n footer.add(footerItem);\n if (idx !== footerItems.length-1) {\n footer.add(new qx.ui.core.Widget().set({\n maxHeight: 15\n }), {\n flex: 1\n });\n }\n });\n\n return footer;\n },\n\n __getFooterItems: function() {\n const footerItems = [];\n\n const docLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const manuals = osparc.store.Support.getManuals();\n if (manuals.length > 0) {\n const link = osparc.utils.Utils.createHTMLLink(\"Documentation\", manuals[0].url);\n docLink.setValue(link);\n docLink.show();\n }\n footerItems.push(docLink);\n\n const licenseLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const licenseUrl = osparc.store.Support.getLicenseURL();\n if (licenseUrl) {\n const link = osparc.utils.Utils.createHTMLLink(\"Licensing\", licenseUrl);\n licenseLink.setValue(link);\n licenseLink.show();\n }\n footerItems.push(licenseLink);\n\n const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain(\"s4lDontShowQuickStart\");\n footerItems.push(dontShowCB);\n\n return footerItems;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4lacad.Welcome\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function() {\n this.base(arguments, \"s4l-acad-welcome\", this.tr(\"Welcome to Sim4Life Science\"));\n\n this.set({\n layout: new qx.ui.layout.VBox(20),\n contentPadding: 15,\n modal: true,\n width: 500,\n height: 500,\n showMaximize: false,\n showMinimize: false\n });\n\n this.__buildLayout();\n },\n\n members: {\n __buildLayout: function() {\n const content = this.__createContent();\n this.add(content, {\n flex: 1\n });\n\n const footer = this.__createFooter();\n this.add(footer);\n },\n\n __createContent: function() {\n const content = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n\n const introTitle = this.tr(\"Experience Most Advanced Simulations – All In The Cloud\");\n const intro1 = osparc.product.quickStart.Utils.createLabel(introTitle);\n intro1.set({\n font: \"text-16\"\n });\n content.add(intro1);\n\n const welcomeText = this.tr(\"Welcome onboard \") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getFriendlyUsername()) + \",\";\n const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText);\n content.add(welcome);\n\n const introText = this.tr(\"\\\n Sim4Life is a revolutionary simulation platform, combining computable human phantoms with the most powerful physics solvers and the most advanced tissue models, for directly analyzing biological real-world phenomena and complex technical devices in a validated biological and anatomical environment.\\\n
\\\n
\\\n In order to facilitate the introduction to the platform, we have some Guided Tours that can be found under the User Menu.\\\n
\\\n
\\\n For more specific technical information, please refer to the Manuals on the Navigation Bar.\\\n \");\n const intro2 = osparc.product.quickStart.Utils.createLabel(introText);\n content.add(intro2);\n\n content.add(new qx.ui.core.Spacer(null, 20));\n\n const logo = new osparc.ui.basic.Logo().set({\n width: 260,\n height: 110\n });\n content.add(logo);\n\n content.add(new qx.ui.core.Spacer(null, 20));\n\n return content;\n },\n\n __createFooter: function() {\n const footer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n alignX: \"center\"\n });\n\n const footerItems = this.__getFooterItems();\n footerItems.forEach((footerItem, idx) => {\n footer.add(footerItem);\n if (idx !== footerItems.length-1) {\n footer.add(new qx.ui.core.Widget().set({\n maxHeight: 15\n }), {\n flex: 1\n });\n }\n });\n\n return footer;\n },\n\n __getFooterItems: function() {\n const footerItems = [];\n\n const docLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const manuals = osparc.store.Support.getManuals();\n if (manuals.length > 0) {\n const link = osparc.utils.Utils.createHTMLLink(\"Documentation\", manuals[0].url);\n docLink.setValue(link);\n docLink.show();\n }\n footerItems.push(docLink);\n\n const licenseLink = new qx.ui.basic.Label().set({\n visibility: \"excluded\",\n textAlign: \"center\",\n rich : true\n });\n const licenseUrl = osparc.store.Support.getLicenseURL();\n if (licenseUrl) {\n const link = osparc.utils.Utils.createHTMLLink(\"Licensing\", licenseUrl);\n licenseLink.setValue(link);\n licenseLink.show();\n }\n footerItems.push(licenseLink);\n\n const dontShowCB = osparc.product.quickStart.Utils.createDontShowAgain(\"s4lDontShowQuickStart\");\n footerItems.push(dontShowCB);\n\n return footerItems;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * This singleton manages visible menu instances and supports some\n * core features to schedule menu open/close with timeout support.\n *\n * It also manages the whole keyboard support for the currently\n * registered widgets.\n *\n * The zIndex order is also managed by this class.\n */\nqx.Class.define(\"qx.ui.menu.Manager\",\n{\n type : \"singleton\",\n extend : qx.core.Object,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n // Create data structure\n this.__objects = [];\n\n var el = document.body;\n var Registration = qx.event.Registration;\n\n // React on pointer/mouse events, but on native, to support inline applications\n Registration.addListener(window.document.documentElement, \"pointerdown\", this._onPointerDown, this, true);\n Registration.addListener(el, \"roll\", this._onRoll, this, true);\n\n // React on keypress events\n Registration.addListener(el, \"keydown\", this._onKeyUpDown, this, true);\n Registration.addListener(el, \"keyup\", this._onKeyUpDown, this, true);\n Registration.addListener(el, \"keypress\", this._onKeyPress, this, true);\n\n // only use the blur event to hide windows on non touch devices [BUG #4033]\n // When the menu is located on top of an iFrame, the select will fail\n if (!qx.core.Environment.get(\"event.touch\")) {\n // Hide all when the window is blurred\n qx.bom.Element.addListener(window, \"blur\", this.hideAll, this);\n }\n\n // Create open timer\n this.__openTimer = new qx.event.Timer();\n this.__openTimer.addListener(\"interval\", this._onOpenInterval, this);\n\n // Create close timer\n this.__closeTimer = new qx.event.Timer();\n this.__closeTimer.addListener(\"interval\", this._onCloseInterval, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __scheduleOpen : null,\n __scheduleClose : null,\n __openTimer : null,\n __closeTimer : null,\n __objects : null,\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Query engine for menu children.\n *\n * @param menu {qx.ui.menu.Menu} Any menu instance\n * @param start {Integer} Child index to start with\n * @param iter {Integer} Iteration count, normally +1 or -1\n * @param loop {Boolean?false} Whether to wrap when reaching the begin/end of the list\n * @return {qx.ui.menu.Button} Any menu button or null\n */\n _getChild : function(menu, start, iter, loop)\n {\n var children = menu.getChildren();\n var length = children.length;\n var child;\n\n for (var i=start; i=0; i+=iter)\n {\n child = children[i];\n if (child.isEnabled() && !child.isAnonymous() && child.isVisible()) {\n return child;\n }\n }\n\n if (loop)\n {\n i = i == length ? 0 : length-1;\n for (; i!=start; i+=iter)\n {\n child = children[i];\n if (child.isEnabled() && !child.isAnonymous() && child.isVisible()) {\n return child;\n }\n }\n }\n\n return null;\n },\n\n\n /**\n * Whether the given widget is inside any Menu instance.\n *\n * @param widget {qx.ui.core.Widget} Any widget\n * @return {Boolean} true when the widget is part of any menu\n */\n _isInMenu : function(widget)\n {\n while(widget)\n {\n if (widget instanceof qx.ui.menu.Menu) {\n return true;\n }\n\n widget = widget.getLayoutParent();\n }\n\n return false;\n },\n\n\n /**\n * Whether the given widget is one of the menu openers.\n *\n * @param widget {qx.ui.core.Widget} Any widget\n * @return {Boolean} true if the widget is a menu opener\n */\n _isMenuOpener : function(widget)\n {\n var menus = this.__objects;\n\n for (var i = 0; i < menus.length; i++) {\n if (menus[i].getOpener() === widget) {\n return true;\n }\n }\n\n return false;\n },\n\n\n /**\n * Returns an instance of a menu button if the given widget is a child\n *\n * @param widget {qx.ui.core.Widget} any widget\n * @return {qx.ui.menu.Button} Any menu button instance or null\n */\n _getMenuButton : function(widget)\n {\n while(widget)\n {\n if (widget instanceof qx.ui.menu.AbstractButton) {\n return widget;\n }\n\n widget = widget.getLayoutParent();\n }\n\n return null;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Adds a menu to the list of visible menus.\n *\n * @param obj {qx.ui.menu.Menu} Any menu instance.\n */\n add : function(obj)\n {\n if (qx.core.Environment.get(\"qx.debug\"))\n {\n if (!(obj instanceof qx.ui.menu.Menu)) {\n throw new Error(\"Object is no menu: \" + obj);\n }\n }\n\n var reg = this.__objects;\n reg.push(obj);\n obj.setZIndex(1e6+reg.length);\n },\n\n\n /**\n * Remove a menu from the list of visible menus.\n *\n * @param obj {qx.ui.menu.Menu} Any menu instance.\n */\n remove : function(obj)\n {\n if (qx.core.Environment.get(\"qx.debug\"))\n {\n if (!(obj instanceof qx.ui.menu.Menu)) {\n throw new Error(\"Object is no menu: \" + obj);\n }\n }\n\n var reg = this.__objects;\n if (reg) {\n qx.lang.Array.remove(reg, obj);\n }\n },\n\n\n /**\n * Hides all currently opened menus.\n */\n hideAll : function()\n {\n var reg = this.__objects;\n if (reg)\n {\n for (var i=reg.length-1; i>=0; i--) {\n reg[i].exclude();\n }\n }\n },\n\n\n /**\n * Returns the menu which was opened at last (which\n * is the active one this way)\n *\n * @return {qx.ui.menu.Menu} The current active menu or null\n */\n getActiveMenu : function()\n {\n var reg = this.__objects;\n return reg.length > 0 ? reg[reg.length-1] : null;\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n SCHEDULED OPEN/CLOSE SUPPORT\n ---------------------------------------------------------------------------\n */\n\n /**\n * Schedules the given menu to be opened after the\n * {@link qx.ui.menu.Menu#openInterval} configured by the\n * menu instance itself.\n *\n * @param menu {qx.ui.menu.Menu} The menu to schedule for open\n */\n scheduleOpen : function(menu)\n {\n // Cancel close of given menu first\n this.cancelClose(menu);\n\n // When the menu is already visible\n if (menu.isVisible())\n {\n // Cancel all other open requests\n if (this.__scheduleOpen) {\n this.cancelOpen(this.__scheduleOpen);\n }\n }\n\n // When the menu is not visible and not scheduled already\n // then schedule it for opening\n else if (this.__scheduleOpen != menu)\n {\n // menu.debug(\"Schedule open\");\n this.__scheduleOpen = menu;\n this.__openTimer.restartWith(menu.getOpenInterval());\n }\n },\n\n\n /**\n * Schedules the given menu to be closed after the\n * {@link qx.ui.menu.Menu#closeInterval} configured by the\n * menu instance itself.\n *\n * @param menu {qx.ui.menu.Menu} The menu to schedule for close\n */\n scheduleClose : function(menu)\n {\n // Cancel open of the menu first\n this.cancelOpen(menu);\n\n // When the menu is already invisible\n if (!menu.isVisible())\n {\n // Cancel all other close requests\n if (this.__scheduleClose) {\n this.cancelClose(this.__scheduleClose);\n }\n }\n\n // When the menu is visible and not scheduled already\n // then schedule it for closing\n else if (this.__scheduleClose != menu)\n {\n // menu.debug(\"Schedule close\");\n this.__scheduleClose = menu;\n this.__closeTimer.restartWith(menu.getCloseInterval());\n }\n },\n\n\n /**\n * When the given menu is scheduled for open this pending\n * request is canceled.\n *\n * @param menu {qx.ui.menu.Menu} The menu to cancel for open\n */\n cancelOpen : function(menu)\n {\n if (this.__scheduleOpen == menu)\n {\n // menu.debug(\"Cancel open\");\n this.__openTimer.stop();\n this.__scheduleOpen = null;\n }\n },\n\n\n /**\n * When the given menu is scheduled for close this pending\n * request is canceled.\n *\n * @param menu {qx.ui.menu.Menu} The menu to cancel for close\n */\n cancelClose : function(menu)\n {\n if (this.__scheduleClose == menu)\n {\n // menu.debug(\"Cancel close\");\n this.__closeTimer.stop();\n this.__scheduleClose = null;\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TIMER EVENT HANDLERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Event listener for a pending open request. Configured to the interval\n * of the current menu to open.\n *\n * @param e {qx.event.type.Event} Interval event\n */\n _onOpenInterval : function(e)\n {\n // Stop timer\n this.__openTimer.stop();\n\n // Open menu and reset flag\n this.__scheduleOpen.open();\n this.__scheduleOpen = null;\n },\n\n\n /**\n * Event listener for a pending close request. Configured to the interval\n * of the current menu to close.\n *\n * @param e {qx.event.type.Event} Interval event\n */\n _onCloseInterval : function(e)\n {\n // Stop timer, reset scheduling flag\n this.__closeTimer.stop();\n\n // Close menu and reset flag\n this.__scheduleClose.exclude();\n this.__scheduleClose = null;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n CONTEXTMENU EVENT HANDLING\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Internal function registers a handler to stop next\n * contextmenu event.\n * This function will be called by {@link qx.ui.menu.Button#_onTap}, if\n * right click was pressed.\n *\n * @internal\n */\n preventContextMenuOnce : function()\n {\n qx.event.Registration.addListener(document.body, \"contextmenu\", this.__onPreventContextMenu, this, true);\n },\n\n\n /**\n * Internal event handler to stop contextmenu event bubbling,\n * if target is inside the opened menu.\n *\n * @param e {qx.event.type.Mouse} contextmenu event\n *\n * @internal\n */\n __onPreventContextMenu : function(e)\n {\n var target = e.getTarget();\n target = qx.ui.core.Widget.getWidgetByElement(target, true);\n if (this._isInMenu(target)) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n // stop only once\n qx.event.Registration.removeListener(document.body, \"contextmenu\", this.__onPreventContextMenu, this, true);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n POINTER EVENT HANDLERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Event handler for pointerdown events\n *\n * @param e {qx.event.type.Pointer} pointerdown event\n */\n _onPointerDown : function(e)\n {\n var target = e.getTarget();\n target = qx.ui.core.Widget.getWidgetByElement(target, true);\n\n // If the target is 'null' the tap appears on a DOM element witch is not\n // a widget. This happens normally with an inline application, when the user\n // taps not in the inline application. In this case all all currently\n // open menus should be closed.\n if (target == null) {\n this.hideAll();\n return;\n }\n\n // If the target is the one which has opened the current menu\n // we ignore the pointerdown to let the button process the event\n // further with toggling or ignoring the tap.\n if (target.getMenu && target.getMenu() && target.getMenu().isVisible()) {\n return;\n }\n\n // All taps not inside a menu will hide all currently open menus\n if (this.__objects.length > 0 && !this._isInMenu(target)) {\n this.hideAll();\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n KEY EVENT HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * @type {Map} Map of all keys working on an active menu selection\n * @lint ignoreReferenceField(__selectionKeys)\n */\n __selectionKeys :\n {\n \"Enter\" : 1,\n \"Space\" : 1\n },\n\n\n /**\n * @type {Map} Map of all keys working without a selection\n * @lint ignoreReferenceField(__navigationKeys)\n */\n __navigationKeys :\n {\n \"Escape\" : 1,\n \"Up\" : 1,\n \"Down\" : 1,\n \"Left\" : 1,\n \"Right\" : 1\n },\n\n\n /**\n * Event handler for all keyup/keydown events. Stops all events\n * when any menu is opened.\n *\n * @param e {qx.event.type.KeySequence} Keyboard event\n */\n _onKeyUpDown : function(e)\n {\n var menu = this.getActiveMenu();\n if (!menu) {\n return;\n }\n\n // Stop for all supported key combos\n var iden = e.getKeyIdentifier();\n if (this.__navigationKeys[iden] || (this.__selectionKeys[iden] && menu.getSelectedButton())) {\n e.stopPropagation();\n }\n },\n\n\n /**\n * Event handler for all keypress events. Delegates the event to the more\n * specific methods defined in this class.\n *\n * Currently processes the keys: Up, Down,\n * Left, Right and Enter.\n *\n * @param e {qx.event.type.KeySequence} Keyboard event\n */\n _onKeyPress : function(e)\n {\n var menu = this.getActiveMenu();\n if (!menu) {\n return;\n }\n\n var iden = e.getKeyIdentifier();\n var navigation = this.__navigationKeys[iden];\n var selection = this.__selectionKeys[iden];\n\n if (navigation)\n {\n switch(iden)\n {\n case \"Up\":\n this._onKeyPressUp(menu);\n break;\n\n case \"Down\":\n this._onKeyPressDown(menu);\n break;\n\n case \"Left\":\n this._onKeyPressLeft(menu);\n break;\n\n case \"Right\":\n this._onKeyPressRight(menu);\n break;\n\n case \"Escape\":\n this.hideAll();\n break;\n }\n\n e.stopPropagation();\n e.preventDefault();\n }\n else if (selection)\n {\n // Do not process these events when no item is hovered\n var button = menu.getSelectedButton();\n if (button)\n {\n switch(iden)\n {\n case \"Enter\":\n this._onKeyPressEnter(menu, button, e);\n break;\n\n case \"Space\":\n this._onKeyPressSpace(menu, button, e);\n break;\n }\n\n e.stopPropagation();\n e.preventDefault();\n }\n }\n },\n\n\n /**\n * Event handler for Up key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n */\n _onKeyPressUp : function(menu)\n {\n // Query for previous child\n var selectedButton = menu.getSelectedButton();\n var children = menu.getChildren();\n var start = selectedButton ? menu.indexOf(selectedButton)-1 : children.length-1;\n var nextItem = this._getChild(menu, start, -1, true);\n\n // Reconfigure property\n if (nextItem) {\n menu.setSelectedButton(nextItem);\n } else {\n menu.resetSelectedButton();\n }\n },\n\n\n /**\n * Event handler for Down key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n */\n _onKeyPressDown : function(menu)\n {\n // Query for next child\n var selectedButton = menu.getSelectedButton();\n var start = selectedButton ? menu.indexOf(selectedButton)+1 : 0;\n var nextItem = this._getChild(menu, start, 1, true);\n\n // Reconfigure property\n if (nextItem) {\n menu.setSelectedButton(nextItem);\n } else {\n menu.resetSelectedButton();\n }\n },\n\n\n /**\n * Event handler for Left key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n */\n _onKeyPressLeft : function(menu)\n {\n var menuOpener = menu.getOpener();\n if (!menuOpener) {\n return;\n }\n\n // Back to the \"parent\" menu\n if (menuOpener instanceof qx.ui.menu.AbstractButton)\n {\n var parentMenu = menuOpener.getLayoutParent();\n\n parentMenu.resetOpenedButton();\n parentMenu.setSelectedButton(menuOpener);\n }\n\n // Goto the previous toolbar button\n else if (menuOpener instanceof qx.ui.menubar.Button)\n {\n var buttons = menuOpener.getMenuBar().getMenuButtons();\n var index = buttons.indexOf(menuOpener);\n\n // This should not happen, definitely!\n if (index === -1) {\n return;\n }\n\n // Get previous button, fallback to end if first arrived\n var prevButton = null;\n var length = buttons.length;\n for (var i = 1; i <= length; i++)\n {\n var button = buttons[(index - i + length) % length];\n if(button.isEnabled() && button.isVisible()) {\n prevButton = button;\n break;\n }\n }\n\n if (prevButton && prevButton != menuOpener) {\n prevButton.open(true);\n }\n }\n },\n\n\n /**\n * Event handler for Right key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n */\n _onKeyPressRight : function(menu)\n {\n var selectedButton = menu.getSelectedButton();\n\n // Open sub-menu of hovered item and select first child\n if (selectedButton)\n {\n var subMenu = selectedButton.getMenu();\n\n if (subMenu)\n {\n // Open previously hovered item\n menu.setOpenedButton(selectedButton);\n\n // Hover first item in new submenu\n var first = this._getChild(subMenu, 0, 1);\n if (first) {\n subMenu.setSelectedButton(first);\n }\n\n return;\n }\n }\n\n // No hover and no open item\n // When first button has a menu, open it, otherwise only hover it\n else if (!menu.getOpenedButton())\n {\n var first = this._getChild(menu, 0, 1);\n\n if (first)\n {\n menu.setSelectedButton(first);\n\n if (first.getMenu()) {\n menu.setOpenedButton(first);\n }\n\n return;\n }\n }\n\n // Jump to the next toolbar button\n var menuOpener = menu.getOpener();\n\n // Look up opener hierarchy for menu button\n if (menuOpener instanceof qx.ui.menu.Button && selectedButton)\n {\n // From one inner selected button try to find the top level\n // menu button which has opened the whole menu chain.\n while (menuOpener)\n {\n menuOpener = menuOpener.getLayoutParent();\n if (menuOpener instanceof qx.ui.menu.Menu)\n {\n menuOpener = menuOpener.getOpener();\n if (menuOpener instanceof qx.ui.menubar.Button) {\n break;\n }\n }\n else\n {\n break;\n }\n }\n\n if (!menuOpener) {\n return;\n }\n }\n\n // Ask the toolbar for the next menu button\n if (menuOpener instanceof qx.ui.menubar.Button)\n {\n var buttons = menuOpener.getMenuBar().getMenuButtons();\n var index = buttons.indexOf(menuOpener);\n\n // This should not happen, definitely!\n if (index === -1) {\n return;\n }\n\n // Get next button, fallback to first if end arrived\n var nextButton = null;\n var length = buttons.length;\n for (var i = 1; i <= length; i++)\n {\n var button = buttons[(index + i) % length];\n if(button.isEnabled() && button.isVisible()) {\n nextButton = button;\n break;\n }\n }\n\n if (nextButton && nextButton != menuOpener) {\n nextButton.open(true);\n }\n }\n },\n\n\n /**\n * Event handler for Enter key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n * @param button {qx.ui.menu.AbstractButton} The selected button\n * @param e {qx.event.type.KeySequence} The keypress event\n */\n _onKeyPressEnter : function(menu, button, e)\n {\n // Route keypress event to the selected button\n if (button.hasListener(\"keypress\"))\n {\n // Clone and reconfigure event\n var clone = e.clone();\n clone.setBubbles(false);\n clone.setTarget(button);\n\n // Finally dispatch the clone\n button.dispatchEvent(clone);\n }\n\n // Hide all open menus\n this.hideAll();\n },\n\n\n /**\n * Event handler for Space key\n *\n * @param menu {qx.ui.menu.Menu} The active menu\n * @param button {qx.ui.menu.AbstractButton} The selected button\n * @param e {qx.event.type.KeySequence} The keypress event\n */\n _onKeyPressSpace : function(menu, button, e)\n {\n // Route keypress event to the selected button\n if (button.hasListener(\"keypress\"))\n {\n // Clone and reconfigure event\n var clone = e.clone();\n clone.setBubbles(false);\n clone.setTarget(button);\n\n // Finally dispatch the clone\n button.dispatchEvent(clone);\n }\n },\n\n\n /**\n * Event handler for roll which hides all windows on scroll.\n *\n * @param e {qx.event.type.Roll} The roll event.\n */\n _onRoll : function(e) {\n var target = e.getTarget();\n target = qx.ui.core.Widget.getWidgetByElement(target, true);\n\n if (\n this.__objects.length > 0\n && !this._isInMenu(target)\n && !this._isMenuOpener(target)\n && !e.getMomentum()\n ) {\n this.hideAll();\n }\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function()\n {\n var Registration = qx.event.Registration;\n var el = document.body;\n\n // React on pointerdown events\n Registration.removeListener(window.document.documentElement, \"pointerdown\", this._onPointerDown, this, true);\n\n // React on keypress events\n Registration.removeListener(el, \"keydown\", this._onKeyUpDown, this, true);\n Registration.removeListener(el, \"keyup\", this._onKeyUpDown, this, true);\n Registration.removeListener(el, \"keypress\", this._onKeyPress, this, true);\n\n this._disposeObjects(\"__openTimer\", \"__closeTimer\");\n this._disposeArray(\"__objects\");\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tours.List\", {\n extend: qx.ui.core.Widget,\n\n construct: function(tours) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n this.getChildControl(\"tours-layout\");\n\n if (tours) {\n this.setTours(tours);\n }\n },\n\n events: {\n \"tourSelected\": \"qx.event.type.Data\"\n },\n\n properties: {\n tours: {\n check: \"Array\",\n init: [],\n nullable: true,\n event: \"changeTours\",\n apply: \"__applyTours\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tours-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __isSelectorVisible: function(contextSelector) {\n const element = document.querySelector(`[${contextSelector}]`);\n if (element) {\n const widget = qx.ui.core.Widget.getWidgetByElement(element);\n if (qx.ui.core.queue.Visibility.isVisible(widget)) {\n return true;\n }\n }\n return false;\n },\n\n __getTourButton: function(tour) {\n const seqButton = new osparc.tours.ListItem(tour);\n seqButton.setEnabled(this.__isSelectorVisible(tour.context));\n seqButton.addListener(\"tap\", () => this.fireDataEvent(\"tourSelected\", tour), this);\n return seqButton;\n },\n\n __applyTours: function(tours) {\n const toursLayout = this.getChildControl(\"tours-layout\");\n tours.forEach(tour => toursLayout.add(this.__getTourButton(tour)));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tours.Step\", {\n extend: osparc.ui.basic.FloatingHelper,\n\n construct: function(tourTitle) {\n this.base(arguments, null, \"large\");\n\n this.setLayout(new qx.ui.layout.VBox(10));\n\n const hintContainer = this.getChildControl(\"hint-container\");\n hintContainer.setPadding(15);\n\n this.getChildControl(\"title\");\n this.getChildControl(\"message\");\n this.getChildControl(\"skip-button\");\n const titleLabel = this.getChildControl(\"tour-title\");\n if (tourTitle) {\n titleLabel.setValue(tourTitle);\n }\n this.getChildControl(\"step-label\");\n },\n\n events: {\n \"skipPressed\": \"qx.event.type.Event\",\n \"nextPressed\": \"qx.event.type.Event\",\n \"endPressed\": \"qx.event.type.Event\",\n \"toTours\": \"qx.event.type.Event\"\n },\n\n properties: {\n title: {\n check: \"String\",\n init: \"\",\n nullable: true,\n event: \"changeTitle\"\n },\n\n text: {\n check: \"String\",\n init: \"\",\n nullable: true,\n event: \"changeText\"\n },\n\n stepIndex: {\n check: \"Integer\",\n nullable: true,\n init: 0,\n apply: \"__updateButtons\"\n },\n\n nSteps: {\n check: \"Integer\",\n nullable: true,\n init: 0,\n apply: \"__updateButtons\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"title\":\n control = new qx.ui.basic.Label().set({\n rich: true,\n font: \"text-16\"\n });\n this.bind(\"title\", control, \"value\");\n this.bind(\"title\", control, \"visibility\", {\n converter: title => title ? \"visible\" : \"excluded\"\n });\n this.add(control);\n break;\n case \"message\":\n control = new qx.ui.basic.Label().set({\n rich: true,\n font: \"text-14\"\n });\n this.bind(\"text\", control, \"value\");\n this.bind(\"text\", control, \"visibility\", {\n converter: text => text ? \"visible\" : \"excluded\"\n });\n this.add(control);\n break;\n case \"bottom-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n }));\n this.add(control);\n break;\n case \"skip-button\": {\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Skip\"),\n allowGrowX: false,\n alignX: \"left\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"skipPressed\"), this);\n const bottomLayout = this.getChildControl(\"bottom-layout\");\n bottomLayout.add(control);\n break;\n }\n case \"bottom-center-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(3).set({\n alignX: \"center\"\n }));\n const bottomLayout = this.getChildControl(\"bottom-layout\");\n bottomLayout.add(control, {\n flex: 1\n });\n break;\n }\n case \"tour-title\": {\n control = new qx.ui.basic.Label().set({\n alignX: \"center\",\n alignY: \"middle\",\n textAlign: \"center\",\n allowGrowX: true\n });\n const bottomLayout = this.getChildControl(\"bottom-center-layout\");\n bottomLayout.add(control);\n break;\n }\n case \"step-label\": {\n control = new qx.ui.basic.Label().set({\n alignX: \"center\",\n alignY: \"middle\",\n textAlign: \"center\",\n allowGrowX: true\n });\n const bottomLayout = this.getChildControl(\"bottom-center-layout\");\n bottomLayout.add(control);\n break;\n }\n case \"next-button\": {\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Next\"),\n icon: \"@FontAwesome5Solid/arrow-right/16\",\n iconPosition: \"right\",\n appearance: \"strong-button\",\n allowGrowX: false,\n alignX: \"right\"\n });\n control.addListener(\"execute\", () => this.__nextRequested(), this);\n const bottomLayout = this.getChildControl(\"bottom-layout\");\n bottomLayout.add(control);\n break;\n }\n case \"to-tours-button\": {\n control = new qx.ui.form.Button().set({\n label: this.tr(\"To Tours\"),\n iconPosition: \"right\",\n allowGrowX: false,\n alignX: \"right\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"toTours\"), this);\n const bottomLayout = this.getChildControl(\"bottom-layout\");\n bottomLayout.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n // override\n _elementAppearDisappearHandler: function(e) {\n // If the element is a floating view, when clicking away it will disappear\n // Treat that event as a \"nextPressed\"\n switch (e.getType()) {\n case \"disappear\":\n if (this.isVisible()) {\n this.__nextRequested();\n }\n break;\n }\n\n this.base(arguments, e);\n },\n\n __nextRequested: function() {\n if (this.getStepIndex() === this.getNSteps()) {\n this.fireEvent(\"endPressed\");\n } else {\n this.fireEvent(\"nextPressed\");\n }\n },\n\n __updateButtons: function() {\n const stepLabel = this.getChildControl(\"step-label\");\n stepLabel.setValue(this.tr(\"Step: \") + this.getStepIndex() + \"/\" + this.getNSteps());\n\n const nextButton = this.getChildControl(\"next-button\");\n const lastStep = this.getStepIndex() === this.getNSteps();\n if (lastStep) {\n nextButton.set({\n label: this.tr(\"End\"),\n icon: null\n });\n }\n const toTours = this.getChildControl(\"to-tours-button\");\n toTours.setVisibility(lastStep ? \"visible\" : \"excluded\");\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n/**\n * Defines the callback for the single selection manager.\n *\n * @internal\n */\nqx.Interface.define(\"qx.ui.core.ISingleSelectionProvider\",\n{\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /**\n * Returns the elements which are part of the selection.\n *\n * @return {qx.ui.core.Widget[]} The widgets for the selection.\n */\n getItems: function() {},\n\n /**\n * Returns whether the given item is selectable.\n *\n * @param item {qx.ui.core.Widget} The item to be checked\n * @return {Boolean} Whether the given item is selectable\n */\n isItemSelectable : function(item) {}\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.desktop.credits.BuyCreditsForm\", {\n extend: qx.ui.core.Widget,\n construct: function(paymentMethods=[]) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10).set({\n alignX: \"center\"\n }));\n\n const title = new qx.ui.basic.Label(this.tr(\"Buy Credits\")).set({\n marginTop: 35,\n font: \"title-18\"\n });\n this._add(title);\n\n const subtitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignX: \"center\"\n }));\n const subtitle = new qx.ui.basic.Label(this.tr(\"A one-off, non recurring payment.\")).set({\n font: \"text-14\"\n });\n subtitleLayout.add(subtitle);\n const tooltip = new osparc.ui.hint.InfoHint();\n osparc.store.Store.getInstance().getMinimumAmount()\n .then(minimum => tooltip.setHintText(`A minimum amount of ${minimum} USD is required`));\n subtitleLayout.add(tooltip);\n this._add(subtitleLayout);\n\n this._add(this.__getForm(paymentMethods));\n\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n this._add(this.__getButtons());\n },\n\n properties: {\n fetching: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n event: \"changeFetching\"\n }\n },\n\n events: {\n \"submit\": \"qx.event.type.Data\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __amountInput: null,\n\n __getButtons: function() {\n const buttonsContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n })).set({\n marginBottom: 35\n });\n\n const cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"appmotion-button\"\n });\n cancelBtn.addListener(\"execute\", () => this.fireEvent(\"cancel\"));\n buttonsContainer.add(cancelBtn);\n\n const buyBtn = this.__buyBtn = new osparc.ui.form.FetchButton(this.tr(\"Buy Credits\")).set({\n appearance: \"appmotion-button-action\",\n enabled: false\n });\n this.bind(\"fetching\", buyBtn, \"fetching\");\n const isValid = (osparcCredits, amountDollars) => !isNaN(osparcCredits) && !isNaN(amountDollars);\n const enabled = isValid(...Object.values(this.__amountInput.getValues()));\n buyBtn.setEnabled(enabled);\n this.__amountInput.addListener(\"input\", e => {\n const {osparcCredits, amountDollars} = e.getData();\n if (!this.__buyBtn.isFetching()) {\n this.__buyBtn.setEnabled(isValid(osparcCredits, amountDollars));\n }\n });\n buyBtn.addListener(\"execute\", () => this.fireDataEvent(\"submit\", {\n paymentMethodId: this.__paymentMethods.getSelection()[0].getModel(),\n ...this.__amountInput.getValues()\n }));\n buttonsContainer.add(buyBtn);\n\n return buttonsContainer;\n },\n\n __getForm: function(paymentMethods) {\n const formContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({\n alignX: \"center\"\n })).set({\n marginTop: 30\n });\n const amountContainer = this.__amountInput = new osparc.desktop.credits.BuyCreditsInput(osparc.store.Store.getInstance().getCreditPrice());\n formContainer.add(amountContainer);\n\n const paymentMethodContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n marginTop: 30,\n allowStretchX: false\n });\n const paymentMethodLabel = new qx.ui.basic.Label(this.tr(\"Pay with\")).set({\n marginLeft: 15\n });\n paymentMethodContainer.add(paymentMethodLabel);\n const paymentMethodSelect = this.__paymentMethods = new osparc.form.AppMotionSelect().set({\n width: 300,\n allowStretchX: false\n });\n const unsavedCardOption = new qx.ui.form.ListItem(this.tr(\"Enter card details in the next step...\"), null, null);\n paymentMethodSelect.add(unsavedCardOption);\n paymentMethods.forEach(({id, label}) => {\n const item = new qx.ui.form.ListItem(label, null, id);\n paymentMethodSelect.add(item);\n });\n if (paymentMethods.length < 1) {\n paymentMethodSelect.setEnabled(false);\n paymentMethodSelect.setSelection([unsavedCardOption]);\n } else {\n paymentMethodSelect.setSelection([paymentMethodSelect.getChildren()[1]]);\n }\n paymentMethodContainer.add(paymentMethodSelect);\n formContainer.add(paymentMethodContainer);\n return formContainer;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * A Collection of utility functions to escape and unescape strings.\n */\nqx.Bootstrap.define(\"qx.bom.String\",\n{\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /** Mapping of HTML entity names to the corresponding char code */\n TO_CHARCODE :\n {\n \"quot\" : 34, // \" - double-quote\n \"amp\" : 38, // &\n \"lt\" : 60, // <\n \"gt\" : 62, // >\n\n // http://www.w3.org/TR/REC-html40/sgml/entities.html\n // ISO 8859-1 characters\n \"nbsp\" : 160, // no-break space\n \"iexcl\" : 161, // inverted exclamation mark\n \"cent\" : 162, // cent sign\n \"pound\" : 163, // pound sterling sign\n \"curren\" : 164, // general currency sign\n \"yen\" : 165, // yen sign\n \"brvbar\" : 166, // broken (vertical) bar\n \"sect\" : 167, // section sign\n \"uml\" : 168, // umlaut (dieresis)\n \"copy\" : 169, // copyright sign\n \"ordf\" : 170, // ordinal indicator, feminine\n \"laquo\" : 171, // angle quotation mark, left\n \"not\" : 172, // not sign\n \"shy\" : 173, // soft hyphen\n \"reg\" : 174, // registered sign\n \"macr\" : 175, // macron\n \"deg\" : 176, // degree sign\n \"plusmn\" : 177, // plus-or-minus sign\n \"sup2\" : 178, // superscript two\n \"sup3\" : 179, // superscript three\n \"acute\" : 180, // acute accent\n \"micro\" : 181, // micro sign\n \"para\" : 182, // pilcrow (paragraph sign)\n \"middot\" : 183, // middle dot\n \"cedil\" : 184, // cedilla\n \"sup1\" : 185, // superscript one\n \"ordm\" : 186, // ordinal indicator, masculine\n \"raquo\" : 187, // angle quotation mark, right\n \"frac14\" : 188, // fraction one-quarter\n \"frac12\" : 189, // fraction one-half\n \"frac34\" : 190, // fraction three-quarters\n \"iquest\" : 191, // inverted question mark\n \"Agrave\" : 192, // capital A, grave accent\n \"Aacute\" : 193, // capital A, acute accent\n \"Acirc\" : 194, // capital A, circumflex accent\n \"Atilde\" : 195, // capital A, tilde\n \"Auml\" : 196, // capital A, dieresis or umlaut mark\n \"Aring\" : 197, // capital A, ring\n \"AElig\" : 198, // capital AE diphthong (ligature)\n \"Ccedil\" : 199, // capital C, cedilla\n \"Egrave\" : 200, // capital E, grave accent\n \"Eacute\" : 201, // capital E, acute accent\n \"Ecirc\" : 202, // capital E, circumflex accent\n \"Euml\" : 203, // capital E, dieresis or umlaut mark\n \"Igrave\" : 204, // capital I, grave accent\n \"Iacute\" : 205, // capital I, acute accent\n \"Icirc\" : 206, // capital I, circumflex accent\n \"Iuml\" : 207, // capital I, dieresis or umlaut mark\n \"ETH\" : 208, // capital Eth, Icelandic\n \"Ntilde\" : 209, // capital N, tilde\n \"Ograve\" : 210, // capital O, grave accent\n \"Oacute\" : 211, // capital O, acute accent\n \"Ocirc\" : 212, // capital O, circumflex accent\n \"Otilde\" : 213, // capital O, tilde\n \"Ouml\" : 214, // capital O, dieresis or umlaut mark\n \"times\" : 215, // multiply sign\n \"Oslash\" : 216, // capital O, slash\n \"Ugrave\" : 217, // capital U, grave accent\n \"Uacute\" : 218, // capital U, acute accent\n \"Ucirc\" : 219, // capital U, circumflex accent\n \"Uuml\" : 220, // capital U, dieresis or umlaut mark\n \"Yacute\" : 221, // capital Y, acute accent\n \"THORN\" : 222, // capital THORN, Icelandic\n \"szlig\" : 223, // small sharp s, German (sz ligature)\n \"agrave\" : 224, // small a, grave accent\n \"aacute\" : 225, // small a, acute accent\n \"acirc\" : 226, // small a, circumflex accent\n \"atilde\" : 227, // small a, tilde\n \"auml\" : 228, // small a, dieresis or umlaut mark\n \"aring\" : 229, // small a, ring\n \"aelig\" : 230, // small ae diphthong (ligature)\n \"ccedil\" : 231, // small c, cedilla\n \"egrave\" : 232, // small e, grave accent\n \"eacute\" : 233, // small e, acute accent\n \"ecirc\" : 234, // small e, circumflex accent\n \"euml\" : 235, // small e, dieresis or umlaut mark\n \"igrave\" : 236, // small i, grave accent\n \"iacute\" : 237, // small i, acute accent\n \"icirc\" : 238, // small i, circumflex accent\n \"iuml\" : 239, // small i, dieresis or umlaut mark\n \"eth\" : 240, // small eth, Icelandic\n \"ntilde\" : 241, // small n, tilde\n \"ograve\" : 242, // small o, grave accent\n \"oacute\" : 243, // small o, acute accent\n \"ocirc\" : 244, // small o, circumflex accent\n \"otilde\" : 245, // small o, tilde\n \"ouml\" : 246, // small o, dieresis or umlaut mark\n \"divide\" : 247, // divide sign\n \"oslash\" : 248, // small o, slash\n \"ugrave\" : 249, // small u, grave accent\n \"uacute\" : 250, // small u, acute accent\n \"ucirc\" : 251, // small u, circumflex accent\n \"uuml\" : 252, // small u, dieresis or umlaut mark\n \"yacute\" : 253, // small y, acute accent\n \"thorn\" : 254, // small thorn, Icelandic\n \"yuml\" : 255, // small y, dieresis or umlaut mark\n\n // Latin Extended-B\n \"fnof\" : 402, // latin small f with hook = function= florin, U+0192 ISOtech\n\n // Greek\n \"Alpha\" : 913, // greek capital letter alpha, U+0391\n \"Beta\" : 914, // greek capital letter beta, U+0392\n \"Gamma\" : 915, // greek capital letter gamma,U+0393 ISOgrk3\n \"Delta\" : 916, // greek capital letter delta,U+0394 ISOgrk3\n \"Epsilon\" : 917, // greek capital letter epsilon, U+0395\n \"Zeta\" : 918, // greek capital letter zeta, U+0396\n \"Eta\" : 919, // greek capital letter eta, U+0397\n \"Theta\" : 920, // greek capital letter theta,U+0398 ISOgrk3\n \"Iota\" : 921, // greek capital letter iota, U+0399\n \"Kappa\" : 922, // greek capital letter kappa, U+039A\n \"Lambda\" : 923, // greek capital letter lambda,U+039B ISOgrk3\n \"Mu\" : 924, // greek capital letter mu, U+039C\n \"Nu\" : 925, // greek capital letter nu, U+039D\n \"Xi\" : 926, // greek capital letter xi, U+039E ISOgrk3\n \"Omicron\" : 927, // greek capital letter omicron, U+039F\n \"Pi\" : 928, // greek capital letter pi, U+03A0 ISOgrk3\n \"Rho\" : 929, // greek capital letter rho, U+03A1\n\n // there is no Sigmaf, and no U+03A2 character either\n \"Sigma\" : 931, // greek capital letter sigma,U+03A3 ISOgrk3\n \"Tau\" : 932, // greek capital letter tau, U+03A4\n \"Upsilon\" : 933, // greek capital letter upsilon,U+03A5 ISOgrk3\n \"Phi\" : 934, // greek capital letter phi,U+03A6 ISOgrk3\n \"Chi\" : 935, // greek capital letter chi, U+03A7\n \"Psi\" : 936, // greek capital letter psi,U+03A8 ISOgrk3\n \"Omega\" : 937, // greek capital letter omega,U+03A9 ISOgrk3\n \"alpha\" : 945, // greek small letter alpha,U+03B1 ISOgrk3\n \"beta\" : 946, // greek small letter beta, U+03B2 ISOgrk3\n \"gamma\" : 947, // greek small letter gamma,U+03B3 ISOgrk3\n \"delta\" : 948, // greek small letter delta,U+03B4 ISOgrk3\n \"epsilon\" : 949, // greek small letter epsilon,U+03B5 ISOgrk3\n \"zeta\" : 950, // greek small letter zeta, U+03B6 ISOgrk3\n \"eta\" : 951, // greek small letter eta, U+03B7 ISOgrk3\n \"theta\" : 952, // greek small letter theta,U+03B8 ISOgrk3\n \"iota\" : 953, // greek small letter iota, U+03B9 ISOgrk3\n \"kappa\" : 954, // greek small letter kappa,U+03BA ISOgrk3\n \"lambda\" : 955, // greek small letter lambda,U+03BB ISOgrk3\n \"mu\" : 956, // greek small letter mu, U+03BC ISOgrk3\n \"nu\" : 957, // greek small letter nu, U+03BD ISOgrk3\n \"xi\" : 958, // greek small letter xi, U+03BE ISOgrk3\n \"omicron\" : 959, // greek small letter omicron, U+03BF NEW\n \"pi\" : 960, // greek small letter pi, U+03C0 ISOgrk3\n \"rho\" : 961, // greek small letter rho, U+03C1 ISOgrk3\n \"sigmaf\" : 962, // greek small letter final sigma,U+03C2 ISOgrk3\n \"sigma\" : 963, // greek small letter sigma,U+03C3 ISOgrk3\n \"tau\" : 964, // greek small letter tau, U+03C4 ISOgrk3\n \"upsilon\" : 965, // greek small letter upsilon,U+03C5 ISOgrk3\n \"phi\" : 966, // greek small letter phi, U+03C6 ISOgrk3\n \"chi\" : 967, // greek small letter chi, U+03C7 ISOgrk3\n \"psi\" : 968, // greek small letter psi, U+03C8 ISOgrk3\n \"omega\" : 969, // greek small letter omega,U+03C9 ISOgrk3\n \"thetasym\" : 977, // greek small letter theta symbol,U+03D1 NEW\n \"upsih\" : 978, // greek upsilon with hook symbol,U+03D2 NEW\n \"piv\" : 982, // greek pi symbol, U+03D6 ISOgrk3\n\n // General Punctuation\n \"bull\" : 8226, // bullet = black small circle,U+2022 ISOpub\n\n // bullet is NOT the same as bullet operator, U+2219\n \"hellip\" : 8230, // horizontal ellipsis = three dot leader,U+2026 ISOpub\n \"prime\" : 8242, // prime = minutes = feet, U+2032 ISOtech\n \"Prime\" : 8243, // double prime = seconds = inches,U+2033 ISOtech\n \"oline\" : 8254, // overline = spacing overscore,U+203E NEW\n \"frasl\" : 8260, // fraction slash, U+2044 NEW\n\n // Letterlike Symbols\n \"weierp\" : 8472, // script capital P = power set= Weierstrass p, U+2118 ISOamso\n \"image\" : 8465, // blackletter capital I = imaginary part,U+2111 ISOamso\n \"real\" : 8476, // blackletter capital R = real part symbol,U+211C ISOamso\n \"trade\" : 8482, // trade mark sign, U+2122 ISOnum\n \"alefsym\" : 8501, // alef symbol = first transfinite cardinal,U+2135 NEW\n\n // alef symbol is NOT the same as hebrew letter alef,U+05D0 although the same glyph could be used to depict both characters\n // Arrows\n \"larr\" : 8592, // leftwards arrow, U+2190 ISOnum\n \"uarr\" : 8593, // upwards arrow, U+2191 ISOnum-->\n \"rarr\" : 8594, // rightwards arrow, U+2192 ISOnum\n \"darr\" : 8595, // downwards arrow, U+2193 ISOnum\n \"harr\" : 8596, // left right arrow, U+2194 ISOamsa\n \"crarr\" : 8629, // downwards arrow with corner leftwards= carriage return, U+21B5 NEW\n \"lArr\" : 8656, // leftwards double arrow, U+21D0 ISOtech\n\n // ISO 10646 does not say that lArr is the same as the 'is implied by' arrow but also does not have any other character for that function. So ? lArr can be used for 'is implied by' as ISOtech suggests\n \"uArr\" : 8657, // upwards double arrow, U+21D1 ISOamsa\n \"rArr\" : 8658, // rightwards double arrow,U+21D2 ISOtech\n\n // ISO 10646 does not say this is the 'implies' character but does not have another character with this function so ?rArr can be used for 'implies' as ISOtech suggests\n \"dArr\" : 8659, // downwards double arrow, U+21D3 ISOamsa\n \"hArr\" : 8660, // left right double arrow,U+21D4 ISOamsa\n\n // Mathematical Operators\n \"forall\" : 8704, // for all, U+2200 ISOtech\n \"part\" : 8706, // partial differential, U+2202 ISOtech\n \"exist\" : 8707, // there exists, U+2203 ISOtech\n \"empty\" : 8709, // empty set = null set = diameter,U+2205 ISOamso\n \"nabla\" : 8711, // nabla = backward difference,U+2207 ISOtech\n \"isin\" : 8712, // element of, U+2208 ISOtech\n \"notin\" : 8713, // not an element of, U+2209 ISOtech\n \"ni\" : 8715, // contains as member, U+220B ISOtech\n\n // should there be a more memorable name than 'ni'?\n \"prod\" : 8719, // n-ary product = product sign,U+220F ISOamsb\n\n // prod is NOT the same character as U+03A0 'greek capital letter pi' though the same glyph might be used for both\n \"sum\" : 8721, // n-ary summation, U+2211 ISOamsb\n\n // sum is NOT the same character as U+03A3 'greek capital letter sigma' though the same glyph might be used for both\n \"minus\" : 8722, // minus sign, U+2212 ISOtech\n \"lowast\" : 8727, // asterisk operator, U+2217 ISOtech\n \"radic\" : 8730, // square root = radical sign,U+221A ISOtech\n \"prop\" : 8733, // proportional to, U+221D ISOtech\n \"infin\" : 8734, // infinity, U+221E ISOtech\n \"ang\" : 8736, // angle, U+2220 ISOamso\n \"and\" : 8743, // logical and = wedge, U+2227 ISOtech\n \"or\" : 8744, // logical or = vee, U+2228 ISOtech\n \"cap\" : 8745, // intersection = cap, U+2229 ISOtech\n \"cup\" : 8746, // union = cup, U+222A ISOtech\n \"int\" : 8747, // integral, U+222B ISOtech\n \"there4\" : 8756, // therefore, U+2234 ISOtech\n \"sim\" : 8764, // tilde operator = varies with = similar to,U+223C ISOtech\n\n // tilde operator is NOT the same character as the tilde, U+007E,although the same glyph might be used to represent both\n \"cong\" : 8773, // approximately equal to, U+2245 ISOtech\n \"asymp\" : 8776, // almost equal to = asymptotic to,U+2248 ISOamsr\n \"ne\" : 8800, // not equal to, U+2260 ISOtech\n \"equiv\" : 8801, // identical to, U+2261 ISOtech\n \"le\" : 8804, // less-than or equal to, U+2264 ISOtech\n \"ge\" : 8805, // greater-than or equal to,U+2265 ISOtech\n \"sub\" : 8834, // subset of, U+2282 ISOtech\n \"sup\" : 8835, // superset of, U+2283 ISOtech\n\n // note that nsup, 'not a superset of, U+2283' is not covered by the Symbol font encoding and is not included. Should it be, for symmetry?It is in ISOamsn --> String using HTML entities.\n *\n * For example: \"bread\" & \"butter\" => "bread" & "butter".\n * Supports all known HTML 4.0 entities, including funky accents.\n *\n * * HTML 3.2 Character Entities for ISO Latin-1\n * * HTML 4.0 Character entity references\n * * HTML 4.01 Character References\n * * HTML 4.01 Code positions\n *\n * @param str {String} the String to escape\n * @return {String} a new escaped String\n * @see #unescape\n */\n escape : function(str) {\n return qx.util.StringEscape.escape(str, qx.bom.String.FROM_CHARCODE);\n },\n\n\n /**\n * Unescapes a string containing entity escapes to a string\n * containing the actual Unicode characters corresponding to the\n * escapes. Supports HTML 4.0 entities.\n *\n * For example, the string \"<Français>\"\n * will become \"<Français>\"\n *\n * If an entity is unrecognized, it is left alone, and inserted\n * verbatim into the result string. e.g. \">&zzzz;x\" will\n * become \">&zzzz;x\".\n *\n * @param str {String} the String to unescape, may be null\n * @return {var} a new unescaped String\n * @see #escape\n */\n unescape : function(str) {\n return qx.util.StringEscape.unescape(str, qx.bom.String.TO_CHARCODE);\n },\n\n\n /**\n * Converts a plain text string into HTML.\n * This is similar to {@link #escape} but converts new lines to\n * <:br>: and preserves whitespaces.\n *\n * @param str {String} the String to convert\n * @return {String} a new converted String\n * @see #escape\n */\n fromText : function(str)\n {\n return qx.bom.String.escape(str).replace(/( |\\n)/g, function(chr)\n {\n var map =\n {\n \" \" : \" \",\n \"\\n\" : \"
\"\n };\n\n return map[chr] || chr;\n });\n },\n\n\n /**\n * Converts HTML to plain text.\n *\n * * Strips all HTML tags\n * * converts <:br>: to new line\n * * unescapes HTML entities\n *\n * @param str {String} HTML string to converts\n * @return {String} plain text representation of the HTML string\n */\n toText : function(str)\n {\n return qx.bom.String.unescape(str.replace(/\\s+|<([^>])+>/gi, function(chr)\n //return qx.bom.String.unescape(str.replace(/<\\/?[^>]+(>|$)/gi, function(chr)\n {\n if (chr.indexOf(\" 0 && chr.replace(/^\\s*/, \"\").replace(/\\s*$/, \"\") == \"\") {\n return \" \";\n } else {\n return \"\";\n }\n }));\n }\n },\n\n\n\n /*\n *****************************************************************************\n DEFER\n *****************************************************************************\n */\n\n defer : function(statics)\n {\n /** Mapping of char codes to HTML entity names */\n statics.FROM_CHARCODE = qx.lang.Object.invert(statics.TO_CHARCODE)\n; }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.hint.InfoHint\", {\n extend: osparc.ui.basic.IconButton,\n\n /**\n * Info button with hint as tooltip\n *\n * @extends osparc.ui.basic.IconButton\n */\n construct: function(hintText) {\n this.base(arguments, this.self().INFO_ICON + \"/14\");\n\n this.__createHint();\n\n this.bind(\"hintText\", this, \"visibility\", {\n converter: text => (text && text !== \"\") ? \"visible\" : \"excluded\"\n });\n\n if (hintText) {\n this.setHintText(hintText);\n }\n },\n\n statics: {\n INFO_ICON: \"@MaterialIcons/info_outline\"\n },\n\n properties: {\n hintText: {\n check: \"String\",\n init: null,\n event: \"changeHintText\",\n apply: \"__applyHintText\"\n }\n },\n\n members: {\n _hint: null,\n\n __createHint: function() {\n const hint = this._hint = new osparc.ui.hint.Hint(this).set({\n active: false\n });\n this.addListenerOnce(\"appear\", () => hint.attachShowHideHandlers());\n },\n\n __applyHintText: function(hintText) {\n this._hint.setText(hintText);\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.share.NewCollaboratorsManager\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function(resourceData, showOrganizations = true) {\n this.base(arguments, \"collaboratorsManager\", this.tr(\"Share with\"));\n this.set({\n layout: new qx.ui.layout.VBox(5),\n allowMinimize: false,\n allowMaximize: false,\n showMinimize: false,\n showMaximize: false,\n autoDestroy: true,\n modal: true,\n width: 350,\n maxHeight: 500,\n clickAwayClose: true\n });\n\n this.__resourceData = resourceData;\n this.__showOrganizations = showOrganizations;\n\n this.__renderLayout();\n\n this.__selectedCollaborators = [];\n this.__potentialCollaborators = {};\n this.__reloadPotentialCollaborators();\n\n this.center();\n this.open();\n },\n\n events: {\n \"addCollaborators\": \"qx.event.type.Data\"\n },\n\n members: {\n __resourceData: null,\n __showOrganizations: null,\n __textFilter: null,\n __collabButtonsContainer: null,\n __searchingCollaborators: null,\n __searchDelayer: null,\n __shareButton: null,\n __selectedCollaborators: null,\n __potentialCollaborators: null,\n\n getActionButton: function() {\n return this.__shareButton;\n },\n\n __renderLayout: function() {\n let text = this.__showOrganizations ?\n this.tr(\"Select users or organizations from the list below.\") :\n this.tr(\"Select users from the list below.\");\n text += this.tr(\"
Search them if they aren't listed.\");\n const introLabel = new qx.ui.basic.Label().set({\n value: text,\n rich: true,\n wrap: true,\n paddingBottom: 5\n });\n this.add(introLabel);\n\n const toolbar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n }));\n const filter = this.__textFilter = new osparc.filter.TextFilter(\"name\", \"collaboratorsManager\");\n filter.setCompact(true);\n const filterTextField = filter.getChildControl(\"textfield\");\n filterTextField.setPlaceholder(this.tr(\"Search\"));\n this.addListener(\"appear\", () => filterTextField.focus());\n toolbar.add(filter, {\n flex: 1\n });\n filterTextField.addListener(\"input\", e => {\n const filterValue = e.getData();\n if (this.__searchDelayer) {\n clearTimeout(this.__searchDelayer);\n }\n if (filterValue.length > 3) {\n const waitBeforeSearching = 1000;\n this.__searchDelayer = setTimeout(() => {\n this.__searchUsers();\n }, waitBeforeSearching);\n }\n });\n this.add(toolbar);\n\n const collabButtonsContainer = this.__collabButtonsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(collabButtonsContainer);\n this.add(scrollContainer, {\n flex: 1\n });\n\n const searchingCollaborators = this.__searchingCollaborators = new osparc.filter.SearchingCollaborators();\n searchingCollaborators.exclude();\n this.__collabButtonsContainer.add(searchingCollaborators);\n\n const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"right\"\n }));\n const shareButton = this.__shareButton = new osparc.ui.form.FetchButton(this.tr(\"Share\")).set({\n appearance: \"form-button\",\n enabled: false,\n });\n shareButton.addListener(\"execute\", () => this.__shareClicked(), this);\n buttons.add(shareButton);\n this.add(buttons);\n },\n\n __searchUsers: function() {\n this.__searchingCollaborators.show();\n const text = this.__textFilter.getChildControl(\"textfield\").getValue();\n osparc.store.Users.getInstance().searchUsers(text)\n .then(users => {\n users.forEach(user => user[\"collabType\"] = 2);\n this.__addPotentialCollaborators(users);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.getInstance().logAs(err.message, \"ERROR\");\n })\n .finally(() => this.__searchingCollaborators.exclude());\n },\n\n __showProductEveryone: function() {\n let showProductEveryone = false;\n if (this.__showOrganizations === false) {\n showProductEveryone = false;\n } else if (this.__resourceData && this.__resourceData[\"resourceType\"] === \"study\") {\n // studies can't be shared with ProductEveryone\n showProductEveryone = false;\n } else if (this.__resourceData && this.__resourceData[\"resourceType\"] === \"template\") {\n // only users with permissions can share templates with ProductEveryone\n showProductEveryone = osparc.data.Permissions.getInstance().canDo(\"study.everyone.share\");\n } else if (this.__resourceData && this.__resourceData[\"resourceType\"] === \"service\") {\n // all users can share services with ProductEveryone\n showProductEveryone = true;\n }\n return showProductEveryone;\n },\n\n __reloadPotentialCollaborators: function() {\n const includeProductEveryone = this.__showProductEveryone();\n this.__potentialCollaborators = osparc.store.Groups.getInstance().getPotentialCollaborators(false, includeProductEveryone);\n const potentialCollaborators = Object.values(this.__potentialCollaborators);\n this.__addPotentialCollaborators(potentialCollaborators);\n },\n\n __collaboratorButton: function(collaborator) {\n const collaboratorButton = new osparc.filter.CollaboratorToggleButton(collaborator);\n collaboratorButton.groupId = collaborator.getGroupId();\n collaboratorButton.addListener(\"changeValue\", e => {\n const selected = e.getData();\n if (selected) {\n this.__selectedCollaborators.push(collaborator.getGroupId());\n } else {\n const idx = this.__selectedCollaborators.indexOf(collaborator.getGroupId());\n if (idx > -1) {\n this.__selectedCollaborators.splice(idx, 1);\n }\n }\n this.__shareButton.setEnabled(Boolean(this.__selectedCollaborators.length));\n }, this);\n collaboratorButton.subscribeToFilterGroup(\"collaboratorsManager\");\n return collaboratorButton;\n },\n\n __addPotentialCollaborators: function(potentialCollaborators) {\n // sort them first\n potentialCollaborators.sort((a, b) => {\n if (a[\"collabType\"] > b[\"collabType\"]) {\n return 1;\n }\n if (a[\"collabType\"] < b[\"collabType\"]) {\n return -1;\n }\n if (a.getLabel() > b.getLabel()) {\n return 1;\n }\n return -1;\n });\n\n let existingCollabs = [];\n if (this.__resourceData) {\n if (this.__resourceData[\"groupMembers\"] && this.__resourceData[\"resourceType\"] === \"organization\") {\n // organization\n existingCollabs = Object.keys(this.__resourceData[\"groupMembers\"]);\n } else if (this.__resourceData[\"accessRights\"] && this.__resourceData[\"resourceType\"] === \"wallet\") {\n // wallet\n // array of objects\n existingCollabs = this.__resourceData[\"accessRights\"].map(collab => collab[\"gid\"]);\n } else if (this.__resourceData[\"accessRights\"]) {\n // study/template/service/\n // object\n existingCollabs = Object.keys(this.__resourceData[\"accessRights\"]);\n }\n }\n\n const existingCollaborators = existingCollabs.map(c => parseInt(c));\n potentialCollaborators.forEach(potentialCollaborator => {\n // do not list the potentialCollaborators that are already collaborators\n if (existingCollaborators.includes(potentialCollaborator.getGroupId())) {\n return;\n }\n // do not list those that were already listed\n if (this.__collabButtonsContainer.getChildren().find(c => \"groupId\" in c && c[\"groupId\"] === potentialCollaborator.getGroupId())) {\n return;\n }\n if (this.__showOrganizations === false && potentialCollaborator[\"collabType\"] !== 2) {\n return;\n }\n this.__collabButtonsContainer.add(this.__collaboratorButton(potentialCollaborator));\n });\n\n // move it to last position\n this.__collabButtonsContainer.remove(this.__searchingCollaborators);\n this.__collabButtonsContainer.add(this.__searchingCollaborators);\n },\n\n __shareClicked: function() {\n this.__collabButtonsContainer.setEnabled(false);\n this.__shareButton.setFetching(true);\n\n if (this.__selectedCollaborators.length) {\n this.fireDataEvent(\"addCollaborators\", this.__selectedCollaborators);\n }\n // The parent class will close the window\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.OrganizationsWindow\", {\n extend: osparc.ui.window.SingletonWindow,\n\n construct: function() {\n this.base(arguments, \"organizations\", this.tr(\"Organizations\"));\n\n this.set({\n layout: new qx.ui.layout.VBox(),\n modal: true,\n width: 550,\n height: 660,\n showMaximize: false,\n showMinimize: false,\n appearance: \"service-window\"\n });\n\n osparc.utils.Utils.setIdToWidget(this, \"organizationsWindow\");\n const closeBtn = this.getChildControl(\"close-button\");\n osparc.utils.Utils.setIdToWidget(closeBtn, \"organizationsWindowCloseBtn\");\n\n this.__buildLayout();\n },\n\n statics: {\n openWindow: function() {\n const orgsWindow = new osparc.desktop.organizations.OrganizationsWindow();\n orgsWindow.center();\n orgsWindow.open();\n return orgsWindow;\n }\n },\n\n members: {\n __stack: null,\n __orgsPage: null,\n __orgDetails: null,\n\n __buildLayout: function() {\n const stack = this.__stack = new qx.ui.container.Stack();\n this.add(stack, {\n flex: 1\n });\n\n const orgsPage = this.__orgsPage = new osparc.desktop.organizations.OrganizationsList();\n const orgDetails = this.__orgDetails = new osparc.desktop.organizations.OrganizationDetails();\n stack.add(orgsPage);\n stack.add(orgDetails);\n\n orgsPage.addListener(\"organizationSelected\", e => {\n const orgId = e.getData();\n this.openOrganizationDetails(orgId);\n });\n\n orgDetails.addListener(\"backToOrganizations\", () => {\n this.getChildControl(\"title\").setValue(this.tr(\"Organizations\"));\n this.__stack.setSelection([orgsPage]);\n orgsPage.reloadOrganizations();\n });\n },\n\n openOrganizationDetails: function(organizationId) {\n const openOrgDetails = orgId => {\n const orgModel = this.__orgsPage.getOrgModel(orgId);\n this.__orgDetails.setCurrentOrg(orgModel);\n this.getChildControl(\"title\").setValue(this.tr(\"Organization details\"));\n this.__stack.setSelection([this.__orgDetails]);\n };\n if (this.__orgsPage.isOrganizationsLoaded()) {\n openOrgDetails(organizationId);\n } else {\n this.__orgsPage.addListenerOnce(\"changeOrganizationsLoaded\", () => openOrgDetails(organizationId));\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\n/**\n * @asset(marked/marked.min.js)\n * @ignore(marked)\n */\n\n/* global marked */\n\n/**\n * This class is just a special kind of rich label that takes markdown raw text, compiles it to HTML,\n * sanitizes it and applies it to its value property.\n */\nqx.Class.define(\"osparc.ui.markdown.Markdown\", {\n extend: qx.ui.embed.Html,\n\n /**\n * Markdown constructor. It directly accepts markdown as its first argument.\n * @param {String} markdown Plain text accepting markdown syntax. Its compiled version will be set in the value property of the label.\n */\n construct: function(markdown) {\n this.base(arguments);\n\n this.__loadMarked = new Promise((resolve, reject) => {\n if (typeof marked === \"function\") {\n resolve(marked);\n } else {\n const loader = new qx.util.DynamicScriptLoader([\n \"marked/marked.min.js\"\n ]);\n loader.addListenerOnce(\"ready\", () => {\n resolve(marked);\n }, this);\n loader.addListenerOnce(\"failed\", e => {\n reject(Error(`Failed to load ${e.getData()}. Value couldn't be updated.`));\n });\n loader.start();\n }\n });\n if (markdown) {\n this.setValue(markdown);\n }\n [\n \"resize\",\n \"appear\"\n ].forEach(event => {\n this.addListener(event, e => this.__resizeMe(), this);\n });\n\n this.setHeight(1);\n },\n\n properties: {\n /**\n * Holds the raw markdown text and updates the label's {@link #value} whenever new markdown arrives.\n */\n value: {\n check: \"String\",\n apply: \"__applyMarkdown\"\n },\n\n noMargin: {\n check: \"Boolean\",\n init: false\n }\n },\n\n events: {\n \"resized\": \"qx.event.type.Event\",\n },\n\n members: {\n __loadMarked: null,\n /**\n * Apply function for the markdown property. Compiles the markdown text to HTML and applies it to the value property of the label.\n * @param {String} value Plain text accepting markdown syntax.\n */\n __applyMarkdown: function(value = \"\") {\n this.__loadMarked.then(() => {\n const renderer = {\n link(link) {\n const linkColor = qx.theme.manager.Color.getInstance().resolve(\"link\");\n let linkHtml = ``\n if (link.tokens && link.tokens.length) {\n const linkRepresentation = link.tokens[0];\n if (linkRepresentation.type === \"text\") {\n linkHtml += linkRepresentation.text;\n } else if (linkRepresentation.type === \"image\") {\n linkHtml += `![\"${linkRepresentation.text}\"](\"${linkRepresentation.href}\")
`;\n }\n }\n linkHtml += ``;\n return linkHtml;\n }\n };\n marked.use({ renderer });\n\n const html = marked.parse(value);\n\n const safeHtml = osparc.wrapper.DOMPurify.getInstance().sanitize(html);\n this.setHtml(safeHtml);\n\n // for some reason the content is not immediately there\n qx.event.Timer.once(() => {\n this.__parseImages();\n this.__resizeMe();\n }, this, 100);\n\n this.__resizeMe();\n }).catch(error => console.error(error));\n },\n\n __parseImages: function() {\n const domElement = this.__getDomElement();\n if (domElement === null) {\n return;\n }\n const images = qx.bom.Selector.query(\"img\", domElement);\n for (let i=0; i {\n this.__resizeMe();\n };\n }\n },\n\n // qx.ui.embed.html scale to content\n __resizeMe: function() {\n const domElement = this.__getDomElement();\n if (domElement === null) {\n return;\n }\n if (domElement && domElement.children) {\n const elemHeight = this.__getChildrenElementHeight(domElement.children);\n if (this.getMaxHeight() && elemHeight > this.getMaxHeight()) {\n this.setHeight(elemHeight);\n } else {\n this.setMinHeight(elemHeight);\n }\n\n const elemMaxWidth = this.__getChildrenElementMaxWidth(domElement.children);\n if (this.getMaxWidth() && elemMaxWidth > this.getMaxWidth()) {\n this.setWidth(elemMaxWidth);\n } else {\n this.setMinWidth(elemMaxWidth);\n }\n }\n this.fireEvent(\"resized\");\n },\n\n __getDomElement: function() {\n if (!this.getContentElement || this.getContentElement() === null) {\n return null;\n }\n const domElement = this.getContentElement().getDomElement();\n if (domElement) {\n return domElement;\n }\n return null;\n },\n\n __getChildrenElementHeight: function(children) {\n let height = 0;\n if (children.length) {\n for (let i=0; i < children.length; i++) {\n height += this.__getElementHeight(children[i]);\n }\n }\n return height;\n },\n\n __getElementHeight: function(element) {\n if (this.getNoMargin()) {\n element.style.marginTop = 0;\n element.style.marginBottom = 0;\n const size = this.__getElementSize(element);\n return size.height;\n }\n const size = this.__getElementSize(element);\n // add padding\n return size.height + 20;\n },\n\n __getChildrenElementMaxWidth: function(children) {\n let maxWidth = 0;\n for (let i=0; i < children.length; i++) {\n maxWidth = Math.max(this.__getElementWidth(children[i]), maxWidth);\n }\n return maxWidth;\n },\n\n __getElementWidth: function(element) {\n const size = this.__getElementSize(element);\n return size.width;\n },\n\n __getElementSize: function(element) {\n if (\n element &&\n element.children &&\n element.children.length &&\n element.children[0].localName === \"img\"\n ) {\n return qx.bom.element.Dimension.getSize(element.children[0]);\n }\n return qx.bom.element.Dimension.getSize(element);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.Notifications\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n this.__notifications = new qx.data.Array();\n },\n\n statics: {\n __newNotificationBase: function(userId) {\n return {\n \"user_id\": userId.toString(),\n \"user_from_id\": osparc.auth.Data.getInstance().getUserId(),\n \"date\": new Date().toISOString(),\n \"product\": osparc.product.Utils.getProductName(),\n };\n },\n\n __newOrganizationObj: function(userId, orgId) {\n const baseNotification = this.__newNotificationBase(userId);\n const specNotification = {\n \"category\": \"NEW_ORGANIZATION\",\n \"actionable_path\": \"organization/\"+orgId,\n \"resource_id\": orgId.toString(),\n \"title\": \"New organization\",\n \"text\": \"You're now member of a new Organization\"\n };\n return {\n ...baseNotification,\n ...specNotification\n };\n },\n\n __newStudyObj: function(userId, studyId) {\n const study = osparc.product.Utils.getStudyAlias({\n firstUpperCase: true\n });\n const baseNotification = this.__newNotificationBase(userId);\n const specNotification = {\n \"category\": \"STUDY_SHARED\",\n \"actionable_path\": \"study/\"+studyId,\n \"resource_id\": studyId,\n \"title\": `${study} shared`,\n \"text\": `A ${study} was shared with you`\n };\n return {\n ...baseNotification,\n ...specNotification\n };\n },\n\n __newTemplateObj: function(userId, templateId) {\n const template = osparc.product.Utils.getTemplateAlias({\n firstUpperCase: true\n });\n const baseNotification = this.__newNotificationBase(userId);\n const specNotification = {\n \"category\": \"TEMPLATE_SHARED\",\n \"actionable_path\": \"template/\"+templateId,\n \"resource_id\": templateId,\n \"title\": `${template} shared`,\n \"text\": `A ${template} was shared with you`\n };\n return {\n ...baseNotification,\n ...specNotification\n };\n },\n\n __newAnnotationNoteObj: function(userId, studyId) {\n const baseNotification = this.__newNotificationBase(userId);\n const specNotification = {\n \"category\": \"ANNOTATION_NOTE\",\n \"actionable_path\": \"study/\"+studyId,\n \"resource_id\": studyId,\n \"title\": \"Note added\",\n \"text\": \"A Note was added for you\"\n };\n return {\n ...baseNotification,\n ...specNotification\n };\n },\n\n __newWalletObj: function(userId, walletId) {\n const baseNotification = this.__newNotificationBase(userId);\n const specNotification = {\n \"category\": \"WALLET_SHARED\",\n \"actionable_path\": \"wallet/\"+walletId,\n \"resource_id\": walletId.toString(),\n \"title\": \"Credits shared\",\n \"text\": \"A Credit Account was shared with you\"\n };\n return {\n ...baseNotification,\n ...specNotification\n };\n },\n\n postNewOrganization: function(userId, orgId) {\n const params = {\n data: this.__newOrganizationObj(userId, orgId)\n };\n return osparc.data.Resources.fetch(\"notifications\", \"post\", params);\n },\n\n postNewStudy: function(userId, studyId) {\n const params = {\n data: this.__newStudyObj(userId, studyId)\n };\n return osparc.data.Resources.fetch(\"notifications\", \"post\", params);\n },\n\n postNewTemplate: function(userId, templateId) {\n const params = {\n data: this.__newTemplateObj(userId, templateId)\n };\n return osparc.data.Resources.fetch(\"notifications\", \"post\", params);\n },\n\n postNewAnnotationNote: function(userId, studyId) {\n const params = {\n data: this.__newAnnotationNoteObj(userId, studyId)\n };\n return osparc.data.Resources.fetch(\"notifications\", \"post\", params);\n },\n\n postNewWallet: function(userId, walletId) {\n const params = {\n data: this.__newWalletObj(userId, walletId)\n };\n return osparc.data.Resources.fetch(\"notifications\", \"post\", params);\n },\n\n markAsRead: function(notification) {\n if (notification.isRead() === false) {\n // set as read\n const params = {\n url: {\n notificationId: notification.getId()\n },\n data: {\n \"read\": true\n }\n };\n osparc.data.Resources.fetch(\"notifications\", \"patch\", params)\n .then(() => notification.setRead(true))\n .catch(() => notification.setRead(false));\n }\n },\n },\n\n members: {\n __notifications: null,\n\n __addNotification: function(notificationObj) {\n const notification = new osparc.notification.Notification(notificationObj);\n this.__notifications.push(notification);\n this.__notifications.sort((a, b) => new Date(b.getDate()) - new Date(a.getDate()));\n },\n\n addNotifications: function(notifications) {\n this.__notifications.removeAll();\n notifications.forEach(notification => this.__addNotification(notification));\n },\n\n removeNotification: function(notification) {\n this.__notifications.remove(notification);\n },\n\n getNotifications: function() {\n return this.__notifications;\n },\n\n markAllAsRead: function() {\n this.__notifications.forEach(notification => {\n if (notification.isRead() === false) {\n osparc.notification.Notifications.markAsRead(notification);\n }\n });\n },\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.share.ShareePermissions\", {\n extend: qx.ui.core.Widget,\n\n construct: function(shareesData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(25));\n\n this.__populateLayout(shareesData);\n },\n\n members: {\n __populateLayout: function(shareesData) {\n const text = this.tr(\"The following users/groups will not be able to open the shared study, because they don't have access to some services. Please contact the service owner(s) to give permission.\");\n this._add(new qx.ui.basic.Label().set({\n value: text,\n font: \"text-14\",\n rich: true,\n wrap: true\n }));\n\n const grid = new qx.ui.layout.Grid(20, 10);\n grid.setColumnAlign(0, \"center\", \"middle\");\n grid.setColumnAlign(1, \"center\", \"middle\");\n const layout = new qx.ui.container.Composite(grid);\n this._add(layout);\n for (let i=0; i {\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n alignY: \"middle\"\n });\n const infoButton = new qx.ui.form.Button(null, \"@MaterialIcons/info_outline/14\");\n infoButton.setAppearance(\"strong-button\");\n const label = new qx.ui.basic.Label();\n hBox.add(infoButton);\n hBox.add(label);\n osparc.store.Services.getService(inaccessibleService.key, inaccessibleService.version)\n .then(metadata => {\n label.setValue(metadata[\"name\"] + \" : \" + metadata[\"version\"])\n infoButton.addListener(\"execute\", () => {\n metadata[\"resourceType\"] = \"service\";\n const resourceDetails = new osparc.dashboard.ResourceDetails(metadata);\n osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n }, this);\n })\n\n vBox.add(hBox);\n });\n layout.add(vBox, {\n row: i,\n column: 1\n });\n }\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n ======================================================================\n\n This class contains code based on the following work:\n\n * jQuery\n http://jquery.com\n Version 1.3.1\n\n Copyright:\n 2009 John Resig\n\n License:\n MIT: http://www.opensource.org/licenses/mit-license.php\n\n************************************************************************ */\n\n/**\n * Cross browser abstractions to work with input elements.\n */\nqx.Bootstrap.define(\"qx.bom.Input\",\n{\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /** @type {Map} Internal data structures with all supported input types */\n __types :\n {\n text : 1,\n textarea : 1,\n select : 1,\n checkbox : 1,\n radio : 1,\n password : 1,\n hidden : 1,\n submit : 1,\n image : 1,\n file : 1,\n search : 1,\n reset : 1,\n button : 1\n },\n\n\n /**\n * Creates an DOM input/textarea/select element.\n *\n * Attributes may be given directly with this call. This is critical\n * for some attributes e.g. name, type, ... in many clients.\n *\n * Note: select and textarea elements are created\n * using the identically named type.\n *\n * @param type {String} Any valid type for HTML, select\n * and textarea\n * @param attributes {Map} Map of attributes to apply\n * @param win {Window} Window to create the element for\n * @return {Element} The created input node\n */\n create : function(type, attributes, win)\n {\n if (qx.core.Environment.get(\"qx.debug\")) {\n qx.core.Assert.assertKeyInMap(type, this.__types, \"Unsupported input type.\");\n }\n\n // Work on a copy to not modify given attributes map\n var attributes = attributes ? qx.lang.Object.clone(attributes) : {};\n\n var tag;\n\n if (type === \"textarea\" || type === \"select\")\n {\n tag = type;\n }\n else\n {\n tag = \"input\";\n attributes.type = type;\n }\n\n return qx.dom.Element.create(tag, attributes, win);\n },\n\n\n /**\n * Applies the given value to the element.\n *\n * Normally the value is given as a string/number value and applied\n * to the field content (textfield, textarea) or used to\n * detect whether the field is checked (checkbox, radiobutton).\n *\n * Supports array values for selectboxes (multiple-selection)\n * and checkboxes or radiobuttons (for convenience).\n *\n * Please note: To modify the value attribute of a checkbox or\n * radiobutton use {@link qx.bom.element.Attribute#set} instead.\n *\n * @param element {Element} element to update\n * @param value {String|Number|Array} the value to apply\n */\n setValue : function(element, value)\n {\n var tag = element.nodeName.toLowerCase();\n var type = element.type;\n var Type = qx.lang.Type;\n\n if (typeof value === \"number\") {\n value += \"\";\n }\n\n if ((type === \"checkbox\" || type === \"radio\"))\n {\n if (Type.isArray(value)) {\n element.checked = value.includes(element.value);\n } else {\n element.checked = element.value == value;\n }\n }\n else if (tag === \"select\")\n {\n var isArray = Type.isArray(value);\n var options = element.options;\n var subel, subval;\n\n for (var i=0, l=options.length; i {\n const container = this.getLayoutParent();\n const parent = container.getLayoutParent();\n parent.remove(container);\n }, this);\n }\n this.bind(\"key\", this.__label, \"value\", {\n converter: key => this.__getHeaderText(key, schema, isArrayItem)\n });\n },\n properties: {\n key: {\n event: \"changeKey\",\n init: \"\"\n }\n },\n members: {\n __label: null,\n /**\n * Method that returns an appropriate text for a label.\n */\n __getHeaderText: function(key, schema, isArrayItem) {\n let title = schema.title || key;\n if (isArrayItem) {\n title = schema.title ? `${schema.title} ` : \"\";\n return title + `#${key + 1}`;\n }\n return title;\n },\n /**\n * Method that returns the label.\n */\n getLabel: function() {\n return this.__label;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Form widget that simply extends SelectBox to avoid the manipulation of ``qx.ui.form.ListItem`` as menu options.\n */\nqx.Class.define(\"osparc.ui.form.ListItemSelectBox\", {\n extend: qx.ui.form.SelectBox,\n members: {\n // overwritten\n add: function(label, icon, model, options) {\n this.base(arguments, new qx.ui.form.ListItem(label, icon, model), options);\n },\n // overwritten\n getValue: function() {\n const listItem = this.base(arguments);\n return listItem.getLabel();\n },\n // overwritten\n setValue: function(value) {\n const item = this.getChildren().find(child => child.getLabel() === value);\n if (item) {\n this.base(arguments, item);\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Static class that holds reusable form validators.\n */\nqx.Class.define(\"osparc.utils.Validators\", {\n statics: {\n hexColor: function(color, item) {\n const valid = qx.util.ColorUtil.isHex3String(color) || qx.util.ColorUtil.isHex6String(color);\n if (!valid) {\n item.setInvalidMessage(qx.locale.Manager.tr(\"Color must be in hexadecimal form\"));\n }\n return valid;\n },\n regExp: function(regExp) {\n return function(value, item) {\n const valid = regExp.test(value);\n if (!valid) {\n item.setInvalidMessage(qx.locale.Manager.tr(\"Format is invalid\"));\n }\n return valid;\n };\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * A password input field, which hides the entered text.\n */\nqx.Class.define(\"qx.ui.form.PasswordField\",\n{\n extend : qx.ui.form.TextField,\n\n members :\n {\n // overridden\n _createInputElement : function() {\n return new qx.html.Input(\"password\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.About\", {\n extend: osparc.ui.window.Window,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments, this.tr(\"About \") + this.self().OSPARC_OFFICIAL);\n this.set({\n layout: new qx.ui.layout.VBox(10),\n maxWidth: this.self().MAX_WIDTH,\n maxHeight: this.self().MAX_HEIGHT,\n contentPadding: this.self().PADDING,\n resizable: true,\n showMaximize: false,\n showMinimize: false,\n centerOnAppear: true,\n clickAwayClose: true,\n modal: true\n });\n const closeBtn = this.getChildControl(\"close-button\");\n osparc.utils.Utils.setIdToWidget(closeBtn, \"aboutWindowCloseBtn\");\n\n this.__buildLayout();\n },\n\n statics: {\n MAX_WIDTH: 550,\n MAX_HEIGHT: 680,\n PADDING: 15,\n OSPARC_OFFICIAL: \"o2S2PARC\"\n },\n\n members: {\n __buildLayout: function() {\n const color = qx.theme.manager.Color.getInstance().resolve(\"text\");\n\n const createReleaseNotesLink = osparc.utils.Utils.createReleaseNotesLink().set({\n font: \"link-label-14\"\n });\n this.add(createReleaseNotesLink);\n\n const poweredByLabel = new qx.ui.basic.Label().set({\n font: \"text-14\",\n maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING,\n rich: true,\n wrap: true\n });\n this.add(poweredByLabel);\n const displayName = osparc.store.StaticInfo.getInstance().getDisplayName();\n const poweredText = ` is powered by the ${osparc.About.OSPARC_OFFICIAL} platform.`;\n poweredByLabel.setValue(displayName + poweredText);\n\n const text = this.tr(\"\\\n is an online-accessible, cloud-based, and collaborative computational modeling platform \\\n that was developed under the Common Fund’s Stimulating Peripheral Activity to Relieve Conditions \\\n (SPARC) program to ensure sustainable, reproducible, and FAIR (findable, accessible, interoperable, reusable) \\\n computational modeling in the field of bioelectronic medicine – from neural interfaces to peripheral nerve recruitment \\\n and the resulting effects on organ function.
\\\n For more information about SPARC and the services offered, visit the \\\n \");\n const portalLink = `SPARC Portal.`;\n const aboutText = this.self().OSPARC_OFFICIAL + text + portalLink;\n const aboutLabel = new qx.ui.basic.Label().set({\n value: aboutText,\n font: \"text-14\",\n maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING,\n rich: true,\n wrap: true\n });\n this.add(aboutLabel);\n\n const introText = this.tr(\"The platform is built upon a number of open-source \\\n resources - we can't do it all alone! Some of the technologies that we leverage include:\");\n const introLabel = new qx.ui.basic.Label().set({\n value: introText,\n font: \"text-14\",\n maxWidth: this.self().MAX_WIDTH - 2*this.self().PADDING,\n rich: true,\n wrap: true\n });\n this.add(introLabel);\n\n const tabView = new qx.ui.tabview.TabView().set({\n contentPaddingTop: 10,\n contentPaddingLeft: 0,\n barPosition: \"top\"\n });\n tabView.getChildControl(\"pane\").setBackgroundColor(\"transparent\");\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(tabView);\n this.add(scrollView, {\n flex: 1\n });\n\n const frontendPage = this.__createTabPage(this.tr(\"Front-end\"));\n tabView.add(frontendPage);\n this.__populateFrontendEntries(frontendPage);\n\n const backendPage = this.__createTabPage(this.tr(\"Back-end\"));\n tabView.add(backendPage);\n this.__populateBackendEntries(backendPage);\n },\n\n __createTabPage: function(title) {\n const layout = new qx.ui.layout.Grid(5, 5);\n layout.setColumnFlex(0, 1);\n layout.setColumnFlex(1, 1);\n const tabPage = new qx.ui.tabview.Page(title).set({\n layout\n });\n return tabPage;\n },\n\n __populateFrontendEntries: function(page) {\n const entries = [\n this.__createFrontendEntries([osparc.utils.LibVersions.getPlatformVersion()]),\n this.__createFrontendEntries([osparc.utils.LibVersions.getUIVersion()]),\n this.__createFrontendEntries([osparc.utils.LibVersions.getQxCompiler()]),\n this.__createFrontendEntries(osparc.utils.LibVersions.getQxLibraryInfoMap()),\n this.__createFrontendEntries(osparc.utils.LibVersions.get3rdPartyLibs())\n ].flat();\n for (let i=0; i1) {\n page.add(entry[1], {\n row: i,\n column: 1\n });\n }\n }\n },\n\n __populateBackendEntries: function(page) {\n const libs = osparc.utils.LibVersions.getBackendLibs();\n for (let i=0; i1) {\n page.add(entry[1], {\n row: i,\n column: 1\n });\n }\n }\n },\n\n __createFrontendEntries: function(libs) {\n const entries = [];\n libs.forEach(lib => {\n entries.push(this.__createEntry(lib));\n });\n return entries;\n },\n\n __createEntry: function(lib) {\n const label = lib.name || \"unknown-library\";\n const version = lib.version || \"-\";\n const url = lib.url || null;\n\n let entryLabel;\n if (url) {\n entryLabel = new osparc.ui.basic.LinkLabel(label, url).set({\n font: \"link-label-14\"\n });\n } else {\n entryLabel = new qx.ui.basic.Label(label);\n entryLabel.set({\n font: \"text-14\"\n });\n }\n const entryVersion = new qx.ui.basic.Label(version);\n entryVersion.setFont(\"text-14\");\n return [entryLabel, entryVersion];\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.MergedLarge\", {\n extend: osparc.info.CardLarge,\n\n /**\n * @param study {osparc.data.model.Study} Study\n */\n construct: function(study) {\n this.base(arguments);\n\n this.setStudy(study);\n const nodes = study.getWorkbench().getNodes();\n const nodeIds = Object.keys(nodes);\n if (nodeIds.length) {\n this.setNode(nodes[nodeIds[0]]);\n }\n\n this._attachHandlers();\n },\n\n events: {\n \"updateStudy\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false\n }\n },\n\n members: {\n _rebuildLayout: function() {\n this._removeAll();\n\n const title = this.__createTitle();\n const titleLayout = this.__createViewWithEdit(title, this.__openTitleEditor);\n this._add(titleLayout);\n\n const extraInfo = this.__extraInfo();\n const extraInfoLayout = this.__createExtraInfo(extraInfo);\n\n const bounds = this.getBounds();\n const offset = 30;\n const widgetWidth = bounds ? bounds.width - offset : 500 - offset;\n let thumbnailWidth = widgetWidth - 2 * osparc.info.CardLarge.PADDING;\n const maxThumbnailHeight = extraInfo.length*20;\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignX: \"center\"\n }));\n hBox.add(extraInfoLayout);\n thumbnailWidth -= osparc.info.CardLarge.EXTRA_INFO_WIDTH;\n thumbnailWidth = Math.min(thumbnailWidth - 20, osparc.info.CardLarge.THUMBNAIL_MAX_WIDTH);\n const thumbnail = this.__createThumbnail(thumbnailWidth, maxThumbnailHeight);\n const thumbnailLayout = this.__createViewWithEdit(thumbnail, this.__openThumbnailEditor);\n thumbnailLayout.getLayout().set({\n alignX: \"center\"\n });\n hBox.add(thumbnailLayout, {\n flex: 1\n });\n this._add(hBox);\n\n const tags = this.__createTags();\n if (this.__canIWrite()) {\n const editInTitle = this.__createViewWithEdit(tags.getChildren()[0], this.__openTagsEditor);\n tags.addAt(editInTitle, 0);\n if (this.__canIWrite()) {\n osparc.utils.Utils.setIdToWidget(editInTitle.getChildren()[1], \"editStudyEditTagsBtn\");\n }\n }\n this._add(tags);\n\n const description = this.__createDescription();\n if (this.__canIWrite()) {\n const editInTitle = this.__createViewWithEdit(description.getChildren()[0], this.__openDescriptionEditor);\n description.addAt(editInTitle, 0);\n }\n this._add(description);\n\n const resources = this.__createResources();\n this._add(resources);\n\n const rawMetadata = this.__createRawMetadata();\n const more = new osparc.desktop.PanelView(this.tr(\"Raw metadata\"), rawMetadata).set({\n caretSize: 14\n });\n more.setCollapsed(true);\n more.getChildControl(\"title\").setFont(\"text-12\");\n this._add(more, {\n flex: 1\n });\n const copy2Clip = osparc.utils.Utils.getCopyButton();\n copy2Clip.addListener(\"execute\", () => osparc.utils.Utils.copyTextToClipboard(osparc.utils.Utils.prettifyJson(this.getNode().serialize())), this);\n more.getChildControl(\"header\").add(copy2Clip);\n },\n\n __canIWrite: function() {\n return osparc.data.model.Study.canIWrite(this.getStudy().getAccessRights());\n },\n\n __createViewWithEdit: function(view, cb) {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n layout.add(view);\n if (this.__canIWrite()) {\n const editBtn = osparc.utils.Utils.getEditButton();\n editBtn.addListener(\"execute\", () => cb.call(this), this);\n layout.add(editBtn);\n }\n\n return layout;\n },\n\n __extraInfo: function() {\n const extraInfo = [{\n label: this.tr(\"Author\"),\n view: this.__createOwner(),\n action: null\n }, {\n label: this.tr(\"Creation Date\"),\n view: this.__createCreationDate(),\n action: null\n }, {\n label: this.tr(\"Last Modified\"),\n view: this.__createLastChangeDate(),\n action: null\n }, {\n label: this.tr(\"Access Rights\"),\n view: this.__createAccessRights(),\n action: null\n }];\n\n if (\n osparc.product.Utils.showQuality() &&\n this.getStudy().getQuality() &&\n osparc.metadata.Quality.isEnabled(this.getStudy().getQuality())\n ) {\n extraInfo.push({\n label: this.tr(\"Quality\"),\n view: this.__createQuality(),\n action: null\n });\n }\n\n if (osparc.product.Utils.showClassifiers()) {\n extraInfo.push({\n label: this.tr(\"Classifiers\"),\n view: this.__createClassifiers(),\n action: null\n });\n }\n\n let i = 0;\n extraInfo.splice(i++, 0, {\n label: osparc.utils.Utils.capitalize(osparc.product.Utils.getStudyAlias()) + \" ID\",\n view: this.__createStudyId(),\n action: {\n button: osparc.utils.Utils.getCopyButton(),\n callback: this.__copyUuidToClipboard,\n ctx: this\n }\n });\n\n extraInfo.splice(i++, 0, {\n label: this.tr(\"Service ID\"),\n view: this.__createNodeId(),\n action: {\n button: osparc.utils.Utils.getCopyButton(),\n callback: this.__copyNodeIdToClipboard,\n ctx: this\n }\n });\n\n extraInfo.splice(i++, 0, {\n label: this.tr(\"Service Key\"),\n view: this.__createKey(),\n action: {\n button: osparc.utils.Utils.getCopyButton(),\n callback: this.__copyKeyToClipboard,\n ctx: this\n }\n });\n\n if (osparc.data.Permissions.getInstance().isTester() || this.__canIWrite()) {\n extraInfo.splice(i++, 0, {\n label: this.tr(\"Service Integration Version\"),\n view: this.__createIntegrationVersion(),\n action: null\n });\n }\n\n extraInfo.splice(i++, 0, {\n label: this.tr(\"Service Version\"),\n view: this.__createDisplayVersion(),\n action: null\n });\n\n return extraInfo;\n },\n\n __createExtraInfo: function(extraInfo) {\n const moreInfo = osparc.info.Utils.extraInfosToGrid(extraInfo).set({\n width: osparc.info.CardLarge.EXTRA_INFO_WIDTH\n });\n\n return moreInfo;\n },\n\n __createTitle: function() {\n const title = osparc.info.StudyUtils.createTitle(this.getStudy()).set({\n font: \"text-16\"\n });\n return title;\n },\n\n __createStudyId: function() {\n return osparc.info.StudyUtils.createUuid(this.getStudy()).set({\n maxWidth: 200\n });\n },\n\n __createNodeId: function() {\n return osparc.info.ServiceUtils.createNodeId(this.getNode().getNodeId()).set({\n maxWidth: 200\n });\n },\n\n __createKey: function() {\n return osparc.info.ServiceUtils.createKey(this.getNode().getKey());\n },\n\n __createIntegrationVersion: function() {\n return osparc.info.ServiceUtils.createVersion(this.getNode().getVersion());\n },\n\n __createDisplayVersion: function() {\n return osparc.info.ServiceUtils.createVersionDisplay(this.getNode().getKey(), this.getNode().getVersion());\n },\n\n __createOwner: function() {\n return osparc.info.StudyUtils.createOwner(this.getStudy());\n },\n\n __createCreationDate: function() {\n return osparc.info.StudyUtils.createCreationDate(this.getStudy());\n },\n\n __createLastChangeDate: function() {\n return osparc.info.StudyUtils.createLastChangeDate(this.getStudy());\n },\n\n __createAccessRights: function() {\n return osparc.info.StudyUtils.createAccessRights(this.getStudy());\n },\n\n __createClassifiers: function() {\n return osparc.info.StudyUtils.createClassifiers(this.getStudy());\n },\n\n __createQuality: function() {\n return osparc.info.StudyUtils.createQuality(this.getStudy());\n },\n\n __createThumbnail: function(maxWidth, maxHeight = 160) {\n return osparc.info.StudyUtils.createThumbnail(this.getStudy(), maxWidth, maxHeight);\n },\n\n __createTags: function() {\n return osparc.info.StudyUtils.createTags(this.getStudy());\n },\n\n __createDescription: function() {\n const maxHeight = 400;\n const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\"\n }));\n\n const label = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Description\")).set({\n font: \"text-13\"\n });\n descriptionLayout.add(label);\n\n const descriptionContainer = osparc.info.StudyUtils.createDescriptionMD(this.getStudy(), maxHeight);\n descriptionLayout.add(descriptionContainer);\n\n return descriptionLayout;\n },\n\n __createResources: function() {\n const resourcesLayout = osparc.info.ServiceUtils.createResourcesInfo();\n resourcesLayout.exclude();\n let promise = null;\n if (this.getNode().getNodeId()) {\n const params = {\n url: {\n studyId: this.getStudy().getUuid(),\n nodeId: this.getNode().getNodeId()\n }\n };\n promise = osparc.data.Resources.get(\"nodesInStudyResources\", params);\n } else {\n promise = osparc.store.Services.getResources(this.getNode().getKey(), this.getNode().getVersion())\n }\n promise\n .then(serviceResources => {\n resourcesLayout.show();\n osparc.info.ServiceUtils.resourcesToResourcesInfo(resourcesLayout, serviceResources);\n })\n .catch(err => console.error(err));\n return resourcesLayout;\n },\n\n __createRawMetadata: function() {\n const container = new qx.ui.container.Scroll();\n container.add(new osparc.ui.basic.JsonTreeWidget(this.getNode().serialize(), \"serviceDescriptionSettings\"));\n return container;\n },\n\n __openTitleEditor: function() {\n const title = this.tr(\"Edit Title\");\n const titleEditor = new osparc.widget.Renamer(this.getStudy().getName(), null, title);\n titleEditor.addListener(\"labelChanged\", e => {\n titleEditor.close();\n const newLabel = e.getData()[\"newLabel\"];\n this.__patchStudy(\"name\", newLabel);\n }, this);\n titleEditor.center();\n titleEditor.open();\n },\n\n __copyUuidToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getStudy().getUuid());\n },\n\n __copyNodeIdToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getNode().getNodeId());\n },\n\n __copyKeyToClipboard: function() {\n osparc.utils.Utils.copyTextToClipboard(this.getNode().getKey());\n },\n\n __openTagsEditor: function() {\n const tagManager = new osparc.form.tag.TagManager(this.getStudy().serialize());\n const win = osparc.form.tag.TagManager.popUpInWindow(tagManager);\n tagManager.addListener(\"updateTags\", e => {\n win.close();\n const updatedData = e.getData();\n this.getStudy().setTags(updatedData[\"tags\"]);\n this.fireDataEvent(\"updateStudy\", updatedData);\n }, this);\n },\n\n __openThumbnailEditor: function() {\n osparc.editor.ThumbnailSuggestions.extractThumbnailSuggestions(this.getStudy())\n .then(suggestions => {\n const title = this.tr(\"Edit Thumbnail\");\n const oldThumbnail = this.getStudy().getThumbnail();\n const thumbnailEditor = new osparc.editor.ThumbnailEditor(oldThumbnail, suggestions);\n const win = osparc.ui.window.Window.popUpInWindow(thumbnailEditor, title, suggestions.length > 2 ? 500 : 350, suggestions.length ? 280 : 115);\n thumbnailEditor.addListener(\"updateThumbnail\", e => {\n win.close();\n const validUrl = e.getData();\n this.__patchStudy(\"thumbnail\", validUrl);\n }, this);\n thumbnailEditor.addListener(\"cancel\", () => win.close());\n })\n .catch(err => console.error(err));\n },\n\n __openDescriptionEditor: function() {\n const title = this.tr(\"Edit Description\");\n const textEditor = new osparc.editor.MarkdownEditor(this.getStudy().getDescription());\n const win = osparc.ui.window.Window.popUpInWindow(textEditor, title, 400, 300);\n textEditor.addListener(\"textChanged\", e => {\n win.close();\n const newDescription = e.getData();\n this.__patchStudy(\"description\", newDescription);\n }, this);\n textEditor.addListener(\"cancel\", () => {\n win.close();\n }, this);\n },\n\n __patchStudy: function(fieldKey, value) {\n this.getStudy().patchStudy({[fieldKey]: value})\n .then(studyData => {\n this.fireDataEvent(\"updateStudy\", studyData);\n qx.event.message.Bus.getInstance().dispatchByName(\"updateStudy\", studyData);\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"There was an error while updating the information.\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n });\n }\n }\n});\n","/* ************************************************************************\n\n OSparc Dark Theme for Qooxdoo\n\n Copyright:\n 2018 IT'IS Foundation\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tobias Oetiker (oetiker)\n\n Origin:\n This theme is based in large parts on the the Simple\n theme included with Qooxdoo.\n************************************************************************ */\n\n/* ************************************************************************\n\n\n************************************************************************* */\n/**\n * Mapping class for all images used in the simple theme.\n *\n * @asset(qx/decoration/Simple/*)\n * @asset(qx/static/blank.png)\n */\nqx.Class.define(\"osparc.theme.common.Image\",\n {\n extend : qx.core.Object,\n\n statics :\n {\n /**\n * Holds a map containing all the URL to the images.\n * @internal\n */\n URLS :\n {\n \"blank\" : \"qx/static/blank.png\",\n\n // checkbox\n \"checkbox-checked\" : \"@MaterialIcons/check_box/15\",\n \"checkbox-blank\" : \"@MaterialIcons/check_box_outline_blank/15\",\n \"checkbox-undetermined\" : \"@MaterialIcons/indeterminate_check_box/15\",\n \"radiobutton-checked\" : \"@MaterialIcons/radio_button_checked/15\",\n \"radiobutton-unchecked\" : \"@MaterialIcons/radio_button_unchecked/15\",\n\n // window\n \"window-minimize\" : \"@MaterialIcons/keyboard_arrow_down\",\n \"window-maximize\" : \"@MaterialIcons/fullscreen\",\n \"window-restore\" : \"@MaterialIcons/fullscreen_exit\",\n \"window-close\" : \"@MaterialIcons/close\",\n\n // cursor\n \"cursor-copy\" : \"decoration/cursors/copy.gif\",\n \"cursor-move\" : \"decoration/cursors/move.gif\",\n \"cursor-alias\" : \"decoration/cursors/alias.gif\",\n \"cursor-nodrop\" : \"decoration/cursors/nodrop.gif\",\n\n\n // arrows\n \"arrow-right\" : \"@MaterialIcons/keyboard_arrow_right/18\",\n \"arrow-left\" : \"@MaterialIcons/keyboard_arrow_left/18\",\n \"arrow-up\" : \"@MaterialIcons/keyboard_arrow_up/18\",\n \"arrow-down\" : \"@MaterialIcons/keyboard_arrow_down/18\",\n \"arrow-forward\" : \"@MaterialIcons/fast_forward/18\",\n \"arrow-rewind\" : \"@MaterialIcons/fast_rewind/18\",\n \"arrow-down-small\" : \"@MaterialIcons/keyboard_arrow_down/13\",\n \"arrow-up-small\" : \"@MaterialIcons/keyboard_arrow_up/13\",\n \"arrow-up-invert\" : \"@MaterialIcons/keyboard_arrow_up/18\",\n \"arrow-down-invert\" : \"@MaterialIcons/keyboard_arrow_down/18\",\n \"arrow-right-invert\" : \"@MaterialIcons/keyboard_arrow_right/18\",\n\n // split pane\n \"knob-horizontal\" : \"@MaterialIcons/drag_indicator/12\",\n \"knob-vertical\" : \"@MaterialIcons/drag_handle/12\",\n\n // tree\n \"tree-minus\" : \"@MaterialIcons/arrow_drop_down/16\",\n \"tree-plus\" : \"@MaterialIcons/arrow_right/16\",\n\n // table\n \"select-column-order\" : \"@MaterialIcons/reorder/15\",\n \"table-ascending\" : \"@MaterialIcons/keyboard_arrow_up/14\",\n \"table-descending\" : \"@MaterialIcons/keyboard_arrow_down/14\",\n\n // tree virtual\n \"treevirtual-line\" : \"decoration/treevirtual/line.gif\",\n \"treevirtual-minus-only\" : \"decoration/treevirtual/only_minus.gif\",\n \"treevirtual-plus-only\" : \"decoration/treevirtual/only_plus.gif\",\n \"treevirtual-minus-start\" : \"decoration/treevirtual/start_minus.gif\",\n \"treevirtual-plus-start\" : \"decoration/treevirtual/start_plus.gif\",\n \"treevirtual-minus-end\" : \"decoration/treevirtual/end_minus.gif\",\n \"treevirtual-plus-end\" : \"decoration/treevirtual/end_plus.gif\",\n \"treevirtual-minus-cross\" : \"decoration/treevirtual/cross_minus.gif\",\n \"treevirtual-plus-cross\" : \"decoration/treevirtual/cross_plus.gif\",\n \"treevirtual-end\" : \"decoration/treevirtual/end.gif\",\n \"treevirtual-cross\" : \"decoration/treevirtual/cross.gif\",\n \"folder-open\": \"@MaterialIcons/folder_open/15\",\n \"folder\": \"@MaterialIcons/folder/15\",\n \"file\": \"@MaterialIcons/insert_drive_file/15\",\n\n // menu\n \"menu-checkbox\" : \"@MaterialIcons/check_box_outline_blank/15\",\n \"menu-checkbox-checked\" : \"@MaterialIcons/check_box/15\",\n \"menu-radiobutton-checked\" : \"@MaterialIcons/radio_button_checked/15\",\n \"menu-radiobutton\" : \"@MaterialIcons/radio_button_unchecked/15\",\n\n // tabview\n \"tabview-close\" : \"decoration/tabview/close.gif\"\n }\n }\n });\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Renders a label and an input combined widget. The idea is to be able to edit a label quickly. Fires an event\n * whenever the input is modified to be able to update the value of the label externally or to trigger some other\n * logic (like API calls).\n */\nqx.Class.define(\"osparc.ui.form.EditLabel\", {\n extend: qx.ui.core.Widget,\n\n /**\n * The constructor can be provided with an initial value for the label.\n * @param {String} value This will be the initial value of the label\n */\n construct: function(value) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n\n this.__renderLayout();\n\n if (value) {\n this.setValue(value);\n }\n\n this.__loadingIcon = new qx.ui.basic.Image(\"@FontAwesome5Solid/circle-notch/12\");\n this.__loadingIcon.getContentElement().addClass(\"rotate\");\n },\n\n events: {\n \"editValue\": \"qx.event.type.Data\"\n },\n\n statics: {\n MODES: {\n DISPLAY: \"display\",\n EDIT: \"edit\"\n }\n },\n\n properties: {\n /**\n * Controls the two modes of the widget. In edit mode, it shows an input, in display mode,\n * it shows the edited label.\n */\n mode: {\n check: \"String\",\n nullable: false,\n init: \"display\",\n apply: \"_applyMode\"\n },\n\n /**\n * Master value of the widget. The label in display mode will always show this value.\n */\n value: {\n check: \"String\",\n event: \"changeValue\",\n init: \"\",\n apply: \"_applyValue\"\n },\n\n /**\n * When set to true, adds a little spinner to indicate the the value is being updated, for example\n * while waiting for an API call to resolve.\n */\n fetching: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n apply: \"_applyFetching\"\n },\n\n /**\n * Lets you choose the font for the label in display mode.\n */\n labelFont: {\n check: \"Font\",\n apply: \"_applySpecificFont\"\n },\n\n /**\n * Lets you choose the font for the input in edit mode.\n */\n inputFont: {\n check: \"Font\",\n apply: \"_applySpecificFont\"\n },\n\n /**\n * Enables the edit mode. If false, the label is not editable.\n */\n editable: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n apply: \"_applyEditable\"\n }\n },\n\n members: {\n __labelWidth: null,\n __loadingIcon: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"text\":\n control = new qx.ui.basic.Label().set({\n appearance: \"editlabel-label\"\n });\n this.bind(\"value\", control, \"value\");\n if (this.isEditable()) {\n control.addState(\"editable\");\n }\n control.addListener(\"pointerover\", () => control.addState(\"hovered\"), this);\n control.addListener(\"pointerout\", () => control.removeState(\"hovered\"), this);\n control.addListener(\"tap\", () => this.setMode(this.isEditable() ? this.self().MODES.EDIT : this.self().modes.DISPLAY), this);\n this._add(control);\n break;\n case \"input\":\n control = new qx.ui.form.TextField(this.getValue()).set({\n appearance: \"editlabel-input\"\n });\n control.addListener(\"focusout\", () => this.setMode(this.self().MODES.DISPLAY), this);\n control.addListener(\"focus\", () => control.selectAllText(), this);\n control.addListener(\"changeValue\", evt => {\n this.setMode(this.self().MODES.DISPLAY);\n this.fireDataEvent(\"editValue\", evt.getData());\n }, this);\n control.addListener(\"keydown\", e => {\n if (e.getKeyIdentifier() === \"Enter\") {\n this.setMode(this.self().MODES.DISPLAY);\n }\n }, this);\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n /**\n * This method takes charge of rendering the widget. It relies on the property mode\n * to render the correct version of the widget.\n */\n __renderLayout: function() {\n const label = this.getChildControl(\"text\");\n const input = this.getChildControl(\"input\")\n switch (this.getMode()) {\n case this.self().MODES.EDIT:\n input.show();\n label.exclude();\n if (this.__labelWidth) {\n input.setWidth(this.__labelWidth);\n }\n input.focus();\n label.removeState(\"hovered\");\n break;\n default:\n label.show();\n input.exclude();\n }\n },\n\n _applyMode: function(mode) {\n if (mode === this.self().MODES.EDIT) {\n this.__labelWidth = this.getChildControl(\"text\").getSizeHint().width;\n }\n this.__renderLayout();\n },\n\n _applyFetching: function(isFetching) {\n const label = this.getChildControl(\"text\");\n if (isFetching) {\n label.setEnabled(false);\n this._add(this.__loadingIcon);\n } else {\n label.setEnabled(true);\n this._remove(this.__loadingIcon);\n }\n },\n\n _applyValue: function(value) {\n this.setMode(this.self().MODES.DISPLAY);\n this.getChildControl(\"input\").setValue(value);\n },\n\n _applySpecificFont: function(font, oldFont, name) {\n if (name === \"labelFont\") {\n this.getChildControl(\"text\").setFont(font);\n } else if (name === \"inputFont\") {\n this.getChildControl(\"input\").setFont(font);\n }\n },\n\n _applyEditable: function(isEditable) {\n const label = this.getChildControl(\"text\");\n if (isEditable) {\n label.addState(\"editable\");\n } else {\n label.removeState(\"editable\");\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsSummary\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.set({\n appearance: \"floating-menu\",\n padding: 8,\n maxWidth: this.self().WIDTH,\n minHeight: 150,\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,\n });\n osparc.utils.Utils.setIdToWidget(this, \"creditsSummary\");\n\n this.__buildLayout();\n\n const root = qx.core.Init.getApplication().getRoot();\n root.add(this, {\n top: 0,\n right: 0\n });\n },\n\n statics: {\n BILLING_CENTER_BUTTON_SIZE: 26,\n WIDTH: 350,\n TIME_RANGES: [{\n key: 1,\n label: \"Today\"\n }, {\n key: 7,\n label: \"Last week\"\n }, {\n key: 30,\n label: \"Last month\"\n }]\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"top-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n this._add(control);\n break;\n case \"top-left-spacer\": {\n const buttonSize = this.self().BILLING_CENTER_BUTTON_SIZE;\n control = new qx.ui.core.Spacer(buttonSize, buttonSize);\n const topLayout = this.getChildControl(\"top-layout\");\n topLayout.add(control);\n break;\n }\n case \"credits-indicator\": {\n control = new osparc.desktop.credits.CreditsIndicator();\n control.getChildControl(\"credits-bar\").exclude();\n const store = osparc.store.Store.getInstance();\n store.bind(\"contextWallet\", control, \"wallet\");\n const topLayout = this.getChildControl(\"top-layout\");\n topLayout.add(control, {\n flex: 1\n });\n break;\n }\n case \"billing-center-button\": {\n const buttonSize = this.self().BILLING_CENTER_BUTTON_SIZE;\n control = new qx.ui.form.Button().set({\n appearance: \"form-button-outlined\",\n width: buttonSize,\n height: buttonSize,\n alignX: \"center\",\n alignY: \"middle\",\n center: true,\n icon: \"@FontAwesome5Solid/ellipsis-v/12\"\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${buttonSize / 2}px`\n });\n control.addListener(\"execute\", () => {\n osparc.desktop.credits.BillingCenterWindow.openWindow();\n this.exclude();\n });\n osparc.utils.Utils.setIdToWidget(control, \"billingCenterButton\");\n const topLayout = this.getChildControl(\"top-layout\");\n topLayout.add(control);\n break;\n }\n case \"time-range-sb\": {\n control = new qx.ui.form.SelectBox().set({\n allowGrowX: false,\n alignX: \"center\",\n backgroundColor: \"transparent\"\n });\n this.self().TIME_RANGES.forEach(tr => {\n const trItem = new qx.ui.form.ListItem(tr.label, null, tr.key);\n control.add(trItem);\n });\n // default one week\n const found = control.getSelectables().find(trItem => trItem.getModel() === 7);\n if (found) {\n control.setSelection([found]);\n }\n this._add(control);\n break;\n }\n case \"services-consumption\":\n control = new osparc.desktop.credits.CreditsPerService();\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n setPosition: function(x, y) {\n this.setLayoutProperties({\n left: x - this.self().WIDTH,\n top: y\n });\n },\n\n __buildLayout: function() {\n this.getChildControl(\"top-left-spacer\");\n this.getChildControl(\"credits-indicator\");\n this.getChildControl(\"billing-center-button\");\n this.__buildConsumptionSummary();\n },\n\n __buildConsumptionSummary: function() {\n const timeRangeSB = this.getChildControl(\"time-range-sb\");\n const servicesConsumption = this.getChildControl(\"services-consumption\");\n\n const fetchData = () => {\n const selection = timeRangeSB.getSelection();\n if (selection.length) {\n servicesConsumption.setDaysRange(selection[0].getModel());\n }\n };\n\n fetchData();\n timeRangeSB.addListener(\"changeSelection\", () => fetchData(), this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.NotificationsContainer\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.set({\n zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,\n maxWidth: osparc.notification.NotificationUI.MAX_WIDTH,\n maxHeight: 250,\n backgroundColor: \"background-main\",\n decorator: \"rounded\",\n });\n let color = qx.theme.manager.Color.getInstance().resolve(\"text\");\n color = qx.util.ColorUtil.stringToRgb(color);\n color.push(0.3); // add transparency\n color = qx.util.ColorUtil.rgbToRgbString(color);\n osparc.utils.Utils.addBorder(this, 1, color);\n osparc.utils.Utils.setIdToWidget(this, \"notificationsContainer\");\n\n const root = qx.core.Init.getApplication().getRoot();\n root.add(this, {\n top: 0,\n right: 0\n });\n\n const notificationsContainer = this.__container = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(notificationsContainer);\n this._add(scrollContainer, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n\n const notifications = osparc.notification.Notifications.getInstance();\n notifications.getNotifications().addListener(\"change\", () => this.__updateContainer(), this);\n this.__updateContainer();\n },\n\n members: {\n __container: null,\n\n __updateContainer: function() {\n this.__container.removeAll();\n const notifications = osparc.notification.Notifications.getInstance().getNotifications();\n if (notifications.length) {\n notifications.forEach(notification => {\n const notificationUI = new osparc.notification.NotificationUI(notification);\n notificationUI.addListener(\"notificationTapped\", () => this.exclude());\n this.__container.add(notificationUI);\n });\n } else {\n const aboutLabel = new qx.ui.basic.Label().set({\n value: \"If something is shared with you, it will appear here\",\n font: \"text-14\",\n padding: osparc.notification.NotificationUI.PADDING,\n rich: true,\n wrap: true\n });\n this.__container.add(aboutLabel);\n }\n },\n\n setPosition: function(x, y) {\n this.setLayoutProperties({\n left: x - osparc.notification.NotificationUI.MAX_WIDTH,\n top: y\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.account.MyAccount\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function() {\n this.base(arguments);\n\n const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({\n paddingRight: 10\n });\n this.addWidgetToTabs(miniProfile);\n\n this.__profilePage = this.__addProfilePage();\n\n // show Usage in My Account if wallets are not enabled. If they are enabled it will be in the BIlling Center\n if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {\n if (osparc.data.Permissions.getInstance().canDo(\"usage.all.read\")) {\n this.__usagePage = this.__addUsagePage();\n }\n }\n\n this.__addGeneralSettings();\n this.__addConfirmationSettings();\n if (osparc.product.Utils.showPreferencesTokens()) {\n this.__addTokensPage();\n }\n if (osparc.data.Permissions.getInstance().canDo(\"user.tag\")) {\n this.__addTagsPage();\n }\n },\n\n statics: {\n createMiniProfileView: function(withSpacer = true) {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6)).set({\n alignX: \"center\",\n minWidth: 120,\n maxWidth: 150\n });\n\n const authData = osparc.auth.Data.getInstance();\n const username = authData.getUsername();\n const email = authData.getEmail();\n const avatarSize = 80;\n const img = new qx.ui.basic.Image().set({\n source: osparc.utils.Avatar.emailToThumbnail(email, username, avatarSize),\n maxWidth: avatarSize,\n maxHeight: avatarSize,\n scale: true,\n decorator: new qx.ui.decoration.Decorator().set({\n radius: avatarSize/2\n }),\n alignX: \"center\"\n });\n layout.add(img);\n\n const usernameLabel = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignX: \"center\"\n });\n authData.bind(\"username\", usernameLabel, \"value\");\n layout.add(usernameLabel);\n\n const fullNameLabel = new qx.ui.basic.Label().set({\n font: \"text-13\",\n alignX: \"center\"\n });\n layout.add(fullNameLabel);\n authData.bind(\"firstName\", fullNameLabel, \"value\", {\n converter: () => authData.getFullName()\n });\n authData.bind(\"lastName\", fullNameLabel, \"value\", {\n converter: () => authData.getFullName()\n });\n\n if (authData.getRole() !== \"user\") {\n const role = authData.getFriendlyRole();\n const roleLabel = new qx.ui.basic.Label(role).set({\n font: \"text-13\",\n alignX: \"center\"\n });\n layout.add(roleLabel);\n }\n\n if (withSpacer) {\n layout.add(new qx.ui.core.Spacer(15, 15));\n }\n\n return layout;\n }\n },\n\n members: {\n __profilePage: null,\n __usagePage: null,\n __tagsPage: null,\n\n __addProfilePage: function() {\n const title = this.tr(\"Profile\");\n const iconSrc = \"@FontAwesome5Solid/user/24\";\n const profile = new osparc.desktop.account.ProfilePage();\n const page = this.addTab(title, iconSrc, profile);\n return page;\n },\n\n __addUsagePage: function() {\n const title = this.tr(\"Usage\");\n const iconSrc = \"@FontAwesome5Solid/list/22\";\n const usageOverview = new osparc.desktop.credits.Usage();\n const page = this.addTab(title, iconSrc, usageOverview);\n return page;\n },\n __addGeneralSettings: function() {\n const title = this.tr(\"Settings\");\n const iconSrc = \"@FontAwesome5Solid/cogs/22\";\n const generalPage = new osparc.desktop.preferences.pages.GeneralPage();\n this.addTab(title, iconSrc, generalPage);\n },\n\n __addConfirmationSettings: function() {\n const title = this.tr(\"Confirmations\");\n const iconSrc = \"@FontAwesome5Solid/question-circle/22\";\n const confirmPage = new osparc.desktop.preferences.pages.ConfirmationsPage();\n this.addTab(title, iconSrc, confirmPage);\n },\n\n __addTokensPage: function() {\n const title = this.tr(\"API Keys/Tokens\");\n const iconSrc = \"@FontAwesome5Solid/exchange-alt/22\";\n const tokensPage = new osparc.desktop.preferences.pages.TokensPage();\n this.addTab(title, iconSrc, tokensPage);\n },\n\n __addTagsPage: function() {\n const title = this.tr(\"Create/Edit Tags\");\n const iconSrc = \"@FontAwesome5Solid/tags/22\";\n const tagsPage = new osparc.desktop.preferences.pages.TagsPage();\n const page = this.__tagsPage = this.addTab(title, iconSrc, tagsPage);\n osparc.utils.Utils.setIdToWidget(page.getChildControl(\"button\"), \"preferencesTagsTabBtn\");\n },\n\n openTags: function() {\n if (this.__tagsPage) {\n this._openPage(this.__tagsPage);\n }\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Layouter used by the qooxdoo menu's to render their buttons\n *\n * @internal\n */\nqx.Class.define(\"qx.ui.menu.Layout\",\n{\n extend : qx.ui.layout.VBox,\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** Spacing between each cell on the menu buttons */\n columnSpacing :\n {\n check : \"Integer\",\n init : 0,\n apply : \"_applyLayoutChange\"\n },\n\n /**\n * Whether a column and which column should automatically span\n * when the following cell is empty. Spanning may be disabled\n * through setting this property to null.\n */\n spanColumn :\n {\n check : \"Integer\",\n init : 1,\n nullable : true,\n apply : \"_applyLayoutChange\"\n },\n\n /** Default icon column width if no icons are rendered */\n iconColumnWidth :\n {\n check : \"Integer\",\n init : 0,\n themeable : true,\n apply : \"_applyLayoutChange\"\n },\n\n /** Default arrow column width if no sub menus are rendered */\n arrowColumnWidth :\n {\n check : \"Integer\",\n init : 0,\n themeable : true,\n apply : \"_applyLayoutChange\"\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __columnSizes : null,\n\n /*\n ---------------------------------------------------------------------------\n LAYOUT INTERFACE\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _computeSizeHint : function()\n {\n var children = this._getLayoutChildren();\n var child, sizes, spacing;\n\n var spanColumn = this.getSpanColumn();\n var columnSizes = this.__columnSizes = [0, 0, 0, 0];\n var columnSpacing = this.getColumnSpacing();\n var spanColumnWidth = 0;\n var maxInset = 0;\n\n // Compute column sizes and insets\n for (var i=0, l=children.length; i window.open(window.location.href, \"_blank\"));\n this.add(control);\n break;\n case \"user-center\":\n control = new qx.ui.menu.Button(this.tr(\"My Account\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuMyAccountBtn\");\n control.addListener(\"execute\", () => osparc.desktop.account.MyAccountWindow.openWindow(), this);\n this.add(control);\n break;\n case \"admin-center\":\n control = new qx.ui.menu.Button(this.tr(\"Admin Center\"));\n control.addListener(\"execute\", () => osparc.admin.AdminCenterWindow.openWindow(), this);\n this.add(control);\n break;\n case \"po-center\":\n control = new qx.ui.menu.Button(this.tr(\"PO Center\"));\n control.addListener(\"execute\", () => osparc.po.POCenterWindow.openWindow(), this);\n this.add(control);\n break;\n case \"tester-center\":\n control = new qx.ui.menu.Button(this.tr(\"Tester Center\"));\n control.addListener(\"execute\", () => osparc.tester.TesterCenterWindow.openWindow(), this);\n this.add(control);\n break;\n case \"billing-center\":\n control = new qx.ui.menu.Button(this.tr(\"Billing Center\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuBillingCenterBtn\");\n control.addListener(\"execute\", () => {\n const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();\n if (walletsEnabled) {\n osparc.desktop.credits.BillingCenterWindow.openWindow();\n }\n }, this);\n this.add(control);\n break;\n case \"organizations\":\n control = new qx.ui.menu.Button(this.tr(\"Organizations\")).set({\n visibility: osparc.data.Permissions.getInstance().canDo(\"user.organizations.create\") ? \"visible\" :\"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"userMenuOrganizationsBtn\");\n control.addListener(\"execute\", () => osparc.desktop.organizations.OrganizationsWindow.openWindow(), this);\n this.add(control);\n break;\n case \"market\":\n control = new qx.ui.menu.Button(this.tr(\"The Shop\"));\n control.addListener(\"execute\", () => osparc.vipMarket.MarketWindow.openWindow());\n this.add(control);\n break;\n case \"about\":\n control = new qx.ui.menu.Button(this.tr(\"About oSPARC\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuAboutBtn\");\n control.addListener(\"execute\", () => osparc.About.getInstance().open());\n this.add(control);\n break;\n case \"about-product\": {\n control = new qx.ui.menu.Button(this.tr(\"About Product\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuAboutProductBtn\");\n const displayName = osparc.store.StaticInfo.getInstance().getDisplayName();\n control.getChildControl(\"label\").setRich(true);\n control.setLabel(this.tr(\"About \") + displayName);\n control.addListener(\"execute\", () => osparc.product.AboutProduct.getInstance().open());\n this.add(control);\n break;\n }\n case \"license\": {\n control = new qx.ui.menu.Button(this.tr(\"License\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuLicenseBtn\");\n const licenseURL = osparc.store.Support.getLicenseURL();\n control.addListener(\"execute\", () => window.open(licenseURL));\n this.add(control);\n break;\n }\n case \"tip-lite-button\":\n control = new qx.ui.menu.Button(this.tr(\"Access Full TIP\"));\n osparc.utils.Utils.setIdToWidget(control, \"userMenuAccessTIPBtn\");\n control.addListener(\"execute\", () => osparc.product.TIPTeaser.getInstance().open());\n this.add(control);\n break;\n case \"log-out\": {\n const authData = osparc.auth.Data.getInstance();\n control = new qx.ui.menu.Button(authData.isGuest() ? this.tr(\"Exit\") : this.tr(\"Log out\"));\n control.addListener(\"execute\", () => {\n this.exclude();\n qx.core.Init.getApplication().logout();\n });\n osparc.utils.Utils.setIdToWidget(control, \"userMenuLogoutBtn\");\n this.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n populateMenu: function() {\n this.removeAll();\n\n this.getChildControl(\"mini-profile-view\");\n\n if (osparc.auth.Data.getInstance().isGuest()) {\n this.getChildControl(\"log-in\");\n } else {\n this.getChildControl(\"user-center\");\n if (osparc.data.Permissions.getInstance().isAdmin()) {\n this.getChildControl(\"admin-center\");\n }\n if (osparc.data.Permissions.getInstance().isProductOwner()) {\n this.getChildControl(\"po-center\");\n }\n if (osparc.data.Permissions.getInstance().isTester()) {\n this.getChildControl(\"tester-center\");\n }\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n this.getChildControl(\"billing-center\");\n }\n this.getChildControl(\"organizations\");\n }\n this.addSeparator();\n\n this.getChildControl(\"theme-switcher\");\n this.addSeparator();\n\n this.__addAnnouncements();\n\n if (osparc.product.Utils.showS4LStore()) {\n this.getChildControl(\"market\");\n }\n\n this.getChildControl(\"about\");\n if (osparc.product.Utils.showAboutProduct()) {\n this.getChildControl(\"about-product\");\n }\n this.getChildControl(\"license\");\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n this.getChildControl(\"tip-lite-button\");\n }\n this.addSeparator();\n\n this.getChildControl(\"log-out\");\n },\n\n __addAnnouncements: function() {\n const announcementUIFactory = osparc.announcement.AnnouncementUIFactory.getInstance();\n if (announcementUIFactory.hasUserMenuAnnouncement()) {\n announcementUIFactory.createUserMenuAnnouncements().forEach(announcement => this.add(announcement));\n }\n },\n\n populateMenuCompact: function() {\n this.removeAll();\n const authData = osparc.auth.Data.getInstance();\n if (authData.isGuest()) {\n this.getChildControl(\"log-in\");\n } else {\n this.getChildControl(\"user-center\");\n if (osparc.data.Permissions.getInstance().isAdmin()) {\n this.getChildControl(\"admin-center\");\n }\n if (osparc.data.Permissions.getInstance().isProductOwner()) {\n this.getChildControl(\"po-center\");\n }\n if (osparc.data.Permissions.getInstance().isTester()) {\n this.getChildControl(\"tester-center\");\n }\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n this.getChildControl(\"billing-center\");\n }\n this.getChildControl(\"organizations\");\n }\n this.addSeparator();\n\n // quick starts and manuals\n osparc.store.Support.addQuickStartToMenu(this);\n osparc.store.Support.addGuidedToursToMenu(this);\n osparc.store.Support.addManualButtonsToMenu(this);\n this.addSeparator();\n\n // feedbacks\n osparc.store.Support.addSupportButtonsToMenu(this);\n osparc.store.Support.addReleaseNotesToMenu(this);\n this.addSeparator();\n\n this.getChildControl(\"theme-switcher\");\n this.addSeparator();\n\n this.__addAnnouncements();\n\n if (osparc.product.Utils.showS4LStore()) {\n this.getChildControl(\"market\");\n }\n\n this.getChildControl(\"about\");\n if (osparc.product.Utils.showAboutProduct()) {\n this.getChildControl(\"about-product\");\n }\n this.getChildControl(\"license\");\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n this.getChildControl(\"tip-lite-button\");\n }\n this.addSeparator();\n this.getChildControl(\"log-out\");\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A TabButton is the tapable part sitting on the {@link qx.ui.tabview.Page}.\n * By tapping on the TabButton the user can set a Page active.\n *\n * @childControl label {qx.ui.basic.Label} label of the tab button\n * @childControl icon {qx.ui.basic.Image} icon of the tab button\n * @childControl close-button {qx.ui.form.Button} close button of the tab button\n */\nqx.Class.define(\"qx.ui.tabview.TabButton\",\n{\n extend : qx.ui.form.RadioButton,\n implement : qx.ui.form.IRadioItem,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n var layout = new qx.ui.layout.Grid(2, 0);\n layout.setRowAlign(0, \"left\", \"middle\");\n layout.setColumnAlign(0, \"right\", \"middle\");\n\n this._getLayout().dispose();\n this._setLayout(layout);\n\n this.initShowCloseButton();\n },\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /**\n * Fired by {@link qx.ui.tabview.Page} if the close button is tapped.\n *\n * Event data: The tab button.\n */\n \"close\" : \"qx.event.type.Data\"\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n\n /** Indicates if the close button of a TabButton should be shown. */\n showCloseButton :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyShowCloseButton\"\n }\n\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n\n members :\n {\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates :\n {\n focused : true,\n checked : true\n },\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n _applyIconPosition : function(value, old)\n {\n\n var children = {\n icon : this.getChildControl(\"icon\"),\n label : this.getChildControl(\"label\"),\n closeButton : this.getShowCloseButton() ? this.getChildControl(\"close-button\") : null\n };\n\n // Remove all children before adding them again\n for (var child in children)\n {\n if (children[child]) {\n this._remove(children[child]);\n }\n }\n\n switch (value)\n {\n case \"top\":\n this._add(children.label, {row: 3, column: 2});\n this._add(children.icon, {row: 1, column: 2});\n if (children.closeButton) {\n this._add(children.closeButton, {row: 0, column: 4});\n }\n break;\n\n case \"bottom\":\n this._add(children.label, {row: 1, column: 2});\n this._add(children.icon, {row: 3, column: 2});\n if (children.closeButton) {\n this._add(children.closeButton, {row: 0, column: 4});\n }\n break;\n\n case \"left\":\n this._add(children.label, {row: 0, column: 2});\n this._add(children.icon, {row: 0, column: 0});\n if (children.closeButton) {\n this._add(children.closeButton, {row: 0, column: 4});\n }\n break;\n\n case \"right\":\n this._add(children.label, {row: 0, column: 0});\n this._add(children.icon, {row: 0, column: 2});\n if (children.closeButton) {\n this._add(children.closeButton, {row: 0, column: 4});\n }\n break;\n }\n\n },\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id) {\n case \"label\":\n var control = new qx.ui.basic.Label(this.getLabel());\n control.setAnonymous(true);\n this._add(control, {row: 0, column: 2});\n this._getLayout().setColumnFlex(2, 1);\n break;\n\n case \"icon\":\n control = new qx.ui.basic.Image(this.getIcon());\n control.setAnonymous(true);\n this._add(control, {row: 0, column: 0});\n break;\n\n case \"close-button\":\n control = new qx.ui.form.Button();\n control.setFocusable(false);\n control.setKeepActive(true);\n control.addListener(\"tap\", this._onCloseButtonTap, this);\n this._add(control, {row: 0, column: 4});\n\n if (!this.getShowCloseButton()) {\n control.exclude();\n }\n\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Fires a \"close\" event when the close button is tapped.\n */\n _onCloseButtonTap : function() {\n this.fireDataEvent(\"close\", this);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyShowCloseButton : function(value, old)\n {\n if (value) {\n this._showChildControl(\"close-button\");\n } else {\n this._excludeChildControl(\"close-button\");\n }\n },\n\n // property apply\n _applyCenter : function(value)\n {\n var layout = this._getLayout();\n\n if (value) {\n layout.setColumnAlign(2, \"center\", \"middle\");\n } else {\n layout.setColumnAlign(2, \"left\", \"middle\");\n }\n\n }\n\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.WalletsList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n const listsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n osparc.utils.Utils.setIdToWidget(listsLayout, \"walletsList\");\n this._add(listsLayout);\n\n const headerPersonal = this.__createHeader(this.tr(\"Personal\"), true);\n listsLayout.add(headerPersonal);\n this.__noPersonalWalletsLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"No personal Credit Account found\"),\n font: \"text-13\",\n marginLeft: 10\n });\n listsLayout.add(this.__noPersonalWalletsLabel);\n const listPersonal = this.__createWalletsList(\"personalWalletsList\");\n listsLayout.add(listPersonal);\n this.__personalWalletsModel = this.__createModelFromList(listPersonal);\n\n const headerShared = this.__createHeader(this.tr(\"Shared with me\"), false);\n listsLayout.add(headerShared);\n this.__noSharedWalletsLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"No shared Credit Accounts found\"),\n font: \"text-13\",\n marginLeft: 10\n });\n listsLayout.add(this.__noSharedWalletsLabel);\n const listShared = this.__createWalletsList(\"sharedWalletsList\");\n listsLayout.add(listShared);\n this.__sharedWalletsModel = this.__createModelFromList(listShared);\n\n this.loadWallets();\n },\n\n events: {\n \"walletSelected\": \"qx.event.type.Data\",\n \"buyCredits\": \"qx.event.type.Data\"\n },\n\n properties: {\n walletsLoaded: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeWalletsLoaded\"\n }\n },\n\n members: {\n __noPersonalWalletsLabel: null,\n __noSharedWalletsLabel: null,\n __personalWalletsModel: null,\n __sharedWalletsModel: null,\n\n getWalletModel: function(walletId) {\n return this.__personalWalletsModel.concat(this.__sharedWalletsModel).toArray().find(\n walletModel => walletModel.getWalletId() === parseInt(walletId)\n );\n },\n\n __getWalletsFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"walletsList\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n return filter;\n },\n\n __createWalletsList: function(widgetId) {\n const walletsUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n backgroundColor: \"transparent\",\n height: null,\n focusable: false\n });\n osparc.utils.Utils.setIdToWidget(walletsUIList, widgetId);\n return walletsUIList;\n },\n\n __createModelFromList: function(walletsUIList) {\n const walletsModel = new qx.data.Array();\n const walletsCtrl = new qx.data.controller.List(walletsModel, walletsUIList, \"name\");\n walletsCtrl.setDelegate({\n createItem: () => new osparc.desktop.wallets.WalletListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"walletId\", \"key\", null, item, id);\n ctrl.bindProperty(\"walletId\", \"model\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", null, item, id);\n ctrl.bindProperty(\"name\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitle\", null, item, id);\n ctrl.bindProperty(\"creditsAvailable\", \"creditsAvailable\", null, item, id);\n ctrl.bindProperty(\"status\", \"status\", null, item, id);\n ctrl.bindProperty(\"preferredWallet\", \"preferredWallet\", null, item, id);\n ctrl.bindProperty(\"autoRecharge\", \"autoRecharge\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"walletsList\");\n\n item.addListener(\"openEditWallet\", e => this.__openEditWallet(e.getData()));\n item.addListener(\"openShareWallet\", e => this.__walletSelected(e.getData()));\n item.addListener(\"buyCredits\", e => this.fireDataEvent(\"buyCredits\", e.getData()));\n item.addListener(\"toggleFavourite\", e => {\n const {\n walletId\n } = e.getData();\n const preferencesSettings = osparc.Preferences.getInstance();\n preferencesSettings.requestChangePreferredWalletId(parseInt(walletId));\n });\n }\n });\n\n return walletsModel;\n },\n\n __walletSelected: function(wallet) {\n this.fireDataEvent(\"walletSelected\", wallet);\n },\n\n loadWallets: function() {\n this.__personalWalletsModel.removeAll();\n this.__sharedWalletsModel.removeAll();\n\n const store = osparc.store.Store.getInstance();\n const usersPrimaryGroup = osparc.auth.Data.getInstance().getGroupId()\n store.getWallets().forEach(wallet => {\n if (wallet.getOwner() === usersPrimaryGroup) {\n this.__personalWalletsModel.append(wallet)\n } else {\n this.__sharedWalletsModel.append(wallet)\n }\n });\n this.setWalletsLoaded(true);\n\n this.__noPersonalWalletsLabel.set({\n visibility: this.__personalWalletsModel.getLength() ? \"excluded\" : \"visible\"\n });\n this.__noSharedWalletsLabel.set({\n visibility: this.__sharedWalletsModel.getLength() ? \"excluded\" : \"visible\"\n });\n },\n\n __openEditWallet: function(walletId) {\n const wallet = this.getWalletModel(walletId);\n if (wallet === null) {\n return;\n }\n\n const walletEditor = new osparc.desktop.wallets.WalletEditor();\n wallet.bind(\"walletId\", walletEditor, \"walletId\");\n wallet.bind(\"name\", walletEditor, \"name\");\n wallet.bind(\"description\", walletEditor, \"description\");\n const title = this.tr(\"Credit Account Details Editor\");\n const win = osparc.ui.window.Window.popUpInWindow(walletEditor, title, 400, 250);\n walletEditor.addListener(\"updateWallet\", () => this.__updateWallet(win, walletEditor));\n walletEditor.addListener(\"cancel\", () => win.close());\n },\n\n __updateWallet: function(win, walletEditor) {\n walletEditor.setIsFetching(true);\n\n const store = osparc.store.Store.getInstance();\n const walletId = walletEditor.getWalletId();\n const found = store.getWallets().find(wallet => wallet.getWalletId() === walletId);\n if (found) {\n const name = walletEditor.getName();\n const description = walletEditor.getDescription();\n const params = {\n url: {\n \"walletId\": walletId\n },\n data: {\n \"name\": name,\n \"description\": description || null,\n \"status\": found.getStatus()\n }\n };\n osparc.data.Resources.fetch(\"wallets\", \"put\", params)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully edited\"));\n const wallet = osparc.desktop.credits.Utils.getWallet(walletId);\n wallet.set(params.data);\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong updating the Credit Account\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => {\n walletEditor.setIsFetching(false);\n win.close();\n });\n }\n\n win.close();\n },\n\n __createHeader: function(label, showCurrently) {\n const header = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n const userWallets = new qx.ui.basic.Label().set({\n value: label,\n alignX: \"left\",\n rich: true,\n font: \"text-14\"\n });\n header.add(userWallets);\n header.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n if (showCurrently) {\n const selectColumn = new qx.ui.basic.Label(this.tr(\"Currently in use\")).set({\n marginRight: 18\n });\n header.add(selectColumn)\n }\n return header;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.WalletDetails\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this._add(this.__getTitleLayout());\n this._add(this.__getTabs(), {\n flex: 1\n });\n },\n\n events: {\n \"backToWallets\": \"qx.event.type.Event\",\n \"buyCredits\": \"qx.event.type.Data\"\n },\n\n members: {\n __walletModel: null,\n __titleLayout: null,\n __walletListItem: null,\n __membersList: null,\n\n setWallet: function(walletModel) {\n if (walletModel === null) {\n return;\n }\n this.__walletModel = walletModel;\n\n const walletListItem = this.__addWalletListItem();\n walletModel.bind(\"walletId\", walletListItem, \"key\");\n walletModel.bind(\"walletId\", walletListItem, \"model\");\n walletModel.bind(\"accessRights\", walletListItem, \"accessRights\");\n walletModel.bind(\"name\", walletListItem, \"title\");\n walletModel.bind(\"description\", walletListItem, \"subtitle\");\n walletModel.bind(\"creditsAvailable\", walletListItem, \"creditsAvailable\");\n walletModel.bind(\"status\", walletListItem, \"status\");\n walletModel.bind(\"preferredWallet\", walletListItem, \"preferredWallet\");\n walletModel.bind(\"autoRecharge\", walletListItem, \"autoRecharge\");\n\n walletListItem.addListener(\"buyCredits\", e => this.fireDataEvent(\"buyCredits\", e.getData()));\n\n this.__membersList.setWallet(walletModel);\n },\n\n __getTitleLayout: function() {\n const titleLayout = this.__titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const prevBtn = new qx.ui.form.Button().set({\n toolTipText: this.tr(\"Back to Credit Accounts list\"),\n icon: \"@FontAwesome5Solid/arrow-left/20\",\n backgroundColor: \"transparent\"\n });\n prevBtn.addListener(\"execute\", () => this.fireEvent(\"backToWallets\"));\n titleLayout.add(prevBtn);\n\n this.__addWalletListItem();\n\n return titleLayout;\n },\n\n __addWalletListItem: function() {\n if (this.__walletListItem) {\n this.__titleLayout.remove(this.__walletListItem);\n }\n const walletListItem = this.__walletListItem = new osparc.desktop.wallets.WalletListItem();\n walletListItem.getChildControl(\"options\").exclude();\n walletListItem.addListener(\"openEditWallet\", () => this.__openEditWallet());\n this.__titleLayout.add(walletListItem, {\n flex: 1\n });\n return walletListItem;\n },\n\n __openEditWallet: function() {\n const wallet = this.__walletModel;\n\n const walletEditor = new osparc.desktop.wallets.WalletEditor();\n wallet.bind(\"walletId\", walletEditor, \"walletId\");\n wallet.bind(\"name\", walletEditor, \"name\");\n wallet.bind(\"description\", walletEditor, \"description\");\n const title = this.tr(\"Credit Account Details Editor\");\n const win = osparc.ui.window.Window.popUpInWindow(walletEditor, title, 400, 250);\n walletEditor.addListener(\"updateWallet\", () => this.__updateWallet(win, walletEditor.getChildControl(\"save\"), walletEditor));\n walletEditor.addListener(\"cancel\", () => win.close());\n },\n\n __updateWallet: function(win, button, walletEditor) {\n const walletId = walletEditor.getWalletId();\n const name = walletEditor.getName();\n const description = walletEditor.getDescription();\n const params = {\n url: {\n \"walletId\": walletId\n },\n data: {\n \"name\": name,\n \"description\": description,\n \"status\": this.__walletModel.getStatus()\n }\n };\n osparc.data.Resources.fetch(\"wallets\", \"put\", params)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully edited\"));\n const wallet = osparc.desktop.credits.Utils.getWallet(walletId);\n wallet.set(params.data);\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || (this.tr(\"Something went wrong editing \") + name);\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => {\n button.setFetching(false);\n win.close();\n });\n },\n\n __createTabPage: function(label, icon) {\n const tabPage = new qx.ui.tabview.Page().set({\n layout: new qx.ui.layout.VBox()\n });\n if (label) {\n tabPage.setLabel(label);\n }\n if (icon) {\n tabPage.setIcon(icon);\n }\n tabPage.getChildControl(\"button\").set({\n font: \"text-13\"\n });\n return tabPage;\n },\n\n __getTabs: function() {\n const tabView = new qx.ui.tabview.TabView().set({\n contentPadding: 10,\n backgroundColor: \"transparent\"\n });\n\n const membersListPage = this.__createTabPage(this.tr(\"Members\"), \"@FontAwesome5Solid/users/14\");\n const membersList = this.__membersList = new osparc.desktop.wallets.MembersList();\n membersListPage.add(membersList, {\n flex: 1\n });\n tabView.add(membersListPage);\n\n return tabView;\n },\n\n excludeShareButton: function() {\n this.__walletListItem.excludeShareButton()\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.PaymentGatewayWindow\", {\n type: \"static\",\n\n statics: {\n popUp: function(url, title, options) {\n const iframe = new qx.ui.embed.Iframe(url).set({\n decorator: \"no-border-2\"\n })\n return osparc.ui.window.Window.popUpInWindow(iframe, title, options.width, options.height).set({\n clickAwayClose: false\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.paymentMethods.PaymentMethodListItem\", {\n extend: osparc.ui.list.ListItem,\n\n construct: function() {\n this.base(arguments);\n\n const layout = this._getLayout();\n layout.setSpacingX(15);\n layout.setColumnFlex(this.self().GRID_POS.ICON, 0);\n layout.setColumnFlex(this.self().GRID_POS.NAME, 0);\n layout.setColumnFlex(this.self().GRID_POS.TYPE, 0);\n layout.setColumnFlex(this.self().GRID_POS.MASKED_NUMBER, 0);\n layout.setColumnFlex(this.self().GRID_POS.EXPIRATION_DATE, 1);\n // buttons to the right\n layout.setColumnFlex(this.self().GRID_POS.INFO_BUTTON, 0);\n layout.setColumnFlex(this.self().GRID_POS.DELETE_BUTTON, 0);\n\n this.getChildControl(\"thumbnail\").setSource(\"@FontAwesome5Solid/credit-card/18\");\n\n const cardHolderName = this.getChildControl(\"card-holder-name\");\n this.bind(\"cardHolderName\", cardHolderName, \"value\");\n\n const cardType = this.getChildControl(\"card-type\");\n this.bind(\"cardType\", cardType, \"value\");\n\n const cardNumberMasked = this.getChildControl(\"card-number-masked\");\n this.bind(\"cardNumberMasked\", cardNumberMasked, \"value\");\n\n const expirationDate = this.getChildControl(\"expiration-date\");\n this.bind(\"expirationMonth\", expirationDate, \"value\", {\n converter: month => month + \"/\" + this.getExpirationYear()\n });\n this.bind(\"expirationYear\", expirationDate, \"value\", {\n converter: year => this.getExpirationMonth() + \"/\" + year\n });\n\n this.getChildControl(\"details-button\");\n this.getChildControl(\"delete-button\");\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeWalletId\"\n },\n\n cardHolderName: {\n check: \"String\",\n init: \"null\",\n nullable: false,\n event: \"changeCardHolderName\"\n },\n\n cardType: {\n check: \"String\",\n init: \"null\",\n nullable: false,\n event: \"changeCardType\"\n },\n\n cardNumberMasked: {\n check: \"String\",\n init: \"null\",\n nullable: false,\n event: \"changeCardNumberMasked\"\n },\n\n expirationMonth: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeExpirationMonth\"\n },\n\n expirationYear: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeExpirationYear\"\n }\n },\n\n events: {\n \"openPaymentMethodDetails\": \"qx.event.type.Data\",\n \"deletePaymentMethod\": \"qx.event.type.Data\"\n },\n\n statics: {\n GRID_POS: {\n ICON: 0,\n NAME: 1,\n TYPE: 2,\n MASKED_NUMBER: 3,\n EXPIRATION_DATE: 4,\n INFO_BUTTON: 5,\n DELETE_BUTTON: 6\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"card-holder-name\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.NAME\n });\n break;\n case \"card-type\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.TYPE\n });\n break;\n case \"card-number-masked\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.MASKED_NUMBER\n });\n break;\n case \"expiration-date\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.EXPIRATION_DATE\n });\n break;\n case \"details-button\":\n control = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/info/14\"\n });\n control.addListener(\"execute\", () => this.fireDataEvent(\"openPaymentMethodDetails\", this.getKey()));\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.INFO_BUTTON\n });\n break;\n case \"delete-button\":\n control = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/trash/14\"\n });\n control.addListener(\"execute\", () => this.__deletePressed());\n this._add(control, {\n row: 0,\n column: this.self().GRID_POS.DELETE_BUTTON\n });\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __deletePressed: function() {\n const msg = this.tr(\"Are you sure you want to delete the Payment Method?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Payment Method\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n this.fireDataEvent(\"deletePaymentMethod\", this.getKey());\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.paymentMethods.PaymentMethodDetails\", {\n extend: qx.ui.core.Widget,\n\n construct: function(paymentMethodData) {\n this.base(arguments);\n\n const grid = new qx.ui.layout.Grid(20, 10);\n grid.setColumnAlign(0, \"right\", \"middle\"); // resource limit value\n this._setLayout(grid);\n\n this.__buildLayout(paymentMethodData);\n },\n\n statics: {\n popUpInWindow: function(paymentMethodData) {\n const title = qx.locale.Manager.tr(\"Payment Method details\");\n const paymentMethodDetails = new osparc.desktop.paymentMethods.PaymentMethodDetails(paymentMethodData);\n paymentMethodDetails.set({\n padding: 10\n });\n const viewWidth = 300;\n const viewHeight = 300;\n const win = osparc.ui.window.Window.popUpInWindow(paymentMethodDetails, title, viewWidth, viewHeight);\n win.center();\n win.open();\n return win;\n }\n },\n\n members: {\n __buildLayout: function(paymentMethodData) {\n [\n [this.tr(\"Holder name\"), paymentMethodData[\"cardHolderName\"]],\n [this.tr(\"Type\"), paymentMethodData[\"cardType\"]],\n [this.tr(\"Number\"), paymentMethodData[\"cardNumberMasked\"]],\n [this.tr(\"Expiration date\"), paymentMethodData[\"expirationMonth\"] + \"/\" + paymentMethodData[\"expirationYear\"]]\n ].forEach((pair, idx) => {\n this._add(new qx.ui.basic.Label(pair[0]).set({\n font: \"text-14\"\n }), {\n row: idx,\n column: 0\n });\n this._add(new qx.ui.basic.Label(pair[1]).set({\n font: \"text-14\"\n }), {\n row: idx,\n column: 1\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2006 STZ-IDA, Germany, http://www.stz-ida.de\n 2007 Visionet GmbH, http://www.visionet.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Til Schneider (til132) STZ-IDA\n * Dietrich Streifert (level420) Visionet\n\n************************************************************************ */\n\n/**\n * The default data row renderer.\n */\nqx.Class.define(\"qx.ui.table.rowrenderer.Default\",\n{\n extend : qx.core.Object,\n implement : qx.ui.table.IRowRenderer,\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n this.initThemeValues();\n\n // dynamic theme switch\n if (qx.core.Environment.get(\"qx.dyntheme\")) {\n qx.theme.manager.Meta.getInstance().addListener(\n \"changeTheme\", this.initThemeValues, this\n );\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** Whether the focused row should be highlighted. */\n highlightFocusRow :\n {\n check : \"Boolean\",\n init : true\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n _colors : null,\n _fontStyle : null,\n _fontStyleString : null,\n\n /**\n * Initializes the colors from the color theme.\n * @internal\n */\n initThemeValues : function() {\n this._fontStyleString = \"\";\n this._fontStyle = {};\n\n this._colors = {};\n\n // link to font theme\n this._renderFont(qx.theme.manager.Font.getInstance().resolve(\"default\"));\n\n // link to color theme\n var colorMgr = qx.theme.manager.Color.getInstance();\n this._colors.bgcolFocusedSelected = colorMgr.resolve(\"table-row-background-focused-selected\");\n this._colors.bgcolFocused = colorMgr.resolve(\"table-row-background-focused\");\n this._colors.bgcolSelected = colorMgr.resolve(\"table-row-background-selected\");\n this._colors.bgcolEven = colorMgr.resolve(\"table-row-background-even\");\n this._colors.bgcolOdd = colorMgr.resolve(\"table-row-background-odd\");\n this._colors.colSelected = colorMgr.resolve(\"table-row-selected\");\n this._colors.colNormal = colorMgr.resolve(\"table-row\");\n this._colors.horLine = colorMgr.resolve(\"table-row-line\");\n },\n\n\n /**\n * the sum of the vertical insets. This is needed to compute the box model\n * independent size\n */\n _insetY : 1, // borderBottom\n\n /**\n * Render the new font and update the table pane content\n * to reflect the font change.\n *\n * @param font {qx.bom.Font} The font to use for the table row\n */\n _renderFont : function(font)\n {\n if (font)\n {\n this._fontStyle = font.getStyles();\n this._fontStyleString = qx.bom.element.Style.compile(this._fontStyle);\n this._fontStyleString = this._fontStyleString.replace(/\"/g, \"'\");\n }\n else\n {\n this._fontStyleString = \"\";\n this._fontStyle = qx.bom.Font.getDefaultStyles();\n }\n },\n\n\n // interface implementation\n updateDataRowElement : function(rowInfo, rowElem)\n {\n var fontStyle = this._fontStyle;\n var style = rowElem.style;\n\n // set font styles\n qx.bom.element.Style.setStyles(rowElem, fontStyle);\n\n if (rowInfo.focusedRow && this.getHighlightFocusRow())\n {\n style.backgroundColor = rowInfo.selected ? this._colors.bgcolFocusedSelected : this._colors.bgcolFocused;\n }\n else\n {\n if (rowInfo.selected)\n {\n style.backgroundColor = this._colors.bgcolSelected;\n }\n else\n {\n style.backgroundColor = (rowInfo.row % 2 == 0) ? this._colors.bgcolEven : this._colors.bgcolOdd;\n }\n }\n\n style.color = rowInfo.selected ? this._colors.colSelected : this._colors.colNormal;\n style.borderBottom = \"1px solid \" + this._colors.horLine;\n },\n\n\n /**\n * Get the row's height CSS style taking the box model into account\n *\n * @param height {Integer} The row's (border-box) height in pixel\n * @return {String} CSS rule for the row height\n */\n getRowHeightStyle : function(height)\n {\n if (qx.core.Environment.get(\"css.boxmodel\") == \"content\") {\n height -= this._insetY;\n }\n\n return \"height:\" + height + \"px;\";\n },\n\n\n // interface implementation\n createRowStyle : function(rowInfo)\n {\n var rowStyle = [];\n rowStyle.push(\";\");\n rowStyle.push(this._fontStyleString);\n rowStyle.push(\"background-color:\");\n\n if (rowInfo.focusedRow && this.getHighlightFocusRow())\n {\n rowStyle.push(rowInfo.selected ? this._colors.bgcolFocusedSelected : this._colors.bgcolFocused);\n }\n else\n {\n if (rowInfo.selected)\n {\n rowStyle.push(this._colors.bgcolSelected);\n }\n else\n {\n rowStyle.push((rowInfo.row % 2 == 0) ? this._colors.bgcolEven : this._colors.bgcolOdd);\n }\n }\n\n rowStyle.push(';color:');\n rowStyle.push(rowInfo.selected ? this._colors.colSelected : this._colors.colNormal);\n\n rowStyle.push(';border-bottom: 1px solid ', this._colors.horLine);\n\n return rowStyle.join(\"\");\n },\n\n\n getRowClass : function(rowInfo) {\n return \"\";\n },\n\n /**\n * Add extra attributes to each row.\n *\n * @param rowInfo {Object}\n * The following members are available in rowInfo:\n * \n * - table {qx.ui.table.Table}
\n * - The table object
\n *\n * - styleHeight {Integer}
\n * - The height of this (and every) row
\n *\n * - row {Integer}
\n * - The number of the row being added
\n *\n * - selected {Boolean}
\n * - Whether the row being added is currently selected
\n *\n * - focusedRow {Boolean}
\n * - Whether the row being added is currently focused
\n *\n * - rowData {Array}
\n * - The array row from the data model of the row being added
\n *
\n *\n * @return {String}\n * Any additional attributes and their values that should be added to the\n * div tag for the row.\n */\n getRowAttributes : function(rowInfo)\n {\n return \"\";\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function() {\n this._colors = this._fontStyle = this._fontStyleString = null;\n\n // remove dynamic theme listener\n if (qx.core.Environment.get(\"qx.dyntheme\")) {\n qx.theme.manager.Meta.getInstance().removeListener(\n \"changeTheme\", this.initThemeValues, this\n );\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.TransactionsTable\", {\n extend: qx.ui.table.Table,\n\n construct: function() {\n this.base(arguments)\n const model = new osparc.desktop.credits.TransactionsTableModel();\n this.setTableModel(model)\n this.setStatusBarVisible(false)\n\n const columnModel = this.getTableColumnModel();\n\n columnModel.setColumnWidth(0, 130);\n columnModel.setColumnWidth(1, 70);\n columnModel.setColumnWidth(2, 70);\n columnModel.setColumnWidth(3, 75);\n columnModel.setColumnWidth(4, 320);\n columnModel.setColumnWidth(5, 60);\n\n columnModel.setDataCellRenderer(1, new qx.ui.table.cellrenderer.Number());\n columnModel.setDataCellRenderer(2, new qx.ui.table.cellrenderer.Number());\n columnModel.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Html());\n columnModel.setDataCellRenderer(4, new osparc.ui.table.cellrenderer.StringWithTooltip());\n columnModel.setDataCellRenderer(5, new qx.ui.table.cellrenderer.Html());\n\n this.setHeaderCellHeight(26);\n this.setRowHeight(26);\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.desktop.credits.DateFilters\", {\n extend: qx.ui.core.Widget,\n\n construct() {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox(7));\n this._buildLayout();\n },\n\n events: {\n \"change\": \"qx.event.type.Data\"\n },\n\n members: {\n _buildLayout() {\n this._removeAll();\n const defaultFrom = new Date()\n defaultFrom.setMonth(defaultFrom.getMonth() - 1)\n // Range defaults to previous month\n this.__from = this.__addDateInput(\"From\", defaultFrom);\n this.__until = this.__addDateInput(\"Until\");\n const lastWeekBtn = new qx.ui.form.Button(\"Last week\").set({\n allowStretchY: false,\n alignY: \"bottom\"\n });\n lastWeekBtn.addListener(\"execute\", () => {\n const today = new Date();\n const lastWeek = new Date(today);\n lastWeek.setDate(today.getDate() - 7)\n this.__from.setValue(lastWeek);\n this.__until.setValue(today);\n });\n this._add(lastWeekBtn);\n const lastMonthBtn = new qx.ui.form.Button(\"Last month\").set({\n allowStretchY: false,\n alignY: \"bottom\"\n });\n lastMonthBtn.addListener(\"execute\", () => {\n const today = new Date();\n const lastMonth = new Date(today);\n lastMonth.setMonth(today.getMonth() - 1);\n this.__from.setValue(lastMonth);\n this.__until.setValue(today);\n });\n this._add(lastMonthBtn);\n const lastYearBtn = new qx.ui.form.Button(\"Last year\").set({\n allowStretchY: false,\n alignY: \"bottom\"\n });\n lastYearBtn.addListener(\"execute\", () => {\n const today = new Date();\n const lastYear = new Date(today);\n lastYear.setYear(today.getFullYear() - 1);\n this.__from.setValue(lastYear);\n this.__until.setValue(today);\n })\n this._add(lastYearBtn);\n },\n\n __addDateInput(label, initDate) {\n const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const lbl = new qx.ui.basic.Label(label);\n container.add(lbl);\n const datepicker = new qx.ui.form.DateField();\n datepicker.setValue(initDate ? initDate : new Date());\n datepicker.addListener(\"changeValue\", e => this._changeHandler(e));\n container.add(datepicker);\n this._add(container);\n return datepicker;\n },\n\n _changeHandler(e) {\n const timestampFrom = this.__from.getValue().getTime();\n const timestampUntil = this.__until.getValue().getTime();\n if (timestampFrom > timestampUntil) {\n // 'From' date must be before 'until'\n if (e.getCurrentTarget() === this.__from) {\n // Adapt the date the user did not change\n this.__until.setValue(new Date(this.__from.getValue().getTime()));\n } else {\n this.__from.setValue(new Date(this.__until.getValue().getTime()));\n }\n return;\n }\n const from = osparc.utils.Utils.formatDateYyyyMmDd(this.__from.getValue());\n const until = osparc.utils.Utils.formatDateYyyyMmDd(this.__until.getValue());\n this.fireDataEvent(\"change\", {\n from,\n until\n });\n },\n\n getValue() {\n const from = osparc.utils.Utils.formatDateYyyyMmDd(this.__from.getValue())\n const until = osparc.utils.Utils.formatDateYyyyMmDd(this.__until.getValue())\n return {\n from,\n until\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.UsageTable\", {\n extend: qx.ui.table.Table,\n\n construct: function(walletId, filters) {\n this.base(arguments)\n const model = new osparc.desktop.credits.UsageTableModel(walletId, filters)\n this.setTableModel(model)\n this.setStatusBarVisible(false)\n\n this.setHeaderCellHeight(26);\n this.setRowHeight(26);\n\n const columnModel = this.getTableColumnModel();\n\n columnModel.setDataCellRenderer(this.self().COLS.COST.column, new qx.ui.table.cellrenderer.Number());\n\n if (!osparc.desktop.credits.Utils.areWalletsEnabled()) {\n columnModel.setColumnVisible(this.self().COLS.COST.column, false);\n columnModel.setColumnVisible(this.self().COLS.USER.column, false);\n }\n columnModel.setColumnVisible(this.self().COLS.SERVICE.column, false);\n\n // Array [0, 1, ..., N] where N is column_count - 1 (default column order)\n this.__columnOrder = [...Array(columnModel.getOverallColumnCount()).keys()]\n\n if (\n osparc.Preferences.getInstance().getBillingCenterUsageColumnOrder() &&\n osparc.Preferences.getInstance().getBillingCenterUsageColumnOrder().length === this.__columnOrder.length\n ) {\n columnModel.setColumnsOrder(osparc.Preferences.getInstance().getBillingCenterUsageColumnOrder())\n this.__columnOrder = osparc.Preferences.getInstance().getBillingCenterUsageColumnOrder()\n } else {\n osparc.Preferences.getInstance().setBillingCenterUsageColumnOrder(this.__columnOrder)\n }\n\n columnModel.addListener(\"orderChanged\", e => {\n // Save new order into preferences\n if (e.getData()) {\n const { fromOverXPos, toOverXPos } = e.getData()\n // Edit current order\n this.__columnOrder = this.__columnOrder.toSpliced(toOverXPos, 0, this.__columnOrder.splice(fromOverXPos, 1)[0])\n // Save order\n osparc.Preferences.getInstance().setBillingCenterUsageColumnOrder(this.__columnOrder)\n }\n }, this)\n\n Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));\n },\n\n statics: {\n COLS: {\n PROJECT: {\n id: \"project\",\n column: 0,\n label: osparc.product.Utils.getStudyAlias({firstUpperCase: true}),\n width: 140\n },\n NODE: {\n id: \"node\",\n column: 1,\n label: qx.locale.Manager.tr(\"Node\"),\n width: 100\n },\n SERVICE: {\n id: \"service\",\n column: 2,\n label: qx.locale.Manager.tr(\"Service\"),\n width: 140\n },\n START: {\n id: \"start\",\n column: 3,\n label: qx.locale.Manager.tr(\"Start\"),\n width: 130\n },\n DURATION: {\n id: \"duration\",\n column: 4,\n label: qx.locale.Manager.tr(\"Duration\"),\n width: 70\n },\n STATUS: {\n id: \"status\",\n column: 5,\n label: qx.locale.Manager.tr(\"Status\"),\n width: 70\n },\n COST: {\n id: \"cost\",\n column: 6,\n label: qx.locale.Manager.tr(\"Credits\"),\n width: 56\n },\n USER: {\n id: \"user\",\n column: 7,\n label: qx.locale.Manager.tr(\"User\"),\n width: 140\n },\n TAGS: {\n id: \"tags\",\n column: 7,\n label: qx.locale.Manager.tr(\"Tags\"),\n width: 80\n },\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.PurchasesTable\", {\n extend: qx.ui.table.Table,\n\n construct: function(walletId, filters) {\n this.base(arguments);\n\n const model = new osparc.desktop.credits.PurchasesTableModel(walletId, filters);\n this.setTableModel(model);\n\n this.set({\n statusBarVisible: false,\n headerCellHeight: 26,\n rowHeight: 26,\n });\n\n const columnModel = this.getTableColumnModel();\n columnModel.setColumnVisible(this.self().COLS.PURCHASE_ID.column, false);\n columnModel.setColumnVisible(this.self().COLS.ITEM_ID.column, false);\n columnModel.setDataCellRenderer(this.self().COLS.COST.column, new qx.ui.table.cellrenderer.Number());\n\n Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));\n },\n\n statics: {\n COLS: {\n PURCHASE_ID: {\n id: \"purchaseId\",\n column: 0,\n label: qx.locale.Manager.tr(\"PurchaseId\"),\n width: 150\n },\n ITEM_ID: {\n id: \"itemId\",\n column: 1,\n label: qx.locale.Manager.tr(\"ItemId\"),\n width: 150\n },\n ITEM_LABEL: {\n id: \"itemLabel\",\n column: 2,\n label: qx.locale.Manager.tr(\"Name\"),\n width: 150\n },\n START: {\n id: \"start\",\n column: 3,\n label: qx.locale.Manager.tr(\"Start\"),\n width: 150\n },\n END: {\n id: \"end\",\n column: 4,\n label: qx.locale.Manager.tr(\"End\"),\n width: 150\n },\n SEATS: {\n id: \"seats\",\n column: 5,\n label: qx.locale.Manager.tr(\"Seats\"),\n width: 50\n },\n COST: {\n id: \"cost\",\n column: 6,\n label: qx.locale.Manager.tr(\"Credits\"),\n width: 60\n },\n USER: {\n id: \"user\",\n column: 7,\n label: qx.locale.Manager.tr(\"User\"),\n width: 150\n },\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.CheckoutsTable\", {\n extend: qx.ui.table.Table,\n\n construct: function(walletId, filters) {\n this.base(arguments);\n\n const model = new osparc.desktop.credits.CheckoutsTableModel(walletId, filters);\n this.setTableModel(model);\n\n this.set({\n statusBarVisible: false,\n headerCellHeight: 26,\n rowHeight: 26,\n });\n\n const columnModel = this.getTableColumnModel();\n columnModel.setColumnVisible(this.self().COLS.CHECKOUT_ID.column, false);\n columnModel.setColumnVisible(this.self().COLS.ITEM_ID.column, false);\n\n Object.values(this.self().COLS).forEach(col => columnModel.setColumnWidth(col.column, col.width));\n },\n\n statics: {\n COLS: {\n CHECKOUT_ID: {\n id: \"checkoutId\",\n column: 0,\n label: qx.locale.Manager.tr(\"CheckoutId\"),\n width: 150\n },\n ITEM_ID: {\n id: \"itemId\",\n column: 1,\n label: qx.locale.Manager.tr(\"ItemId\"),\n width: 150\n },\n ITEM_LABEL: {\n id: \"itemLabel\",\n column: 2,\n label: qx.locale.Manager.tr(\"Name\"),\n width: 150\n },\n START: {\n id: \"start\",\n column: 3,\n label: qx.locale.Manager.tr(\"Start\"),\n width: 150\n },\n DURATION: {\n id: \"duration\",\n column: 4,\n label: qx.locale.Manager.tr(\"Duration\"),\n width: 150\n },\n SEATS: {\n id: \"seats\",\n column: 5,\n label: qx.locale.Manager.tr(\"Seats\"),\n width: 50\n },\n USER: {\n id: \"user\",\n column: 6,\n label: qx.locale.Manager.tr(\"User\"),\n width: 150\n },\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n\n/**\n * Object Controller
\n *\n * *General idea*\n *\n * The idea of the object controller is to make the binding of one model object\n * containing one or more properties as easy as possible. Therefore the\n * controller can take a model as property. Every property in that model can be\n * bound to one or more target properties. The binding will be for\n * atomic types only like Numbers, Strings, ...\n *\n * *Features*\n *\n * * Manages the bindings between the model properties and the different targets\n * * No need for the user to take care of the binding ids\n * * Can create an bidirectional binding (read- / write-binding)\n * * Handles the change of the model which means adding the old targets\n *\n * *Usage*\n *\n * The controller only can work if a model is set. If the model property is\n * null, the controller is not working. But it can be null on any time.\n *\n * *Cross reference*\n *\n * * If you want to bind a list like widget, use {@link qx.data.controller.List}\n * * If you want to bind a tree widget, use {@link qx.data.controller.Tree}\n * * If you want to bind a form widget, use {@link qx.data.controller.Form}\n */\nqx.Class.define(\"qx.data.controller.Object\",\n{\n extend : qx.core.Object,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param model {qx.core.Object?null} The model for the model property.\n */\n construct : function(model)\n {\n this.base(arguments);\n\n // create a map for all created binding ids\n this.__bindings = {};\n // create an array to store all current targets\n this.__targets = [];\n\n if (model != null) {\n this.setModel(model);\n }\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** The model object which does have the properties for the binding. */\n model :\n {\n check: \"qx.core.Object\",\n event: \"changeModel\",\n apply: \"_applyModel\",\n nullable: true,\n dereference: true\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // private members\n __targets : null,\n __bindings : null,\n\n /**\n * Apply-method which will be called if a new model has been set.\n * All bindings will be moved to the new model.\n *\n * @param value {qx.core.Object|null} The new model.\n * @param old {qx.core.Object|null} The old model.\n */\n _applyModel: function(value, old) {\n // for every target\n for (var i = 0; i < this.__targets.length; i++) {\n // get the properties\n var targetObject = this.__targets[i][0];\n var targetProperty = this.__targets[i][1];\n var sourceProperty = this.__targets[i][2];\n var bidirectional = this.__targets[i][3];\n var options = this.__targets[i][4];\n var reverseOptions = this.__targets[i][5];\n\n // remove it from the old if possible\n if (old != undefined && !old.isDisposed()) {\n this.__removeTargetFrom(targetObject, targetProperty, sourceProperty, old);\n }\n\n // add it to the new if available\n if (value != undefined) {\n this.__addTarget(\n targetObject, targetProperty, sourceProperty, bidirectional,\n options, reverseOptions\n );\n } else {\n // in shutdown situations, it may be that something is already\n // disposed [BUG #4343]\n if (targetObject.isDisposed() || qx.core.ObjectRegistry.inShutDown) {\n continue;\n }\n // if the model is null, reset the current target\n if (targetProperty.indexOf(\"[\") == -1) {\n targetObject[\"reset\" + qx.lang.String.firstUp(targetProperty)]();\n } else {\n var open = targetProperty.indexOf(\"[\");\n var index = parseInt(\n targetProperty.substring(open + 1, targetProperty.length - 1), 10\n );\n targetProperty = targetProperty.substring(0, open);\n var targetArray = targetObject[\"get\" + qx.lang.String.firstUp(targetProperty)]();\n if (index == \"last\") {\n index = targetArray.length;\n }\n if (targetArray) {\n targetArray.setItem(index, null);\n }\n }\n }\n }\n },\n\n\n /**\n * Adds a new target to the controller. After adding the target, the given\n * property of the model will be bound to the targets property.\n *\n * @param targetObject {qx.core.Object} The object on which the property\n * should be bound.\n *\n * @param targetProperty {String} The property to which the binding should\n * go.\n *\n * @param sourceProperty {String} The name of the property in the model.\n *\n * @param bidirectional {Boolean?false} Signals if the binding should also work\n * in the reverse direction, from the target to source.\n *\n * @param options {Map?null} The options Map used by the binding from source\n * to target. The possible options can be found in the\n * {@link qx.data.SingleValueBinding} class.\n *\n * @param reverseOptions {Map?null} The options used by the binding in the\n * reverse direction. The possible options can be found in the\n * {@link qx.data.SingleValueBinding} class.\n */\n addTarget: function(\n targetObject, targetProperty, sourceProperty,\n bidirectional, options, reverseOptions\n ) {\n\n // store the added target\n this.__targets.push([\n targetObject, targetProperty, sourceProperty,\n bidirectional, options, reverseOptions\n ]);\n\n // delegate the adding\n this.__addTarget(\n targetObject, targetProperty, sourceProperty,\n bidirectional, options, reverseOptions\n );\n },\n\n\n /**\n * Does the work for {@link #addTarget} but without saving the target\n * to the internal target registry.\n *\n * @param targetObject {qx.core.Object} The object on which the property\n * should be bound.\n *\n * @param targetProperty {String} The property to which the binding should\n * go.\n *\n * @param sourceProperty {String} The name of the property in the model.\n *\n * @param bidirectional {Boolean?false} Signals if the binding should also work\n * in the reverse direction, from the target to source.\n *\n * @param options {Map?null} The options Map used by the binding from source\n * to target. The possible options can be found in the\n * {@link qx.data.SingleValueBinding} class.\n *\n * @param reverseOptions {Map?null} The options used by the binding in the\n * reverse direction. The possible options can be found in the\n * {@link qx.data.SingleValueBinding} class.\n */\n __addTarget: function(\n targetObject, targetProperty, sourceProperty,\n bidirectional, options, reverseOptions\n ) {\n\n // do nothing if no model is set\n if (this.getModel() == null) {\n return;\n }\n\n // create the binding\n var id = this.getModel().bind(\n sourceProperty, targetObject, targetProperty, options\n );\n // create the reverse binding if necessary\n var idReverse = null;\n if (bidirectional) {\n idReverse = targetObject.bind(\n targetProperty, this.getModel(), sourceProperty, reverseOptions\n );\n }\n\n // save the binding\n var targetHash = targetObject.toHashCode();\n if (this.__bindings[targetHash] == undefined) {\n this.__bindings[targetHash] = [];\n }\n this.__bindings[targetHash].push(\n [id, idReverse, targetProperty, sourceProperty, options, reverseOptions]\n );\n },\n\n /**\n * Removes the target identified by the three properties.\n *\n * @param targetObject {qx.core.Object} The target object on which the\n * binding exist.\n *\n * @param targetProperty {String} The targets property name used by the\n * adding of the target.\n *\n * @param sourceProperty {String} The name of the property of the model.\n */\n removeTarget: function(targetObject, targetProperty, sourceProperty) {\n this.__removeTargetFrom(\n targetObject, targetProperty, sourceProperty, this.getModel()\n );\n\n // delete the target in the targets reference\n for (var i = 0; i < this.__targets.length; i++) {\n if (\n this.__targets[i][0] == targetObject\n && this.__targets[i][1] == targetProperty\n && this.__targets[i][2] == sourceProperty\n ) {\n this.__targets.splice(i, 1);\n }\n }\n },\n\n\n /**\n * Does the work for {@link #removeTarget} but without removing the target\n * from the internal registry.\n *\n * @param targetObject {qx.core.Object} The target object on which the\n * binding exist.\n *\n * @param targetProperty {String} The targets property name used by the\n * adding of the target.\n *\n * @param sourceProperty {String} The name of the property of the model.\n *\n * @param sourceObject {String} The source object from which the binding\n * comes.\n */\n __removeTargetFrom: function(\n targetObject, targetProperty, sourceProperty, sourceObject\n ) {\n // check for not fitting targetObjects\n if (!(targetObject instanceof qx.core.Object)) {\n // just do nothing\n return;\n }\n\n var currentListing = this.__bindings[targetObject.toHashCode()];\n // if no binding is stored\n if (currentListing == undefined || currentListing.length == 0) {\n return;\n }\n\n // go threw all listings for the object\n for (var i = 0; i < currentListing.length; i++) {\n // if it is the listing\n if (\n currentListing[i][2] == targetProperty &&\n currentListing[i][3] == sourceProperty\n ) {\n // remove the binding\n var id = currentListing[i][0];\n sourceObject.removeBinding(id);\n // check for the reverse binding\n if (currentListing[i][1] != null) {\n targetObject.removeBinding(currentListing[i][1]);\n }\n // delete the entry and return\n currentListing.splice(i, 1);\n return;\n }\n }\n }\n },\n\n\n /*\n *****************************************************************************\n DESTRUCT\n *****************************************************************************\n */\n\n destruct : function() {\n // set the model to null to get the bindings removed\n if (this.getModel() != null && !this.getModel().isDisposed()) {\n this.setModel(null);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.account.DeleteAccount\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments, this.tr(\"Delete Account\"));\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n this.__buildLayout();\n },\n\n events: {\n \"deleted\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __form: null,\n\n _createChildControlImpl: function(id) {\n let control = null;\n switch (id) {\n case \"intro-text\": {\n const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();\n const retentionDays = osparc.store.StaticInfo.getInstance().getAccountDeletionRetentionDays();\n const text = this.tr(`\\\n This account will be deleted in ${retentionDays} days.
\\\n During this period, if you want to recover it or delete your\\\n data right away, please send us an email to ${supportEmail}.\\\n `);\n control = new qx.ui.basic.Label().set({\n value: text,\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n this._add(control);\n break;\n }\n case \"delete-form\":\n control = this.__createDeleteForm();\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"intro-text\");\n this.getChildControl(\"delete-form\");\n },\n\n __createDeleteForm: function() {\n const form = this.__form = new qx.ui.form.Form();\n\n const email = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"Your email\"),\n required: true\n });\n form.add(email, \"Email address\", qx.util.Validate.email(), \"email\");\n this.addListener(\"appear\", () => email.focus());\n\n const password = new osparc.ui.form.PasswordField().set({\n placeholder: this.tr(\"Your password\"),\n required: true\n });\n form.add(password, \"Password\", null, \"password\");\n\n const cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelBtn.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n form.addButton(cancelBtn);\n\n const deleteBtn = new osparc.ui.form.FetchButton(this.tr(\"Delete Account\")).set({\n appearance: \"danger-button\"\n });\n deleteBtn.addListener(\"execute\", () => {\n if (form.validate()) {\n this.__requestDeletion(form, deleteBtn);\n }\n }, this);\n form.addButton(deleteBtn);\n\n const formRenderer = new qx.ui.form.renderer.Single(form);\n return formRenderer;\n },\n\n __requestDeletion: function(form, deleteBtn) {\n deleteBtn.setFetching(true);\n const params = {\n data: {\n email: form.getItem(\"email\").getValue(),\n password: form.getItem(\"password\").getValue()\n }\n };\n const retentionDays = osparc.store.StaticInfo.getInstance().getAccountDeletionRetentionDays();\n\n osparc.data.Resources.fetch(\"auth\", \"unregister\", params)\n .then(() => {\n const msg = this.tr(`You account will be deleted in ${retentionDays} days`);\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n this.fireEvent(\"deleted\");\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => deleteBtn.setFetching(false));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\n/**\n * Widget that shows an image well centered and scaled.\n * | _________________________________ |\n * | XXXXXXXXXXXX______ X GB__________ |\n * |___________________________________|\n */\nqx.Class.define(\"osparc.workbench.DiskUsageIndicator\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n const lowDiskSpacePreferencesSettings = osparc.Preferences.getInstance();\n this.__lowDiskThreshold = lowDiskSpacePreferencesSettings.getLowDiskSpaceThreshold();\n this.__lastDiskUsage = {};\n\n this._setLayout(new qx.ui.layout.VBox());\n\n // hide until some info comes\n this.hide();\n\n // Subscribe to disk space threshold - Default 5GB\n lowDiskSpacePreferencesSettings.addListener(\"changeLowDiskSpaceThreshold\", e => {\n this.__lowDiskThreshold = e.getData();\n this.__updateDiskIndicator();\n }, this);\n },\n\n properties: {\n currentNode: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: true,\n event: \"changeCurrentNode\",\n apply: \"__applyCurrentNode\",\n }\n },\n\n members: {\n __lowDiskThreshold: null,\n __lastDiskUsage: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"disk-indicator\": {\n control = new qx.ui.container.Composite(\n new qx.ui.layout.VBox().set({\n alignY: \"middle\",\n alignX: \"center\"\n })\n ).set({\n decorator: \"indicator-border\",\n padding: [2, 10],\n margin: 4,\n alignY: \"middle\",\n allowShrinkX: false,\n allowShrinkY: false,\n allowGrowX: true,\n allowGrowY: false,\n });\n this._add(control)\n break;\n }\n case \"disk-indicator-label\": {\n const indicator = this.getChildControl(\"disk-indicator\")\n control = new qx.ui.basic.Label().set({\n value: \"\",\n font: \"text-13\",\n textColor: \"contrasted-text-light\",\n alignX: \"center\",\n alignY: \"middle\",\n rich: false\n })\n indicator.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __applyCurrentNode: function(node, prevNode) {\n // Unsubscribe from previous node's disk usage data\n if (prevNode) {\n this._unsubscribe(prevNode.getNodeId())\n }\n\n // Subscribe to disk usage data for the new node\n this._subscribe(node);\n },\n\n _subscribe: function(node) {\n osparc.workbench.DiskUsageController.getInstance().subscribe(node.getNodeId(), e => {\n this.__updateDiskIndicator(e);\n });\n },\n\n _unsubscribe: function(nodeId) {\n osparc.workbench.DiskUsageController.getInstance().unsubscribe(nodeId, this.__updateDiskIndicator);\n },\n\n __getIndicatorColor: function(freeSpace) {\n const warningSize = osparc.utils.Utils.gBToBytes(this.__lowDiskThreshold); // 5 GB Default\n const criticalSize = osparc.utils.Utils.gBToBytes(0.01); // 0 GB\n let color = qx.theme.manager.Color.getInstance().resolve(\"success\");\n\n if (freeSpace <= criticalSize) {\n color = qx.theme.manager.Color.getInstance().resolve(\"error\")\n } else if (freeSpace <= warningSize) {\n color = qx.theme.manager.Color.getInstance().resolve(\"warning\")\n } else {\n color = qx.theme.manager.Color.getInstance().resolve(\"success\")\n }\n return color\n },\n\n __updateDiskIndicator: function(diskUsage) {\n this.show();\n if (diskUsage && diskUsage[\"node_id\"]) {\n this.__lastDiskUsage[diskUsage[\"node_id\"]] = diskUsage;\n }\n\n const indicator = this.getChildControl(\"disk-indicator\");\n\n const currentNode = this.getCurrentNode();\n if (currentNode) {\n indicator.setVisibility(\"visible\");\n } else {\n indicator.setVisibility(\"exclude\");\n return;\n }\n\n const currentNodeId = currentNode.getNodeId();\n\n if (!diskUsage && (currentNodeId in this.__lastDiskUsage)) {\n diskUsage = this.__lastDiskUsage[currentNodeId];\n }\n if (!diskUsage) {\n return;\n }\n\n const diskHostUsage = diskUsage[\"usage\"][\"HOST\"]\n let color1 = this.__getIndicatorColor(diskHostUsage.free);\n let progress = `${diskHostUsage[\"used_percent\"]}%`;\n let labelDiskSize = osparc.utils.Utils.bytesToSize(diskHostUsage.free);\n let toolTipText = this.tr(\"Disk usage\");\n if (\"STATES_VOLUMES\" in diskUsage[\"usage\"]) {\n const diskVolsUsage = diskUsage[\"usage\"][\"STATES_VOLUMES\"];\n if (diskVolsUsage[\"used_percent\"] > diskHostUsage[\"used_percent\"]) {\n // \"STATES_VOLUMES\" is more critical so it takes over\n color1 = this.__getIndicatorColor(diskVolsUsage.free);\n progress = `${diskVolsUsage[\"used_percent\"]}%`;\n labelDiskSize = osparc.utils.Utils.bytesToSize(diskVolsUsage.free);\n }\n toolTipText = this.tr(\"Disk usage\") + \"
\";\n toolTipText += this.tr(\"Data storage: \") + osparc.utils.Utils.bytesToSize(diskVolsUsage.free) + \"
\";\n toolTipText += this.tr(\"I/O storage: \") + osparc.utils.Utils.bytesToSize(diskHostUsage.free) + \"
\";\n }\n const bgColor = qx.theme.manager.Color.getInstance().resolve(\"workbench-view-navbar\");\n const color2 = qx.theme.manager.Color.getInstance().resolve(\"progressive-progressbar-background\");\n indicator.getContentElement().setStyles({\n \"background-color\": bgColor,\n \"background\": `linear-gradient(90deg, ${color1} ${progress}, ${color2} ${progress})`,\n \"border-color\": color1\n });\n indicator.set({\n toolTipText\n });\n\n const indicatorLabel = this.getChildControl(\"disk-indicator-label\");\n indicatorLabel.setValue(`${labelDiskSize} Free`);\n },\n\n // Cleanup method\n destruct: function() {\n const currentNode = this.getCurrentNode();\n if (currentNode) {\n this._unsubscribe(currentNode.getNodeId())\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.MarketWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function(nodeId, category) {\n this.base(arguments, \"store\", this.tr(\"The Shop\"));\n\n osparc.utils.Utils.setIdToWidget(this, \"storeWindow\");\n\n const width = Math.min(1200, window.innerWidth); // since we go over the supported minimum, take the min\n const height = Math.min(700, window.innerHeight); // since we go over the supported minimum, take the min\n this.set({\n width,\n height\n });\n\n const vipMarket = this.__vipMarket = new osparc.vipMarket.Market(category).set({\n openBy: nodeId ? nodeId : null,\n });\n this._setTabbedView(vipMarket);\n },\n\n statics: {\n openWindow: function(nodeId, category) {\n if (osparc.product.Utils.showS4LStore()) {\n const storeWindow = new osparc.vipMarket.MarketWindow(nodeId, category);\n storeWindow.getVipMarket().addListener(\"importMessageSent\", () => storeWindow.close());\n storeWindow.addListenerOnce(\"close\", () => {\n if (storeWindow.getVipMarket()) {\n storeWindow.getVipMarket().sendCloseMessage();\n }\n });\n storeWindow.center();\n storeWindow.open();\n return storeWindow;\n }\n return null;\n }\n },\n\n members: {\n __vipMarket: null,\n\n getVipMarket: function() {\n return this.__vipMarket;\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.BillingCenterWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function() {\n this.base(arguments, \"credits\", this.tr(\"Billing Center\"));\n\n\n osparc.utils.Utils.setIdToWidget(this, \"billingCenterWindow\");\n\n const width = 1035;\n const height = 700;\n this.set({\n width,\n height\n })\n\n const billingCenter = this.__billingCenter = new osparc.desktop.credits.BillingCenter();\n this._setTabbedView(billingCenter);\n },\n\n statics: {\n openWindow: function() {\n const accountWindow = new osparc.desktop.credits.BillingCenterWindow();\n accountWindow.center();\n accountWindow.open();\n return accountWindow;\n }\n },\n\n members: {\n __billingCenter: null,\n\n openWallets: function() {\n return this.__billingCenter.openWallets();\n },\n\n openPaymentMethods: function() {\n this.__billingCenter.openPaymentMethods();\n },\n\n openTransactions: function() {\n this.__billingCenter.openTransactions();\n },\n\n openUsage: function() {\n this.__billingCenter.openUsage();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.WorkspaceButtonBase\", {\n extend: qx.ui.core.Widget,\n implement: [qx.ui.form.IModel, osparc.filter.IFilterable],\n include: [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.set({\n width: this.self().ITEM_WIDTH,\n height: this.self().ITEM_HEIGHT,\n padding: 0\n });\n\n this.getChildControl(\"main-layout\");\n\n [\n \"pointerover\",\n \"focus\"\n ].forEach(e => this.addListener(e, this._onPointerOver, this));\n\n [\n \"pointerout\",\n \"focusout\"\n ].forEach(e => this.addListener(e, this._onPointerOut, this));\n },\n\n properties: {\n cardKey: {\n check: \"String\",\n nullable: true\n },\n\n thumbnail: {\n check: \"String\",\n init: null,\n nullable: true,\n apply: \"__applyThumbnail\",\n },\n\n resourceType: {\n check: [\"workspace\"],\n init: \"workspace\",\n nullable: false\n },\n\n priority: {\n check: \"Number\",\n init: null,\n nullable: false\n }\n },\n\n statics: {\n ITEM_WIDTH: 190,\n ITEM_HEIGHT: 190,\n PADDING: 10,\n SPACING: 15,\n HEADER_MAX_HEIGHT: 40, // two lines in Manrope\n ICON_SIZE: 60,\n POS: {\n FOLDER_LOOK: 0,\n HEADER: 1,\n BODY: 2,\n FOOTER: 3\n },\n HPOS: {\n SHARED: 0,\n TITLE: 1,\n MENU: 2,\n },\n FPOS: {\n DATE: 0,\n }\n },\n\n events: {\n /** (Fired by {@link qx.ui.form.List}) */\n \"action\": \"qx.event.type.Event\"\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n // overridden\n _createChildControlImpl: function(id) {\n let layout;\n let control;\n switch (id) {\n case \"main-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n const folderLook = this.getChildControl(\"folder-look\");\n const header = this.getChildControl(\"header\");\n const body = this.getChildControl(\"body\");\n const footer = this.getChildControl(\"footer\");\n control.addAt(folderLook, this.self().POS.FOLDER_LOOK);\n control.addAt(header, this.self().POS.HEADER);\n control.addAt(body, this.self().POS.BODY, {\n flex: 1\n });\n control.addAt(footer, this.self().POS.FOOTER);\n this._add(control, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n break;\n }\n case \"folder-look\": {\n control = this.__createFolderLookHeader();\n break;\n }\n case \"header\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n backgroundColor: \"background-workspace-card-overlay\",\n opacity: 0.8,\n anonymous: true,\n maxWidth: this.self().ITEM_WIDTH,\n maxHeight: this.self().HEADER_MAX_HEIGHT,\n padding: this.self().PADDING,\n alignY: \"middle\",\n });\n break;\n case \"body\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n decorator: \"main\",\n allowGrowY: true,\n allowGrowX: true,\n allowShrinkX: true,\n padding: this.self().PADDING\n });\n control.getContentElement().setStyles({\n \"border-width\": 0\n });\n break;\n case \"footer\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n backgroundColor: \"background-card-overlay\",\n anonymous: true,\n maxWidth: this.self().ITEM_WIDTH,\n maxHeight: this.self().ITEM_HEIGHT,\n padding: this.self().PADDING,\n alignY: \"middle\",\n });\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-light\",\n font: \"text-14\",\n allowGrowX: true,\n alignY: \"middle\",\n maxHeight: this.self().HEADER_MAX_HEIGHT\n });\n layout = this.getChildControl(\"header\");\n layout.addAt(control, this.self().HPOS.TITLE, {\n flex: 1\n });\n break;\n case \"thumbnail\": {\n layout = this.getChildControl(\"body\");\n const maxWidth = this.self().ITEM_WIDTH;\n control = new osparc.ui.basic.Thumbnail(null, maxWidth, 124);\n control.getChildControl(\"image\").set({\n anonymous: true,\n alignY: \"middle\",\n alignX: \"center\",\n allowGrowX: true,\n allowGrowY: true\n });\n layout.getContentElement().setStyles({\n \"border-width\": \"0px\"\n });\n layout.add(control, {flex: 1});\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __createFolderLookHeader: function() {\n const topHeight = 8;\n const grid = new qx.ui.layout.Grid(0, 0);\n grid.setColumnFlex(0, 1);\n grid.setColumnFlex(2, 1);\n grid.setRowHeight(0, topHeight);\n grid.setRowHeight(1, 4);\n const layout = new qx.ui.container.Composite(grid).set({\n backgroundColor: \"background-main\",\n });\n const spacer00 = new qx.ui.core.Widget().set({\n backgroundColor: \"background-workspace-card-overlay\"\n });\n const triangle = new qx.ui.core.Widget().set({\n width: topHeight,\n height: topHeight,\n });\n triangle.getContentElement().setStyles({\n \"width\": \"0\",\n \"height\": \"0\",\n \"border-right\": topHeight + \"px solid transparent\",\n });\n const colorTriangle = () => {\n const color = qx.theme.manager.Color.getInstance().resolve(\"background-workspace-card-overlay\");\n triangle.getContentElement().setStyles({\n \"border-bottom\": topHeight + \"px solid \" + color,\n });\n };\n colorTriangle();\n qx.theme.manager.Color.getInstance().addListener(\"changeTheme\", colorTriangle);\n const spacer01 = new qx.ui.core.Widget();\n const spacer10 = new qx.ui.core.Widget().set({\n backgroundColor: \"background-workspace-card-overlay\"\n });\n const spacer11 = new qx.ui.core.Widget().set({\n backgroundColor: \"background-workspace-card-overlay\"\n });\n spacer11.getContentElement().setStyles({\n \"border-top-right-radius\": \"4px\",\n });\n layout.add(spacer00, {\n row: 0,\n column: 0,\n });\n layout.add(triangle, {\n row: 0,\n column: 1,\n });\n layout.add(spacer01, {\n row: 0,\n column: 2,\n });\n layout.add(spacer10, {\n row: 1,\n column: 0,\n colSpan: 2,\n });\n layout.add(spacer11, {\n row: 1,\n column: 2,\n });\n return layout;\n },\n\n __applyThumbnail: function(value) {\n const image = this.getChildControl(\"thumbnail\").getChildControl(\"image\");\n if (\n value.includes(\"@FontAwesome5Solid/\") ||\n value.includes(\"@MaterialIcons/\")\n ) {\n this.getContentElement().setStyles({\n \"background-image\": \"none\",\n });\n value += this.self().ICON_SIZE;\n image.set({\n source: value,\n visibility: \"visible\",\n });\n } else {\n this.getContentElement().setStyles({\n \"background-image\": `url(${value})`,\n \"background-repeat\": \"no-repeat\",\n \"background-size\": \"cover\", // auto width, 85% height\n \"background-position\": \"center center\",\n \"background-origin\": \"border-box\"\n });\n image.set({\n visibility: \"excluded\",\n });\n }\n },\n\n /**\n * Event handler for the pointer over event.\n */\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n /**\n * Event handler for the pointer out event.\n */\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n return false;\n }\n },\n\n destruct: function() {\n this.removeListener(\"pointerover\", this._onPointerOver, this);\n this.removeListener(\"pointerout\", this._onPointerOut, this);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used for displaying a New Workspace in the Study Browser\n *\n */\n\nqx.Class.define(\"osparc.dashboard.WorkspaceButtonNew\", {\n extend: osparc.dashboard.WorkspaceButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n appearance: \"pb-new\"\n });\n\n this.addListener(\"tap\", this.__itemSelected, this);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);\n\n const title = this.getChildControl(\"title\");\n title.setValue(this.tr(\"New Workspace\"));\n\n this.setThumbnail(osparc.dashboard.CardBase.NEW_ICON);\n\n this.getChildControl(\"header\").set({\n opacity: 1\n });\n this.getChildControl(\"footer\").exclude();\n\n osparc.utils.Utils.setIdToWidget(this, \"newWorkspaceButton\");\n },\n\n events: {\n \"workspaceCreated\": \"qx.event.type.Event\",\n \"workspaceDeleted\": \"qx.event.type.Event\",\n \"workspaceUpdated\": \"qx.event.type.Event\",\n },\n\n members: {\n __itemSelected: function() {\n const workspaceEditor = new osparc.editor.WorkspaceEditor();\n const title = this.tr(\"New Workspace\");\n const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 500, 500).set({\n modal: true,\n clickAwayClose: false,\n });\n workspaceEditor.addListener(\"workspaceCreated\", () => this.fireEvent(\"workspaceCreated\"));\n workspaceEditor.addListener(\"workspaceDeleted\", () => this.fireEvent(\"workspaceDeleted\"));\n workspaceEditor.addListener(\"workspaceUpdated\", () => {\n win.close();\n this.fireEvent(\"workspaceUpdated\");\n }, this);\n workspaceEditor.addListener(\"updateAccessRights\", () => this.fireEvent(\"workspaceUpdated\"));\n win.getChildControl(\"close-button\").addListener(\"tap\", () => workspaceEditor.cancel());\n workspaceEditor.addListener(\"cancel\", () => win.close());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.FolderButtonBase\", {\n extend: qx.ui.core.Widget,\n implement: [qx.ui.form.IModel, osparc.filter.IFilterable],\n include: [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n width: osparc.dashboard.GridButtonBase.ITEM_WIDTH,\n minHeight: this.self().HEIGHT,\n padding: 5,\n alignY: \"middle\"\n });\n\n const gridLayout = new qx.ui.layout.Grid();\n gridLayout.setSpacing(this.self().SPACING);\n gridLayout.setColumnFlex(this.self().POS.TITLE.column, 1);\n gridLayout.setColumnAlign(this.self().POS.ICON.column, \"center\", \"middle\");\n gridLayout.setColumnAlign(this.self().POS.TITLE.column, \"left\", \"middle\");\n this._setLayout(gridLayout);\n\n this.addListener(\"pointerover\", this.__onPointerOver, this);\n this.addListener(\"pointerout\", this.__onPointerOut, this);\n },\n\n properties: {\n cardKey: {\n check: \"String\",\n nullable: true\n },\n\n resourceType: {\n check: [\"folder\"],\n init: \"folder\",\n nullable: false\n },\n\n priority: {\n check: \"Number\",\n init: null,\n nullable: false\n }\n },\n\n statics: {\n HEIGHT: 50,\n SPACING: 5,\n POS: {\n ICON: {\n column: 0,\n row: 0,\n rowSpan: 2\n },\n TITLE: {\n column: 1,\n row: 0\n },\n SUBTITLE: {\n column: 1,\n row: 1\n },\n MENU: {\n column: 2,\n row: 0,\n rowSpan: 2\n }\n },\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n __onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n __onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n return false;\n }\n },\n\n destruct: function() {\n this.removeListener(\"pointerover\", this.__onPointerOver, this);\n this.removeListener(\"pointerout\", this.__onPointerOut, this);\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used for displaying a New Folder in the Study Browser\n *\n */\n\nqx.Class.define(\"osparc.dashboard.FolderButtonNew\", {\n extend: osparc.dashboard.FolderButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n appearance: \"pb-new\"\n });\n\n this.addListener(\"tap\", this.__itemSelected, this);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.NEW);\n\n this.__buildLayout();\n\n osparc.utils.Utils.setIdToWidget(this, \"newFolderButton\");\n },\n\n events: {\n \"createFolder\": \"qx.event.type.Data\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = new qx.ui.basic.Image().set({\n source: osparc.dashboard.CardBase.NEW_ICON + \"26\",\n anonymous: true,\n height: 40,\n padding: 5\n });\n this._add(control, osparc.dashboard.FolderButtonBase.POS.ICON);\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label(this.tr(\"New folder\")).set({\n anonymous: true,\n font: \"text-14\",\n rich: true,\n });\n this._add(control, {\n ...osparc.dashboard.FolderButtonBase.POS.TITLE,\n ...{rowSpan: 2}\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"icon\");\n this.getChildControl(\"title\");\n },\n\n __itemSelected: function() {\n const newFolder = true;\n const folderEditor = new osparc.editor.FolderEditor(newFolder);\n const title = this.tr(\"New Folder\");\n const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 120);\n folderEditor.addListener(\"createFolder\", () => {\n const name = folderEditor.getLabel();\n this.fireDataEvent(\"createFolder\", {\n name,\n });\n win.close();\n });\n folderEditor.addListener(\"cancel\", () => win.close());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.MoveResourceTo\", {\n extend: qx.ui.core.Widget,\n\n construct: function(currentWorkspaceId, currentFolderId) {\n this.base(arguments);\n\n this.__currentWorkspaceId = currentWorkspaceId;\n this.__currentFolderId = currentFolderId;\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.getChildControl(\"current-location\");\n\n const workspacesAndFoldersTree = this.getChildControl(\"workspaces-and-folders-tree\");\n this.getChildControl(\"cancel-btn\");\n\n const moveButton = this.getChildControl(\"move-btn\");\n moveButton.setEnabled(currentWorkspaceId !== null || currentFolderId !== null); // disable if current location is My Workspace's root\n workspacesAndFoldersTree.getSelection().addListener(\"change\", () => {\n const selection = workspacesAndFoldersTree.getSelection();\n if (selection.getLength() > 0) {\n const item = selection.getItem(0);\n this.__selectedWorkspaceId = item.getWorkspaceId();\n this.__selectedFolderId = item.getFolderId();\n if (this.__selectedWorkspaceId === -1) {\n // \"Shared Workspaces\"\n moveButton.setEnabled(false);\n } else {\n // In principle, valid location\n // disable if it's the current location\n moveButton.setEnabled(this.__currentWorkspaceId !== this.__selectedWorkspaceId || this.__currentFolderId !== this.__selectedFolderId);\n }\n }\n }, this);\n moveButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"moveTo\", {\n workspaceId: this.__selectedWorkspaceId,\n folderId: this.__selectedFolderId,\n });\n }, this);\n },\n\n events: {\n \"cancel\": \"qx.event.type.Event\",\n \"moveTo\": \"qx.event.type.Data\"\n },\n\n members: {\n __currentWorkspaceId: null,\n __currentFolderId: null,\n __selectedWorkspaceId: null,\n __selectedFolderId: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"current-location\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n const intro = new qx.ui.basic.Label(this.tr(\"Current location:\"));\n control.add(intro);\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.__currentWorkspaceId);\n const workspaceText = workspace ? workspace.getName() : \"My Workspace\";\n const workspaceLabel = new qx.ui.basic.Label(this.tr(\"- Workspace: \") + workspaceText);\n control.add(workspaceLabel);\n const folder = osparc.store.Folders.getInstance().getFolder(this.__currentFolderId);\n if (folder) {\n const folderText = folder.getName();\n const folderLabel = new qx.ui.basic.Label(this.tr(\"- Folder: \") + folderText);\n control.add(folderLabel);\n }\n this._add(control);\n break;\n }\n case \"workspaces-and-folders-tree\":\n control = new osparc.dashboard.WorkspacesAndFoldersTree();\n this._add(control, {\n flex: 1\n });\n break;\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\"\n }));\n this._add(control);\n break;\n case \"cancel-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n buttons.add(control);\n break;\n }\n case \"move-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Move\")).set({\n appearance: \"form-button\"\n });\n buttons.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __getUpstreamFolders: function(childFolder, folderIds = []) {\n if (childFolder) {\n folderIds.unshift(childFolder.getFolderId());\n const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());\n this.__getUpstreamFolders(parentFolder, folderIds);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.DragDropHelpers\", {\n type: \"static\",\n\n statics: {\n moveStudy: {\n dragStart: function(event, studyItem, studyDataOrigin) {\n event.addAction(\"move\");\n event.addType(\"osparc-moveStudy\");\n event.addData(\"osparc-moveStudy\", {\n \"studyDataOrigin\": studyDataOrigin,\n });\n\n // init drag indicator\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.getChildControl(\"dragged-resource\").set({\n label: studyDataOrigin[\"name\"],\n icon: \"@FontAwesome5Solid/file/16\",\n });\n dragWidget.start();\n\n // make it semi transparent while being dragged\n studyItem.setOpacity(0.2);\n },\n\n dragOver: function(event, folderItem, workspaceDestId) {\n let compatible = false;\n const studyDataOrigin = event.getData(\"osparc-moveStudy\")[\"studyDataOrigin\"];\n const workspaceIdOrigin = studyDataOrigin[\"workspaceId\"];\n const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);\n const workspaceDest = osparc.store.Workspaces.getInstance().getWorkspace(workspaceDestId);\n // Compatibility checks:\n // - Drag over \"Shared Workspaces\" (0)\n // - No\n // - My Workspace -> My Workspace (1)\n // - Yes\n // - My Workspace -> Shared Workspace (2)\n // - Delete on Study\n // - Write on dest Workspace\n // - Shared Workspace -> My Workspace (3)\n // - Delete on origin Workspace\n // - Shared Workspace -> Shared Workspace (4)\n // - Delete on origin Workspace\n // - Write on dest Workspace\n if (workspaceDestId === -1) { // (0)\n compatible = false;\n } else if (workspaceIdOrigin === null && workspaceDestId === null) { // (1)\n compatible = true;\n } else if (workspaceIdOrigin === null && workspaceDest) { // (2)\n compatible = osparc.data.model.Study.canIDelete(studyDataOrigin[\"accessRights\"]) && workspaceDest.getMyAccessRights()[\"write\"];\n } else if (workspaceOrigin && workspaceDestId === null) { // (3)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"];\n } else if (workspaceOrigin && workspaceDest) { // (4)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"] && workspaceDest.getMyAccessRights()[\"write\"];\n }\n\n if (!compatible) {\n // do not allow\n event.preventDefault();\n }\n\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.setDropAllowed(compatible);\n\n folderItem.getChildControl(\"icon\").setTextColor(compatible ? \"strong-main\" : \"text\");\n },\n\n drop: function(event, folderItem, destWorkspaceId, destFolderId) {\n const studyData = event.getData(\"osparc-moveStudy\")[\"studyDataOrigin\"];\n const studyToFolderData = {\n studyData,\n destWorkspaceId,\n destFolderId,\n };\n folderItem.getChildControl(\"icon\").resetTextColor();\n return studyToFolderData;\n },\n },\n\n moveFolder: {\n dragStart: function(event, folderItem, folderOrigin) {\n event.addAction(\"move\");\n event.addType(\"osparc-moveFolder\");\n event.addData(\"osparc-moveFolder\", {\n \"folderOrigin\": folderOrigin,\n });\n\n // init drag indicator\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.getChildControl(\"dragged-resource\").set({\n label: folderOrigin.getName(),\n icon: \"@FontAwesome5Solid/folder/16\",\n });\n dragWidget.start();\n\n // make it semi transparent while being dragged\n folderItem.setOpacity(0.2);\n },\n\n dragOver: function(event, folderItem, workspaceDestId, folderDestId) {\n let compatible = false;\n const folderOrigin = event.getData(\"osparc-moveFolder\")[\"folderOrigin\"];\n const workspaceIdOrigin = folderOrigin.getWorkspaceId();\n const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);\n const workspaceDest = osparc.store.Workspaces.getInstance().getWorkspace(workspaceDestId);\n // Compatibility checks:\n // - Drag over \"Shared Workspaces\" (0)\n // - No\n // - My Workspace -> My Workspace (1)\n // - Yes\n // - My Workspace -> Shared Workspace (2)\n // - ~~Delete on Study~~\n // - Write on dest Workspace\n // - Shared Workspace -> My Workspace (3)\n // - Delete on origin Workspace\n // - Shared Workspace -> Shared Workspace (4)\n // - Delete on origin Workspace\n // - Write on dest Workspace\n if (workspaceDestId === -1) { // (0)\n compatible = false;\n } else if (folderOrigin.getFolderId() === folderDestId) {\n compatible = false;\n } else if (workspaceIdOrigin === null && workspaceDestId === null) { // (1)\n compatible = true;\n } else if (workspaceIdOrigin === null && workspaceDest) { // (2)\n compatible = workspaceDest.getMyAccessRights()[\"write\"];\n } else if (workspaceOrigin && workspaceDestId === null) { // (3)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"];\n } else if (workspaceOrigin && workspaceDest) { // (4)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"] && workspaceDest.getMyAccessRights()[\"write\"];\n }\n\n if (!compatible) {\n // do not allow\n event.preventDefault();\n }\n\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.setDropAllowed(compatible);\n\n folderItem.getChildControl(\"icon\").setTextColor(compatible ? \"strong-main\" : \"text\");\n },\n\n drop: function(event, folderItem, destWorkspaceId, destFolderId) {\n const folderOrigin = event.getData(\"osparc-moveFolder\")[\"folderOrigin\"];\n const folderToFolderData = {\n folderId: folderOrigin.getFolderId(),\n workspaceId: folderOrigin.getWorkspaceId(),\n destWorkspaceId,\n destFolderId,\n };\n folderItem.getChildControl(\"icon\").resetTextColor();\n return folderToFolderData;\n },\n },\n\n trashStudy: {\n dragOver: function(event) {\n let compatible = false;\n const studyDataOrigin = event.getData(\"osparc-moveStudy\")[\"studyDataOrigin\"];\n const workspaceIdOrigin = studyDataOrigin[\"workspaceId\"];\n const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);\n // Compatibility checks:\n // - My Workspace -> Trash (0)\n // - Delete on Study\n // - Shared Workspace -> Trash (1)\n // - Delete on Shared Workspace\n if (workspaceIdOrigin === null) { // (0)\n compatible = osparc.data.model.Study.canIDelete(studyDataOrigin[\"accessRights\"]);\n } else if (workspaceIdOrigin !== null) { // (1)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"];\n }\n\n if (!compatible) {\n // do not allow\n event.preventDefault();\n }\n\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.setDropAllowed(compatible);\n },\n\n drop: function(event) {\n return event.getData(\"osparc-moveStudy\")[\"studyDataOrigin\"];\n },\n },\n\n trashFolder: {\n dragOver: function(event) {\n let compatible = false;\n const folderOrigin = event.getData(\"osparc-moveFolder\")[\"folderOrigin\"];\n const workspaceIdOrigin = folderOrigin.getWorkspaceId();\n const workspaceOrigin = osparc.store.Workspaces.getInstance().getWorkspace(workspaceIdOrigin);\n // Compatibility checks:\n // - My Workspace -> Trash (0)\n // - Yes\n // - Shared Workspace -> Trash (1)\n // - Delete on Shared Workspace\n if (workspaceIdOrigin === null) { // (0)\n compatible = true;\n } else if (workspaceIdOrigin !== null) { // (1)\n compatible = workspaceOrigin.getMyAccessRights()[\"delete\"];\n }\n\n if (!compatible) {\n // do not allow\n event.preventDefault();\n }\n\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.setDropAllowed(compatible);\n },\n\n drop: function(event) {\n const folderOrigin = event.getData(\"osparc-moveFolder\")[\"folderOrigin\"];\n return folderOrigin.getFolderId();\n },\n },\n\n dragLeave: function(item) {\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.setDropAllowed(false);\n\n if (item) {\n item.getChildControl(\"icon\").resetTextColor();\n }\n },\n\n dragEnd: function(draggedItem) {\n // bring back opacity after drag\n draggedItem.setOpacity(1);\n\n // hide drag indicator\n const dragWidget = osparc.dashboard.DragWidget.getInstance();\n dragWidget.end();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.NewPlusButton\", {\n extend: qx.ui.form.MenuButton,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n appearance: \"strong-button\",\n icon: osparc.dashboard.CardBase.NEW_ICON + \"20\",\n label: this.tr(\"New\"),\n font: \"text-16\",\n gap: 15,\n padding: 15,\n paddingRight: 20,\n allowGrowX: false,\n });\n\n osparc.utils.Utils.setIdToWidget(this, \"newPlusBtn\");\n\n this.setMenu(new osparc.dashboard.NewPlusMenu());\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.NewStudies\", {\n extend: qx.ui.core.Widget,\n\n construct: function(newStudiesData) {\n this.base(arguments);\n\n const newButtonsInfo = newStudiesData.resources;\n this.__groups = newStudiesData.categories || [];\n this.__groupedContainers = [];\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n const flatList = this.__flatList = new osparc.dashboard.CardContainer();\n [\n \"changeSelection\",\n \"changeVisibility\"\n ].forEach(signalName => {\n flatList.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);\n });\n this._add(this.__flatList);\n\n osparc.data.Resources.get(\"templates\")\n .then(templates => {\n const displayTemplates = newButtonsInfo.filter(newButtonInfo => {\n if (newButtonInfo.showDisabled) {\n return true;\n }\n return templates.find(t => t.name === newButtonInfo.expectedTemplateLabel);\n });\n this.__newStudies = displayTemplates;\n })\n .catch(console.error)\n .finally(() => this.fireEvent(\"templatesLoaded\"));\n },\n\n properties: {\n groupBy: {\n check: [null, \"category\"],\n init: null,\n nullable: true,\n apply: \"reloadCards\"\n }\n },\n\n events: {\n \"templatesLoaded\": \"qx.event.type.Event\",\n \"newStudyClicked\": \"qx.event.type.Data\",\n },\n\n statics: {\n WIDTH: 600\n },\n\n members: {\n __newStudies: null,\n __groups: null,\n __flatList: null,\n __groupedContainers: null,\n\n reloadCards: function(listId) {\n this.__cleanAll();\n\n if (this.getGroupBy()) {\n const noGroupContainer = this.__createGroupContainer(\"no-group\", \"No Group\", \"transparent\");\n this._add(noGroupContainer);\n\n Array.from(this.__groups).forEach(group => {\n let headerLabel = group.title;\n headerLabel += \"description\" in group ? (\". \" + group[\"description\"]) : \"\";\n const groupContainer = this.__createGroupContainer(group.id, headerLabel, \"transparent\");\n this._add(groupContainer);\n });\n } else {\n const flatList = this.__flatList = new osparc.dashboard.CardContainer();\n osparc.utils.Utils.setIdToWidget(flatList, listId);\n [\n \"changeSelection\",\n \"changeVisibility\"\n ].forEach(signalName => {\n flatList.addListener(signalName, e => this.fireDataEvent(signalName, e.getData()), this);\n });\n const spacing = osparc.dashboard.GridButtonBase.SPACING;\n this.__flatList.getLayout().set({\n spacingX: spacing,\n spacingY: spacing\n });\n this._add(this.__flatList);\n }\n\n const newCards = [];\n this.__newStudies.forEach(resourceData => {\n const cards = this.__resourceToCards(resourceData);\n cards.forEach(newCard => {\n if (resourceData.showDisabled) {\n newCard.setEnabled(false);\n if (resourceData.reason) {\n const reason = osparc.utils.Utils.replaceTokens(\n resourceData.reason,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n const descLabel = newCard.getChildControl(\"subtitle-text\");\n descLabel.setValue(reason.toString());\n }\n }\n newCards.push(newCard);\n });\n });\n return newCards;\n },\n\n __resourceToCards: function(resourceData) {\n const cards = [];\n if (this.getGroupBy() === \"category\") {\n this.__groupByCategory(cards, resourceData);\n } else {\n const card = this.__createCard(resourceData);\n cards.push(card);\n this.__flatList.add(card);\n }\n return cards;\n },\n\n __groupByCategory: function(cards, resourceData) {\n const card = this.__createCard(resourceData);\n const groupContainer = this.__getGroupContainer(resourceData.category);\n if (groupContainer) {\n groupContainer.add(card);\n } else {\n let noGroupContainer = this.__getGroupContainer(\"no-group\");\n noGroupContainer.add(card);\n }\n cards.push(card);\n },\n\n __createGroupContainer: function(groupId, headerLabel, headerColor = \"text\") {\n const groupContainer = new osparc.dashboard.GroupedCardContainer().set({\n groupId: groupId.toString(),\n headerLabel,\n headerIcon: \"\",\n headerColor,\n visibility: \"excluded\"\n });\n osparc.utils.Utils.setIdToWidget(groupContainer, groupId.toString() + \"Group\");\n const atom = groupContainer.getChildControl(\"header\");\n atom.set({\n font: \"text-16\",\n maxWidth: this.self().WIDTH\n });\n this.__groupedContainers.push(groupContainer);\n return groupContainer;\n },\n\n __getGroupContainer: function(gid) {\n const idx = this.__groupedContainers.findIndex(groupContainer => groupContainer.getGroupId() === gid.toString());\n if (idx > -1) {\n return this.__groupedContainers[idx];\n }\n return null;\n },\n\n __createCard: function(templateInfo) {\n const newStudyClicked = () => this.fireDataEvent(\"newStudyClicked\", templateInfo);\n\n const title = templateInfo.title;\n const desc = templateInfo.description;\n const newPlanButton = new osparc.dashboard.GridButtonNew(title, desc);\n if (templateInfo[\"idToWidget\"]) {\n newPlanButton.setCardKey(templateInfo[\"idToWidget\"]);\n osparc.utils.Utils.setIdToWidget(newPlanButton, templateInfo[\"idToWidget\"]);\n }\n newPlanButton.addListener(\"tap\", () => newStudyClicked());\n return newPlanButton;\n },\n\n __cleanAll: function() {\n if (this.__flatList) {\n this.__flatList.removeAll();\n this.__flatList = null;\n }\n this.__groupedContainers.forEach(groupedContainer => groupedContainer.getContentContainer().removeAll());\n this.__groupedContainers = [];\n this._removeAll();\n },\n\n __moveNoGroupToLast: function() {\n const idx = this._getChildren().findIndex(grpContainer => grpContainer === this.__getGroupContainer(\"no-group\"));\n if (idx > -1) {\n this._getChildren().push(this._getChildren().splice(idx, 1)[0]);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used for displaying a Study Browser's context information\n *\n */\n\nqx.Class.define(\"osparc.dashboard.StudyBrowserHeader\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(10));\n\n this.set({\n minHeight: this.self().HEIGHT,\n maxHeight: this.self().HEIGHT,\n height: this.self().HEIGHT,\n alignY: \"middle\",\n });\n\n this.initCurrentWorkspaceId();\n this.initCurrentFolderId();\n\n osparc.store.Store.getInstance().addListener(\"changeStudyBrowserContext\", () => this.__buildLayout(), this);\n },\n\n events: {\n \"locationChanged\": \"qx.event.type.Data\",\n \"workspaceUpdated\": \"qx.event.type.Data\",\n \"deleteWorkspaceRequested\": \"qx.event.type.Data\",\n \"trashEmptied\": \"qx.event.type.Event\",\n },\n\n properties: {\n currentWorkspaceId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentWorkspaceId\",\n apply: \"__buildLayout\"\n },\n\n currentFolderId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentFolderId\",\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n init: {},\n event: \"changeAccessRights\",\n apply: \"__updateShareInfo\"\n },\n\n myAccessRights: {\n check: \"Object\",\n nullable: false,\n init: {},\n event: \"changeMyAccessRights\",\n apply: \"__applyMyAccessRights\"\n }\n },\n\n statics: {\n HEIGHT: 36,\n POS: {\n ICON: 0,\n TITLE: 1,\n BREADCRUMBS: 2,\n EDIT_BUTTON: 3,\n SHARE_LAYOUT: 4,\n ROLE_LAYOUT: 5,\n DESCRIPTION: 2,\n EMPTY_TRASH_BUTTON: 3,\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\":\n control = new osparc.ui.basic.Thumbnail(null, this.self().HEIGHT, this.self().HEIGHT);\n control.getChildControl(\"image\").set({\n anonymous: true,\n alignY: \"middle\",\n alignX: \"center\",\n allowGrowX: true,\n allowGrowY: true,\n decorator: \"rounded\",\n });\n this._addAt(control, this.self().POS.ICON);\n break;\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-16\",\n alignY: \"middle\",\n });\n this._addAt(control, this.self().POS.TITLE);\n break;\n case \"breadcrumbs\":\n control = new osparc.dashboard.ContextBreadcrumbs();\n this.bind(\"currentWorkspaceId\", control, \"currentWorkspaceId\");\n this.bind(\"currentFolderId\", control, \"currentFolderId\");\n control.bind(\"currentWorkspaceId\", this, \"currentWorkspaceId\");\n control.bind(\"currentFolderId\", this, \"currentFolderId\");\n control.addListener(\"locationChanged\", e => {\n this.fireDataEvent(\"locationChanged\", e.getData())\n });\n this._addAt(control, this.self().POS.BREADCRUMBS);\n break;\n case \"edit-button\":\n control = new qx.ui.form.MenuButton().set({\n appearance: \"form-button-outlined\",\n backgroundColor: \"transparent\",\n padding: [0, 8],\n maxWidth: 22,\n maxHeight: 22,\n icon: \"@FontAwesome5Solid/ellipsis-v/8\",\n focusable: false,\n alignY: \"middle\",\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${22 / 2}px`\n });\n this._addAt(control, this.self().POS.EDIT_BUTTON);\n break;\n case \"share-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n })).set({\n marginLeft: 10,\n });\n this._addAt(control, this.self().POS.SHARE_LAYOUT);\n break;\n case \"share-text\": {\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n const layout = this.getChildControl(\"share-layout\");\n layout.addAt(control, 1);\n break;\n }\n case \"role-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\",\n })).set({\n marginLeft: 10,\n });\n this._addAt(control, this.self().POS.ROLE_LAYOUT);\n break;\n case \"role-text\": {\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n const layout = this.getChildControl(\"role-layout\");\n layout.addAt(control, 0);\n break;\n }\n case \"role-icon\": {\n control = osparc.data.Roles.createRolesWorkspaceInfo(false);\n const layout = this.getChildControl(\"role-layout\");\n layout.addAt(control, 1);\n break;\n }\n case \"description\": {\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n });\n this._addAt(control, this.self().POS.DESCRIPTION);\n break;\n }\n case \"empty-trash-button\": {\n control = new osparc.ui.form.FetchButton(this.tr(\"Delete all\"), \"@FontAwesome5Solid/trash/14\").set({\n appearance: \"danger-button\",\n allowGrowY: false,\n alignY: \"middle\",\n });\n control.addListener(\"execute\", () => {\n const win = this.__createConfirmEmptyTrashWindow();\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n control.setFetching(true);\n if (win.getConfirmed()) {\n osparc.data.Resources.fetch(\"trash\", \"delete\")\n .then(() => {\n this.fireEvent(\"trashEmptied\")\n })\n .finally(() => control.setFetching(false));\n } else {\n control.setFetching(false)\n }\n }, this);\n });\n this._addAt(control, this.self().POS.EMPTY_TRASH_BUTTON);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __createConfirmEmptyTrashWindow: function() {\n const msg = this.tr(\"All items will be permanently deleted\");\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete permanently\"),\n confirmAction: \"delete\"\n });\n return confirmationWin;\n },\n\n __titleTapped: function() {\n if (osparc.store.Store.getInstance().getStudyBrowserContext() === \"studiesAndFolders\") {\n const workspaceId = this.getCurrentWorkspaceId();\n const folderId = null;\n this.setCurrentFolderId(folderId);\n this.fireDataEvent(\"locationChanged\", {\n workspaceId,\n folderId,\n });\n }\n },\n\n __buildLayout: function() {\n this.getChildControl(\"icon\");\n const title = this.getChildControl(\"title\");\n\n const locationBreadcrumbs = this.getChildControl(\"breadcrumbs\").set({\n visibility: \"excluded\"\n });\n const editWorkspace = this.getChildControl(\"edit-button\").set({\n visibility: \"excluded\"\n });\n const shareWorkspaceLayout = this.getChildControl(\"share-layout\").set({\n visibility: \"excluded\"\n });\n const roleWorkspaceLayout = this.getChildControl(\"role-layout\").set({\n visibility: \"excluded\"\n });\n\n const description = this.getChildControl(\"description\").set({\n visibility: \"excluded\"\n });\n // the study browser will take care of making it visible\n this.getChildControl(\"empty-trash-button\").set({\n visibility: \"excluded\"\n });\n\n const currentContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n switch (currentContext) {\n case \"studiesAndFolders\": {\n const workspaceId = this.getCurrentWorkspaceId();\n title.setCursor(\"pointer\");\n title.addListener(\"tap\", this.__titleTapped, this);\n locationBreadcrumbs.show();\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId);\n if (workspace) {\n const thumbnail = workspace.getThumbnail();\n this.__setIcon(thumbnail ? thumbnail : osparc.store.Workspaces.iconPath(32));\n workspace.bind(\"name\", title, \"value\");\n editWorkspace.show();\n shareWorkspaceLayout.show();\n roleWorkspaceLayout.show();\n workspace.bind(\"accessRights\", this, \"accessRights\");\n workspace.bind(\"myAccessRights\", this, \"myAccessRights\");\n } else {\n this.__setIcon(\"@FontAwesome5Solid/home/30\");\n title.setValue(this.tr(\"My Workspace\"));\n }\n break;\n }\n case \"workspaces\":\n this.__setIcon(osparc.store.Workspaces.iconPath(32));\n title.setValue(this.tr(\"Shared Workspaces\"));\n break;\n case \"search\":\n this.__setIcon(\"@FontAwesome5Solid/search/24\");\n title.setValue(this.tr(\"Search results\"));\n break;\n case \"trash\": {\n this.__setIcon(\"@FontAwesome5Solid/trash/20\");\n title.setValue(this.tr(\"Recently Deleted\"));\n const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();\n description.set({\n value: this.tr(`Items here will be permanently deleted after ${trashDays} days.`),\n visibility: \"visible\",\n });\n break;\n }\n }\n },\n\n __setIcon: function(source) {\n // reset icon first\n const icon = this.getChildControl(\"icon\");\n const image = icon.getChildControl(\"image\");\n image.resetSource();\n icon.getContentElement().setStyles({\n \"background-image\": \"none\"\n });\n\n if (source.includes(\"@\")) {\n image.set({\n source\n });\n } else {\n icon.getContentElement().setStyles({\n \"background-image\": `url(${source})`,\n \"background-repeat\": \"no-repeat\",\n \"background-size\": \"cover\",\n \"background-position\": \"center center\",\n \"background-origin\": \"border-box\"\n });\n }\n },\n\n __getShareIcon: function() {\n // reset previous\n const layout = this.getChildControl(\"share-layout\");\n if (this.__shareIcon) {\n layout.remove(this.__shareIcon);\n }\n\n const shareIcon = this.__shareIcon = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n allowGrowX: false,\n allowShrinkX: false\n });\n layout.addAt(shareIcon, 0);\n return shareIcon;\n },\n\n __updateShareInfo: function(accessRights) {\n const shareIcon = this.__getShareIcon();\n const shareText = this.getChildControl(\"share-text\");\n if (accessRights && Object.keys(accessRights).length) {\n osparc.dashboard.CardBase.populateShareIcon(shareIcon, accessRights);\n shareText.setValue(Object.keys(accessRights).length + \" members\");\n shareIcon.show();\n shareText.show();\n } else {\n shareIcon.exclude();\n shareText.exclude();\n }\n },\n\n __applyMyAccessRights: function(value) {\n const editButton = this.getChildControl(\"edit-button\");\n const roleText = this.getChildControl(\"role-text\");\n const roleIcon = this.getChildControl(\"role-icon\");\n const currentContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n if (currentContext === \"studiesAndFolders\" && value && Object.keys(value).length) {\n editButton.setVisibility(value[\"delete\"] ? \"visible\" : \"excluded\");\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n const edit = new qx.ui.menu.Button(this.tr(\"Edit...\"), \"@FontAwesome5Solid/pencil-alt/12\");\n edit.addListener(\"execute\", () => this.__editWorkspace(), this);\n menu.add(edit);\n const share = new qx.ui.menu.Button(this.tr(\"Share...\"), \"@FontAwesome5Solid/share-alt/12\");\n share.addListener(\"execute\", () => this.__openShareWith(), this);\n menu.add(share);\n editButton.setMenu(menu);\n const val = value[\"read\"] + value[\"write\"] + value[\"delete\"];\n roleText.setValue(osparc.data.Roles.WORKSPACE[val].label);\n roleText.show();\n roleIcon.show();\n } else {\n editButton.exclude();\n roleText.exclude();\n roleIcon.exclude();\n }\n },\n\n __editWorkspace: function() {\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());\n const workspaceEditor = new osparc.editor.WorkspaceEditor(workspace);\n const title = this.tr(\"Edit Workspace\");\n const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 300, 150);\n workspaceEditor.addListener(\"workspaceUpdated\", () => {\n win.close();\n this.__buildLayout();\n }, this);\n workspaceEditor.addListener(\"cancel\", () => win.close());\n },\n\n __openShareWith: function() {\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());\n const permissionsView = new osparc.share.CollaboratorsWorkspace(workspace);\n const title = this.tr(\"Share Workspace\");\n const win = osparc.ui.window.Window.popUpInWindow(permissionsView, title, 500, 400);\n permissionsView.addListener(\"updateAccessRights\", () => {\n win.close();\n this.__updateShareInfo(workspace.getAccessRights());\n }, this);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.SortedByMenuButton\", {\n extend: qx.ui.form.MenuButton,\n\n construct: function() {\n this.base(arguments, this.tr(\"Sort\"), \"@FontAwesome5Solid/chevron-down/10\");\n\n osparc.utils.Utils.setIdToWidget(this, \"sortedByButton\");\n\n this.set({\n iconPosition: \"left\",\n marginRight: 8\n });\n\n const sortedByMenu = new qx.ui.menu.Menu().set({\n font: \"text-14\"\n });\n this.setMenu(sortedByMenu);\n\n const options = this.self().getSortByOptions();\n\n options.forEach((option, idx) => {\n const btn = new qx.ui.menu.Button();\n btn.btnId = option.id;\n btn.set({\n label: option.label,\n icon: null\n });\n // Sort by last modified date\n if (idx === options.length -1) {\n this.__menuButton = btn;\n btn.setIcon(\"@FontAwesome5Solid/arrow-down/14\");\n }\n sortedByMenu.add(btn);\n\n btn.addListener(\"execute\", () => {\n this.__buttonExecuted(btn)\n });\n });\n\n this.addListener(\"changeSort\", e => {\n const sort = e.getData();\n this.__handelSortEvent(sort)\n }, this);\n },\n\n statics: {\n DefaultSorting: {\n field: \"last_change_date\",\n direction: \"desc\"\n },\n\n getSortByOptions: function() {\n return [{\n id: \"name\",\n label: qx.locale.Manager.tr(\"Name\")\n }, {\n id: \"prj_owner\",\n label: qx.locale.Manager.tr(\"Owner\")\n }, {\n id: \"creation_date\",\n label: qx.locale.Manager.tr(\"Created\"),\n }, {\n id: \"last_change_date\",\n label: qx.locale.Manager.tr(\"Modified\"),\n }];\n }\n },\n\n events: {\n \"sortByChanged\": \"qx.event.type.Data\"\n },\n\n properties: {\n sort: {\n check: \"Object\",\n init: {\n field: \"last_change_date\",\n direction: true\n },\n nullable: false,\n event: \"changeSort\",\n apply: \"__applySort\"\n }\n },\n\n members: {\n __menuButton: null,\n __buttonExecuted: function(btn) {\n if (this.__menuButton) {\n this.__menuButton.setIcon(null);\n }\n this.__menuButton = btn;\n this.set({\n label: btn.getLabel(),\n icon: \"@FontAwesome5Solid/chevron-down/10\"\n });\n\n const data = {\n \"id\": btn.btnId,\n };\n this.__handelSort(data.id);\n },\n\n __handelSort: function(field) {\n if (field === this.getSort().field) {\n const { direction } = this.getSort();\n this.setSort({\n field,\n direction: !direction\n })\n return;\n }\n this.setSort({\n field,\n direction: true\n })\n },\n\n __handelSortEvent: function({field, direction}) {\n this.__menuButton.setIcon(direction ? \"@FontAwesome5Solid/arrow-down/14\" : \"@FontAwesome5Solid/arrow-up/14\")\n this.setIcon(direction ? \"@FontAwesome5Solid/arrow-down/14\" : \"@FontAwesome5Solid/arrow-up/14\")\n const sort = {\n field: field,\n direction: direction ? \"desc\" : \"asc\"\n };\n this.fireDataEvent(\"sortByChanged\", sort);\n },\n\n __applySort: function(value, old) {\n\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Study card to show that more studies are being fetched\n */\n\nqx.Class.define(\"osparc.dashboard.GridButtonLoadMore\", {\n extend: osparc.dashboard.GridButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.LOADER);\n\n this._applyFetching(false);\n\n // A minimalistic spinning wheel\n this.getChildControl(\"header\").exclude();\n this.getChildControl(\"footer\").exclude();\n this.set({\n backgroundColor: \"transparent\"\n });\n },\n\n members: {\n _applyFetching: function(value) {\n this.setThumbnail(osparc.dashboard.CardBase.LOADING_ICON);\n if (value) {\n this.getChildControl(\"thumbnail\").getChildControl(\"image\").getContentElement()\n .addClass(\"rotate\");\n } else {\n this.getChildControl(\"thumbnail\").getChildControl(\"image\").getContentElement()\n .removeClass(\"rotate\");\n }\n this.setEnabled(!value);\n },\n\n _shouldApplyFilter: function() {\n return false;\n },\n\n _shouldReactToFilter: function() {\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used mainly by StudyBrowser for displaying Studies\n *\n * It consists of a thumbnail and creator and last change as caption\n */\n\nqx.Class.define(\"osparc.dashboard.ListButtonLoadMore\", {\n extend: osparc.dashboard.ListButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.LOADER);\n\n this._applyFetching(false);\n\n this.set({\n backgroundColor: \"transparent\"\n });\n },\n\n members: {\n _applyFetching: function(value) {\n this.setIcon(osparc.dashboard.CardBase.LOADING_ICON);\n if (value) {\n this.getChildControl(\"icon\").getChildControl(\"image\").getContentElement()\n .addClass(\"rotate\");\n } else {\n this.getChildControl(\"icon\").getChildControl(\"image\").getContentElement()\n .removeClass(\"rotate\");\n }\n this.setEnabled(!value);\n },\n\n _shouldApplyFilter: function() {\n return false;\n },\n\n _shouldReactToFilter: function() {\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(Headers)\n */\n\nqx.Class.define(\"osparc.study.Import\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n // WEBSERVER_MAX_UPLOAD_FILE_SIZE_GB\n const subtitle = new qx.ui.basic.Label(this.tr(\"Max file size 10GB\")).set({\n font: \"text-12\"\n });\n this._add(subtitle);\n\n const extensions = [\"osparc\"];\n const multiple = false;\n const fileInput = new osparc.ui.form.FileInput(extensions, multiple);\n fileInput.getSelectedFilesLabel().setMaxWidth(250);\n this._add(fileInput);\n\n const importBtn = new qx.ui.form.Button(this.tr(\"Import\")).set({\n alignX: \"right\",\n allowGrowX: false\n });\n importBtn.addListener(\"execute\", () => {\n const file = fileInput.getFile();\n if (file) {\n const size = file.size;\n const maxSize = 10 * 1000 * 1000 * 1000; // 10 GB\n if (size > maxSize) {\n osparc.FlashMessenger.logAs(`The file is too big. Maximum size is ${maxSize}MB. Please provide with a smaller file or a repository URL.`, \"ERROR\");\n return;\n }\n this.fireDataEvent(\"fileReady\", file);\n }\n }, this);\n this._add(importBtn);\n },\n\n events: {\n \"fileReady\": \"qx.event.type.Data\"\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Window that shows a text field with the input item label\n * that can be used for renaming it\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let itemRenamer = new osparc.widget.Renamer(selectedItem.getLabel());\n * itemRenamer.addListener(\"labelChanged\", e => {\n * const data = e.getData();\n * const newLabel = data.newLabel;\n * selectedItem.setLabel(newLabel);\n * }, this);\n * itemRenamer.open();\n * \n */\n\nqx.Class.define(\"osparc.widget.Renamer\", {\n extend: osparc.ui.window.Window,\n\n construct: function(oldLabel = \"\", subtitle = \"\", winTitle) {\n this.base(arguments, winTitle || this.tr(\"Rename\"));\n\n const maxWidth = 350;\n const minWidth = 150;\n const labelWidth = oldLabel ? Math.min(Math.max(parseInt(oldLabel.length*4), minWidth), maxWidth) : minWidth;\n this.set({\n layout: new qx.ui.layout.VBox(5),\n autoDestroy: true,\n padding: 2,\n modal: true,\n showMaximize: false,\n showMinimize: false,\n width: labelWidth,\n clickAwayClose: true\n });\n\n this.__populateNodeLabelEditor(oldLabel, labelWidth);\n this.__addSubtitle(subtitle);\n this.__attachEventHandlers();\n },\n\n events: {\n \"labelChanged\": \"qx.event.type.Data\"\n },\n\n members: {\n __save: null,\n\n __populateNodeLabelEditor: function(oldLabel, labelWidth) {\n const nodeLabelEditor = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n\n // Create a text field in which to edit the data\n const labelEditor = new qx.ui.form.TextField(oldLabel).set({\n placeholder: this.tr(\"Type text\"),\n allowGrowX: true,\n minWidth: labelWidth\n });\n nodeLabelEditor.add(labelEditor, {\n flex: 1\n });\n\n this.addListener(\"appear\", e => {\n labelEditor.focus();\n if (labelEditor.getValue()) {\n labelEditor.setTextSelection(0, labelEditor.getValue().length);\n }\n }, this);\n\n // Create the \"Save\" button to close the cell editor\n const save = this.__save = new qx.ui.form.Button(this.tr(\"Save\"));\n save.set({\n appearance: \"form-button\",\n padding: [1, 5]\n });\n save.addListener(\"execute\", e => {\n const newLabel = labelEditor.getValue();\n const data = {\n newLabel\n };\n this.fireDataEvent(\"labelChanged\", data);\n }, this);\n nodeLabelEditor.add(save);\n\n this.add(nodeLabelEditor);\n },\n\n __addSubtitle: function(subtitleLabel) {\n if (subtitleLabel) {\n const subtitle = new qx.ui.basic.Label(subtitleLabel).set({\n font: \"text-12\"\n });\n this.add(subtitle);\n }\n },\n\n __attachEventHandlers: function() {\n let command = new qx.ui.command.Command(\"Enter\");\n command.addListener(\"execute\", e => {\n this.__save.execute();\n command.dispose();\n command = null;\n });\n\n let commandEsc = new qx.ui.command.Command(\"Esc\");\n commandEsc.addListener(\"execute\", e => {\n this.close();\n commandEsc.dispose();\n commandEsc = null;\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.ThumbnailSuggestions\", {\n extend: osparc.widget.SlideBar,\n\n construct: function(study) {\n this.base(arguments);\n\n this.set({\n alignX: \"center\",\n height: 118,\n maxHeight: 118\n });\n this.setButtonsWidth(30);\n\n this.__thumbnails = [];\n\n if (study) {\n this.setStudy(study);\n }\n },\n\n events: {\n \"thumbnailAdded\": \"qx.event.type.Event\",\n \"thumbnailTapped\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n nullable: false,\n init: null,\n apply: \"__applyStudyData\"\n }\n },\n\n statics: {\n defaultTemplates: [\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-01.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-02.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-03.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-04.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-05.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-06.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-07.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-08.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-09.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-10.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-11.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-12.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-13.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-14.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-15.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-01-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-02-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-03-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-04-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-05-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-06-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-07-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-08-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-09-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-10-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-11-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-12-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-13-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-14-b.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/S4L/Thumbnail-15-b.png\"\n ],\n osparcTemplates: [\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-01.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-02.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-03.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-04.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-05.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-06.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-07.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-08.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-09.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-10.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-11.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-12.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-13.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/oSparc/Thumbnail-14.png\"\n ],\n tipTemplates: [\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-01.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-02.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-03.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-04.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-05.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-06.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-07.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-08.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-09.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-10.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-11.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-12.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-13.png\",\n \"https://raw.githubusercontent.com/ZurichMedTech/s4l-assets/main/app/full/project_thumbnails/TIP/Thumbnail-14.png\"\n ],\n /**\n * @param study {osparc.data.model.Study|Object} Study or Serialized Study Object\n */\n extractThumbnailSuggestions: function(study) {\n const queryParams = [];\n const addToQueryParams = (key, version) => {\n const found = queryParams.find(p => p.key === key && p.version === version);\n if (!found) {\n queryParams.push({\n key,\n version\n });\n }\n };\n if (study instanceof osparc.data.model.Study) {\n const wb = study.getWorkbench();\n const nodes = wb.getWorkbenchInitData() ? wb.getWorkbenchInitData() : wb.getNodes();\n Object.values(nodes).forEach(node => addToQueryParams(node.getKey(), node.getVersion()));\n } else {\n const nodes = study[\"workbench\"];\n Object.values(nodes).forEach(node => addToQueryParams(node[\"key\"], node[\"version\"]));\n }\n\n const promises = [];\n queryParams.forEach(qP => promises.push(osparc.store.Services.getService(qP.key, qP.version)));\n return Promise.all(promises)\n .then(values => {\n const suggestions = new Set([]);\n values.forEach(metadata => {\n if (metadata && metadata[\"thumbnail\"] && !osparc.data.model.Node.isFrontend(metadata)) {\n suggestions.add(metadata[\"thumbnail\"]);\n }\n });\n const defaultThumbnails = this.self().setThumbnailTemplates();\n const amendedArray = [...suggestions, ...defaultThumbnails]\n return Array.from(amendedArray);\n });\n },\n setThumbnailTemplates: function() {\n switch (osparc.product.Utils.getProductName()) {\n case \"osparc\":\n return this.self().osparcTemplates;\n case \"tis\":\n case \"tiplite\":\n return this.self().tipTemplates;\n default:\n return this.self().defaultTemplates.sort();\n }\n }\n },\n\n members: {\n __thumbnails: null,\n\n __addThumbnail: function(thumbnailData) {\n this.__thumbnails.push(thumbnailData);\n this.fireEvent(\"thumbnailAdded\");\n },\n\n __applyStudyData: function(study) {\n this.self().extractThumbnailSuggestions(study)\n .then(suggestions => {\n suggestions.forEach(suggestion => {\n this.__addThumbnail({\n type: \"serviceImage\",\n thumbnailUrl: suggestion,\n fileUrl: suggestion\n });\n })\n this.__reloadSuggestions();\n });\n },\n\n addPreviewsToSuggestions: function(previewsPerNodes) {\n previewsPerNodes.forEach(previewsPerNode => {\n const previews = previewsPerNode[\"screenshots\"];\n if (previews && previews.length) {\n previews.forEach(preview => {\n if (preview[\"mimetype\"]) {\n this.__addThumbnail({\n type: preview[\"mimetype\"],\n thumbnailUrl: preview[\"thumbnail_url\"],\n fileUrl: preview[\"file_url\"]\n });\n }\n });\n this.__reloadSuggestions();\n }\n });\n },\n\n __reloadSuggestions: function() {\n this.setSuggestions(this.__thumbnails);\n },\n\n __thumbnailTapped: function(thumbnail) {\n // reset decoration\n const unselectedBorderColor = qx.theme.manager.Color.getInstance().resolve(\"text\");\n const unselectedBGColor = qx.theme.manager.Color.getInstance().resolve(\"fab-background\");\n this.getChildren().forEach(thumbnailImg => {\n osparc.utils.Utils.updateBorderColor(thumbnailImg, unselectedBorderColor);\n osparc.utils.Utils.addBackground(thumbnailImg, unselectedBGColor);\n });\n const selectedBorderColor = qx.theme.manager.Color.getInstance().resolve(\"strong-main\");\n const selectedBGColor = qx.theme.manager.Color.getInstance().resolve(\"background-selected\");\n osparc.utils.Utils.updateBorderColor(thumbnail, selectedBorderColor);\n osparc.utils.Utils.addBackground(thumbnail, selectedBGColor);\n this.fireDataEvent(\"thumbnailTapped\", {\n type: thumbnail.thumbnailType || \"templateThumbnail\",\n source: thumbnail.thumbnailFileUrl || thumbnail.getSource()\n });\n },\n\n setSuggestions: function(suggestions) {\n this.removeAll();\n suggestions.forEach(suggestion => {\n const maxHeight = this.getMaxHeight() - 21;\n const thumbnail = new osparc.ui.basic.Thumbnail(suggestion.thumbnailUrl || suggestion, maxHeight, null);\n thumbnail.set({\n minWidth: 97,\n margin: 0,\n decorator: \"thumbnail\"\n });\n thumbnail.thumbnailType = suggestion.type || \"templateThumbnail\";\n thumbnail.thumbnailFileUrl = suggestion.fileUrl || suggestion;\n thumbnail.addListener(\"mouseover\", () => thumbnail.set({decorator: \"thumbnail-selected\"}), this);\n thumbnail.addListener(\"mouseout\", () => thumbnail.set({decorator: \"thumbnail\"}), this);\n thumbnail.addListener(\"tap\", () => this.__thumbnailTapped(thumbnail), this);\n this.add(thumbnail);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.ThumbnailEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(url, suggestions = []) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n this.getChildControl(\"url-field\");\n this.getChildControl(\"scroll-thumbnails\");\n const suggestionsLayout = this.getChildControl(\"thumbnails-layout\");\n suggestionsLayout.exclude();\n\n this.getChildControl(\"cancel-btn\");\n this.getChildControl(\"save-btn\");\n\n if (url) {\n this.setUrl(url);\n }\n if (suggestions) {\n this.setSuggestions(suggestions);\n }\n },\n\n properties: {\n url: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeUrl\"\n },\n\n suggestions: {\n check: \"Array\",\n init: [],\n nullable: true,\n event: \"changeSuggestions\",\n apply: \"__applySuggestions\"\n }\n },\n\n events: {\n \"updateThumbnail\": \"qx.event.type.Data\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n statics: {\n sanitizeUrl: function(dirty) {\n const clean = osparc.wrapper.DOMPurify.getInstance().sanitize(dirty);\n if ((dirty && dirty !== clean) || (clean !== \"\" && !osparc.utils.Utils.isValidHttpUrl(clean))) {\n osparc.FlashMessenger.getInstance().logAs(qx.locale.Manager.tr(\"Error checking link\"), \"WARNING\");\n return null;\n }\n return clean;\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"url-field\":\n control = new qx.ui.form.TextField().set({\n appearance: \"form-input\",\n placeholder: this.tr(\"url\")\n });\n this.bind(\"url\", control, \"value\");\n this._add(control);\n break;\n case \"thumbnails-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n const label = new qx.ui.basic.Label(this.tr(\"or pick one from the list below:\"));\n control.add(label);\n this._add(control, {\n flex: 1\n });\n break;\n }\n case \"scroll-thumbnails\": {\n control = new osparc.editor.ThumbnailSuggestions();\n control.set({\n padding: 2,\n backgroundColor: \"transparent\"\n })\n const thumbnailsLayout = this.getChildControl(\"thumbnails-layout\");\n thumbnailsLayout.add(control);\n break;\n }\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\"\n }));\n this._add(control);\n break;\n case \"cancel-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n buttons.add(control);\n break;\n }\n case \"save-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n const urlField = this.getChildControl(\"url-field\");\n const validUrl = this.self().sanitizeUrl(urlField.getValue());\n if (validUrl) {\n this.fireDataEvent(\"updateThumbnail\", validUrl);\n }\n }, this);\n buttons.add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __applySuggestions: function(suggestions) {\n const thumbnailSuggestions = this.getChildControl(\"scroll-thumbnails\");\n thumbnailSuggestions.setSuggestions(suggestions);\n thumbnailSuggestions.addListener(\"thumbnailTapped\", e => {\n const thumbnailData = e.getData();\n this.setUrl(thumbnailData.source);\n });\n this.getChildControl(\"thumbnails-layout\").setVisibility(suggestions.length ? \"visible\" : \"excluded\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.GridButtonPlaceholder\", {\n extend: osparc.dashboard.GridButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.PLACEHOLDER);\n\n this.set({\n cursor: \"not-allowed\"\n });\n\n this.getChildControl(\"footer\").exclude();\n },\n\n properties: {\n task: {\n check: \"osparc.data.PollTask\",\n init: null,\n nullable: true,\n apply: \"__applyTask\"\n }\n },\n\n statics: {\n POS: {\n STATE: {\n row: 5,\n column: 0,\n rowSpan: 1,\n colSpan: 4\n },\n PROGRESS: {\n row: 6,\n column: 0,\n rowSpan: 1,\n colSpan: 4\n }\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n let layout;\n switch (id) {\n case \"state-label\": {\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-dark\",\n allowGrowX: true,\n allowShrinkX: true,\n rich: true,\n anonymous: true,\n font: \"text-12\",\n allowGrowY: true,\n wrap: true\n });\n layout = this.getChildControl(\"body\");\n layout.addAt(control, 0);\n break;\n }\n case \"progress-bar\": {\n control = new qx.ui.indicator.ProgressBar().set({\n maxHeight: 6,\n alignX: \"center\",\n alignY: \"middle\",\n allowGrowY: false,\n allowGrowX: true,\n margin: 0,\n });\n control.getChildControl(\"progress\").set({\n backgroundColor: \"strong-main\"\n });\n layout = this.getChildControl(\"header\");\n layout.add(control, {\n column: 1,\n row: 2,\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n buildLayout: function(titleText, icon, stateText, showProgressBar = false) {\n const title = this.getChildControl(\"title\");\n if (titleText) {\n title.setValue(titleText);\n }\n if (icon) {\n this.setThumbnail(icon);\n }\n\n const stateLabel = this.getChildControl(\"state-label\");\n if (stateText) {\n stateLabel.setValue(stateText);\n }\n\n this.getChildControl(\"progress-bar\").set({\n visibility: showProgressBar ? \"visible\" : \"excluded\"\n });\n },\n\n getBlocked: function() {\n return true;\n },\n\n _shouldApplyFilter: function(data) {\n if (data.text) {\n const checks = [\n this.getChildControl(\"title\").getValue().toString()\n ];\n if (checks.filter(label => label.toLowerCase().trim().includes(data.text)).length === 0) {\n return true;\n }\n }\n return false;\n },\n\n __applyTask: function(task) {\n task.addListener(\"updateReceived\", e => {\n const updateData = e.getData();\n if (\"task_progress\" in updateData) {\n const progress = updateData[\"task_progress\"];\n this.getChildControl(\"progress-bar\").set({\n value: progress[\"percent\"]*100\n });\n this.getChildControl(\"state-label\").set({\n value: progress[\"message\"]\n });\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.ListButtonPlaceholder\", {\n extend: osparc.dashboard.ListButtonBase,\n\n construct: function() {\n this.base(arguments);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.PLACEHOLDER);\n\n this.__layout = this.getChildControl(\"progress-layout\")\n this.set({\n appearance: \"pb-new\",\n cursor: \"not-allowed\",\n allowGrowX: true\n });\n },\n\n properties: {\n task: {\n check: \"osparc.data.PollTask\",\n init: null,\n nullable: true,\n apply: \"__applyTask\"\n }\n },\n\n members: {\n __layout: null,\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"progress-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignX: \"center\",\n alignY: \"middle\"\n }));\n this._add(control, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.PROGRESS\n });\n break\n case \"state-label\":\n control = new qx.ui.basic.Label().set({\n alignX: \"left\",\n alignY: \"middle\",\n marginBottom: 5\n });\n this.__layout.addAt(control, 0);\n break;\n case \"progress-bar\":\n control = new qx.ui.indicator.ProgressBar().set({\n maxHeight: 6,\n minWidth: 420,\n alignX: \"center\",\n alignY: \"middle\",\n allowGrowY: false,\n allowGrowX: true,\n margin: 0\n });\n control.getChildControl(\"progress\").set({\n backgroundColor: \"strong-main\"\n });\n this.__layout.addAt(control, 1);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n buildLayout: function(titleText, icon, stateText, showProgressBar = false) {\n const title = this.getChildControl(\"title\");\n if (titleText) {\n title.setValue(titleText);\n }\n if (icon) {\n this.setIcon(icon);\n }\n\n const stateLabel = this.getChildControl(\"state-label\");\n if (stateText) {\n stateLabel.setValue(stateText);\n }\n\n this.getChildControl(\"progress-bar\").set({\n visibility: showProgressBar ? \"visible\" : \"excluded\"\n });\n },\n\n getBlocked: function() {\n return true;\n },\n\n _shouldApplyFilter: function(data) {\n if (data.text) {\n const checks = [\n this.getChildControl(\"title\").getValue().toString()\n ];\n if (checks.filter(label => label.toLowerCase().trim().includes(data.text)).length == 0) {\n return true;\n }\n }\n return false;\n },\n\n __applyTask: function(task) {\n task.addListener(\"updateReceived\", e => {\n const updateData = e.getData();\n if (\"task_progress\" in updateData) {\n const progress = updateData[\"task_progress\"];\n this.getChildControl(\"progress-bar\").set({\n value: progress[\"percent\"]*100\n });\n this.getChildControl(\"state-label\").set({\n value: progress[\"message\"]\n });\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.Duplicate\", {\n extend: osparc.task.TaskUI,\n\n construct: function(studyName) {\n this.__studyName = studyName;\n\n this.base(arguments);\n },\n\n statics: {\n ICON: \"@FontAwesome5Solid/copy\"\n },\n\n members: {\n __studyName: null,\n\n // overridden\n _buildLayout: function() {\n this.setIcon(this.self().ICON+\"/14\");\n this.getChildControl(\"title\");\n this.getChildControl(\"subtitle\");\n this.getChildControl(\"stop\");\n\n this.setTitle(this.tr(\"Duplicating:\"));\n this.setSubtitle(this.__studyName);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.Import\", {\n extend: osparc.task.TaskUI,\n\n statics: {\n ICON: \"@FontAwesome5Solid/cloud-upload-alt\"\n },\n\n members: {\n // overridden\n _buildLayout: function() {\n this.setIcon(this.self().ICON+\"/14\");\n this.getChildControl(\"title\");\n this.getChildControl(\"subtitle\");\n this.getChildControl(\"stop\");\n\n this.setTitle(this.tr(\"Importing Study\"));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows a date followed by \"by (user_icon)\"\n */\nqx.Class.define(\"osparc.ui.basic.DateAndBy\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5));\n\n this.set({\n alignY: \"middle\",\n });\n },\n\n properties: {\n date: {\n check: \"Date\",\n nullable: true,\n apply: \"__applyDate\",\n },\n\n groupId: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyGroupId\",\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"date-text\":\n control = new qx.ui.basic.Label().set({\n textColor: \"contrasted-text-dark\",\n alignY: \"middle\",\n rich: true,\n font: \"text-12\",\n allowGrowY: false\n });\n this._addAt(control, 0);\n break;\n case \"last-touching\":\n control = new qx.ui.basic.Atom().set({\n alignY: \"middle\",\n allowGrowX: false,\n allowShrinkX: false,\n label: \"by\",\n font: \"text-12\",\n icon: osparc.dashboard.CardBase.SHARED_USER,\n iconPosition: \"right\",\n });\n this._addAt(control, 1);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyDate: function(value) {\n if (value) {\n const label = this.getChildControl(\"date-text\");\n const today = new Date();\n const yesterday = new Date();\n yesterday.setDate(yesterday.getDate() - 1);\n if (today.toDateString() === value.toDateString()) {\n label.setValue(osparc.utils.Utils.formatDateAndTime(value)); // show date and time\n } else if (yesterday.toDateString() === value.toDateString()) {\n label.setValue(osparc.utils.Utils.formatDateAndTime(value)); // show date and time\n } else {\n label.setValue(osparc.utils.Utils.formatDate(value)); // show date only\n }\n }\n },\n\n __applyGroupId: function(groupId) {\n if (groupId) {\n const atom = this.getChildControl(\"last-touching\");\n const myGroupId = osparc.auth.Data.getInstance().getGroupId();\n if (groupId === myGroupId) {\n atom.set({\n label: \"by me\",\n icon: null,\n })\n } else {\n atom.setLabel(\"by \");\n osparc.dashboard.CardBase.addHintFromGids(atom, [groupId]);\n }\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.StudyPricingUnits\", {\n extend: qx.ui.container.Composite,\n\n construct: function(studyData) {\n this.base(arguments);\n\n this.set({\n layout: new qx.ui.layout.VBox(5)\n });\n\n this.__nodePricingUnits = [];\n\n if (studyData) {\n this.setStudyData(studyData);\n }\n },\n\n events: {\n \"loadingUnits\": \"qx.event.type.Event\",\n \"unitsReady\": \"qx.event.type.Event\"\n },\n\n statics: {\n includeInList: function(nodeData) {\n return !osparc.data.model.Node.isFrontend(nodeData);\n },\n },\n\n members: {\n __studyData: null,\n __nodePricingUnits: null,\n\n setStudyData: function(studyData) {\n this.__studyData = studyData;\n this.__showPricingUnits();\n },\n\n __showPricingUnits: function() {\n const unitsLoading = () => this.fireEvent(\"loadingUnits\");\n const unitsAdded = () => this.fireEvent(\"unitsReady\");\n unitsLoading();\n this._removeAll();\n const promises = [];\n if (\"workbench\" in this.__studyData) {\n const workbench = this.__studyData[\"workbench\"];\n Object.keys(workbench).forEach(nodeId => {\n const nodeData = workbench[nodeId];\n if (this.self().includeInList(nodeData)) {\n const nodePricingUnits = new osparc.study.NodePricingUnits(this.__studyData[\"uuid\"], nodeId, nodeData);\n this.__nodePricingUnits.push(nodePricingUnits);\n this._add(nodePricingUnits);\n promises.push(nodePricingUnits.showPricingUnits());\n }\n });\n }\n Promise.all(promises)\n .then(() => unitsAdded());\n },\n\n getNodePricingUnits: function() {\n return this.__nodePricingUnits;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.NodePricingUnits\", {\n extend: qx.ui.container.Composite,\n\n /**\n * @param studyId {String}\n * @param nodeId {String}\n * @param node {osparc.data.model.Node || Object}\n */\n construct: function(studyId, nodeId, node) {\n this.base(arguments);\n\n this.set({\n layout: new qx.ui.layout.VBox()\n });\n\n this.set({\n studyId,\n nodeId,\n });\n if (node instanceof osparc.data.model.Node) {\n this.__nodeKey = node.getKey();\n this.__nodeVersion = node.getVersion();\n this.__nodeLabel = node.getLabel();\n } else {\n this.__nodeKey = node[\"key\"];\n this.__nodeVersion = node[\"version\"];\n this.__nodeLabel = node[\"label\"];\n }\n },\n\n properties: {\n studyId: {\n check: \"String\",\n init: null,\n nullable: false,\n },\n\n nodeId: {\n check: \"String\",\n init: null,\n nullable: false,\n },\n\n pricingPlanId: {\n check: \"Number\",\n init: null,\n nullable: false,\n },\n\n patchNode: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changePatchNode\",\n },\n },\n\n statics: {\n patchPricingUnitSelection: function(studyId, nodeId, planId, selectedUnitId) {\n const params = {\n url: {\n studyId,\n nodeId,\n pricingPlanId: planId,\n pricingUnitId: selectedUnitId\n }\n };\n return osparc.data.Resources.fetch(\"studies\", \"putPricingUnit\", params);\n }\n },\n\n members: {\n __nodeKey: null,\n __nodeVersion: null,\n __nodeLabel: null,\n __pricingUnits: null,\n\n showPricingUnits: function(inGroupBox = true) {\n return new Promise(resolve => {\n const nodeKey = this.__nodeKey;\n const nodeVersion = this.__nodeVersion;\n const nodeLabel = this.__nodeLabel;\n const studyId = this.getStudyId();\n const nodeId = this.getNodeId();\n\n osparc.store.Pricing.getInstance().fetchPricingPlansService(nodeKey, nodeVersion)\n .then(pricingPlanData => {\n if (pricingPlanData) {\n const unitParams = {\n url: {\n studyId,\n nodeId\n }\n };\n this.set({\n pricingPlanId: pricingPlanData[\"pricingPlanId\"]\n });\n osparc.data.Resources.fetch(\"studies\", \"getPricingUnit\", unitParams)\n .then(preselectedPricingUnit => {\n if (pricingPlanData && \"pricingUnits\" in pricingPlanData && pricingPlanData[\"pricingUnits\"].length) {\n const pricingUnitsData = pricingPlanData[\"pricingUnits\"];\n const pricingUnitTiers = this.__pricingUnits = new osparc.study.PricingUnitTiers(pricingUnitsData, preselectedPricingUnit);\n if (inGroupBox) {\n const pricingUnitsLayout = osparc.study.StudyOptions.createGroupBox(nodeLabel);\n pricingUnitsLayout.add(pricingUnitTiers);\n this._add(pricingUnitsLayout);\n } else {\n this._add(pricingUnitTiers);\n }\n pricingUnitTiers.addListener(\"selectPricingUnitRequested\", e => {\n const selectedPricingUnitId = e.getData();\n if (this.isPatchNode()) {\n pricingUnitTiers.setEnabled(false);\n const pricingPlanId = this.getPricingPlanId();\n this.self().patchPricingUnitSelection(studyId, nodeId, pricingPlanId, selectedPricingUnitId)\n .then(() => pricingUnitTiers.setSelectedUnitId(selectedPricingUnitId))\n .catch(err => {\n const msg = err.message || this.tr(\"Cannot change Tier\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => pricingUnitTiers.setEnabled(true));\n }\n });\n }\n })\n .finally(() => resolve());\n }\n });\n });\n },\n\n getPricingUnits: function() {\n return this.__pricingUnits;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.task.ToTemplate\", {\n extend: osparc.task.TaskUI,\n\n construct: function(studyName) {\n this.__studyName = studyName;\n\n this.base(arguments);\n },\n\n statics: {\n ICON: \"@FontAwesome5Solid/copy\"\n },\n\n members: {\n __studyName: null,\n\n // overridden\n _buildLayout: function() {\n this.setIcon(this.self().ICON+\"/14\");\n this.getChildControl(\"title\");\n this.getChildControl(\"subtitle\");\n this.getChildControl(\"stop\");\n\n this.setTitle(this.tr(\"Publishing:\"));\n this.setSubtitle(this.__studyName);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.service.SortServicesButtons\", {\n extend: qx.ui.form.MenuButton,\n\n construct: function() {\n this.base(arguments, this.tr(\"Sort\"), \"@FontAwesome5Solid/chevron-down/10\");\n\n this.set({\n iconPosition: \"left\",\n marginRight: 8\n });\n\n const sortByMenu = new qx.ui.menu.Menu().set({\n font: \"text-14\"\n });\n this.setMenu(sortByMenu);\n\n const hitsDesc = new qx.ui.menu.Button().set({\n label: this.tr(\"Hits\"),\n icon: \"@FontAwesome5Solid/sort-numeric-down/14\"\n });\n hitsDesc[\"sortBy\"] = \"hits\";\n hitsDesc[\"orderBy\"] = \"down\";\n const nameAsc = new qx.ui.menu.Button().set({\n label: this.tr(\"Name Asc\"),\n icon: \"@FontAwesome5Solid/sort-alpha-down/14\"\n });\n nameAsc[\"sortBy\"] = \"name\";\n nameAsc[\"orderBy\"] = \"down\";\n const nameDesc = new qx.ui.menu.Button().set({\n label: this.tr(\"Name Desc\"),\n icon: \"@FontAwesome5Solid/sort-alpha-up/14\"\n });\n nameDesc[\"sortBy\"] = \"name\";\n nameDesc[\"orderBy\"] = \"up\";\n\n [\n hitsDesc,\n nameAsc,\n nameDesc\n ].forEach((btn, idx) => {\n sortByMenu.add(btn);\n\n btn.addListener(\"execute\", () => this.__buttonExecuted(btn));\n\n if (idx === 0) {\n btn.execute();\n }\n });\n },\n\n events: {\n \"sortBy\": \"qx.event.type.Data\"\n },\n\n statics: {\n DefaultSorting: {\n \"sort\": \"hits\",\n \"order\": \"down\"\n }\n },\n\n members: {\n __buttonExecuted: function(btn) {\n this.set({\n label: btn.getLabel(),\n icon: btn.getIcon()\n });\n\n const data = {\n \"sort\": btn[\"sortBy\"],\n \"order\": btn[\"orderBy\"]\n };\n this.fireDataEvent(\"sortBy\", data);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Fabian Jakobs (fjakobs)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * Layouter for horizontal split panes.\n *\n * @internal\n */\nqx.Class.define(\"qx.ui.splitpane.HLayout\",\n{\n extend : qx.ui.layout.Abstract,\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n LAYOUT INTERFACE\n ---------------------------------------------------------------------------\n */\n\n // overridden\n verifyLayoutProperty : qx.core.Environment.select(\"qx.debug\",\n {\n \"true\" : function(item, name, value)\n {\n this.assert(name === \"type\" || name === \"flex\", \"The property '\"+name+\"' is not supported by the split layout!\");\n\n if (name == \"flex\") {\n this.assertNumber(value);\n }\n\n if (name == \"type\") {\n this.assertString(value);\n }\n },\n\n \"false\" : null\n }),\n\n\n // overridden\n renderLayout : function(availWidth, availHeight, padding)\n {\n var children = this._getLayoutChildren();\n var length = children.length;\n var child, type;\n var begin, splitter, slider, end;\n var paddingLeft = padding.left || 0;\n var paddingTop = padding.top || 0;\n\n for (var i=0; i 0 && endFlex > 0)\n {\n var flexSum = beginFlex + endFlex;\n var flexAvailable = availWidth - splitterWidth;\n\n var beginWidth = Math.round((flexAvailable / flexSum) * beginFlex);\n var endWidth = flexAvailable - beginWidth;\n\n var sizes = qx.ui.layout.Util.arrangeIdeals(beginHint.minWidth, beginWidth, beginHint.maxWidth,\n endHint.minWidth, endWidth, endHint.maxWidth);\n\n beginWidth = sizes.begin;\n endWidth = sizes.end;\n }\n else if (beginFlex > 0)\n {\n beginWidth = availWidth - splitterWidth - endWidth;\n if (beginWidth < beginHint.minWidth) {\n beginWidth = beginHint.minWidth;\n }\n\n if (beginWidth > beginHint.maxWidth) {\n beginWidth = beginHint.maxWidth;\n }\n }\n else if (endFlex > 0)\n {\n endWidth = availWidth - beginWidth - splitterWidth;\n if (endWidth < endHint.minWidth) {\n endWidth = endHint.minWidth;\n }\n\n if (endWidth > endHint.maxWidth) {\n endWidth = endHint.maxWidth;\n }\n }\n\n begin.renderLayout(paddingLeft, paddingTop, beginWidth, availHeight);\n splitter.renderLayout(beginWidth + paddingLeft, paddingTop, splitterWidth, availHeight);\n end.renderLayout(beginWidth+splitterWidth + paddingLeft, paddingTop, endWidth, availHeight);\n }\n else\n {\n // Hide the splitter completely\n splitter.renderLayout(0, 0, 0, 0);\n\n // Render one child\n if (begin) {\n begin.renderLayout(paddingLeft, paddingTop, availWidth, availHeight);\n } else if (end) {\n end.renderLayout(paddingLeft, paddingTop, availWidth, availHeight);\n }\n }\n },\n\n\n // overridden\n _computeSizeHint : function()\n {\n var children = this._getLayoutChildren();\n var length = children.length;\n var child, hint, props;\n var minWidth=0, width=0, maxWidth=0;\n var minHeight=0, height=0, maxHeight=0;\n\n for (var i=0; i minHeight) {\n minHeight = hint.minHeight;\n }\n\n if (hint.height > height) {\n height = hint.height;\n }\n\n if (hint.maxHeight > maxHeight) {\n maxHeight = hint.maxHeight;\n }\n }\n\n return {\n minWidth : minWidth,\n width : width,\n maxWidth : maxWidth,\n minHeight : minHeight,\n height : height,\n maxHeight : maxHeight\n };\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.WorkbenchPanel\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n\n const toolbar = this.__toolbar = new osparc.desktop.WorkbenchToolbar();\n toolbar.set({\n margin: 5\n });\n toolbar.getContentElement().setStyles({\n \"border-radius\": \"12px\"\n });\n this._add(toolbar);\n\n const workbenchUI = this.__workbenchUI = new osparc.workbench.WorkbenchUI();\n this._add(workbenchUI, {\n flex: 1\n });\n\n toolbar.addListener(\"zoomIn\", () => workbenchUI.zoom(true), this);\n toolbar.addListener(\"zoomOut\", () => workbenchUI.zoom(false), this);\n toolbar.addListener(\"zoomReset\", () => workbenchUI.setScale(1), this);\n },\n\n members: {\n __toolbar: null,\n __workbenchUI: null,\n\n getMainView: function() {\n return this.__workbenchUI;\n },\n\n getToolbar: function() {\n return this.__toolbar;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.widget.CollapsibleViewLight\", {\n extend: qx.ui.core.Widget,\n\n construct: function(content) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox());\n\n if (content) {\n this.setContent(content);\n }\n\n this.initCollapsed();\n\n this.addListener(\"changeCollapsed\", e => {\n const collapsed = e.getData();\n if (collapsed) {\n this.precollapseWidth = (this.getBounds() && (\"width\" in this.getBounds())) ? this.getBounds().width : 60;\n }\n }, this);\n },\n\n properties: {\n content: {\n check: \"qx.ui.core.Widget\",\n nullable: true,\n apply: \"__applyContent\"\n },\n\n collapsed: {\n init: false,\n check: \"Boolean\",\n apply: \"__applyCollapsed\",\n event: \"changeCollapsed\"\n }\n },\n\n statics: {\n CARET_WIDTH: 15,\n\n styleCollapseExpandButton: function(btn) {\n btn.set({\n appearance: \"form-button-text\",\n backgroundColor: \"transparent\",\n padding: 4,\n allowGrowX: false,\n allowGrowY: true,\n alignY: \"middle\"\n });\n btn.getContentElement().setStyles({\n \"border-radius\": \"0px\"\n });\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"scroll-content\":\n control = new qx.ui.container.Scroll();\n this._addAt(control, 0, {\n flex: 1\n });\n break;\n case \"expand-button\":\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/angle-right/14\").set({\n toolTipText: this.tr(\"Expand\")\n });\n this.self().styleCollapseExpandButton(control);\n control.addListener(\"execute\", () => this.setCollapsed(false));\n break;\n case \"collapse-button\":\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/angle-left/14\").set({\n toolTipText: this.tr(\"Collapse\")\n });\n this.self().styleCollapseExpandButton(control);\n control.addListener(\"execute\", () => this.setCollapsed(true));\n break;\n case \"caret-collapsed-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n width: this.self().CARET_WIDTH\n });\n const expandBtn = this.getChildControl(\"expand-button\");\n control.add(expandBtn, {\n flex: 1\n });\n this.bind(\"collapsed\", control, \"visibility\", {\n converter: collapsed => collapsed ? \"visible\" : \"excluded\"\n });\n this._addAt(control, 1);\n break;\n }\n case \"caret-expanded-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n width: this.self().CARET_WIDTH\n });\n const collapseBtn = this.getChildControl(\"collapse-button\");\n control.add(collapseBtn, {\n flex: 1\n });\n this.bind(\"collapsed\", control, \"visibility\", {\n converter: collapsed => collapsed ? \"excluded\" : \"visible\"\n });\n this._addAt(control, 2);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __applyCollapsed: function(collapsed) {\n const scrollContent = this.getChildControl(\"scroll-content\");\n if (scrollContent) {\n scrollContent.setVisibility(collapsed ? \"excluded\" : \"visible\");\n }\n },\n\n __applyContent: function(content, oldContent) {\n const scrollContent = this.getChildControl(\"scroll-content\");\n if (oldContent) {\n scrollContent.remove(oldContent);\n }\n scrollContent.add(content);\n\n this.setCollapsed(false);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2011 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n\n/*\n * Virtual tree implementation.\n *\n * The virtual tree can be used to render node and leafs. Nodes and leafs are\n * both items for a tree. The difference between a node and a leaf is that a\n * node has child items, but a leaf not.\n *\n * With the {@link qx.ui.tree.core.IVirtualTreeDelegate} interface it is possible\n * to configure the tree's behavior (item renderer configuration, etc.).\n *\n * Here's an example of how to use the widget, including using a model\n * property to open/close branches. See the two timers at the end. The first\n * one opens all branches after two seconds; the second cleans up the tree\n * after five seconds.\n *\n * \n * var nodes = \n * [\n * {\n * name : \"Root\",\n * open : false,\n * children :\n * [\n * {\n * name : \"Branch 1\",\n * open : false,\n * children :\n * [\n * {\n * name : \"Leaf 1.1\"\n * },\n * {\n * name : \"Leaf 1.2\"\n * },\n * {\n * name : \"Branch 1.3\",\n * open : false,\n * children :\n * [\n * {\n * name : \"Branch 1.3.1\",\n * open : false,\n * children :\n * [\n * {\n * name : \"Leaf 1.3.1.1\"\n * }\n * ]\n * }\n * ]\n * }\n * ]\n * }\n * ]\n * }\n * ];\n *\n * // convert the raw nodes to qooxdoo objects\n * nodes = qx.data.marshal.Json.createModel(nodes, true);\n *\n * // create the tree and synchronize the model property 'open'\n * // to nodes being open\n * var tree =\n * new qx.ui.tree.VirtualTree(\n * nodes.getItem(0), \"name\", \"children\", \"open\").set({\n * width : 200,\n * height : 400\n * });\n *\n * //log selection changes\n * tree.getSelection().addListener(\"change\", function(e) {\n * this.debug(\"Selection: \" + tree.getSelection().getItem(0).getName());\n * }, this);\n *\n * tree.set(\n * {\n * width : 200,\n * height : 400,\n * showTopLevelOpenCloseIcons : true\n * });\n *\n * var doc = this.getRoot();\n * doc.add(tree,\n * {\n * left : 100,\n * top : 50\n * });\n *\n * // After two seconds, open up all branches by setting their open\n * // property to true.\n * qx.event.Timer.once(\n * function()\n * {\n * ;(function allOpen(root)\n * {\n * if (root.setOpen) root.setOpen(true);\n * if (root.getChildren) root.getChildren().forEach(allOpen);\n * })(nodes.getItem(0));\n * },\n * this,\n * 2000);\n *\n * // After five seconds, remove and dispose the tree.\n * qx.event.Timer.once(\n * function()\n * {\n * doc.remove(tree);\n * tree.dispose();\n * console.warn(\"All cleaned up.\");\n * },\n * this,\n * 5000);\n * \n */\nqx.Class.define(\"qx.ui.tree.VirtualTree\",\n{\n extend : qx.ui.virtual.core.Scroller,\n implement : [qx.ui.tree.core.IVirtualTree, qx.data.controller.ISelection],\n include : [\n qx.ui.virtual.selection.MModel,\n qx.ui.core.MContentPadding\n ],\n\n /**\n * @param rootModel {qx.core.Object?null} The model structure representing\n * the root of the tree, for more details have a look at the 'model'\n * property.\n * @param labelPath {String?null} The name of the label property, for more\n * details have a look at the 'labelPath' property.\n * @param childProperty {String?null} The name of the child property, for\n * more details have a look at the 'childProperty' property.\n * @param openProperty {String|null} the name of the model property which\n * represents the open state of a branch. If this value is provided, so, \n * too, must be rootModel.\n */\n construct : function(\n rootModel, labelPath, childProperty, openProperty)\n {\n this.base(arguments, 0, 1, 20, 100);\n\n this._init();\n\n if (labelPath != null) {\n this.setLabelPath(labelPath);\n }\n\n if (childProperty != null) {\n this.setChildProperty(childProperty);\n }\n\n if(rootModel != null) {\n this.initModel(rootModel);\n }\n\n this.initItemHeight();\n this.initOpenMode();\n\n this.addListener(\"keypress\", this._onKeyPress, this);\n\n // If an open property and root model are provided, start up the open-close controller.\n if (openProperty && rootModel) {\n this.openViaModelChanges(openProperty);\n }\n },\n\n events :\n {\n /**\n * Fired when a node is opened.\n */\n open : \"qx.event.type.Data\",\n\n\n /**\n * Fired when a node is closed.\n */\n close : \"qx.event.type.Data\"\n },\n\n\n properties :\n {\n // overridden\n appearance :\n {\n refine: true,\n init: \"virtual-tree\"\n },\n\n\n // overridden\n focusable :\n {\n refine: true,\n init: true\n },\n\n\n // overridden\n width :\n {\n refine : true,\n init : 100\n },\n\n\n // overridden\n height :\n {\n refine : true,\n init : 200\n },\n\n\n /** Default item height. */\n itemHeight :\n {\n check : \"Integer\",\n init : 25,\n apply : \"_applyRowHeight\",\n themeable : true\n },\n\n\n /**\n * Control whether tap or double tap should open or close the tapped\n * item.\n */\n openMode :\n {\n check: [\"tap\", \"dbltap\", \"none\"],\n init: \"dbltap\",\n apply: \"_applyOpenMode\",\n event: \"changeOpenMode\",\n themeable: true\n },\n\n \n /**\n * Hides *only* the root node, not the node's children when the property is\n * set to true.\n */\n hideRoot :\n {\n check: \"Boolean\",\n init: false,\n apply:\"_applyHideRoot\"\n },\n\n\n /**\n * Whether top level items should have an open/close button. The top level\n * item item is normally the root item, but when the root is hidden, the\n * root children are the top level items.\n */\n showTopLevelOpenCloseIcons :\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyShowTopLevelOpenCloseIcons\"\n },\n\n\n /**\n * Configures the tree to show also the leafs. When the property is set to\n * false *only* the nodes are shown.\n */\n showLeafs :\n {\n check: \"Boolean\",\n init: true,\n apply: \"_applyShowLeafs\"\n },\n\n\n /**\n * The name of the property, where the children are stored in the model.\n * Instead of the {@link #labelPath} must the child property a direct\n * property form the model instance.\n */\n childProperty :\n {\n check: \"String\",\n apply: \"_applyChildProperty\",\n nullable: true\n },\n\n\n /**\n * The name of the property, where the value for the tree folders label\n * is stored in the model classes.\n */\n labelPath :\n {\n check: \"String\",\n apply: \"_applyLabelPath\",\n nullable: true\n },\n\n\n /**\n * The path to the property which holds the information that should be\n * shown as an icon.\n */\n iconPath :\n {\n check: \"String\",\n apply: \"_applyIconPath\",\n nullable: true\n },\n\n\n /**\n * A map containing the options for the label binding. The possible keys\n * can be found in the {@link qx.data.SingleValueBinding} documentation.\n */\n labelOptions :\n {\n apply: \"_applyLabelOptions\",\n nullable: true\n },\n\n\n /**\n * A map containing the options for the icon binding. The possible keys\n * can be found in the {@link qx.data.SingleValueBinding} documentation.\n */\n iconOptions :\n {\n apply: \"_applyIconOptions\",\n nullable: true\n },\n\n\n /**\n * The model containing the data (nodes and/or leafs) which should be shown\n * in the tree.\n */\n model :\n {\n check : \"qx.core.Object\",\n apply : \"_applyModel\",\n event: \"changeModel\",\n nullable : true,\n deferredInit : true\n },\n\n\n /**\n * Delegation object, which can have one or more functions defined by the\n * {@link qx.ui.tree.core.IVirtualTreeDelegate} interface.\n */\n delegate :\n {\n event: \"changeDelegate\",\n apply: \"_applyDelegate\",\n init: null,\n nullable: true\n }\n },\n\n\n members :\n {\n /** @type {qx.ui.tree.provider.WidgetProvider} Provider for widget rendering. */\n _provider : null,\n\n\n /** @type {qx.ui.virtual.layer.Abstract} Layer which contains the items. */\n _layer : null,\n\n\n /**\n * @type {qx.data.Array} The internal lookup table data structure to get the model item\n * from a row.\n */\n __lookupTable : null,\n\n\n /** @type {Array} HashMap which contains all open nodes. */\n __openNodes : null,\n\n\n /**\n * @type {Array} The internal data structure to get the nesting level from a\n * row.\n */\n __nestingLevel : null,\n\n\n /**\n * @type {qx.util.DeferredCall} Adds this instance to the widget queue on a\n * deferred call.\n */\n __deferredCall : null,\n\n\n /** @type {Integer} Holds the max item width from a rendered widget. */\n _itemWidth : 0,\n\n\n /** @type {Array} internal parent chain form the last selected node */\n __parentChain : null,\n\n /** \n * @type {String|null} the name of the model property which represents the\n * open state of a branch.\n */\n __openProperty : null,\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n\n // overridden\n syncWidget : function(jobs)\n {\n var firstRow = this._layer.getFirstRow();\n var rowSize = this._layer.getRowSizes().length;\n\n for (var row = firstRow; row < firstRow + rowSize; row++)\n {\n var widget = this._layer.getRenderedCellWidget(row, 0);\n if (widget != null) {\n this._itemWidth = Math.max(this._itemWidth, widget.getSizeHint().width);\n }\n }\n var paneWidth = this.getPane().getInnerSize().width;\n this.getPane().getColumnConfig().setItemSize(0, Math.max(this._itemWidth, paneWidth));\n },\n\n\n // Interface implementation\n openNode : function(node)\n {\n this.__openNode(node);\n this.buildLookupTable();\n },\n\n\n // Interface implementation\n openNodeWithoutScrolling : function(node)\n {\n var autoscroll = this.getAutoScrollIntoView();\n // suspend automatically scrolling selection into view\n this.setAutoScrollIntoView(false);\n\n this.openNode(node);\n\n // re set to original value\n this.setAutoScrollIntoView(autoscroll);\n },\n\n\n /**\n * Trigger a rebuild from the internal data structure.\n */\n refresh : function() {\n this.buildLookupTable();\n },\n\n\n /**\n * Opens the passed node and all his parents. *Note!* The algorithm\n * implements a depth-first search with a complexity: O(n) and\n * n are all model items.\n *\n * @param node {qx.core.Object} Node to open.\n */\n openNodeAndParents : function(node)\n {\n this.__openNodeAndAllParents(this.getModel(), node);\n this.buildLookupTable();\n },\n\n\n // Interface implementation\n closeNode : function(node)\n {\n if (this.__openNodes.includes(node))\n {\n qx.lang.Array.remove(this.__openNodes, node);\n this.fireDataEvent(\"close\", node);\n this.buildLookupTable();\n }\n },\n\n\n // Interface implementation\n closeNodeWithoutScrolling : function(node)\n {\n var autoscroll = this.getAutoScrollIntoView();\n // suspend automatically scrolling selection into view\n this.setAutoScrollIntoView(false);\n\n this.closeNode(node);\n\n // re set to original value\n this.setAutoScrollIntoView(autoscroll);\n },\n\n\n // Interface implementation\n isNodeOpen : function(node) {\n return this.__openNodes.includes(node);\n },\n\n\n /**\n * Open and close branches via changes to a property in the model.\n * \n * @param openProperty {String|null} \n * The name of the open property, which determines the open state of a\n * branch in the tree. If null, turn off opening and closing branches\n * via changes to the model.\n */\n openViaModelChanges : function(openProperty) {\n // Save the open property\n this.__openProperty = openProperty;\n\n // if no name is provided, just remove any prior open-close controller\n if (! openProperty) {\n if (this._openCloseController) {\n this._openCloseController.dispose();\n this._openCloseController = null;\n }\n\n return;\n }\n\n // we have a property name, so create controller\n this._openCloseController =\n new qx.ui.tree.core.OpenCloseController(this, this.getModel(), openProperty);\n },\n\n\n /**\n * Getter for the open property\n */\n getOpenProperty : function()\n {\n return this.__openProperty;\n },\n\n\n /*\n ---------------------------------------------------------------------------\n INTERNAL API\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Initializes the virtual tree.\n */\n _init : function()\n {\n this.__lookupTable = new qx.data.Array();\n this.__openNodes = [];\n this.__nestingLevel = [];\n this._initLayer();\n },\n\n\n /**\n * Initializes the virtual tree layer.\n */\n _initLayer : function()\n {\n this._provider = new qx.ui.tree.provider.WidgetProvider(this);\n this._layer = this._provider.createLayer();\n this._layer.addListener(\"updated\", this._onUpdated, this);\n this.getPane().addLayer(this._layer);\n this.getPane().addListenerOnce(\"resize\", function(e) {\n // apply width to pane on first rendering pass\n // to avoid visible flickering\n this.getPane().getColumnConfig().setItemSize(0, e.getData().width);\n }, this);\n },\n\n\n // Interface implementation\n getLookupTable : function() {\n return this.__lookupTable;\n },\n \n \n // Interface implementation\n isShowTopLevelOpenCloseIcons : function() {\n return true;\n },\n\n\n /**\n * Performs a lookup from model index to row.\n *\n * @param index {Number} The index to look at.\n * @return {Number} The row or -1\n * if the index is not a model index.\n */\n _reverseLookup : function(index) {\n return index;\n },\n\n\n /**\n * Returns the model data for the given row.\n *\n * @param row {Integer} row to get data for.\n * @return {var|null} the row's model data.\n */\n _getDataFromRow : function(row) {\n return this.__lookupTable.getItem(row);\n },\n\n /**\n * Returns the selectable model items.\n *\n * @return {qx.data.Array} The selectable items.\n */\n _getSelectables : function() {\n return this.__lookupTable;\n },\n\n\n /**\n * Returns all open nodes.\n *\n * @internal\n * @return {Array} All open nodes.\n */\n getOpenNodes : function() {\n return this.__openNodes;\n },\n\n\n // Interface implementation\n isNode : function(item) {\n return qx.ui.tree.core.Util.isNode(item, this.getChildProperty());\n },\n\n\n // Interface implementation\n getLevel : function(row) {\n return this.__nestingLevel[row];\n },\n\n\n // Interface implementation\n hasChildren : function(node) {\n return qx.ui.tree.core.Util.hasChildren(node, this.getChildProperty(), !this.isShowLeafs());\n },\n\n\n /**\n * Returns the element, to which the content padding should be applied.\n *\n * @return {qx.ui.core.Widget} The content padding target.\n */\n _getContentPaddingTarget : function() {\n return this.getPane();\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY METHODS\n ---------------------------------------------------------------------------\n */\n\n\n // property apply\n _applyRowHeight : function(value, old) {\n this.getPane().getRowConfig().setDefaultItemSize(value);\n },\n\n\n // property apply\n _applyOpenMode : function(value, old)\n {\n var pane = this.getPane();\n\n //\"tap\", \"dbltap\", \"none\"\n if (value === \"dbltap\") {\n pane.addListener(\"cellDbltap\", this._onOpen, this);\n } else if (value === \"tap\") {\n pane.addListener(\"cellTap\", this._onOpen, this);\n }\n\n if (old === \"dbltap\") {\n pane.removeListener(\"cellDbltap\", this._onOpen, this);\n } else if (old === \"tap\") {\n pane.removeListener(\"cellTap\", this._onOpen, this);\n }\n },\n\n\n // property apply\n _applyHideRoot : function(value, old) {\n this.buildLookupTable();\n },\n\n\n // property apply\n _applyShowTopLevelOpenCloseIcons : function(value, old) {\n // force rebuild of the lookup table\n // fixes https://github.com/qooxdoo/qooxdoo/issues/9128\n this.getLookupTable().removeAll();\n this.buildLookupTable();\n },\n\n\n // property apply\n _applyShowLeafs : function(value, old) {\n // force rebuild of the lookup table\n // fixes https://github.com/qooxdoo/qooxdoo/issues/9128\n this.getLookupTable().removeAll();\n this.buildLookupTable();\n },\n\n\n // property apply\n _applyChildProperty : function(value, old) {\n this._provider.setChildProperty(value);\n },\n\n\n // property apply\n _applyLabelPath : function(value, old) {\n this._provider.setLabelPath(value);\n },\n\n\n // property apply\n _applyIconPath : function(value, old) {\n this._provider.setIconPath(value);\n },\n\n\n // property apply\n _applyLabelOptions : function(value, old) {\n this._provider.setLabelOptions(value);\n },\n\n\n // property apply\n _applyIconOptions : function(value, old) {\n this._provider.setIconOptions(value);\n },\n\n\n // property apply\n _applyModel : function(value, old)\n {\n this.__openNodes = [];\n\n if (value != null)\n {\n if (qx.core.Environment.get(\"qx.debug\"))\n {\n if (!qx.Class.hasMixin(value.constructor,\n qx.data.marshal.MEventBubbling))\n {\n this.warn(\"The model item doesn't support the Mixin 'qx.data.\" +\n \"marshal.MEventBubbling'. Therefore the tree can not update \" +\n \"the view automatically on model changes.\");\n }\n }\n value.addListener(\"changeBubble\", this._onChangeBubble, this);\n this.__openNode(value);\n }\n\n // If the model changes, an existing OpenCloseController is no longer\n // valid, so dispose it. The user should call openViaModelChanges again.\n if (this._openCloseController) {\n this._openCloseController.dispose();\n this._openCloseController = null;\n }\n\n if (old != null) {\n old.removeListener(\"changeBubble\", this._onChangeBubble, this);\n }\n\n this.__applyModelChanges();\n },\n\n\n // property apply\n _applyDelegate : function(value, old)\n {\n this._provider.setDelegate(value);\n this.buildLookupTable();\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT HANDLERS\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Event handler for the changeBubble event. The handler rebuild the lookup\n * table when the child structure changed.\n *\n * @param event {qx.event.type.Data} The data event.\n */\n _onChangeBubble : function(event)\n {\n var data = event.getData();\n var propertyName = data.name;\n var index = propertyName.lastIndexOf(\".\");\n\n if (index != -1) {\n propertyName = propertyName.substr(index + 1, propertyName.length);\n }\n\n // only continue when the effected property is the child property\n if ( propertyName.startsWith(this.getChildProperty()) )\n {\n var item = data.item;\n\n if (qx.Class.isSubClassOf(item.constructor, qx.data.Array))\n {\n if (index === -1)\n {\n item = this.getModel();\n }\n else\n {\n var propertyChain = data.name.substr(0, index);\n item = qx.data.SingleValueBinding.resolvePropertyChain(this.getModel(), propertyChain);\n }\n }\n\n if (this.__lookupTable.indexOf(item) != -1) {\n this.__applyModelChanges();\n }\n }\n },\n\n\n /**\n * Event handler for the update event.\n *\n * @param event {qx.event.type.Event} The event.\n */\n _onUpdated : function(event)\n {\n if (this.__deferredCall == null) {\n this.__deferredCall = new qx.util.DeferredCall(function() {\n qx.ui.core.queue.Widget.add(this);\n }, this);\n }\n this.__deferredCall.schedule();\n },\n\n\n /**\n * Event handler to open/close tapped nodes.\n *\n * @param event {qx.ui.virtual.core.CellEvent} The cell tap event.\n */\n _onOpen : function(event)\n {\n var row = event.getRow();\n var item = this.__lookupTable.getItem(row);\n\n if (this.isNode(item))\n {\n if (this.isNodeOpen(item)) {\n this.closeNode(item);\n } else {\n this.openNode(item);\n }\n }\n },\n\n\n /**\n * Event handler for key press events. Open and close the current selected\n * item on key left and right press. Jump to parent on key left if already\n * closed.\n *\n * @param e {qx.event.type.KeySequence} key event.\n */\n _onKeyPress : function(e)\n {\n var selection = this.getSelection();\n\n if (selection.getLength() > 0)\n {\n var item = selection.getItem(0);\n var isNode = this.isNode(item);\n\n switch(e.getKeyIdentifier())\n {\n case \"Left\":\n if (isNode && this.isNodeOpen(item)) {\n this.closeNode(item);\n } else {\n var parent = this.getParent(item);\n if (parent != null) {\n selection.splice(0, 1, parent);\n }\n }\n break;\n\n case \"Right\":\n if (isNode && !this.isNodeOpen(item)) {\n this.openNode(item);\n }\n else\n {\n if (isNode)\n {\n var children = item.get(this.getChildProperty());\n if (children != null && children.getLength() > 0) {\n selection.splice(0, 1, children.getItem(0));\n }\n }\n }\n break;\n\n case \"Enter\":\n case \"Space\":\n if (!isNode) {\n return;\n }\n if (this.isNodeOpen(item)) {\n this.closeNode(item);\n } else {\n this.openNode(item);\n }\n break;\n }\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n SELECTION HOOK METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Hook method which is called from the {@link qx.ui.virtual.selection.MModel}.\n * The hook method sets the first visible parent not as new selection when\n * the current selection is empty and the selection mode is one selection.\n *\n * @param newSelection {Array} The newSelection which will be set to the selection manager.\n */\n _beforeApplySelection : function(newSelection)\n {\n if (newSelection.length === 0 &&\n this.getSelectionMode() === \"one\")\n {\n var visibleParent = this.__getVisibleParent();\n var row = this.getLookupTable().indexOf(visibleParent);\n\n if (row >= 0) {\n newSelection.push(row);\n }\n }\n },\n\n\n /**\n * Hook method which is called from the {@link qx.ui.virtual.selection.MModel}.\n * The hook method builds the parent chain form the current selected item.\n */\n _afterApplySelection : function()\n {\n var selection = this.getSelection();\n\n if (selection.getLength() > 0 &&\n this.getSelectionMode() === \"one\") {\n this.__buildParentChain(selection.getItem(0));\n } else {\n this.__parentChain = [];\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Helper method to apply model changes. Normally build the lookup table and\n * apply the default selection.\n */\n __applyModelChanges : function()\n {\n this.buildLookupTable();\n this._applyDefaultSelection();\n },\n\n\n /**\n * Helper method to build the internal data structure.\n *\n * @internal\n */\n buildLookupTable : function()\n {\n if (\n this.getModel() != null &&\n (this.getChildProperty() == null || this.getLabelPath() == null)\n )\n {\n throw new Error(\"Could not build tree, because 'childProperty' and/\" +\n \"or 'labelPath' is 'null'!\");\n }\n\n this._itemWidth = 0;\n var lookupTable = [];\n this.__nestingLevel = [];\n var nestedLevel = -1;\n\n var root = this.getModel();\n if (root != null)\n {\n if (!this.isHideRoot())\n {\n nestedLevel++;\n lookupTable.push(root);\n this.__nestingLevel.push(nestedLevel);\n }\n\n if (this.isNodeOpen(root))\n {\n var visibleChildren = this.__getVisibleChildrenFrom(root, nestedLevel);\n lookupTable = lookupTable.concat(visibleChildren);\n }\n }\n\n if (!qx.lang.Array.equals(this.__lookupTable.toArray(), lookupTable))\n {\n this._provider.removeBindings();\n this.__lookupTable.removeAll();\n this.__lookupTable.append(lookupTable);\n this.__updateRowCount();\n this._updateSelection();\n }\n },\n\n\n /**\n * Helper method to get all visible children form the passed parent node.\n * The algorithm implements a depth-first search with a complexity:\n * O(n) and n are all visible items.\n *\n * @param node {qx.core.Object} The start node to start search.\n * @param nestedLevel {Integer} The nested level from the start node.\n * @return {Array} All visible children form the parent.\n */\n __getVisibleChildrenFrom : function(node, nestedLevel)\n {\n var visible = [];\n nestedLevel++;\n\n if (!this.isNode(node)) {\n return visible;\n }\n\n var children = node.get(this.getChildProperty());\n if (children == null) {\n return visible;\n }\n\n // clone children to keep original model unmodified\n children = children.copy();\n\n var delegate = this.getDelegate();\n var filter = qx.util.Delegate.getMethod(delegate, \"filter\");\n var sorter = qx.util.Delegate.getMethod(delegate, \"sorter\");\n\n if (sorter != null) {\n children.sort(sorter);\n }\n\n for (var i = 0; i < children.getLength(); i++)\n {\n var child = children.getItem(i);\n\n if (filter && !filter(child)) {\n continue;\n }\n\n if (this.isNode(child))\n {\n this.__nestingLevel.push(nestedLevel);\n visible.push(child);\n\n if (this.isNodeOpen(child))\n {\n var visibleChildren = this.__getVisibleChildrenFrom(child, nestedLevel);\n visible = visible.concat(visibleChildren);\n }\n }\n else\n {\n if (this.isShowLeafs())\n {\n this.__nestingLevel.push(nestedLevel);\n visible.push(child);\n }\n }\n }\n\n // dispose children clone\n children.dispose();\n\n return visible;\n },\n\n\n /**\n * Helper method to set the node to the open nodes data structure when it\n * is not included.\n *\n * @param node {qx.core.Object} Node to set to open nodes.\n */\n __openNode : function(node)\n {\n if (!this.__openNodes.includes(node)) {\n this.__openNodes.push(node);\n this.fireDataEvent(\"open\", node);\n }\n },\n\n\n /**\n * Helper method to set the target node and all his parents to the open\n * nodes data structure. The algorithm implements a depth-first search with\n * a complexity: O(n) and n are all model items.\n *\n * @param startNode {qx.core.Object} Start (root) node to search.\n * @param targetNode {qx.core.Object} Target node to open (and his parents).\n * @return {Boolean} True when the targetNode and his\n * parents could opened, false otherwise.\n */\n __openNodeAndAllParents : function(startNode, targetNode)\n {\n if (startNode === targetNode)\n {\n this.__openNode(targetNode);\n return true;\n }\n\n if (!this.isNode(startNode)) {\n return false;\n }\n\n var children = startNode.get(this.getChildProperty());\n if (children == null) {\n return false;\n }\n\n for (var i = 0; i < children.getLength(); i++)\n {\n var child = children.getItem(i);\n var result = this.__openNodeAndAllParents(child, targetNode);\n\n if (result === true)\n {\n this.__openNode(child);\n return true;\n }\n }\n\n return false;\n },\n\n\n /**\n * Helper method to update the row count.\n */\n __updateRowCount : function()\n {\n this.getPane().getRowConfig().setItemCount(this.__lookupTable.getLength());\n this.getPane().fullUpdate();\n },\n\n\n /**\n * Helper method to get the parent node. Node! This only works with leaf and\n * nodes which are in the internal lookup table.\n *\n * @param item {qx.core.Object} Node or leaf to get parent.\n * @return {qx.core.Object|null} The parent note or null when\n * no parent found.\n *\n * @internal\n */\n getParent : function(item)\n {\n var index = this.__lookupTable.indexOf(item);\n if (index < 0) {\n return null;\n }\n\n var level = this.__nestingLevel[index];\n while(index > 0)\n {\n index--;\n var levelBefore = this.__nestingLevel[index];\n if (levelBefore < level) {\n return this.__lookupTable.getItem(index);\n }\n }\n\n return null;\n },\n\n\n /**\n * Builds the parent chain form the passed item.\n *\n * @param item {var} Item to build parent chain.\n */\n __buildParentChain : function(item)\n {\n this.__parentChain = [];\n var parent = this.getParent(item);\n while(parent != null)\n {\n this.__parentChain.unshift(parent);\n parent = this.getParent(parent);\n }\n },\n\n\n /**\n * Return the first visible parent node from the last selected node.\n *\n * @return {var} The first visible node.\n */\n __getVisibleParent : function()\n {\n if (this.__parentChain == null) {\n return this.getModel();\n }\n\n var lookupTable = this.getLookupTable();\n var parent = this.__parentChain.pop();\n\n while(parent != null)\n {\n if (lookupTable.contains(parent)) {\n return parent;\n }\n parent = this.__parentChain.pop();\n }\n return this.getModel();\n }\n },\n\n\n destruct : function()\n {\n if (this._openCloseController) {\n this._openCloseController.dispose();\n }\n\n var pane = this.getPane();\n if (pane != null)\n {\n if (pane.hasListener(\"cellDbltap\")) {\n pane.removeListener(\"cellDbltap\", this._onOpen, this);\n }\n if (pane.hasListener(\"cellTap\")) {\n pane.removeListener(\"cellTap\", this._onOpen, this);\n }\n }\n\n if (!qx.core.ObjectRegistry.inShutDown && this.__deferredCall != null)\n {\n this.__deferredCall.cancel();\n this.__deferredCall.dispose();\n }\n\n var model = this.getModel();\n if (model != null) {\n model.removeListener(\"changeBubble\", this._onChangeBubble, this);\n }\n\n this._layer.removeListener(\"updated\", this._onUpdated, this);\n this._layer.destroy();\n this._provider.dispose();\n this.__lookupTable.dispose();\n\n this._layer = this._provider = this.__lookupTable = this.__openNodes =\n this.__deferredCall = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows workbench hierarchy in tree view.\n *\n * VirtualTree populated with NodeTreeItems\n *\n * Helps the user navigating through nodes and gives a hierarchical view of containers. Also allows\n * some operations.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let nodesTree = new osparc.widget.NodesTree();\n * this.getRoot().add(nodesTree);\n *
\n */\n\nqx.Class.define(\"osparc.widget.NodesTree\", {\n extend: qx.ui.tree.VirtualTree,\n\n construct: function() {\n this.base(arguments, null, \"label\", \"children\");\n\n this.set({\n decorator: \"service-tree\",\n hideRoot: true,\n openMode: \"none\",\n contentPadding: 0,\n padding: 0\n });\n osparc.utils.Utils.setIdToWidget(this, \"nodesTree\");\n\n this.__attachEventHandlers();\n },\n\n events: {\n \"changeSelectedNode\": \"qx.event.type.Data\",\n \"fullscreenNode\": \"qx.event.type.Data\",\n \"removeNode\": \"qx.event.type.Data\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n nullable: false,\n apply: \"_applyStudy\"\n },\n\n simpleNodes: {\n check: \"Boolean\",\n nullable: true,\n init: false,\n event: \"changeSimpleNodes\"\n }\n },\n\n statics: {\n __getSortingValue: function(node) {\n if (node.isFilePicker()) {\n return osparc.service.Utils.getSorting(\"file\");\n } else if (node.isParameter()) {\n return osparc.service.Utils.getSorting(\"parameter\");\n } else if (node.isIterator()) {\n return osparc.service.Utils.getSorting(\"iterator\");\n } else if (node.isProbe()) {\n return osparc.service.Utils.getSorting(\"probe\");\n }\n return osparc.service.Utils.getSorting(node.getMetaData().type);\n },\n\n __getIcon: function(node) {\n let icon = null;\n if (node.isFilePicker()) {\n icon = osparc.service.Utils.getIcon(\"file\");\n } else if (node.isParameter()) {\n icon = osparc.service.Utils.getIcon(\"parameter\");\n } else if (node.isIterator()) {\n icon = osparc.service.Utils.getIcon(\"iterator\");\n } else if (node.isProbe()) {\n icon = osparc.service.Utils.getIcon(\"probe\");\n } else {\n icon = osparc.service.Utils.getIcon(node.getMetaData().type);\n }\n if (icon) {\n icon += \"14\";\n }\n return icon;\n },\n\n createStudyModel: function(study) {\n const studyData = {\n id: study.getUuid(),\n label: osparc.product.Utils.getStudyAlias({firstUpperCase: true}),\n children: [],\n icon: \"@FontAwesome5Solid/home/14\",\n iconColor: \"text\",\n sortingValue: 0,\n study\n };\n const studyModel = qx.data.marshal.Json.createModel(studyData, true);\n study.bind(\"name\", studyModel, \"label\");\n return studyModel;\n },\n\n nodeToModel: function(node) {\n const nodeData = {\n id: node.getNodeId(),\n label: \"Node\",\n children: [],\n icon: this.__getIcon(node),\n iconColor: \"text\",\n sortingValue: this.__getSortingValue(node),\n node\n };\n const nodeModel = qx.data.marshal.Json.createModel(nodeData, true);\n node.bind(\"label\", nodeModel, \"label\");\n if (node.isDynamic()) {\n node.getStatus().bind(\"interactive\", nodeModel, \"iconColor\", {\n converter: status => osparc.service.StatusUI.getColor(status)\n });\n } else if (node.isComputational()) {\n node.getStatus().bind(\"running\", nodeModel, \"iconColor\", {\n converter: status => osparc.service.StatusUI.getColor(status)\n });\n }\n return nodeModel;\n }\n },\n\n members: {\n __currentNodeId: null,\n\n getCurrentNodeId: function() {\n return this.__currentNodeId;\n },\n\n setCurrentNodeId: function(nodeId) {\n this.__currentNodeId = nodeId;\n },\n\n _applyStudy: function() {\n this.populateTree();\n },\n\n populateTree: function() {\n const study = this.getStudy();\n const rootModel = this.self().createStudyModel(study);\n this.setModel(rootModel);\n const nodes = study.getWorkbench().getNodes();\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const nodeInTree = this.self().nodeToModel(node);\n rootModel.getChildren().push(nodeInTree);\n }\n this.setDelegate(this._getDelegate(study));\n const nChildren = rootModel.getChildren().length;\n this.setHeight(nChildren*30 + 12);\n },\n\n _getDelegate: function(study) {\n return {\n createItem: () => {\n const nodeTreeItem = new osparc.widget.NodeTreeItem();\n this.bind(\"simpleNodes\", nodeTreeItem, \"simpleNode\");\n nodeTreeItem.addListener(\"fullscreenNode\", e => this.__openFullscreen(e.getData()));\n nodeTreeItem.addListener(\"renameNode\", e => this._openItemRenamer(e.getData()));\n nodeTreeItem.addListener(\"infoNode\", e => this.__openNodeInfo(e.getData()));\n nodeTreeItem.addListener(\"deleteNode\", e => this.__deleteNode(e.getData()));\n return nodeTreeItem;\n },\n bindItem: (c, item, id) => {\n c.bindDefaultProperties(item, id);\n c.bindProperty(\"label\", \"label\", null, item, id);\n c.bindProperty(\"id\", \"id\", null, item, id);\n c.bindProperty(\"study\", \"study\", null, item, id);\n c.bindProperty(\"node\", \"node\", null, item, id);\n c.bindProperty(\"icon\", \"icon\", null, item, id);\n c.bindProperty(\"iconColor\", \"iconColor\", null, item, id);\n const node = study.getWorkbench().getNode(item.getModel().getId());\n if (item.getModel().getId() === study.getUuid()) {\n item.getChildControl(\"delete-button\").exclude();\n } else if (node) {\n node.addListener(\"keyChanged\", () => this.populateTree(), this);\n }\n },\n configureItem: item => {\n item.addListener(\"tap\", () => {\n this.__openItem(item.getModel().getId());\n this.nodeSelected(item.getModel().getId());\n }, this);\n // This is needed to keep the label flexible\n item.addListener(\"resize\", e => item.setMaxWidth(100), this);\n },\n sorter: (itemA, itemB) => itemA.getSortingValue() - itemB.getSortingValue()\n };\n },\n\n __getNodeModel: function(model, nodeId) {\n if (model.getId() === nodeId) {\n return model;\n } else if (model.getChildren() !== null) {\n let node = null;\n let children = model.getChildren().toArray();\n for (let i = 0; node === null && i < children.length; i++) {\n node = this.__getNodeModel(children[i], nodeId);\n }\n return node;\n }\n return null;\n },\n\n __getSelection: function() {\n let treeSelection = this.getSelection();\n if (treeSelection.length < 1) {\n return null;\n }\n let selectedItem = treeSelection.toArray()[0];\n return selectedItem;\n },\n\n __openItem: function(nodeId) {\n if (nodeId) {\n this.fireDataEvent(\"changeSelectedNode\", nodeId);\n }\n },\n\n __openFullscreen: function(nodeId) {\n if (nodeId) {\n this.fireDataEvent(\"fullscreenNode\", nodeId);\n }\n },\n\n _openItemRenamer: function(nodeId) {\n if (nodeId === undefined && this.__getSelection()) {\n nodeId = this.__getSelection().getId();\n }\n if (nodeId) {\n const study = this.getStudy();\n const node = study.getWorkbench().getNode(nodeId);\n const oldLabel = nodeId === study.getUuid() ? study.getName() : node.getLabel();\n const treeItemRenamer = new osparc.widget.Renamer(oldLabel);\n treeItemRenamer.addListener(\"labelChanged\", e => {\n const {\n newLabel\n } = e.getData();\n if (nodeId === study.getUuid() && osparc.data.Permissions.getInstance().canDo(\"study.update\", true)) {\n study.setName(newLabel);\n } else if (node && osparc.data.Permissions.getInstance().canDo(\"study.node.rename\", true)) {\n node.setLabel(newLabel);\n }\n treeItemRenamer.close();\n }, this);\n const bounds = this.getLayoutParent().getContentLocation();\n treeItemRenamer.moveTo(bounds.left + 100, bounds.top + 150);\n treeItemRenamer.open();\n }\n },\n\n __openNodeInfo: function(nodeId) {\n if (nodeId === undefined && this.__getSelection()) {\n nodeId = this.__getSelection().getId();\n }\n if (nodeId) {\n const study = this.getStudy();\n const width = osparc.info.CardLarge.WIDTH;\n const height = osparc.info.CardLarge.HEIGHT;\n if (nodeId === study.getUuid()) {\n const studyDetails = new osparc.info.StudyLarge(study);\n const title = this.tr(\"Study Information\");\n osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({\n maxHeight: height\n });\n } else {\n const node = study.getWorkbench().getNode(nodeId);\n const metadata = node.getMetaData();\n const serviceDetails = new osparc.info.ServiceLarge(metadata, {\n nodeId,\n label: node.getLabel(),\n studyId: study.getUuid()\n });\n osparc.info.ServiceLarge.popUpInWindow(serviceDetails);\n }\n }\n },\n\n __deleteNode: function(nodeId) {\n if (nodeId === undefined && this.__getSelection()) {\n nodeId = this.__getSelection().getId();\n }\n if (nodeId) {\n this.fireDataEvent(\"removeNode\", nodeId);\n }\n },\n\n nodeSelected: function(nodeId) {\n const item = this.__getNodeModel(this.getModel(), nodeId);\n if (item) {\n this.openNodeAndParents(item);\n this.setSelection(new qx.data.Array([item]));\n }\n },\n\n __attachEventHandlers: function() {\n this.addListener(\"keypress\", keyEvent => {\n switch (keyEvent.getKeyIdentifier()) {\n case \"F2\":\n this._openItemRenamer();\n break;\n case \"I\":\n this.__openNodeInfo();\n break;\n case \"Delete\":\n this.__deleteNode();\n break;\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.widget.StudyTitleOnlyTree\", {\n extend: osparc.widget.NodesTree,\n\n construct: function() {\n this.base(arguments, null, \"label\", \"children\");\n\n this.set({\n hideRoot: false\n });\n },\n\n members: {\n // override\n populateTree: function() {\n const study = this.getStudy();\n const newModel = osparc.widget.NodesTree.createStudyModel(study);\n this.setModel(newModel);\n this.setDelegate({\n ...this._getDelegate(study),\n createItem: () => {\n const studyTreeItem = new osparc.widget.NodeTreeItem();\n studyTreeItem.addListener(\"renameNode\", e => this._openItemRenamer(e.getData()));\n studyTreeItem.addListener(\"infoNode\", () => this.__openStudyInfo());\n return studyTreeItem;\n }\n });\n },\n\n __openStudyInfo: function() {\n const studyDetails = new osparc.info.StudyLarge(this.getStudy());\n const title = this.tr(\"Study Information\");\n const width = osparc.info.CardLarge.WIDTH;\n const height = osparc.info.CardLarge.HEIGHT;\n osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({\n maxHeight: height\n });\n },\n\n selectStudyItem: function() {\n this.setSelection(new qx.data.Array([this.getModel()]));\n this.fireDataEvent(\"changeSelectedNode\", this.getModel().getId());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * VirtualTree that is able to build its content.\n *\n * Elements in the tree also accept Drag and/or Drop mechanisms which are implemented here.\n * \"osparc-file-link\" type is used for the Drag&Drop.\n *\n * If a file is dropped into a folder, this class will start the copying process firing\n * \"fileCopied\" event if successful\n *\n * Also provides two static methods for checking whether en entry in the tree is File/Directory\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let filesTree = new osparc.file.FilesTree();\n * this.getRoot().add(filesTree);\n *
\n */\n\nqx.Class.define(\"osparc.file.FilesTree\", {\n extend: qx.ui.tree.VirtualTree,\n\n construct: function() {\n this.base(arguments, null, \"label\", \"children\");\n\n this.set({\n openMode: \"none\",\n decorator: \"no-border\",\n font: \"text-14\",\n });\n\n this.resetChecks();\n\n this.addListener(\"tap\", this.__selectionChanged, this);\n\n // Listen to \"Enter\" key\n this.addListener(\"keypress\", keyEvent => {\n if (keyEvent.getKeyIdentifier() === \"Enter\") {\n this.__itemSelected();\n }\n }, this);\n\n this.__loadPaths = {};\n },\n\n properties: {\n dragMechanism: {\n check: \"Boolean\",\n init: false\n },\n\n dropMechanism: {\n check: \"Boolean\",\n init: false\n }\n },\n\n events: {\n \"selectionChanged\": \"qx.event.type.Event\", // tap\n \"itemSelected\": \"qx.event.type.Event\", // dbltap\n \"fileCopied\": \"qx.event.type.Data\",\n \"filesAddedToTree\": \"qx.event.type.Event\"\n },\n\n statics: {\n isDir: function(item) {\n let isDir = false;\n if (item[\"get\"+qx.lang.String.firstUp(\"path\")]) {\n if (item.getPath() !== null) {\n isDir = true;\n }\n }\n return isDir;\n },\n\n isFile: function(item) {\n let isFile = false;\n if (item[\"set\"+qx.lang.String.firstUp(\"fileId\")]) {\n isFile = true;\n }\n return isFile;\n },\n\n addLoadingChild: function(parent) {\n const loadingModel = qx.data.marshal.Json.createModel({\n label: \"Loading...\",\n location: null,\n path: null,\n children: [],\n icon: \"@FontAwesome5Solid/circle-notch/12\"\n }, true);\n parent.getChildren().append(loadingModel);\n },\n\n removeLoadingChild: function(parent) {\n for (let i = parent.getChildren().length - 1; i >= 0; i--) {\n if (parent.getChildren().toArray()[i].getLabel() === \"Loading...\") {\n parent.getChildren().toArray()\n .splice(i, 1);\n }\n }\n },\n\n attachPathLabel: function(srcPathLabel, data) {\n data[\"pathLabel\"] = srcPathLabel.concat(data[\"label\"]);\n if (\"children\" in data) {\n data.children.forEach(child => this.self().attachPathLabel(data[\"pathLabel\"], child));\n }\n }\n },\n\n members: {\n __locations: null,\n __datasets: null,\n __loadPaths: null,\n\n resetChecks: function() {\n this.__locations = new Set();\n this.__datasets = new Set();\n },\n\n resetCache: function() {\n this.resetChecks();\n\n const dataStore = osparc.store.Data.getInstance();\n dataStore.resetCache();\n },\n\n populateStudyTree: function(studyId) {\n const treeName = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + \" Files\";\n this.__resetTree(treeName);\n let studyModel = this.getModel();\n this.self().addLoadingChild(studyModel);\n\n const dataStore = osparc.store.Data.getInstance();\n return dataStore.getFilesByLocationAndDataset(\"0\", studyId)\n .then(data => {\n const {\n files\n } = data;\n\n if (files.length && \"project_name\" in files[0]) {\n this.__resetTree(files[0][\"project_name\"]);\n }\n studyModel = this.getModel();\n this.__filesToDataset(\"0\", studyId, files, studyModel);\n\n // select study item\n this.setSelection(new qx.data.Array([studyModel]));\n this.__selectionChanged();\n });\n },\n\n populateNodeTree(nodeId) {\n const treeName = \"Node Files\";\n this.__resetTree(treeName);\n const rootModel = this.getModel();\n this.self().addLoadingChild(rootModel);\n\n const dataStore = osparc.store.Data.getInstance();\n return dataStore.getNodeFiles(nodeId)\n .then(files => {\n const newChildren = osparc.data.Converters.fromDSMToVirtualTreeModel(null, files);\n if (newChildren.length && // location\n newChildren[0].children.length && // study\n newChildren[0].children[0].children.length) { // node\n const nodeData = newChildren[0].children[0].children[0];\n const nodeTreeName = nodeData.label;\n this.__resetTree(nodeTreeName, nodeId);\n const rootNodeModel = this.getModel();\n if (nodeData.children.length) {\n const nodeItemsOnly = nodeData.children;\n this.__itemsToNode(nodeItemsOnly);\n }\n this.openNode(rootNodeModel);\n\n // select node item\n this.setSelection(new qx.data.Array([rootNodeModel]));\n this.__selectionChanged();\n } else {\n rootModel.getChildren().removeAll();\n }\n });\n },\n\n populateTree: function() {\n return this.__populateLocations();\n },\n\n loadFilePath: function(outFileVal) {\n const locationId = outFileVal.store;\n let datasetId = \"dataset\" in outFileVal ? outFileVal.dataset : null;\n const pathId = outFileVal.path;\n if (datasetId === null) {\n const splitted = pathId.split(\"/\");\n if (splitted.length === 3) {\n // simcore.s3\n datasetId = splitted[0];\n }\n }\n this.__addToLoadFilePath(locationId, datasetId, pathId);\n this.__populateLocations();\n },\n\n __addToLoadFilePath: function(locationId, datasetId, pathId) {\n if (datasetId) {\n if (!(locationId in this.__loadPaths)) {\n this.__loadPaths[locationId] = {};\n }\n if (!(datasetId in this.__loadPaths[locationId])) {\n this.__loadPaths[locationId][datasetId] = new Set();\n }\n this.__loadPaths[locationId][datasetId].add(pathId);\n }\n },\n\n __hasLocationNeedToBeLoaded: function(locationId) {\n return (locationId in this.__loadPaths) && (Object.keys(this.__loadPaths[locationId]).length > 0);\n },\n\n __hasDatasetNeedToBeLoaded: function(locationId, datasetId) {\n return (locationId in this.__loadPaths) && (datasetId in this.__loadPaths[locationId]) && (this.__loadPaths[locationId][datasetId].size > 0);\n },\n\n __filesReceived: function(locationId, datasetId, files) {\n if (this.__hasDatasetNeedToBeLoaded(locationId, datasetId)) {\n const paths = Array.from(this.__loadPaths[locationId][datasetId]);\n for (let i=0; i new osparc.file.FileTreeItem(),\n bindItem: (c, item, id) => {\n c.bindDefaultProperties(item, id);\n c.bindProperty(\"itemId\", \"itemId\", null, item, id);\n c.bindProperty(\"fileId\", \"fileId\", null, item, id);\n c.bindProperty(\"location\", \"location\", null, item, id);\n c.bindProperty(\"isDataset\", \"isDataset\", null, item, id);\n c.bindProperty(\"datasetId\", \"datasetId\", null, item, id);\n c.bindProperty(\"loaded\", \"loaded\", null, item, id);\n c.bindProperty(\"path\", \"path\", null, item, id);\n c.bindProperty(\"pathLabel\", \"pathLabel\", null, item, id);\n c.bindProperty(\"lastModified\", \"lastModified\", null, item, id);\n c.bindProperty(\"size\", \"size\", null, item, id);\n c.bindProperty(\"icon\", \"icon\", null, item, id);\n },\n configureItem: item => {\n const openButton = item.getChildControl(\"open\");\n openButton.addListener(\"tap\", () => {\n if (item.isOpen() && !item.getLoaded() && item.getIsDataset()) {\n item.setLoaded(true);\n const locationId = item.getLocation();\n const datasetId = item.getPath();\n this.requestDatasetFiles(locationId, datasetId);\n }\n }, this);\n item.addListener(\"dbltap\", () => this.__itemSelected(), this);\n this.__addDragAndDropMechanisms(item);\n }\n });\n },\n\n __populateLocations: function() {\n this.resetChecks();\n\n const treeName = \"My Data\";\n this.__resetTree(treeName);\n const rootModel = this.getModel();\n rootModel.getChildren().removeAll();\n this.self().addLoadingChild(rootModel);\n\n this.set({\n hideRoot: true\n });\n const dataStore = osparc.store.Data.getInstance();\n return dataStore.getLocations()\n .then(locations => {\n const datasetPromises = [];\n if (this.__locations.size === 0) {\n this.resetChecks();\n this.__locationsToRoot(locations);\n for (let i=0; i {\n const {\n location,\n datasets\n } = data;\n if (location === locationId && !this.__locations.has(locationId)) {\n this.__datasetsToLocation(location, datasets);\n }\n });\n },\n\n requestDatasetFiles: function(locationId, datasetId) {\n if (this.__datasets.has(datasetId)) {\n return null;\n }\n\n const dataStore = osparc.store.Data.getInstance();\n return dataStore.getFilesByLocationAndDataset(locationId, datasetId)\n .then(data => {\n const {\n location,\n dataset,\n files\n } = data;\n this.__filesToDataset(location, dataset, files);\n });\n },\n\n __getLocationModel: function(locationId) {\n const rootModel = this.getModel();\n const locationModels = rootModel.getChildren();\n for (let i=0; i this.self().attachPathLabel(currentModel.getPathLabel(), file));\n const newModelToAdd = qx.data.marshal.Json.createModel(files, true);\n currentModel.getChildren().append(newModelToAdd);\n this.setModel(currentModel);\n this.fireEvent(\"filesAddedToTree\");\n\n return newModelToAdd;\n },\n\n __datasetsToLocation: function(locationId, datasets) {\n const dataStore = osparc.store.Data.getInstance();\n\n const locationModel = this.__getLocationModel(locationId);\n if (!locationModel) {\n return;\n }\n this.__locations.add(locationId);\n locationModel.getChildren().removeAll();\n let openThis = null;\n datasets.forEach(dataset => {\n const datasetData = osparc.data.Converters.createDirEntry(\n dataset.display_name,\n locationId,\n dataset.dataset_id\n );\n datasetData.isDataset = true;\n datasetData.loaded = false;\n datasetData[\"pathLabel\"] = locationModel.getPathLabel().concat(datasetData[\"label\"]);\n const datasetModel = qx.data.marshal.Json.createModel(datasetData, true);\n this.self().addLoadingChild(datasetModel);\n locationModel.getChildren().append(datasetModel);\n\n // add cached files\n const datasetId = dataset.dataset_id;\n const cachedData = dataStore.getFilesByLocationAndDatasetCached(locationId, datasetId);\n if (cachedData) {\n this.__filesToDataset(cachedData.location, cachedData.dataset, cachedData.files);\n }\n\n if (this.__hasDatasetNeedToBeLoaded(locationId, datasetId)) {\n openThis = datasetModel;\n }\n });\n // sort datasets\n osparc.data.Converters.sortModelByLabel(locationModel);\n\n this.__rerender(locationModel);\n\n if (openThis) {\n const datasetId = openThis.getItemId();\n this.openNodeAndParents(openThis);\n this.requestDatasetFiles(locationId, datasetId);\n }\n },\n\n __filesToDataset: function(locationId, datasetId, files, model) {\n if (this.__datasets.has(datasetId)) {\n return;\n }\n\n const datasetModel = model ? model : this.__getDatasetModel(locationId, datasetId);\n if (datasetModel) {\n datasetModel.getChildren().removeAll();\n if (files.length) {\n const locationData = osparc.data.Converters.fromDSMToVirtualTreeModel(datasetId, files);\n const datasetData = locationData[0].children;\n datasetData[0].children.forEach(data => {\n this.self().attachPathLabel(datasetModel.getPathLabel(), data);\n const filesModel = qx.data.marshal.Json.createModel(data, true);\n datasetModel.getChildren().append(filesModel);\n });\n }\n // sort files\n osparc.data.Converters.sortModelByLabel(datasetModel);\n\n this.__rerender(datasetModel);\n\n this.__datasets.add(datasetId);\n this.fireEvent(\"filesAddedToTree\");\n }\n\n this.__filesReceived(locationId, datasetId, files);\n },\n\n __rerender: function(item) {\n // Hack to trigger a rebuild of the item.\n // Without this sometimes the arrow giving access to the children is not rendered\n if (!this.isNodeOpen(item)) {\n this.openNode(item);\n this.closeNode(item);\n }\n },\n\n getParent: function(childItem) {\n const root = this.getModel();\n const list = [];\n this.__getItemsInTree(root, list);\n return list.find(element => element.getChildren && element.getChildren().contains(childItem));\n },\n\n findItemId: function(itemId) {\n const root = this.getModel();\n const items = [];\n this.__getItemsInTree(root, items);\n return items.find(element => \"getItemId\" in element && element.getItemId() === itemId);\n },\n\n __getItemsInTree: function(item, items) {\n items.push(item);\n if (item.getChildren) {\n item.getChildren().forEach(child => {\n this.__getItemsInTree(child, items);\n });\n }\n },\n\n __getLeavesInTree: function(item, leaves) {\n if (item.getChildren == null) {\n leaves.push(item);\n } else {\n item.getChildren().forEach(child => {\n this.__getLeavesInTree(child, leaves);\n });\n }\n },\n\n __findUuidInLeaves: function(uuid) {\n const root = this.getModel();\n const leaves = [];\n this.__getLeavesInTree(root, leaves);\n return leaves.find(element => element.getFileId() === uuid);\n },\n\n setSelectedFile: function(fileId) {\n const item = this.__findUuidInLeaves(fileId);\n if (item) {\n this.openNodeAndParents(item);\n\n const selectItem = new qx.data.Array();\n if (this.getShowLeafs()) {\n selectItem.push(item);\n } else {\n console.log(\"select parent\", fileId);\n const parent = this.getParent(item);\n if (parent) {\n selectItem.push(parent);\n }\n }\n if (selectItem.length) {\n this.setSelection(selectItem);\n this.__selectionChanged();\n return true;\n }\n }\n\n return false;\n },\n\n getSelectedItem: function() {\n let selection = this.getSelection().toArray();\n if (selection.length > 0) {\n return selection[0];\n }\n return null;\n },\n\n __selectionChanged: function() {\n let selectedItem = this.getSelectedItem();\n if (selectedItem) {\n this.fireEvent(\"selectionChanged\");\n }\n },\n\n __itemSelected: function() {\n let selectedItem = this.getSelectedItem();\n if (selectedItem) {\n this.fireEvent(\"itemSelected\");\n }\n },\n\n __addDragAndDropMechanisms: function(item) {\n if (this.isDragMechanism()) {\n this.__createDragMechanism(item);\n }\n\n if (this.isDropMechanism()) {\n this.__createDropMechanism(item);\n }\n },\n\n __createDragMechanism: function(treeItem) {\n treeItem.setDraggable(true);\n treeItem.addListener(\"dragstart\", e => {\n const origin = e.getOriginalTarget();\n if (this.self().isFile(origin)) {\n // Register supported actions\n e.addAction(\"copy\");\n // Register supported types\n e.addType(\"osparc-file-link\");\n\n e.addData(\"osparc-file-link\", {\n dragData: origin.getModel()\n });\n } else {\n e.preventDefault();\n }\n }, this);\n },\n\n __createDropMechanism: function(treeItem) {\n treeItem.setDroppable(true);\n treeItem.addListener(\"dragover\", e => {\n let compatible = false;\n if (this.self().isDir(e.getOriginalTarget())) {\n if (e.supportsType(\"osparc-file-link\")) {\n compatible = true;\n }\n }\n if (!compatible) {\n e.preventDefault();\n }\n }, this);\n\n treeItem.addListener(\"drop\", e => {\n if (e.supportsType(\"osparc-file-link\")) {\n const from = e.getRelatedTarget();\n const to = e.getCurrentTarget();\n const dataStore = osparc.store.Data.getInstance();\n console.log(\"Copy\", from.getFileId(), \"to\", to.getPath());\n const requestSent = dataStore.copyFile(from.getLocation(), from.getFileId(), to.getLocation(), to.getPath());\n if (requestSent) {\n dataStore.addListenerOnce(\"fileCopied\", ev => {\n if (ev) {\n this.fireDataEvent(\"fileCopied\", ev.getData());\n }\n }, this);\n }\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.CollapseWithUserMenu\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox());\n\n this.__buildLayout();\n },\n\n events: {\n \"backToDashboardPressed\": \"qx.event.type.Event\",\n \"collapseNavBar\": \"qx.event.type.Event\",\n \"expandNavBar\": \"qx.event.type.Event\"\n },\n\n properties: {\n collapsed: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeCollapsed\",\n apply: \"__applyCollapsed\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"separator\":\n control = new qx.ui.toolbar.Separator().set({\n width: 2,\n padding: 0,\n margin: [7, 10, 7, 0],\n backgroundColor: \"default-button-disabled-background\"\n });\n this._add(control);\n break;\n case \"back-to-dashboard-button\":\n control = new osparc.ui.form.FetchButton(this.tr(\"Dashboard\"), \"@FontAwesome5Solid/arrow-left/14\").set({\n appearance: \"fab-button\",\n alignY: \"middle\",\n padding: [5, 16],\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS\n });\n osparc.utils.Utils.setIdToWidget(control, \"dashboardBtn\");\n control.addListener(\"execute\", () => this.fireEvent(\"backToDashboardPressed\"));\n this._add(control);\n break;\n case \"user-menu-button\":\n control = new osparc.navigation.UserMenuButton();\n osparc.WatchDog.getInstance().bind(\"online\", control, \"backgroundColor\", {\n converter: on => on ? \"background-main-4\" : \"red\"\n });\n control.getChildControl(\"label\").exclude();\n control.populateMenuCompact();\n this._add(control);\n break;\n case \"collapse-expand-stack\": {\n control = new qx.ui.container.Stack();\n\n const collapseNavBarBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/chevron-up/14\").set({\n appearance: \"fab-button\",\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS\n });\n control.add(collapseNavBarBtn);\n collapseNavBarBtn.addListener(\"execute\", () => {\n this.setCollapsed(true);\n this.fireEvent(\"collapseNavBar\");\n });\n\n const expandNavBarBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/chevron-down/14\").set({\n appearance: \"fab-button\",\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS\n });\n control.add(expandNavBarBtn);\n expandNavBarBtn.addListener(\"execute\", () => {\n this.setCollapsed(false);\n this.fireEvent(\"expandNavBar\");\n });\n\n this._add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n const separator = this.getChildControl(\"separator\");\n separator.exclude();\n\n const backToDashboardBtn = this.getChildControl(\"back-to-dashboard-button\");\n backToDashboardBtn.set({\n marginRight: 10\n });\n backToDashboardBtn.exclude();\n\n const userMenuButton = this.getChildControl(\"user-menu-button\");\n userMenuButton.set({\n marginRight: 1,\n marginTop: 3\n });\n userMenuButton.exclude();\n\n const collapseExpandStack = this.getChildControl(\"collapse-expand-stack\");\n collapseExpandStack.set({\n padding: 8,\n marginRight: 4\n });\n },\n\n __applyCollapsed: function(collapsed) {\n this.getChildControl(\"separator\").setVisibility(collapsed ? \"visible\" : \"excluded\");\n this.getChildControl(\"back-to-dashboard-button\").setVisibility(collapsed ? \"visible\" : \"excluded\");\n this.getChildControl(\"user-menu-button\").setVisibility(collapsed ? \"visible\" : \"excluded\");\n const collapseExpandStack = this.getChildControl(\"collapse-expand-stack\");\n collapseExpandStack.setSelection([collapseExpandStack.getSelectables()[collapsed ? 1 : 0]]);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.StudyMedium\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param study {osparc.data.model.Study} Study\n */\n construct: function(study) {\n this.base(arguments);\n\n this.set({\n padding: 0,\n backgroundColor: \"background-main\"\n });\n this._setLayout(new qx.ui.layout.VBox(20));\n\n if (study) {\n this.setStudy(study);\n }\n\n this.addListenerOnce(\"appear\", () => this.__rebuildLayout(), this);\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"__applyStudy\",\n init: null,\n nullable: false\n }\n },\n\n members: {\n __applyStudy: function() {\n this.__rebuildLayout();\n },\n\n __rebuildLayout: function() {\n this._removeAll();\n\n const nameAndMenuButton = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n nameAndMenuButton.add(osparc.info.StudyUtils.createTitle(this.getStudy()), {\n flex: 1\n });\n nameAndMenuButton.add(this.__createMenuButton());\n this._add(nameAndMenuButton);\n\n const thumbnail = this.__createThumbnail(160, 100);\n if (thumbnail) {\n this._add(thumbnail);\n }\n\n const extraInfo = this.__extraInfo();\n const extraInfoLayout = this.__createExtraInfo(extraInfo);\n this._add(extraInfoLayout);\n\n const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(8)).set({\n marginTop: -10 // bring it closer to the extra info\n });\n const title = new qx.ui.basic.Label(this.tr(\"DESCRIPTION\")).set({\n paddingLeft: 14 // align it with the other titles\n });\n descriptionLayout.add(title);\n descriptionLayout.add(osparc.info.StudyUtils.createDescriptionMD(this.getStudy()));\n this._add(descriptionLayout);\n },\n\n __createMenuButton: function() {\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n const menuButton = new qx.ui.form.MenuButton().set({\n menu,\n width: 25,\n height: 25,\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n focusable: false,\n allowGrowY: false\n });\n\n const moreInfoButton = this.__getMoreInfoMenuButton();\n if (moreInfoButton) {\n menu.add(moreInfoButton);\n }\n\n return menuButton;\n },\n\n __getMoreInfoMenuButton: function() {\n const moreInfoButton = new qx.ui.menu.Button(this.tr(\"More Info\"));\n moreInfoButton.addListener(\"execute\", () => this.__openStudyDetails(), this);\n return moreInfoButton;\n },\n\n __extraInfo: function() {\n const extraInfo = [{\n label: this.tr(\"AUTHOR\"),\n view: osparc.info.StudyUtils.createOwner(this.getStudy())\n }, {\n label: this.tr(\"ACCESS RIGHTS\"),\n view: osparc.info.StudyUtils.createAccessRights(this.getStudy())\n }, {\n label: this.tr(\"CREATED\"),\n view: osparc.info.StudyUtils.createCreationDate(this.getStudy())\n }, {\n label: this.tr(\"MODIFIED\"),\n view: osparc.info.StudyUtils.createLastChangeDate(this.getStudy())\n }];\n\n if (\n osparc.product.Utils.showQuality() &&\n osparc.metadata.Quality.isEnabled(this.getStudy().getQuality())\n ) {\n extraInfo.push({\n label: this.tr(\"QUALITY\"),\n view: osparc.info.StudyUtils.createQuality(this.getStudy())\n });\n }\n\n extraInfo.push({\n label: this.tr(\"TAGS\"),\n view: osparc.info.StudyUtils.createTags(this.getStudy())\n });\n\n return extraInfo;\n },\n\n __createExtraInfo: function(extraInfo) {\n const moreInfo = osparc.info.Utils.extraInfosToGrid(extraInfo);\n return moreInfo;\n },\n\n __createThumbnail: function(maxWidth, maxHeight = 150) {\n if (this.getStudy().getThumbnail()) {\n return osparc.info.StudyUtils.createThumbnail(this.getStudy(), maxWidth, maxHeight);\n }\n return null;\n },\n\n __openStudyDetails: function() {\n const studyDetails = new osparc.info.StudyLarge(this.getStudy());\n const title = this.tr(\"Study Information\");\n const width = osparc.info.CardLarge.WIDTH;\n const height = osparc.info.CardLarge.HEIGHT;\n osparc.ui.window.Window.popUpInWindow(studyDetails, title, width, height).set({\n maxHeight: height\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.node.ParameterEditor\", {\n extend: qx.ui.form.renderer.Single,\n\n construct: function(node) {\n this.set({\n node\n });\n\n const form = this.__form = new qx.ui.form.Form();\n this.base(arguments, form);\n },\n\n statics: {\n getParameterOutputTypeFromMD: function(metadata) {\n let type = metadata[\"outputs\"][\"out_1\"][\"type\"];\n if (type === \"ref_contentSchema\") {\n type = metadata[\"outputs\"][\"out_1\"][\"contentSchema\"][\"type\"];\n }\n return type;\n },\n\n getParameterOutputType: function(node) {\n const metadata = node.getMetaData();\n return this.self().getParameterOutputTypeFromMD(metadata);\n },\n\n setParameterOutputValue: function(node, val) {\n node.setOutputData({\n \"out_1\": this.self().getParameterOutputType(node) === \"array\" ? osparc.ui.form.ContentSchemaArray.addArrayBrackets(val) : val\n });\n }\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\"\n }\n },\n\n members: {\n __form: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"label\":\n case \"string\":\n case \"number\":\n control = new qx.ui.form.TextField();\n break;\n case \"data-type\": {\n control = new qx.ui.form.SelectBox().set({\n allowGrowX: false\n });\n [\n \"number\",\n \"integer\",\n \"boolean\"\n ].forEach(parametrizableType => {\n const parametrizableTypeItem = new qx.ui.form.ListItem(qx.lang.String.firstUp(parametrizableType));\n parametrizableTypeItem.type = parametrizableType;\n control.add(parametrizableTypeItem);\n });\n break;\n }\n case \"integer\":\n control = new qx.ui.form.Spinner();\n control.set({\n maximum: 10000,\n minimum: -10000\n });\n break;\n case \"boolean\":\n control = new qx.ui.form.CheckBox();\n break;\n case \"ref_contentSchema\":\n case \"array\":\n control = new osparc.ui.form.ContentSchemaArray();\n break;\n }\n return control || this.base(arguments, id);\n },\n\n buildForm: function(allSettings = true) {\n this._removeAll();\n\n const node = this.getNode();\n\n const type = this.self().getParameterOutputType(node);\n if (allSettings) {\n const label = this.getChildControl(\"label\");\n label.setValue(node.getLabel());\n label.bind(\"value\", node, \"label\");\n this.__form.add(label, \"Label\", null, \"label\");\n\n const typeBox = this.getChildControl(\"data-type\");\n typeBox.getSelectables().forEach(selectable => {\n if (selectable.type === type) {\n typeBox.setSelection([selectable]);\n typeBox.setEnabled(false);\n }\n });\n this.__form.add(typeBox, \"Data Type\", null, \"type\");\n }\n\n const valueField = this.getChildControl(type);\n const outputs = node.getOutputs();\n if (type === \"ref_contentSchema\") {\n valueField.setContentSchema(outputs[\"out_1\"][\"contentSchema\"]);\n }\n if (\"value\" in outputs[\"out_1\"]) {\n if ([\"integer\", \"boolean\"].includes(type)) {\n valueField.setValue(outputs[\"out_1\"][\"value\"]);\n } else {\n valueField.setValue(String(outputs[\"out_1\"][\"value\"]));\n }\n }\n valueField.addListener(\"changeValue\", e => osparc.node.ParameterEditor.setParameterOutputValue(node, e.getData()));\n this.__form.add(valueField, \"Value\", null, \"value\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n/* eslint-disable no-use-before-define */\n\n/**\n * Display widget with a title bar and collapsible content.\n */\nqx.Class.define(\"osparc.widget.CollapsibleView\", {\n extend: qx.ui.core.Widget,\n\n construct: function(title, content) {\n this.base(arguments);\n\n // Layout\n this._setLayout(new qx.ui.layout.VBox());\n\n this.getChildControl(\"caret\");\n\n // Set if coming in the constructor arguments\n if (title) {\n this.setTitle(title);\n }\n if (content) {\n this.setContent(content);\n }\n },\n\n statics: {\n COLLAPSED_CARET: \"@MaterialIcons/chevron_right/\",\n EXPANDED_CARET: \"@MaterialIcons/expand_more/\"\n },\n\n properties: {\n title: {\n check: \"String\",\n nullable: true,\n apply: \"_applyTitle\"\n },\n\n content: {\n check: \"qx.ui.core.Widget\",\n nullable: true,\n apply: \"_applyContent\"\n },\n\n collapsed: {\n init: false,\n check: \"Boolean\",\n apply: \"_applyCollapsed\",\n event: \"changeCollapsed\"\n },\n\n caretSize: {\n init: 20,\n nullable: false,\n check: \"Integer\",\n apply: \"_applyCaretSize\"\n }\n },\n\n members: {\n _innerContainer: null,\n __containerHeight: null,\n __layoutFlex: null,\n __minHeight: null,\n __contentMinHeight: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"header\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n this._add(control);\n break;\n case \"caret\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.basic.Image(this.__getCaretId(this.getCollapsed())).set({\n visibility: \"excluded\"\n });\n header.addAt(control, 0);\n // Attach handler\n this.__attachToggler(control);\n break;\n }\n case \"title\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.basic.Label(this.getTitle());\n header.addAt(control, 1);\n // Attach handler\n this.__attachToggler(control);\n break;\n }\n case \"icon\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.basic.Image();\n header.addAt(control, 2);\n break;\n }\n case \"title-btns-left\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n paddingLeft: 20\n });\n header.addAt(control, 3);\n break;\n }\n case \"title-btns-right\": {\n const header = this.getChildControl(\"header\");\n header.addAt(new qx.ui.core.Spacer(), 4, {\n flex: 1\n });\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(0)).set({\n paddingRight: 8\n });\n header.addAt(control, 5);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n toggleCollapsed: function() {\n this.setCollapsed(!this.getCollapsed());\n },\n\n getTitleBar: function() {\n return this.getChildControl(\"header\");\n },\n\n getTitleLabel: function() {\n return this.getChildControl(\"title\");\n },\n\n getTitleBarBtnsContainerLeft: function() {\n return this.getChildControl(\"title-btns-left\");\n },\n\n getTitleBarBtnsContainerRight: function() {\n return this.getChildControl(\"title-btns-right\");\n },\n\n _applyCollapsed: function(collapsed) {\n if (this.getContent()) {\n this.getChildControl(\"caret\").setSource(this.__getCaretId(collapsed));\n if (collapsed) {\n this.__minHeight = this.getMinHeight();\n if (this.getContent()) {\n this.__contentMinHeight = this.getContent().getMinHeight();\n this.getContent().setMinHeight(0);\n }\n this.setMinHeight(0);\n if (this.getLayoutProperties().flex) {\n this.__layoutFlex = this.getLayoutProperties().flex;\n this.setLayoutProperties({\n flex: 0\n });\n }\n } else {\n this.setMinHeight(this.__minHeight);\n if (this.getContent()) {\n this.getContent().setMinHeight(this.__contentMinHeight);\n }\n if (this.__layoutFlex) {\n this.setLayoutProperties({\n flex: this.__layoutFlex\n });\n }\n }\n // this._innerContainer.setHeight(collapsed ? 0 : this.__containerHeight);\n this._innerContainer.setVisibility(collapsed ? \"excluded\" : \"visible\");\n }\n },\n\n _applyContent: function(content, oldContent) {\n if (this._innerContainer === null) {\n this._innerContainer = new qx.ui.container.Composite(new qx.ui.layout.Grow()).set({\n padding: 0\n });\n this._addAt(this._innerContainer, 1, {\n flex: 1\n });\n\n this._innerContainer.addListener(\"changeHeight\", e => {\n const height = e.getOldData();\n if (height != 0) {\n this.__containerHeight = height;\n }\n }, this);\n\n content.addListenerOnce(\"appear\", () => {\n content.getContentElement().getDomElement().style.transform = \"translateZ(0)\";\n });\n }\n\n this._innerContainer.removeAll();\n this._innerContainer.add(content);\n this._innerContainer.setHeight(this.getCollapsed() ? 0 : this.__containerHeight);\n\n const caret = this.getChildControl(\"caret\");\n if (content) {\n caret.show();\n } else {\n caret.exclude();\n }\n },\n\n getInnerContainer: function() {\n return this._innerContainer;\n },\n\n _applyCaretSize: function(size) {\n this.getChildControl(\"caret\").setSource(this.__getCaretId(this.getCollapsed()));\n },\n\n _applyTitle: function(title) {\n this.getChildControl(\"title\").setValue(title);\n },\n\n _applyIcon: function(icon) {\n this.getChildControl(\"icon\").setSource(icon);\n },\n\n __getCaretId: function(collapsed) {\n const caretSize = this.getCaretSize();\n const moreCaret = this.self().COLLAPSED_CARET;\n const lessCaret = this.self().EXPANDED_CARET;\n return collapsed ? moreCaret + caretSize : lessCaret + caretSize;\n },\n\n __attachToggler: function(control) {\n control.addListener(\"tap\", () => {\n this.toggleCollapsed();\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Display widget with a title bar and collapsible content.\n */\nqx.Class.define(\"osparc.desktop.PanelView\", {\n extend: osparc.widget.CollapsibleView,\n\n construct: function(title, content) {\n this.base(arguments, title, content);\n\n // Title bar\n this.getTitleBar().set({\n appearance: \"panelview-titlebar\"\n });\n },\n\n properties: {\n appearance: {\n init: \"panelview\",\n refine: true\n }\n },\n\n members: {\n // override\n _applyContent: function(content, oldContent) {\n this.base(arguments, content, oldContent);\n\n this.getInnerContainer().set({\n appearance: \"panelview-content\"\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.widget.NodeOptions\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(node) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n // it will become visible if children are added\n this.exclude();\n\n this.setNode(node);\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n nullable: false\n }\n },\n\n members: {\n // overridden\n _afterAddChild: function() {\n this.show();\n },\n\n buildLayout: async function() {\n const node = this.getNode();\n\n const sections = [];\n let showStartStopButton = false;\n\n // Tier Selection\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n const tierSelectionView = new osparc.node.TierSelectionView(node);\n sections.push(tierSelectionView);\n\n if (node.isDynamic()) {\n showStartStopButton = true;\n }\n }\n\n // Life Cycle\n if (\n node.isDynamic() &&\n (node.isUpdatable() || node.isDeprecated() || node.isRetired())\n ) {\n const lifeCycleView = new osparc.node.LifeCycleView(node);\n sections.push(lifeCycleView);\n\n showStartStopButton = true;\n }\n\n // Boot Options\n if (node.hasBootModes()) {\n const bootOptionsView = new osparc.node.BootOptionsView(node);\n sections.push(bootOptionsView);\n\n showStartStopButton = true;\n }\n\n // Update Resource Limits\n if (\n await osparc.data.Permissions.getInstance().checkCanDo(\"override_services_specifications\") &&\n (node.isComputational() || node.isDynamic())\n ) {\n const updateResourceLimitsView = new osparc.node.UpdateResourceLimitsView(node);\n sections.push(updateResourceLimitsView);\n\n showStartStopButton |= node.isDynamic();\n }\n\n if (showStartStopButton) {\n // Only available to dynamic services\n const instructions = new qx.ui.basic.Label(this.tr(\"To proceed with the following actions, the service needs to be Stopped.\")).set({\n font: \"text-13\",\n rich: true,\n wrap: true\n });\n this._add(instructions);\n\n const startStopButton = new osparc.node.StartStopButton();\n startStopButton.setNode(node);\n this._add(startStopButton);\n\n startStopButton.getChildControl(\"stop-button\").bind(\"visibility\", instructions, \"visibility\");\n }\n\n sections.forEach(section => this._add(section));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.Toolbar\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n\n this.set({\n paddingLeft: 6,\n paddingRight: 6,\n height: 46\n });\n\n this._buildLayout();\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"_applyStudy\",\n nullable: false\n }\n },\n\n members: {\n _buildLayout: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _applyStudy: function(study) {\n if (study) {\n this._populateNodesNavigationLayout();\n study.getUi().addListener(\"changeCurrentNodeId\", () => this._populateNodesNavigationLayout(), this);\n }\n },\n\n _populateNodesNavigationLayout: function() {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.SlideshowToolbar\", {\n extend: osparc.desktop.Toolbar,\n\n events: {\n \"nodeSelectionRequested\": \"qx.event.type.Data\",\n \"saveSlideshow\": \"qx.event.type.Event\",\n \"addServiceBetween\": \"qx.event.type.Data\",\n \"removeNode\": \"qx.event.type.Data\",\n \"showNode\": \"qx.event.type.Data\",\n \"hideNode\": \"qx.event.type.Data\",\n \"slidesStop\": \"qx.event.type.Event\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"edit-slideshow-buttons\": {\n control = new qx.ui.container.Stack();\n const editBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/edit/14\").set({\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,\n toolTipText: this.tr(\"Edit App Mode\"),\n visibility: osparc.data.Permissions.getInstance().canDo(\"study.slides.edit\") ? \"visible\" : \"excluded\"\n });\n editBtn.editing = false;\n const saveBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/check/14\").set({\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,\n toolTipText: this.tr(\"Save App Mode\")\n });\n saveBtn.editing = true;\n editBtn.addListener(\"execute\", () => {\n this.getChildControl(\"breadcrumbs-scroll\").exclude();\n this.getChildControl(\"breadcrumbs-scroll-edit\").show();\n control.setSelection([saveBtn]);\n }, this);\n saveBtn.addListener(\"execute\", () => {\n this.getChildControl(\"breadcrumbs-scroll\").show();\n this.getChildControl(\"breadcrumbs-scroll-edit\").exclude();\n control.setSelection([editBtn]);\n this.fireEvent(\"saveSlideshow\");\n }, this);\n control.add(editBtn);\n control.add(saveBtn);\n control.setSelection([editBtn]);\n this._add(control);\n break;\n }\n case \"breadcrumbs-scroll\":\n control = new qx.ui.container.SlideBar().set({\n maxHeight: 32,\n allowGrowX: false\n });\n [\n control.getChildControl(\"button-backward\"),\n control.getChildControl(\"button-forward\")\n ].forEach(btn => {\n btn.set({\n marginLeft: 5,\n marginRight: 5,\n icon: \"@FontAwesome5Solid/ellipsis-h/24\",\n backgroundColor: \"transparent\"\n });\n });\n control.setLayout(new qx.ui.layout.HBox());\n this._add(control, {\n flex: 1\n });\n break;\n case \"breadcrumbs-navigation\": {\n control = new osparc.navigation.BreadcrumbsSlideshow();\n osparc.utils.Utils.setIdToWidget(control, \"appModeButtons\");\n control.addListener(\"nodeSelectionRequested\", e => this.fireDataEvent(\"nodeSelectionRequested\", e.getData()), this);\n const scroll = this.getChildControl(\"breadcrumbs-scroll\");\n scroll.add(control);\n break;\n }\n case \"breadcrumbs-scroll-edit\":\n control = new qx.ui.container.Scroll();\n this._add(control, {\n flex: 1\n });\n break;\n case \"breadcrumbs-navigation-edit\": {\n control = new osparc.navigation.BreadcrumbsSlideshowEdit();\n [\n \"addServiceBetween\",\n \"removeNode\",\n \"showNode\",\n \"hideNode\"\n ].forEach(eventName => {\n control.addListener(eventName, e => {\n this.fireDataEvent(eventName, e.getData());\n });\n });\n const scroll = this.getChildControl(\"breadcrumbs-scroll-edit\");\n scroll.add(control);\n break;\n }\n case \"stop-slideshow\":\n control = new qx.ui.form.Button().set({\n appearance: \"form-button-outlined\",\n label: this.tr(\"App Mode\"),\n toolTipText: this.tr(\"Stop App Mode\"),\n icon: \"@FontAwesome5Solid/stop/14\",\n alignY: \"middle\",\n marginRight: 10,\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,\n visibility: osparc.data.Permissions.getInstance().canDo(\"study.slides.stop\") ? \"visible\" : \"excluded\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"slidesStop\"));\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n // overridden\n _buildLayout: function() {\n const spacerLeft = new qx.ui.core.Spacer(); // match \"stop-slideshow\" to keep breadcrumbs centered\n this._add(spacerLeft);\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n this.getChildControl(\"edit-slideshow-buttons\");\n this.getChildControl(\"breadcrumbs-navigation\");\n this.getChildControl(\"breadcrumbs-navigation-edit\");\n\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const stopSlideshowButton = this.getChildControl(\"stop-slideshow\");\n stopSlideshowButton.bind(\"visibility\", spacerLeft, \"width\", {\n converter: visible => visible ? 120 : 0\n });\n },\n\n // overridden\n _populateNodesNavigationLayout: function() {\n const study = this.getStudy();\n if (study) {\n const editSlideshowButtons = this.getChildControl(\"edit-slideshow-buttons\");\n osparc.data.model.Study.canIWrite(study.getAccessRights()) && osparc.data.Permissions.getInstance().canDo(\"study.slides.edit\") ? editSlideshowButtons.show() : editSlideshowButtons.exclude();\n if (!study.getWorkbench().isPipelineLinear()) {\n editSlideshowButtons.exclude();\n }\n\n const nodeIds = study.getUi().getSlideshow().getSortedNodeIds();\n this.getChildControl(\"breadcrumbs-navigation\").populateButtons(nodeIds);\n this.getChildControl(\"breadcrumbs-navigation-edit\").populateButtons(study);\n this.__evalButtonsIfEditing();\n }\n },\n\n populateButtons: function(start = false) {\n this._populateNodesNavigationLayout();\n if (start) {\n const editSlideshowButtons = this.getChildControl(\"edit-slideshow-buttons\");\n const currentModeBtn = editSlideshowButtons.getSelection()[0];\n if (\"editing\" in currentModeBtn && currentModeBtn[\"editing\"]) {\n currentModeBtn.execute();\n }\n }\n },\n\n __evalButtonsIfEditing: function() {\n const editSlideshowButtons = this.getChildControl(\"edit-slideshow-buttons\");\n const currentModeBtn = editSlideshowButtons.getSelection()[0];\n if (\"editing\" in currentModeBtn && currentModeBtn[\"editing\"]) {\n this.getChildControl(\"breadcrumbs-scroll\").exclude();\n this.getChildControl(\"breadcrumbs-scroll-edit\").show();\n } else {\n this.getChildControl(\"breadcrumbs-scroll\").show();\n this.getChildControl(\"breadcrumbs-scroll-edit\").exclude();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.navigation.PrevNextButtons\", {\n extend: qx.core.Object,\n\n construct: function() {\n this.base(arguments);\n\n this.__createButtons();\n },\n\n events: {\n \"nodeSelected\": \"qx.event.type.Data\",\n \"runPressed\": \"qx.event.type.Data\"\n },\n\n statics: {\n BUTTON_OPTIONS: {\n backgroundColor: \"background-main-1\",\n allowGrowX: false,\n allowGrowY: false\n },\n\n PREV_BUTTON: \"@FontAwesome5Solid/arrow-left/32\",\n NEXT_BUTTON: \"@FontAwesome5Solid/arrow-right/32\",\n RUN_BUTTON: \"@FontAwesome5Solid/play/32\",\n BUSY_BUTTON: \"@FontAwesome5Solid/circle-notch/32\",\n SELECT_FILE_BUTTON: \"@FontAwesome5Solid/file-medical/32\"\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"__applyStudy\",\n nullable: false\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n apply: \"__applyNode\",\n nullable: false\n }\n },\n\n members: {\n __prvsBtn: null,\n __nextBtn: null,\n __runBtn: null,\n\n getPreviousButton: function() {\n return this.__prvsBtn;\n },\n\n getNextButton: function() {\n return this.__nextBtn;\n },\n\n getRunButton: function() {\n return this.__runBtn;\n },\n\n __createButtons: function() {\n const prvsBtn = this.__prvsBtn = new qx.ui.form.Button().set({\n toolTipText: qx.locale.Manager.tr(\"Previous\"),\n icon: this.self().PREV_BUTTON,\n ...this.self().BUTTON_OPTIONS\n });\n osparc.utils.Utils.setIdToWidget(prvsBtn, \"AppMode_PreviousBtn\");\n prvsBtn.addListener(\"execute\", () => this.__prevPressed(), this);\n\n const nextBtn = this.__nextBtn = new qx.ui.form.Button().set({\n toolTipText: qx.locale.Manager.tr(\"Next\"),\n icon: this.self().NEXT_BUTTON,\n ...this.self().BUTTON_OPTIONS\n });\n osparc.utils.Utils.setIdToWidget(nextBtn, \"AppMode_NextBtn\");\n nextBtn.addListener(\"execute\", () => this.__nextPressed(), this);\n\n const runBtn = this.__runBtn = new qx.ui.form.Button().set({\n toolTipText: qx.locale.Manager.tr(\"Run\"),\n icon: this.self().RUN_BUTTON,\n ...this.self().BUTTON_OPTIONS\n });\n osparc.utils.Utils.setIdToWidget(runBtn, \"AppMode_RunBtn\");\n runBtn.addListener(\"execute\", () => this.__runPressed(), this);\n },\n\n __applyStudy: function(study) {\n this.__updatePrevNextButtons();\n study.getUi().addListener(\"changeCurrentNodeId\", () => this.__updatePrevNextButtons(), this);\n },\n\n __applyNode: function(node) {\n this.__updatePrevNextButtons();\n node.getStatus().addListener(\"changeRunning\", () => this.__updatePrevNextButtons(), this);\n node.getStatus().addListener(\"changeOutput\", () => this.__updatePrevNextButtons(), this);\n },\n\n __updatePrevNextButtons: function() {\n const studyUI = this.getStudy().getUi();\n const currentNodeId = studyUI.getCurrentNodeId();\n const nodesIds = studyUI.getSlideshow().getSortedNodeIds();\n const currentIdx = nodesIds.indexOf(currentNodeId);\n const isFirst = currentIdx === 0;\n const isLast = currentIdx === nodesIds.length-1;\n\n this.__prvsBtn.setEnabled(!isFirst);\n\n const currentNode = this.getStudy().getWorkbench().getNode(nodesIds[currentIdx]);\n this.__nextBtn.show();\n this.__runBtn.exclude();\n if (currentNode) {\n const currentNodeStatusOutput = currentNode.getStatus().getOutput();\n if ([\"busy\"].includes(currentNodeStatusOutput)) {\n this.__updateNextButtonState(\"busy\");\n } else if (currentNode.isFilePicker() && [\"not-available\"].includes(currentNodeStatusOutput)) {\n this.__updateNextButtonState(\"select-file\");\n } else if (currentNode.isComputational() && [\"not-available\", \"out-of-date\"].includes(currentNodeStatusOutput)) {\n this.__nextBtn.exclude();\n this.__runBtn.show();\n } else {\n this.__updateNextButtonState(\"ready\");\n this.__nextBtn.setEnabled(!isLast);\n }\n } else {\n this.__updateNextButtonState(\"ready\");\n }\n },\n\n /*\n * @param state {String} \"ready\"|\"busy\"|\"run\"|\"select-file\"\n */\n __updateNextButtonState: function(state) {\n let icon = \"\";\n let toolTipText = \"\";\n let textColor = \"text\";\n let animate = false;\n let enabled = true;\n switch (state) {\n case \"select-file\":\n icon = this.self().SELECT_FILE_BUTTON;\n toolTipText = qx.locale.Manager.tr(\"Select File\");\n enabled = false;\n break;\n case \"busy\":\n icon = this.self().BUSY_BUTTON;\n toolTipText = qx.locale.Manager.tr(\"Running\");\n textColor = \"busy-orange\";\n animate = true;\n enabled = false;\n break;\n default:\n icon = this.self().NEXT_BUTTON;\n toolTipText = qx.locale.Manager.tr(\"Next\");\n break;\n }\n if (this.__nextBtn) {\n this.__nextBtn.set({\n icon,\n toolTipText,\n textColor,\n enabled\n });\n // Hack: Show tooltip if button is disabled\n if (enabled) {\n this.__nextBtn.getContentElement().removeAttribute(\"title\");\n } else {\n this.__nextBtn.getContentElement().setAttribute(\"title\", toolTipText);\n }\n const btnIcon = this.__nextBtn.getChildControl(\"icon\").getContentElement();\n if (animate) {\n osparc.utils.Utils.addClass(btnIcon, \"rotate\");\n } else {\n osparc.utils.Utils.removeClass(btnIcon, \"rotate\");\n }\n }\n },\n\n __prevPressed: function() {\n const studyUI = this.getStudy().getUi();\n const currentNodeId = studyUI.getCurrentNodeId();\n const nodesIds = studyUI.getSlideshow().getSortedNodeIds();\n const currentIdx = nodesIds.indexOf(currentNodeId);\n\n this.fireDataEvent(\"nodeSelected\", nodesIds[currentIdx-1]);\n },\n\n __nextPressed: function() {\n const studyUI = this.getStudy().getUi();\n const currentNodeId = studyUI.getCurrentNodeId();\n const nodesIds = studyUI.getSlideshow().getSortedNodeIds();\n const currentIdx = nodesIds.indexOf(currentNodeId);\n\n this.fireDataEvent(\"nodeSelected\", nodesIds[currentIdx+1]);\n },\n\n __runPressed: function() {\n const nodeId = this.getNode().getNodeId();\n this.fireDataEvent(\"runPressed\", nodeId);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * In order to keep Node's Status separated from its more static data,\n * this class stores it.\n */\n\nqx.Class.define(\"osparc.data.model.NodeStatus\", {\n extend: qx.core.Object,\n\n construct: function(node) {\n this.base(arguments);\n\n this.setNode(node);\n\n if (node.isDynamic()) {\n const progressSequence = new osparc.data.model.NodeProgressSequence();\n this.setProgressSequence(progressSequence);\n }\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false\n },\n\n progress: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeProgress\",\n transform: \"__transformProgress\"\n },\n\n progressSequence: {\n check: \"osparc.data.model.NodeProgressSequence\",\n nullable: true,\n init: null\n },\n\n running: {\n check: [\"UNKNOWN\", \"NOT_STARTED\", \"PUBLISHED\", \"PENDING\", \"WAITING_FOR_RESOURCES\", \"WAITING_FOR_CLUSTER\", \"STARTED\", \"RETRY\", \"SUCCESS\", \"FAILED\", \"ABORTED\"],\n nullable: true,\n init: null,\n event: \"changeRunning\",\n apply: \"__applyRunning\"\n },\n\n interactive: {\n check: [\"idle\", \"starting\", \"stopping\", \"pulling\", \"pending\", \"connecting\", \"ready\", \"failed\", \"deprecated\", \"retired\"],\n nullable: true,\n init: null,\n event: \"changeInteractive\",\n apply: \"__applyInteractive\"\n },\n\n dependencies: {\n check: \"Array\",\n nullable: true,\n init: null,\n event: \"changeDependencies\",\n apply: \"__recomputeOutput\"\n },\n\n modified: {\n check: \"Boolean\",\n nullable: true,\n init: null,\n event: \"changeModified\",\n apply: \"__recomputeOutput\"\n },\n\n output: {\n check: [\"not-available\", \"busy\", \"up-to-date\", \"out-of-date\"],\n nullable: false,\n init: \"not-available\",\n event: \"changeOutput\"\n },\n\n hasOutputs: {\n check: \"Boolean\",\n init: false\n }\n },\n\n statics: {\n getValidProgress: function(value) {\n if (value !== null && !Number.isNaN(value) && value >= 0 && value <= 100) {\n return Number.parseFloat(value.toFixed(4));\n }\n return 0;\n },\n\n isCompNodeReady: function(node) {\n if (node && node.isComputational()) {\n return node.getStatus().getRunning() === \"SUCCESS\" && node.getStatus().getOutput() === \"up-to-date\";\n }\n return true;\n },\n\n isComputationalRunning(node) {\n if (node && node.isComputational()) {\n return [\"PUBLISHED\", \"WAITING_FOR_CLUSTER\", \"PENDING\", \"WAITING_FOR_RESOURCES\", \"STARTED\"].includes(node.getStatus().getRunning());\n }\n return false;\n },\n\n doesCompNodeNeedRun: function(node) {\n if (node && node.isComputational()) {\n return (\n [\n \"UNKNOWN\",\n \"NOT_STARTED\",\n \"FAILED\",\n \"ABORTED\"\n ].includes(node.getStatus().getRunning()) ||\n [\n \"not-available\",\n \"out-of-date\"\n ].includes(node.getStatus().getOutput())\n );\n }\n return false;\n }\n },\n\n members: {\n __transformProgress: function(value) {\n const oldP = this.getProgress();\n if (this.getNode().isFilePicker() && oldP === 100 && value !== 0 && value !== 100) {\n // a NodeUpdated backend message could override the progress with an older value\n value = 100;\n }\n return value;\n },\n\n hasDependencies: function() {\n const dependencies = this.getDependencies();\n return !!(dependencies && dependencies.length);\n },\n\n __applyRunning: function(value) {\n if (value === \"FAILED\") {\n // ask why it failed\n }\n this.__recomputeOutput();\n },\n\n __applyInteractive: function(value) {\n if (value === \"failed\") {\n this.getProgressSequence().resetSequence();\n }\n },\n\n __recomputeOutput: function() {\n const compRunning = this.getRunning();\n const hasOutputs = this.getHasOutputs();\n const modified = this.getModified();\n const hasDependencies = this.hasDependencies();\n if ([\"PUBLISHED\", \"PENDING\", \"WAITING_FOR_RESOURCES\", \"WAITING_FOR_CLUSTER\", \"STARTED\"].includes(compRunning)) {\n this.setOutput(\"busy\");\n } else if ([null, false].includes(hasOutputs)) {\n this.setOutput(\"not-available\");\n } else if (hasOutputs && (modified || hasDependencies)) {\n this.setOutput(\"out-of-date\");\n } else if (hasOutputs && !modified) {\n this.setOutput(\"up-to-date\");\n } else {\n console.error(\"Unknown output state\");\n }\n },\n\n setState: function(state) {\n if (state === undefined || state === null) {\n return;\n }\n if (\"dependencies\" in state) {\n this.setDependencies(state.dependencies);\n }\n if (\"currentStatus\" in state && this.getNode().isComputational()) {\n // currentStatus is only applicable to computational services\n this.setRunning(state.currentStatus);\n }\n if (\"modified\" in state) {\n if (this.getHasOutputs()) {\n // File Picker can't have a modified output\n this.setModified((state.modified || this.hasDependencies()) && !this.getNode().isFilePicker());\n } else {\n this.setModified(null);\n }\n }\n },\n\n serialize: function() {\n const state = {};\n state[\"dependencies\"] = this.getDependencies() ? this.getDependencies() : [];\n if (this.getNode().isComputational()) {\n state[\"currentStatus\"] = this.getRunning();\n }\n state[\"modified\"] = null;\n // File Picker can't have a modified output\n if (this.getHasOutputs() && !this.getNode().isFilePicker()) {\n state[\"modified\"] = this.hasDependencies();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.node.slideshow.BaseNodeView\", {\n extend: qx.ui.splitpane.Pane,\n type: \"abstract\",\n\n construct: function() {\n this.base(arguments, \"vertical\");\n\n this.setOffset(2);\n osparc.desktop.WorkbenchView.decorateSplitter(this.getChildControl(\"splitter\"));\n osparc.desktop.WorkbenchView.decorateSlider(this.getChildControl(\"slider\"));\n\n this.__buildLayout();\n\n this.set({\n paddingBottom: 2\n });\n },\n\n statics: {\n HEADER_HEIGHT: 32,\n\n createSettingsGroupBox: function(label) {\n const settingsGroupBox = new qx.ui.groupbox.GroupBox(label).set({\n appearance: \"settings-groupbox\",\n maxWidth: 800,\n alignX: \"center\",\n layout: new qx.ui.layout.VBox(10)\n });\n return settingsGroupBox;\n }\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n apply: \"__applyNode\",\n nullable: true,\n init: null\n }\n },\n\n events: {\n \"startPartialPipeline\": \"qx.event.type.Data\",\n \"stopPipeline\": \"qx.event.type.Event\"\n },\n\n members: {\n __header: null,\n __inputsButton: null,\n __preparingInputs: null,\n __instructionsBtn: null,\n __instructionsWindow: null,\n __nodeStartButton: null,\n __nodeStopButton: null,\n __nodeStatusUI: null,\n _mainView: null,\n _settingsLayout: null,\n _iFrameLayout: null,\n _outputsLayout: null,\n __progressBar: null,\n\n __buildLayout: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(0));\n\n const header = this.__header = this.__buildHeader();\n layout.add(header);\n\n const mainView = this.__buildMainView();\n layout.add(mainView, {\n flex: 1\n });\n\n const progressBar = this.__progressBar = new qx.ui.core.Widget().set({\n visibility: \"excluded\",\n allowGrowX: true,\n height: 6\n });\n layout.add(progressBar);\n\n this.add(layout, 1);\n },\n\n __buildHeader: function() {\n const header = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n })).set({\n padding: 6,\n paddingTop: 0,\n height: this.self().HEADER_HEIGHT\n });\n\n\n const inputsStateBtn = this.__inputsButton = new qx.ui.form.Button().set({\n width: 110,\n label: this.tr(\"Inputs\"),\n icon: \"@FontAwesome5Solid/sign-in-alt/14\",\n backgroundColor: \"background-main-4\"\n });\n inputsStateBtn.addListener(\"execute\", () => this.showPreparingInputs(), this);\n header.add(inputsStateBtn);\n\n header.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const infoBtn = new qx.ui.form.Button(null, \"@MaterialIcons/info_outline/17\").set({\n padding: 3,\n backgroundColor: \"transparent\",\n toolTipText: this.tr(\"Service Information\")\n });\n infoBtn.addListener(\"execute\", () => this.__openServiceDetails(), this);\n header.add(infoBtn);\n\n const instructionsBtn = this.__instructionsBtn = new qx.ui.form.Button(this.tr(\"Instructions\"), \"@FontAwesome5Solid/book/17\").set({\n backgroundColor: \"background-main-3\"\n });\n instructionsBtn.addListener(\"appear\", () => this.__openInstructions(), this);\n instructionsBtn.addListener(\"execute\", () => this.__openInstructions(), this);\n header.add(instructionsBtn);\n\n const startBtn = this.__nodeStartButton = new qx.ui.form.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/14\",\n backgroundColor: \"background-main-4\",\n visibility: \"excluded\"\n });\n header.add(startBtn);\n\n const stopBtn = this.__nodeStopButton = new qx.ui.form.Button().set({\n label: this.tr(\"Stop\"),\n icon: \"@FontAwesome5Solid/stop/14\",\n backgroundColor: \"background-main-4\",\n visibility: \"excluded\"\n });\n header.add(stopBtn);\n\n const nodeStatusUI = this.__nodeStatusUI = new osparc.ui.basic.NodeStatusUI().set({\n backgroundColor: \"background-main-4\"\n });\n nodeStatusUI.getChildControl(\"label\").setFont(\"text-14\");\n header.add(nodeStatusUI);\n\n header.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const outputsBtn = this._outputsBtn = new qx.ui.form.ToggleButton().set({\n width: 110,\n label: this.tr(\"Outputs\"),\n icon: \"@FontAwesome5Solid/sign-out-alt/14\",\n backgroundColor: \"background-main-4\"\n });\n osparc.utils.Utils.setIdToWidget(outputsBtn, \"outputsBtn\");\n header.add(outputsBtn);\n\n return header;\n },\n\n __buildMainView: function() {\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const mainView = this._mainView = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n\n const settingsBox = this._settingsLayout = this.self().createSettingsGroupBox(this.tr(\"Settings\"));\n mainView.bind(\"backgroundColor\", settingsBox, \"backgroundColor\");\n mainView.bind(\"backgroundColor\", settingsBox.getChildControl(\"frame\"), \"backgroundColor\");\n\n this._iFrameLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n\n hBox.add(mainView, {\n flex: 1\n });\n\n const outputsLayout = this._outputsLayout = this.self().createSettingsGroupBox(this.tr(\"Outputs\")).set({\n padding: 4,\n width: 280\n });\n mainView.bind(\"backgroundColor\", outputsLayout, \"backgroundColor\");\n mainView.bind(\"backgroundColor\", outputsLayout.getChildControl(\"frame\"), \"backgroundColor\");\n this._outputsBtn.bind(\"value\", outputsLayout, \"visibility\", {\n converter: value => value ? \"visible\" : \"excluded\"\n });\n hBox.add(outputsLayout);\n\n return hBox;\n },\n\n showPreparingInputs: function() {\n const title = this.tr(\"Preparing Inputs\");\n const width = 650;\n const height = 600;\n const win = osparc.ui.window.Window.popUpInWindow(this.__preparingInputs, title, width, height);\n const closeBtn = win.getChildControl(\"close-button\");\n osparc.utils.Utils.setIdToWidget(closeBtn, \"preparingInputsCloseBtn\");\n },\n\n __openServiceDetails: function() {\n const node = this.getNode();\n const metadata = node.getMetaData();\n const serviceDetails = new osparc.info.ServiceLarge(metadata, {\n nodeId: node.getNodeId(),\n label: node.getLabel(),\n studyId: node.getStudy().getUuid()\n });\n osparc.info.ServiceLarge.popUpInWindow(serviceDetails);\n },\n\n __openInstructions: function() {\n if (this.getInstructionsWindow()) {\n this.getInstructionsWindow().center();\n return;\n }\n const desc = this.getNode().getSlideshowInstructions();\n if (desc) {\n const markdownInstructions = new osparc.ui.markdown.Markdown().set({\n value: desc,\n padding: 3,\n font: \"text-14\"\n });\n const title = this.tr(\"Instructions\") + \" - \" + this.getNode().getLabel();\n const width = 600;\n const minHeight = 200;\n const win = this.__instructionsWindow = osparc.ui.window.Window.popUpInWindow(markdownInstructions, title, width, minHeight).set({\n modal: false,\n clickAwayClose: false\n });\n markdownInstructions.addListener(\"resized\", () => win.center());\n\n win.getContentElement().setStyles({\n \"border-color\": qx.theme.manager.Color.getInstance().resolve(\"strong-main\")\n });\n win.addListener(\"close\", () => {\n this.__instructionsWindow = null;\n osparc.utils.Utils.makeButtonBlink(this.__instructionsBtn, 2);\n }, this);\n }\n },\n\n getInstructionsWindow: function() {\n return this.__instructionsWindow;\n },\n\n getHeaderLayout: function() {\n return this.__header;\n },\n\n getOutputsButton: function() {\n return this._outputsBtn;\n },\n\n getMainView: function() {\n return this._mainView;\n },\n\n getSettingsLayout: function() {\n return this._settingsLayout;\n },\n\n /**\n * @abstract\n */\n isSettingsGroupShowable: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n /**\n * @abstract\n */\n _addSettings: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n /**\n * @abstract\n */\n _addIFrame: function() {\n throw new Error(\"Abstract method called!\");\n },\n\n _addOutputs: function() {\n return;\n },\n\n _addLogger: function() {\n return;\n },\n\n __areInputsReady: function() {\n const wb = this.getNode().getStudy().getWorkbench();\n const upstreamNodeIds = wb.getUpstreamCompNodes(this.getNode(), false);\n for (let i=0; i this.showPreparingInputs());\n this._iFrameLayout.tapListenerId = tapListenerId;\n }\n },\n\n setUpstreamDependencies: function(upstreamDependencies) {\n this.__inputsButton.setVisibility(upstreamDependencies.length > 0 ? \"visible\" : \"hidden\");\n const monitoredNodes = [];\n const workbench = this.getNode().getStudy().getWorkbench();\n upstreamDependencies.forEach(nodeId => monitoredNodes.push(workbench.getNode(nodeId)));\n this.__preparingInputs.setMonitoredNodes(monitoredNodes);\n },\n\n __dependenciesChanged: function() {\n const preparingNodes = this.__preparingInputs.getPreparingNodes();\n const waiting = Boolean(preparingNodes && preparingNodes.length);\n const buttonsIcon = this.__inputsButton.getChildControl(\"icon\");\n if (waiting) {\n this.__inputsButton.setIcon(\"@FontAwesome5Solid/circle-notch/14\");\n } else {\n this.__inputsButton.setIcon(\"@FontAwesome5Solid/sign-in-alt/14\");\n }\n osparc.service.StatusUI.updateCircleAnimation(buttonsIcon);\n this.__enableIframeContent(!waiting);\n },\n\n __applyNode: function(node) {\n if (this.__nodeStatusUI) {\n this.__nodeStatusUI.setNode(node);\n }\n\n if (node.isDynamic()) {\n node.attachHandlersToStartButton(this.__nodeStartButton);\n osparc.utils.Utils.setIdToWidget(this.__nodeStartButton, \"Start_\"+node.getNodeId());\n node.attachHandlersToStopButton(this.__nodeStopButton);\n }\n\n this.__preparingInputs = new osparc.widget.PreparingInputs(node.getStudy());\n this.__preparingInputs.addListener(\"changePreparingNodes\", () => this.__dependenciesChanged());\n this.__preparingInputs.addListener(\"startPartialPipeline\", e => this.fireDataEvent(\"startPartialPipeline\", e.getData()));\n this.__preparingInputs.addListener(\"stopPipeline\", () => this.fireEvent(\"stopPipeline\"));\n this.__dependenciesChanged();\n\n this.__instructionsBtn.setVisibility(node.getSlideshowInstructions() ? \"visible\" : \"excluded\");\n\n this._mainView.removeAll();\n this._addSettings();\n this._addIFrame();\n this._addOutputs();\n\n if (this.__progressBar) {\n const updateProgress = () => {\n const running = node.getStatus().getRunning();\n const progress = node.getStatus().getProgress();\n if ([\"PUBLISHED\", \"PENDING\", \"WAITING_FOR_RESOURCES\", \"WAITING_FOR_CLUSTER\"].includes(running) ||\n ([\"STARTED\"].includes(running) && progress === 0)) {\n this.__progressBar.setBackgroundColor(\"busy-orange\");\n this.__progressBar.getContentElement().setStyles({\n width: \"100%\"\n });\n } else if ([\"FAILED\", \"ABORTED\"].includes(running)) {\n this.__progressBar.setBackgroundColor(\"failed-red\");\n this.__progressBar.getContentElement().setStyles({\n width: \"100%\"\n });\n } else if ([\"SUCCESS\"].includes(running)) {\n this.__progressBar.setBackgroundColor(\"ready-green\");\n this.__progressBar.getContentElement().setStyles({\n width: progress + \"%\"\n });\n } else {\n this.__progressBar.setBackgroundColor(\"transparent\");\n this.__progressBar.getContentElement().setStyles({\n width: \"100%\"\n });\n }\n };\n this.__progressBar.setVisibility(node.isComputational() ? \"visible\" : \"excluded\");\n updateProgress();\n node.getStatus().addListener(\"changeRunning\", () => updateProgress(), this);\n node.getStatus().addListener(\"changeProgress\", () => updateProgress(), this);\n }\n\n node.bind(\"outputs\", this._outputsBtn, \"label\", {\n converter: outputsData => {\n let outputCounter = 0;\n Object.keys(outputsData).forEach(outKey => {\n const outValue = osparc.data.model.Node.getOutput(outputsData, outKey);\n if (![null, undefined, \"\"].includes(outValue)) {\n outputCounter++;\n }\n });\n return this.tr(\"Outputs\") + ` (${outputCounter})`;\n }\n });\n this._outputsBtn.addListener(\"changeLabel\", () => osparc.utils.Utils.makeButtonBlink(this._outputsBtn, 2));\n\n this._addLogger();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.node.slideshow.FilePickerView\", {\n extend: osparc.node.slideshow.BaseNodeView,\n\n events: {\n \"itemSelected\": \"qx.event.type.Event\"\n },\n\n members: {\n // overridden\n isSettingsGroupShowable: function() {\n return false;\n },\n\n // overridden\n _addSettings: function() {\n return;\n },\n\n // overridden\n _addIFrame: function() {\n this.__buildMyLayout();\n },\n\n // overridden\n _applyNode: function(node) {\n if (!node.isFilePicker()) {\n console.error(\"Only file picker nodes are supported\");\n }\n this.base(arguments, node);\n },\n\n __buildMyLayout: function() {\n const node = this.getNode();\n if (!node) {\n return;\n }\n\n const filePicker = new osparc.file.FilePicker(node, \"app\");\n filePicker.addListener(\"itemSelected\", () => {\n this.fireEvent(\"itemSelected\");\n // eslint-disable-next-line no-underscore-dangle\n filePicker.__buildLayout();\n });\n [\n \"itemReset\",\n \"fileUploaded\"\n // eslint-disable-next-line no-underscore-dangle\n ].forEach(ev => filePicker.addListener(ev, () => filePicker.__buildLayout()));\n\n this._mainView.add(filePicker, {\n flex: 1\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that displays the main view of a node.\n * - On the left side shows the default inputs if any and also what the input nodes offer\n * - In the center the content of the node: settings, mapper, iframe...\n *\n * When a node is set the layout is built\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let nodeView = new osparc.node.slideshow.NodeView();\n * nodeView.setNode(workbench.getNode1());\n * this.getRoot().add(nodeView);\n *
\n */\n\nqx.Class.define(\"osparc.node.slideshow.NodeView\", {\n extend: osparc.node.slideshow.BaseNodeView,\n\n statics: {\n LOGGER_HEIGHT: 28,\n },\n\n members: {\n __loggerPanel: null,\n\n // overridden\n _addSettings: function() {\n this._settingsLayout.removeAll();\n\n const node = this.getNode();\n const propsForm = node.getPropsForm();\n if (propsForm && node.hasInputs()) {\n propsForm.addListener(\"changeChildVisibility\", () => this.__checkSettingsVisibility(), this);\n this._settingsLayout.add(propsForm);\n }\n this.__checkSettingsVisibility();\n\n this._mainView.add(this._settingsLayout);\n },\n\n // overridden\n _addIFrame: function() {\n this._iFrameLayout.removeAll();\n\n const loadingPage = this.getNode().getLoadingPage();\n const iFrame = this.getNode().getIFrame();\n if (loadingPage && iFrame) {\n const node = this.getNode();\n node.getIframeHandler().addListener(\"iframeChanged\", () => this.__iFrameChanged(), this);\n iFrame.addListener(\"load\", () => this.__iFrameChanged());\n this.__iFrameChanged();\n } else {\n // This will keep what comes after at the bottom\n this._iFrameLayout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n }\n\n this._mainView.add(this._iFrameLayout, {\n flex: 1\n });\n },\n\n // overridden\n _addOutputs: function() {\n this._outputsLayout.removeAll();\n\n const node = this.getNode();\n const outputsForm = node.getOutputsForm();\n if (node.hasOutputs() && outputsForm) {\n this._mainView.bind(\"backgroundColor\", outputsForm, \"backgroundColor\");\n this._outputsLayout.add(outputsForm);\n }\n\n this._outputsBtn.set({\n value: false,\n enabled: this.getNode().hasOutputs() > 0\n });\n },\n\n // overridden\n _addLogger: function() {\n const loggerView = this.getNode().getLogger();\n loggerView.getChildControl(\"pin-node\").exclude();\n const loggerPanel = this.__loggerPanel = new osparc.desktop.PanelView(this.tr(\"Logger\"), loggerView).set({\n padding: 3,\n minHeight: this.self().LOGGER_HEIGHT-1,\n collapsed: true\n });\n loggerPanel.bind(\"collapsed\", loggerPanel, \"maxHeight\", {\n converter: collapsed => collapsed ? this.self().LOGGER_HEIGHT : null\n });\n this.add(loggerPanel, 0);\n },\n\n getLoggerPanel: function() {\n return this.__loggerPanel;\n },\n\n // overridden\n _applyNode: function(node) {\n this.base(arguments, node);\n },\n\n __checkSettingsVisibility: function() {\n const isSettingsGroupShowable = this.isSettingsGroupShowable();\n this._settingsLayout.setVisibility(isSettingsGroupShowable ? \"visible\" : \"excluded\");\n },\n\n isSettingsGroupShowable: function() {\n // do not show Settings in App Mode\n return false;\n },\n\n __iFrameChanged: function() {\n this._iFrameLayout.removeAll();\n\n const node = this.getNode();\n if (node && node.getIFrame()) {\n const loadingPage = node.getLoadingPage();\n const iFrame = node.getIFrame();\n const src = iFrame.getSource();\n const iFrameView = (src === null || src === \"about:blank\") ? loadingPage : iFrame;\n this._iFrameLayout.add(iFrameView, {\n flex: 1\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Window that shows a list of filter as you type services. For the selected service, below the list\n * a dropdown menu is populated with al the available versions of the selection (by default latest\n * is selected).\n *\n * When the user really selects the service an \"addService\" data event is fired.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let srvCat = new osparc.workbench.ServiceCatalog();\n * srvCat.center();\n * srvCat.open();\n *
\n */\n\nqx.Class.define(\"osparc.workbench.ServiceCatalog\", {\n extend: osparc.ui.window.Window,\n\n construct: function() {\n this.base();\n\n this.set({\n autoDestroy: true,\n caption: this.tr(\"Service catalog\"),\n showMinimize: false,\n minWidth: 490,\n width: this.self().Width,\n minHeight: 400,\n height: this.self().Height,\n modal: true,\n contentPadding: 0,\n clickAwayClose: true\n });\n\n this.__sortBy = osparc.service.SortServicesButtons.DefaultSorting;\n\n const catalogLayout = new qx.ui.layout.VBox();\n this.setLayout(catalogLayout);\n\n const filterLayout = this.__createFilterLayout();\n this.add(filterLayout);\n\n const list = this.__createListLayout();\n this.add(list, {\n flex: 1\n });\n\n const btnLayout = this.__createButtonsLayout();\n this.add(btnLayout);\n\n this.__createEvents();\n\n this.__populateList();\n\n this.__attachEventHandlers();\n },\n\n events: {\n \"addService\": \"qx.event.type.Data\"\n },\n\n statics: {\n LATEST: \"latest\",\n Width: 580,\n Height: 500\n },\n\n members: {\n __servicesLatest: null,\n __filteredServicesObj: null,\n __textFilter: null,\n __contextLeftNodeId: null,\n __contextRightNodeId: null,\n __versionsBox: null,\n __infoBtn: null,\n __serviceList: null,\n __addBtn: null,\n __sortBy: null,\n\n __createFilterLayout: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n appearance: \"margined-layout\"\n });\n\n const filters = new osparc.filter.group.ServiceFilterGroup(\"serviceCatalog\").set({\n maxHeight: 30,\n });\n this.__textFilter = filters.getTextFilter().getChildControl(\"textfield\", true).set({\n minWidth: 150,\n });\n layout.add(filters);\n\n layout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const containerSortBtns = new osparc.service.SortServicesButtons();\n containerSortBtns.addListener(\"sortBy\", e => {\n this.__sortBy = e.getData();\n this.__populateList();\n }, this);\n layout.add(containerSortBtns);\n\n return layout;\n },\n\n __createListLayout: function() {\n // Services list\n this.__servicesLatest = [];\n this.__filteredServicesObj = {};\n\n const serviceList = this.__serviceList = new osparc.service.ServiceList(\"serviceCatalog\").set({\n width: 568,\n backgroundColor: \"background-main\"\n });\n const scrolledServices = new qx.ui.container.Scroll();\n scrolledServices.add(serviceList);\n\n this.__serviceList.addListener(\"changeSelected\", e => {\n if (e.getData() && e.getData().getService()) {\n const selectedService = e.getData().getService();\n this.__changedSelection(selectedService.getKey());\n } else {\n this.__changedSelection(null);\n }\n }, this);\n\n return scrolledServices;\n },\n\n __createButtonsLayout: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n appearance: \"margined-layout\"\n });\n\n const versionLabel = new qx.ui.basic.Atom(this.tr(\"Version\"));\n layout.add(versionLabel);\n const selectBox = this.__versionsBox = new qx.ui.form.SelectBox().set({\n enabled: false\n });\n layout.add(selectBox);\n const infoBtn = this.__infoBtn = new qx.ui.form.Button(null, \"@MaterialIcons/info_outline/16\").set({\n enabled: false\n });\n infoBtn.addListener(\"execute\", () => this.__showServiceDetails(), this);\n layout.add(infoBtn);\n\n layout.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const cancelBtn = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\",\n });\n cancelBtn.addListener(\"execute\", this.__onCancel, this);\n cancelBtn.setAllowGrowX(false);\n layout.add(cancelBtn);\n const addBtn = this.__addBtn = new qx.ui.form.Button(this.tr(\"Add\")).set({\n appearance: \"form-button\",\n enabled: false\n });\n addBtn.addListener(\"execute\", () => this.__onAddService(), this);\n layout.add(addBtn);\n\n return layout;\n },\n\n __createEvents: function() {\n this.__serviceList.addListener(\"serviceAdd\", e => this.__onAddService(e.getData()), this);\n },\n\n setContext: function(leftNodeId = null, rightNodeId = null) {\n this.__contextLeftNodeId = leftNodeId;\n this.__contextRightNodeId = rightNodeId;\n this.__updateList();\n },\n\n __populateList: function() {\n this.__servicesLatest = [];\n const excludeFrontend = false;\n const excludeDeprecated = true;\n osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)\n .then(servicesList => {\n this.__servicesLatest = servicesList;\n this.__updateList();\n });\n },\n\n __updateList: function() {\n osparc.filter.UIFilterController.getInstance().resetGroup(\"serviceCatalog\");\n const filteredServices = [];\n this.__servicesLatest.forEach(service => {\n if (this.__contextLeftNodeId === null && this.__contextRightNodeId === null) {\n filteredServices.push(service);\n } else {\n // filter out services that can't be connected\n const needsInputs = this.__contextLeftNodeId !== null;\n const needsOutputs = this.__contextRightNodeId !== null;\n let connectable = needsInputs ? Boolean(Object.keys(service.inputs).length) : true;\n connectable = connectable && (needsOutputs ? Boolean(Object.keys(service.outputs).length) : true);\n if (connectable) {\n filteredServices.push(service);\n }\n }\n });\n\n osparc.service.Utils.sortObjectsBasedOn(filteredServices, this.__sortBy);\n const filteredServicesObj = this.__filteredServicesObj = osparc.service.Utils.convertArrayToObject(filteredServices);\n\n const groupedServicesList = [];\n for (const key in filteredServicesObj) {\n const serviceMetadata = osparc.service.Utils.getLatest(key);\n if (serviceMetadata) {\n const service = new osparc.data.model.Service(serviceMetadata);\n groupedServicesList.push(service);\n }\n }\n\n this.__serviceList.setModel(new qx.data.Array(groupedServicesList));\n },\n\n __changedSelection: function(key) {\n if (this.__versionsBox) {\n let selectBox = this.__versionsBox;\n selectBox.removeAll();\n if (key in this.__filteredServicesObj) {\n const latest = new qx.ui.form.ListItem(this.self().LATEST);\n latest.version = this.self().LATEST;\n selectBox.add(latest);\n const versions = osparc.service.Utils.getVersions(key);\n versions.forEach(version => {\n const listItem = osparc.service.Utils.versionToListItem(key, version);\n selectBox.add(listItem);\n });\n osparc.utils.Utils.growSelectBox(selectBox, 200);\n selectBox.setSelection([latest]);\n }\n }\n if (this.__addBtn) {\n this.__addBtn.setEnabled(key !== null);\n }\n if (this.__infoBtn) {\n this.__infoBtn.setEnabled(key !== null);\n }\n if (this.__versionsBox) {\n this.__versionsBox.setEnabled(key !== null);\n }\n },\n\n __onAddService: async function(selectedService) {\n if (selectedService == null && this.__serviceList.isSelectionEmpty()) {\n return;\n }\n\n let service = selectedService;\n if (!service) {\n const serviceMetadata = await this.__getSelectedService();\n service = new osparc.data.model.Service(serviceMetadata);\n }\n const eData = {\n service,\n nodeLeftId: this.__contextLeftNodeId,\n nodeRightId: this.__contextRightNodeId\n };\n this.fireDataEvent(\"addService\", eData);\n this.close();\n },\n\n __getSelectedService: async function() {\n const selected = this.__serviceList.getSelected();\n const key = selected.getKey();\n let version = this.__versionsBox.getSelection()[0].version;\n if (version == this.self(arguments).LATEST.toString()) {\n version = this.__versionsBox.getChildrenContainer().getSelectables()[1].version;\n }\n const serviceMetadata = await osparc.store.Services.getService(key, version);\n return serviceMetadata;\n },\n\n __showServiceDetails: async function() {\n const serviceMetadata = await this.__getSelectedService();\n const serviceDetails = new osparc.info.ServiceLarge(serviceMetadata);\n osparc.info.ServiceLarge.popUpInWindow(serviceDetails);\n },\n\n __onCancel: function() {\n this.close();\n },\n\n __attachEventHandlers: function() {\n this.addListener(\"appear\", () => {\n osparc.filter.UIFilterController.getInstance().resetGroup(\"serviceCatalog\");\n this.__textFilter.focus();\n }, this);\n this.__textFilter.addListener(\"keypress\", e => {\n if (e.getKeyIdentifier() === \"Enter\") {\n this.__serviceList.selectFirstVisible();\n const selected = this.__serviceList.getSelected();\n if (selected !== null) {\n this.__onAddService(selected);\n }\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2006 STZ-IDA, Germany, http://www.stz-ida.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Til Schneider (til132)\n\n************************************************************************ */\n\n/**\n * A table model that loads its data from a backend.\n * \n * Only a subset of the available rows, those which are within or near the\n * currently visible area, are loaded. If a quick scroll operation occurs,\n * rows will soon be displayed using asynchronous loading in the background.\n * All loaded data is managed through a cache which automatically removes\n * the oldest used rows when it gets full.\n *
\n * This class is abstract: The actual loading of row data must be done by\n * subclasses.\n */\nqx.Class.define(\"qx.ui.table.model.Remote\",\n{\n type : \"abstract\",\n extend : qx.ui.table.model.Abstract,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n this._sortColumnIndex = -1;\n this._sortAscending = true;\n this._rowCount = -1;\n\n this._lruCounter = 0;\n\n // Holds the index of the first block that is currently loading.\n // Is -1 if there is currently no request on its way.\n this._firstLoadingBlock = -1;\n\n // Holds the index of the first row that should be loaded when the response of\n // the current request arrives. Is -1 we need no following request.\n this._firstRowToLoad = -1;\n\n // Counterpart to _firstRowToLoad\n this._lastRowToLoad = -1;\n\n // Holds whether the current request will bring obsolete data. When true the\n // response of the current request will be ignored.\n this._ignoreCurrentRequest = false;\n\n this._rowBlockCache = {};\n this._rowBlockCount = 0;\n\n this._sortableColArr = null;\n this._editableColArr = null;\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n\n /** The number of rows that are stored in one cache block. */\n blockSize :\n {\n check : \"Integer\",\n init : 50\n },\n\n /** The maximum number of row blocks kept in the cache. */\n maxCachedBlockCount :\n {\n check : \"Integer\",\n init : 15\n },\n\n\n /**\n * Whether to clear the cache when some rows are removed.\n * If true the rows are removed locally in the cache.\n */\n clearCacheOnRemove :\n {\n check : \"Boolean\",\n init : false\n },\n\n /**\n * Whether to block remote requests for the row count while a request for\n * the row count is pending. Row counts are requested at various times and\n * from various parts of the code, resulting in numerous requests to the\n * user-provided _loadRowCount() method, often while other requests are\n * already pending. The default behavior now ignores requests to load a\n * new row count if such a request is already pending. It is therefore now\n * conceivable that the row count changes between an initial request for\n * the row count and a later (ignored) request. Since the chance of this\n * is low, the desirability of reducing the server requests outweighs the\n * slight possibility of an altered count (which will, by the way, be\n * detected soon thereafter upon the next request for the row count). If\n * the old behavior is desired, set this property to false.\n */\n blockConcurrentLoadRowCount:\n {\n check : \"Boolean\",\n init : true\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n _rowCount : null,\n _ignoreCurrentRequest : null,\n\n _lruCounter : null,\n _firstLoadingBlock : null,\n _firstRowToLoad : null,\n _lastRowToLoad : null,\n _rowBlockCache : null,\n _rowBlockCount : null,\n\n _sortColumnIndex : null,\n _sortAscending : null,\n\n _editableColArr : null,\n _sortableColArr : null,\n\n _loadRowCountRequestRunning : false,\n\n _clearCache : false,\n\n\n /**\n * Returns whether the current request is ignored by the model.\n *\n * @return {Boolean} true when the current request is ignored by the model.\n */\n _getIgnoreCurrentRequest : function()\n {\n return this._ignoreCurrentRequest;\n },\n\n\n // overridden\n getRowCount : function()\n {\n if (this._rowCount == -1)\n {\n if (! this._loadRowCountRequestRunning ||\n ! this.getBlockConcurrentLoadRowCount())\n {\n this._loadRowCountRequestRunning = true;\n this._loadRowCount();\n }\n\n // NOTE: _loadRowCount may set this._rowCount\n return (this._rowCount == -1) ? 0 : this._rowCount;\n }\n else\n {\n return this._rowCount;\n }\n },\n\n\n /**\n * Implementing classes have to call {@link #_onRowCountLoaded} when the\n * server response arrived. That method has to be called! Even when there\n * was an error.\n *\n * @abstract\n * @throws {Error} the abstract function warning.\n */\n _loadRowCount : function() {\n throw new Error(\"_loadRowCount is abstract\");\n },\n\n\n /**\n * Sets the row count.\n *\n * Has to be called by {@link #_loadRowCount}.\n *\n * @param rowCount {Integer} the number of rows in this model or null if loading.\n */\n _onRowCountLoaded : function(rowCount)\n {\n if (this.getBlockConcurrentLoadRowCount())\n {\n // There's no longer a loadRowCount() in progress\n this._loadRowCountRequestRunning = false;\n }\n\n // this.debug(\"row count loaded: \" + rowCount);\n if (rowCount == null || rowCount < 0) {\n rowCount = 0;\n }\n\n this._rowCount = Number(rowCount);\n\n // Inform the listeners\n var data =\n {\n firstRow : 0,\n lastRow : rowCount - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n },\n\n\n /**\n * Reloads the model and clears the local cache.\n *\n */\n reloadData : function()\n {\n // If there is currently a request on its way, then this request will bring\n // obsolete data -> Ignore it\n if (this._firstLoadingBlock != -1) {\n var cancelingSucceed = this._cancelCurrentRequest();\n if (cancelingSucceed) {\n // The request was canceled -> We're not loading any blocks any more\n this._firstLoadingBlock = -1;\n this._ignoreCurrentRequest = false;\n } else {\n // The request was not canceled -> Ignore it\n this._ignoreCurrentRequest = true;\n }\n }\n\n // Force clearing row cache, because of reloading data.\n this._clearCache = true;\n\n // Forget a possibly outstanding request\n // (_loadRowCount will tell the listeners anyway, that the whole table\n // changed)\n //\n // NOTE: This will inform the listeners as soon as the new row count is\n // known\n this._firstRowToLoad = -1;\n this._lastRowToLoad = -1;\n this._loadRowCountRequestRunning = true;\n this._loadRowCount();\n },\n\n\n /**\n * Clears the cache.\n *\n */\n clearCache : function()\n {\n this._rowBlockCache = {};\n this._rowBlockCount = 0;\n },\n\n\n /**\n * Returns the current state of the cache.\n *
\n * Do not change anything in the returned data. This breaks the model state.\n * Use this method only together with {@link #restoreCacheContent} for backing\n * up state for a later restore.\n *\n * @return {Map} the current cache state.\n */\n getCacheContent : function() {\n return {\n sortColumnIndex : this._sortColumnIndex,\n sortAscending : this._sortAscending,\n rowCount : this._rowCount,\n lruCounter : this._lruCounter,\n rowBlockCache : this._rowBlockCache,\n rowBlockCount : this._rowBlockCount\n };\n },\n\n\n /**\n * Restores a cache state created by {@link #getCacheContent}.\n *\n * @param cacheContent {Map} An old cache state.\n */\n restoreCacheContent : function(cacheContent)\n {\n // If there is currently a request on its way, then this request will bring\n // obsolete data -> Ignore it\n if (this._firstLoadingBlock != -1)\n {\n // Try to cancel the current request\n var cancelingSucceed = this._cancelCurrentRequest();\n\n if (cancelingSucceed)\n {\n // The request was canceled -> We're not loading any blocks any more\n this._firstLoadingBlock = -1;\n this._ignoreCurrentRequest = false;\n }\n else\n {\n // The request was not canceled -> Ignore it\n this._ignoreCurrentRequest = true;\n }\n }\n\n // Restore the cache content\n this._sortColumnIndex = cacheContent.sortColumnIndex;\n this._sortAscending = cacheContent.sortAscending;\n this._rowCount = cacheContent.rowCount;\n this._lruCounter = cacheContent.lruCounter;\n this._rowBlockCache = cacheContent.rowBlockCache;\n this._rowBlockCount = cacheContent.rowBlockCount;\n\n // Inform the listeners\n var data =\n {\n firstRow : 0,\n lastRow : this._rowCount - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n },\n\n\n /**\n * Cancels the current request if possible.\n *\n * Should be overridden by subclasses if they are able to cancel requests. This\n * allows sending a new request directly after a call of {@link #reloadData}.\n *\n * @return {Boolean} whether the request was canceled.\n */\n _cancelCurrentRequest : function() {\n return false;\n },\n\n\n /**\n * Iterates through all cached rows.\n *\n * The iterator will be called for each cached row with two parameters: The row\n * index of the current row (Integer) and the row data of that row (var[]). If\n * the iterator returns something this will be used as new row data.\n *\n * The iterator is called in the same order as the rows are in the model\n * (the row index is always ascending).\n *\n * @param iterator {Function} The iterator function to call.\n * @param object {Object} context of the iterator\n */\n iterateCachedRows : function(iterator, object)\n {\n var blockSize = this.getBlockSize();\n var blockCount = Math.ceil(this.getRowCount() / blockSize);\n\n // Remove the row and move the rows of all following blocks\n for (var block=0; block<=blockCount; block++)\n {\n var blockData = this._rowBlockCache[block];\n\n if (blockData != null)\n {\n var rowOffset = block * blockSize;\n var rowDataArr = blockData.rowDataArr;\n\n for (var relRow=0; relRow Start a new one\n // NOTE: We load one more block above and below to have a smooth\n // scrolling into the next block without blank cells\n var firstBlock = parseInt(firstRowIndex / blockSize, 10) - 1;\n\n if (firstBlock < 0) {\n firstBlock = 0;\n }\n\n var lastBlock = parseInt(lastRowIndex / blockSize, 10) + 1;\n\n if (lastBlock >= totalBlockCount) {\n lastBlock = totalBlockCount - 1;\n }\n\n // Check which blocks we have to load\n var firstBlockToLoad = -1;\n var lastBlockToLoad = -1;\n\n for (var block=firstBlock; block<=lastBlock; block++)\n {\n if ((this._clearCache && !this._loadRowCountRequestRunning)|| this._rowBlockCache[block] == null || this._rowBlockCache[block].isDirty)\n {\n // We don't have this block\n if (firstBlockToLoad == -1) {\n firstBlockToLoad = block;\n }\n\n lastBlockToLoad = block;\n }\n }\n\n // Load the blocks\n if (firstBlockToLoad != -1)\n {\n this._firstRowToLoad = -1;\n this._lastRowToLoad = -1;\n\n this._firstLoadingBlock = firstBlockToLoad;\n\n // this.debug(\"Starting server request. rows: \" + firstRowIndex + \"..\" + lastRowIndex + \", blocks: \" + firstBlockToLoad + \"..\" + lastBlockToLoad);\n this._loadRowData(firstBlockToLoad * blockSize, (lastBlockToLoad + 1) * blockSize - 1);\n }\n }\n else\n {\n // There is already a request running -> Remember this request\n // so it can be executed after the current one is finished.\n this._firstRowToLoad = firstRowIndex;\n this._lastRowToLoad = lastRowIndex;\n }\n },\n\n\n /**\n * Loads some row data from the server.\n *\n * Implementing classes have to call {@link #_onRowDataLoaded} when the server\n * response arrived. That method has to be called! Even when there was an error.\n *\n * @abstract\n * @param firstRow {Integer} The index of the first row to load.\n * @param lastRow {Integer} The index of the last row to load.\n * @throws {Error} the abstract function warning.\n */\n _loadRowData : function(firstRow, lastRow) {\n throw new Error(\"_loadRowData is abstract\");\n },\n\n\n /**\n * Sets row data.\n *\n * Has to be called by {@link #_loadRowData}.\n *\n * @param rowDataArr {Map[]} the loaded row data or null if there was an error.\n */\n _onRowDataLoaded : function(rowDataArr)\n {\n // Clear cache if function was called because of a reload.\n if (this._clearCache) {\n this.clearCache();\n this._clearCache = false;\n }\n\n if (rowDataArr != null && !this._ignoreCurrentRequest)\n {\n var blockSize = this.getBlockSize();\n var blockCount = Math.ceil(rowDataArr.length / blockSize);\n\n if (blockCount == 1)\n {\n // We got one block -> Use the rowData directly\n this._setRowBlockData(this._firstLoadingBlock, rowDataArr);\n }\n else\n {\n // We got more than one block -> We've to split the rowData\n for (var i=0; i Check whether we have to remove another block first\n this._rowBlockCount++;\n\n while (this._rowBlockCount > this.getMaxCachedBlockCount())\n {\n // Find the last recently used block\n // NOTE: We never remove block 0 and 1\n var lruBlock;\n var minLru = this._lruCounter;\n\n for (var currBlock in this._rowBlockCache)\n {\n var currLru = this._rowBlockCache[currBlock].lru;\n\n if (currLru < minLru && currBlock > 1)\n {\n minLru = currLru;\n lruBlock = currBlock;\n }\n }\n\n // Remove that block\n // this.debug(\"Removing block: \" + lruBlock + \". current LRU: \" + this._lruCounter);\n delete this._rowBlockCache[lruBlock];\n this._rowBlockCount--;\n }\n }\n\n this._rowBlockCache[block] =\n {\n lru : ++this._lruCounter,\n rowDataArr : rowDataArr\n };\n },\n\n\n /**\n * Removes a row from the model.\n *\n * @param rowIndex {Integer} the index of the row to remove.\n */\n removeRow : function(rowIndex)\n {\n if (this.getClearCacheOnRemove())\n {\n this.clearCache();\n\n // Inform the listeners\n var data =\n {\n firstRow : 0,\n lastRow : this.getRowCount() - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n }\n else\n {\n var blockSize = this.getBlockSize();\n var blockCount = Math.ceil(this.getRowCount() / blockSize);\n var startBlock = parseInt(rowIndex / blockSize, 10);\n\n // Remove the row and move the rows of all following blocks\n for (var block=startBlock; block<=blockCount; block++)\n {\n var blockData = this._rowBlockCache[block];\n\n if (blockData != null)\n {\n // Remove the row in the start block\n // NOTE: In the other blocks the first row is removed\n // (This is the row that was)\n var removeIndex = 0;\n\n if (block == startBlock) {\n removeIndex = rowIndex - block * blockSize;\n }\n\n blockData.rowDataArr.splice(removeIndex, 1);\n\n if (block == blockCount - 1)\n {\n // This is the last block\n if (blockData.rowDataArr.length == 0)\n {\n // It is empty now -> Remove it\n delete this._rowBlockCache[block];\n }\n }\n else\n {\n // Try to copy the first row of the next block to the end of this block\n // so this block can stays clean\n var nextBlockData = this._rowBlockCache[block + 1];\n\n if (nextBlockData != null) {\n blockData.rowDataArr.push(nextBlockData.rowDataArr[0]);\n }\n else\n {\n // There is no row to move -> Mark this block as dirty\n blockData.isDirty = true;\n }\n }\n }\n }\n\n if (this._rowCount != -1) {\n this._rowCount--;\n }\n\n // Inform the listeners\n if (this.hasListener(\"dataChanged\"))\n {\n var data =\n {\n firstRow : rowIndex,\n lastRow : this.getRowCount() - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n }\n }\n },\n\n\n /**\n *\n * See overridden method for details.\n *\n * @param rowIndex {Integer} the model index of the row.\n * @return {Object} Map containing a value for each column.\n */\n getRowData : function(rowIndex)\n {\n var blockSize = this.getBlockSize();\n var block = parseInt(rowIndex / blockSize, 10);\n var blockData = this._rowBlockCache[block];\n\n if (blockData == null)\n {\n // This block is not (yet) loaded\n return null;\n }\n else\n {\n var rowData = blockData.rowDataArr[rowIndex - (block * blockSize)];\n\n // Update the last recently used counter\n if (blockData.lru != this._lruCounter) {\n blockData.lru = ++this._lruCounter;\n }\n\n return rowData;\n }\n },\n\n // overridden\n getValue : function(columnIndex, rowIndex)\n {\n var rowData = this.getRowData(rowIndex);\n\n if (rowData == null) {\n return null;\n }\n else\n {\n var columnId = this.getColumnId(columnIndex);\n return rowData[columnId];\n }\n },\n\n // overridden\n setValue : function(columnIndex, rowIndex, value)\n {\n var rowData = this.getRowData(rowIndex);\n\n if (rowData == null) {\n // row has not yet been loaded or does not exist\n return;\n }\n else\n {\n var columnId = this.getColumnId(columnIndex);\n rowData[columnId] = value;\n\n // Inform the listeners\n if (this.hasListener(\"dataChanged\"))\n {\n var data =\n {\n firstRow : rowIndex,\n lastRow : rowIndex,\n firstColumn : columnIndex,\n lastColumn : columnIndex\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n }\n }\n },\n\n\n /**\n * Sets all columns editable or not editable.\n *\n * @param editable {Boolean} whether all columns are editable.\n */\n setEditable : function(editable)\n {\n this._editableColArr = [];\n\n for (var col=0; col\n * let tableModel = this.__logModel = new osparc.widget.logger.LoggerTable();\n * tableModel.setColumns([\"Level\", \"Time\", \"Origin\", \"Message\"], [\"level\", \"time\", \"who\", \"whatRich\"]);\n * let custom = {\n * tableColumnModel : function(obj) {\n * return new qx.ui.table.columnmodel.Resize(obj);\n * }\n * };\n * let table = new qx.ui.table.Table(tableModel, custom);\n * this.getRoot().add(table);\n * \n */\n\n/**\n *\n * @asset(demobrowser/backend/remote_table.php)\n */\n\nqx.Class.define(\"osparc.widget.logger.LoggerModel\", {\n extend : qx.ui.table.model.Remote,\n\n construct : function() {\n this.base(arguments);\n\n this.setColumns([\n \"\",\n \"Time\",\n \"Origin\",\n \"Message\"\n ], [\n \"level\",\n \"time\",\n \"who\",\n \"msgRich\"\n ]);\n\n this.__rawData = [];\n },\n\n properties: {\n filterLogLevel: {\n nullable: false,\n check : \"Number\",\n init: -1\n },\n\n filterString: {\n nullable: true,\n check : \"String\",\n init: \"\"\n }\n },\n\n statics: {\n getLevelIcon: function(logLevel) {\n const logLevels = osparc.widget.logger.LoggerView.LOG_LEVELS;\n let iconSource = \"\";\n switch (logLevel) {\n case logLevels.INFO:\n iconSource = \"osparc/circle-info-solid.svg\";\n break;\n case logLevels.WARNING:\n iconSource = \"osparc/circle-exclamation-solid.svg\";\n break;\n case logLevels.ERROR:\n iconSource = \"osparc/circle-xmark-solid.svg\";\n break;\n }\n return iconSource;\n }\n },\n\n members : {\n __rawData: null,\n __filteredData: null,\n\n getRows: function() {\n return this.__rawData;\n },\n\n getFilteredRows: function() {\n return this.__filteredData;\n },\n\n addRows: function(newRows) {\n newRows.forEach(newRow => {\n newRow[\"level\"] = this.self().getLevelIcon(newRow.logLevel);\n newRow[\"time\"] = osparc.utils.Utils.formatTime(newRow.timeStamp, true);\n newRow[\"who\"] = newRow.label;\n\n // there might a double backslash before the n\n let clean = newRow.msg.replace(/\\\\n/g, \"
\");\n clean = newRow.msg.replace(/\\n/g, \"
\");\n newRow[\"msgRich\"] = clean;\n\n this.__rawData.push(newRow);\n });\n },\n\n nodeLabelChanged: function(nodeId, newLabel) {\n this.__rawData.forEach(row => {\n if (row.nodeId === nodeId) {\n row.label = newLabel;\n row[\"who\"] = row.label;\n }\n });\n },\n\n clearTable: function() {\n const rawLength = this.__rawData.length;\n this.__rawData = [];\n for (let i=rawLength-1; i>=0; i--) {\n this.removeRow(i);\n }\n this.reloadData();\n },\n\n getRawRowCount: function() {\n return this.__rawData.length;\n },\n\n getFilteredRowCount: function() {\n return this.__filteredData.length;\n },\n\n __filterByString: function(msg) {\n let searchString = this.getFilterString();\n if (searchString === null || searchString === \"\") {\n return true;\n }\n searchString = searchString.toUpperCase();\n if (msg) {\n msg = msg.toUpperCase();\n return msg.includes(searchString);\n }\n return false;\n },\n\n __filterByLogLevel: function(logLevel) {\n const show = logLevel >= this.getFilterLogLevel();\n return show;\n },\n\n __checkFilters: function(rowData) {\n const showStrWho = this.__filterByString(rowData.label);\n const showStrWhat = this.__filterByString(rowData.msg);\n const showLog = this.__filterByLogLevel(rowData.logLevel);\n\n return ((showStrWho || showStrWhat) && showLog);\n },\n\n // overloaded - called whenever the table requests the row count\n _loadRowCount: function() {\n this.__filteredData = [];\n for (let i=0; i {\n // switch it's expanded if it was already expanded\n rowInfo.expanded = !rowInfo.expanded;\n\n const messageDiv = rowElem.children.item(this.__expandableColPos);\n const expandedHeight = messageDiv.scrollHeight;\n const newHeight = (rowInfo.expanded ? expandedHeight : 19) + \"px\";\n style.height = newHeight\n Array.from(rowElem.children).forEach(child => child.style.height = newHeight);\n }\n rowElem.removeEventListener(\"click\", rowClicked);\n rowElem.addEventListener(\"click\", rowClicked);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Based on https://github.com/hgrecco/pint/blob/master/pint/default_en.txt\n */\n\nqx.Class.define(\"osparc.utils.Units\", {\n type: \"static\",\n\n statics: {\n BASE_UNITS: {\n meter: {\n quantity: \"length\",\n alias: [\"meter\", \"m\", \"metre\"],\n short: \"m\",\n long: \"meter\"\n },\n second: {\n quantity: \"time\",\n alias: [\"second\", \"s\", \"sec\"],\n short: \"s\",\n long: \"second\"\n },\n ampere : {\n quantity: \"current\",\n alias: [\"ampere\", \"A\", \"amp\"],\n short: \"A\",\n long: \"ampere\"\n },\n candela: {\n quantity: \"luminosity\",\n alias: [\"candela\", \"cd\", \"candle\"],\n short: \"cd\",\n long: \"candela\"\n },\n gram: {\n quantity: \"mass\",\n alias: [\"gram\", \"g\"],\n short: \"g\",\n long: \"gram\"\n },\n mole: {\n quantity: \"substance\",\n alias: [\"mole\", \"mol\"],\n short: \"mol\",\n long: \"mole\"\n },\n kelvin: {\n quantity: \"temperature\",\n alias: [\"kelvin\", \"K\", \"degK\", \"°K\", \"degree_Kelvin\", \"degreeK\"],\n short: \"K\",\n long: \"kelvin\"\n },\n radian: {\n quantity: \"radian\",\n alias: [\"radian\", \"rad\"],\n short: \"rad\",\n long: \"radian\"\n }\n },\n\n PREFIXES: {\n micro: {\n short: \"µ\",\n long: \"micro\",\n multiplier: 1e-6\n },\n milli: {\n short: \"m\",\n long: \"milli\",\n multiplier: 1e-3\n },\n \"no-prefix\": {\n short: \"\",\n long: \"\",\n multiplier: 1e0\n },\n kilo: {\n short: \"k\",\n long: \"kilo\",\n multiplier: 1e3\n },\n mega: {\n short: \"M\",\n long: \"mega\",\n multiplier: 1e6\n }\n },\n\n __isUnitRegistered: function(unitKey) {\n return Boolean(unitKey in this.BASE_UNITS);\n },\n\n __getBaseUnit: function(unitKey) {\n return unitKey in this.BASE_UNITS ? this.BASE_UNITS[unitKey] : null;\n },\n __getShortLabel: function(unit, prefix) {\n const baseUnit = this.__getBaseUnit(unit);\n let shortLabel = baseUnit ? baseUnit.short : unit;\n if (prefix && prefix in this.PREFIXES) {\n shortLabel = this.PREFIXES[prefix].short + shortLabel;\n }\n return shortLabel;\n },\n\n __getLongLabel: function(xUnit, prefix) {\n const baseUnit = this.__getBaseUnit(xUnit);\n let longLabel = baseUnit ? baseUnit.long : xUnit;\n if (prefix && prefix in this.PREFIXES) {\n longLabel = this.PREFIXES[prefix].long + longLabel;\n }\n return longLabel;\n },\n\n __getPrefixMultiplier: function(prefix) {\n if ([null, undefined, \"\"].includes(prefix)) {\n prefix = \"no-prefix\";\n }\n if (prefix in this.PREFIXES) {\n return this.PREFIXES[prefix].multiplier;\n }\n return 1;\n },\n\n getLabels: function(unit, prefix) {\n if (this.__isUnitRegistered(unit)) {\n return {\n unitShort: this.__getShortLabel(unit, prefix),\n unitLong: this.__getLongLabel(unit, prefix)\n };\n }\n return null;\n },\n\n // One up and one down, or all the way to the SI\n getNextPrefix: function(prefix, originalPrefix) {\n if ([null, undefined, \"\"].includes(prefix)) {\n prefix = \"no-prefix\";\n }\n if ([null, undefined, \"\"].includes(originalPrefix)) {\n originalPrefix = \"no-prefix\";\n }\n const keys = Object.keys(this.PREFIXES);\n const orignalIdx = keys.indexOf(originalPrefix);\n if (orignalIdx === -1) {\n return null;\n }\n const midPrefix = Math.min(keys.length-2, Math.max(orignalIdx, 1));\n const pKeys = Object.keys(this.PREFIXES).filter((_, idx) => Math.abs(midPrefix-idx) <=1);\n const idx = pKeys.indexOf(prefix);\n if (idx === pKeys.length-1) {\n return this.PREFIXES[pKeys[0]];\n }\n return this.PREFIXES[pKeys[idx+1]];\n },\n\n getMultiplier: function(oldPrefix, newPrefix) {\n const oldMulitplier = this.__getPrefixMultiplier(oldPrefix);\n const newMulitplier = this.__getPrefixMultiplier(newPrefix);\n const multiplier = oldMulitplier/newMulitplier;\n return multiplier;\n },\n\n convertValue: function(val, oldPrefix, newPrefix) {\n const multiplier = this.getMultiplier(oldPrefix, newPrefix);\n if (Array.isArray(JSON.parse(val))) {\n val = JSON.parse(val);\n val.forEach((v, index) => {\n val[index] = parseFloat((v*multiplier).toFixed(15));\n });\n return val;\n }\n return parseFloat((val*multiplier).toFixed(15));\n },\n\n composeXUnit: function(unit, unitPrefix) {\n if (unit === undefined) {\n return null;\n }\n let xUnit = \"\";\n if (unitPrefix) {\n xUnit += unitPrefix + \"-\";\n }\n xUnit += unit;\n return xUnit;\n },\n\n decomposeXUnit: function(xUnit) {\n const unitSplit = xUnit.split(\"-\");\n let unitPrefix = null;\n let unit = null;\n if (unitSplit.length === 2) {\n unitPrefix = unitSplit[0];\n unit = unitSplit[1];\n } else {\n unit = unitSplit[0];\n }\n return {\n unitPrefix,\n unit\n };\n },\n\n getPrefix(xUnit, text) {\n const {\n unit\n } = this.decomposeXUnit(xUnit);\n const prefix = text.replace(this.BASE_UNITS[unit].short, \"\");\n const idx = Object.values(this.PREFIXES).findIndex(p => p[\"short\"] === prefix);\n if (idx > -1) {\n const newPrefix = Object.keys(this.PREFIXES)[idx];\n return (newPrefix === \"no-prefix\") ? \"\" : newPrefix;\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.form.PortInfoHint\", {\n extend: osparc.ui.hint.InfoHint,\n\n statics: {\n ERROR_ICON: \"@MaterialIcons/error_outline/14\"\n },\n\n properties: {\n portErrorMsg: {\n check: \"String\",\n init: null,\n nullable: true,\n apply: \"__applyPortErrorMsg\"\n }\n },\n\n members: {\n __applyPortErrorMsg: function(errorMsg) {\n let text = this.getHintText();\n if (errorMsg) {\n const color = qx.theme.manager.Color.getInstance().resolve(\"failed-red\");\n text += `
${errorMsg}`;\n }\n this.setHintText(text);\n this.set({\n source: errorMsg ? this.self().ERROR_ICON : osparc.ui.hint.InfoHint.INFO_ICON + \"/14\",\n textColor: errorMsg ? \"failed-red\" : \"text\"\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for dealing with ports.\n *\n */\n\nqx.Class.define(\"osparc.utils.Ports\", {\n type: \"static\",\n\n statics: {\n arePortsCompatible: function(node1, portId1, node2, portId2) {\n return osparc.data.Resources.getCompatibleInputs(node1, portId1, node2)\n .then(compatiblePorts => compatiblePorts.includes(portId2));\n },\n\n isDataALink: function(data) {\n return (data !== null && typeof data === \"object\" && data.nodeUuid);\n },\n\n isDataAParameter: function(data) {\n return (data !== null && typeof data === \"string\" && data.startsWith(\"{{\") && data.endsWith(\"}}\"));\n },\n\n getPortType: function(portsMetadata, portId) {\n let portType = null;\n if (portId in portsMetadata) {\n portType = portsMetadata[portId][\"type\"];\n if (portType === \"ref_contentSchema\" && \"contentSchema\" in portsMetadata[portId]) {\n portType = portsMetadata[portId][\"contentSchema\"][\"type\"];\n }\n }\n return portType;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2011 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n\n/**\n * The tree item is a tree element for the {@link VirtualTree}, which can have\n * nested tree elements.\n */\nqx.Class.define(\"qx.ui.tree.VirtualTreeItem\",\n{\n extend : qx.ui.tree.core.AbstractItem,\n\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"virtual-tree-folder\"\n }\n },\n\n\n members :\n {\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates : {\n selected : true\n },\n\n\n // overridden\n _addWidgets : function()\n {\n this.addSpacer();\n this.addOpenButton();\n this.addIcon();\n this.addLabel();\n },\n\n\n // overridden\n _shouldShowOpenSymbol : function()\n {\n var open = this.getChildControl(\"open\", true);\n if (open == null) {\n return false;\n }\n\n return this.isOpenable();\n },\n\n\n // overridden\n getLevel : function() {\n return this.getUserData(\"cell.level\");\n },\n\n\n // overridden\n hasChildren : function()\n {\n var model = this.getModel();\n var childProperty = this.getUserData(\"cell.childProperty\");\n var showLeafs = this.getUserData(\"cell.showLeafs\");\n\n return qx.ui.tree.core.Util.hasChildren(model, childProperty, !showLeafs);\n },\n\n\n // apply method\n _applyModel : function(value, old)\n {\n var childProperty = this.getUserData(\"cell.childProperty\");\n var showLeafs = this.getUserData(\"cell.showLeafs\");\n\n if (value != null && qx.ui.tree.core.Util.isNode(value, childProperty))\n {\n var eventType = \"change\" + qx.lang.String.firstUp(childProperty);\n // listen to children property changes\n if (qx.Class.hasProperty(value.constructor, childProperty)) {\n value.addListener(eventType, this._onChangeChildProperty, this);\n }\n\n\n // children property has been set already, immediately add\n // listener for indent updating\n if (qx.ui.tree.core.Util.hasChildren(value, childProperty, !showLeafs)) {\n value.get(childProperty).addListener(\"changeLength\",\n this._onChangeLength, this);\n this._updateIndent();\n }\n }\n\n\n if (old != null && qx.ui.tree.core.Util.isNode(old, childProperty))\n {\n var eventType = \"change\" + qx.lang.String.firstUp(childProperty);\n old.removeListener(eventType, this._onChangeChildProperty, this);\n\n var oldChildren = old.get(childProperty);\n if (oldChildren) {\n oldChildren.removeListener(\"changeLength\", this._onChangeLength, this);\n }\n }\n },\n\n\n /**\n * Handler to update open/close icon when model length changed.\n */\n _onChangeLength : function() {\n this._updateIndent();\n },\n\n\n /**\n * Handler to add listener to array of children property.\n *\n * @param e {qx.event.type.Data} Data event; provides children array\n */\n _onChangeChildProperty : function(e)\n {\n var children = e.getData();\n var old = e.getOldData();\n\n if (children) {\n this._updateIndent();\n children.addListener(\"changeLength\", this._onChangeLength, this);\n }\n\n if (old) {\n old.removeListener(\"changeLength\", this._onChangeLength, this);\n }\n }\n }\n});","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.widget.NodeSlideTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n\n properties: {\n nodeId: {\n check: \"String\",\n event: \"changeNodeId\",\n nullable: false\n },\n\n position: {\n check: \"Number\",\n event: \"changePosition\",\n init: -1,\n nullable: true\n },\n\n instructions: {\n check: \"String\",\n event: \"changeInstructions\",\n nullable: true\n }\n },\n\n events: {\n \"showNode\": \"qx.event.type.Event\",\n \"hideNode\": \"qx.event.type.Event\",\n \"moveUp\": \"qx.event.type.Event\",\n \"moveDown\": \"qx.event.type.Event\",\n \"saveInstructions\": \"qx.event.type.Data\"\n },\n\n members: {\n // overridden\n _addWidgets: function() {\n this.addIcon();\n this.addLabel();\n const label = this.getChildControl(\"label\");\n if (label) {\n label.setMaxWidth(150);\n // override the one set in osparc-theme\n label.setPaddingTop(0);\n }\n\n this.addWidget(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n const posLbl = new qx.ui.basic.Label().set({\n marginRight: 5\n });\n this.bind(\"position\", posLbl, \"value\", {\n converter: val => (val+1).toString()\n });\n this.bind(\"position\", posLbl, \"visibility\", {\n converter: val => val > -1 ? \"visible\" : \"excluded\"\n });\n this.addWidget(posLbl);\n\n const moveUpBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/arrow-up/10\").set({\n appearance: \"no-shadow-button\"\n });\n moveUpBtn.addListener(\"execute\", () => this.fireEvent(\"moveUp\"), this);\n this.bind(\"position\", moveUpBtn, \"visibility\", {\n converter: val => val > -1 ? \"visible\" : \"excluded\"\n });\n this.addWidget(moveUpBtn);\n\n const moveDownBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/arrow-down/10\").set({\n appearance: \"no-shadow-button\"\n });\n moveDownBtn.addListener(\"execute\", () => this.fireEvent(\"moveDown\"), this);\n this.bind(\"position\", moveDownBtn, \"visibility\", {\n converter: val => val > -1 ? \"visible\" : \"excluded\"\n });\n this.addWidget(moveDownBtn);\n\n const hideBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/eye/10\").set({\n marginRight: 5,\n appearance: \"no-shadow-button\"\n });\n hideBtn.addListener(\"execute\", () => this.fireEvent(\"hideNode\"), this);\n this.bind(\"position\", hideBtn, \"visibility\", {\n converter: val => val > -1 ? \"visible\" : \"excluded\"\n });\n this.addWidget(hideBtn);\n\n const showBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/eye-slash/10\").set({\n marginRight: 5,\n appearance: \"no-shadow-button\"\n });\n showBtn.addListener(\"execute\", () => this.fireEvent(\"showNode\"), this);\n this.bind(\"position\", showBtn, \"visibility\", {\n converter: val => val > -1 ? \"excluded\" : \"visible\"\n });\n this.addWidget(showBtn);\n\n const editTextBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/edit/10\").set({\n toolTipText: this.tr(\"Edit Instructions\"),\n marginRight: 5,\n appearance: \"no-shadow-button\"\n });\n editTextBtn.addListener(\"execute\", () => this.__editText(), this);\n this.bind(\"position\", editTextBtn, \"visibility\", {\n converter: val => val > -1 ? \"visible\" : \"excluded\"\n });\n this.addWidget(editTextBtn);\n },\n\n __editText: function() {\n const title = this.tr(\"Edit Instructions\");\n const textEditor = new osparc.editor.MarkdownEditor(this.getInstructions());\n textEditor.getChildControl(\"accept-button\").setLabel(this.tr(\"Save\"));\n const win = osparc.ui.window.Window.popUpInWindow(textEditor, title, 500, 300);\n textEditor.addListener(\"textChanged\", e => {\n const newText = e.getData();\n this.fireDataEvent(\"saveInstructions\", newText);\n win.close();\n }, this);\n textEditor.addListener(\"cancel\", () => win.close(), this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo (pcrespov)\n\n************************************************************************ */\n\n/**\n * Base class for RESTful resources\n */\nqx.Class.define(\"osparc.io.rest.AbstractResource\", {\n extend: qx.io.rest.Resource,\n type: \"abstract\",\n\n statics: {\n API: \"/v0\",\n AUTHENTICATION: null,\n\n setAutheticationHeader: function(usernameOrToken, password=null) {\n osparc.io.rest.AbstractResource.AUTHENTICATION = new qx.io.request.authentication.Basic(usernameOrToken, password);\n }\n\n },\n\n construct: function(description) {\n this.base(arguments, description);\n\n this.configureRequest(function(request, action, params, data) {\n let headers = [{\n key: \"Accept\",\n value: \"application/json\"\n }];\n\n const auth = osparc.io.rest.AbstractResource.AUTHENTICATION;\n if (auth === null) {\n console.debug(\"Authentication missing\");\n } else {\n headers.concat(auth.getAuthHeaders());\n }\n\n headers.forEach(function(item, index, array) {\n request.setRequestHeader(item.key, item.value);\n });\n });\n },\n\n members:{\n /**\n * Default implementation\n * Can be overriden in subclass to change prefix\n */\n formatUrl: function(tail) {\n return osparc.io.rest.AbstractResource.API + tail;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(SVGElement)\n */\n\n/**\n * Widget containing the layout where NodeUIs and EdgeUIs, and when the model loaded\n * is a container-node, also NodeInput and NodeOutput are rendered.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let workbenchUI = new osparc.workbench.WorkbenchUI();\n * this.getRoot().add(workbenchUI);\n *
\n */\n\nconst BUTTON_SIZE = 38;\nconst NODE_INPUTS_WIDTH = 210;\n\nqx.Class.define(\"osparc.workbench.WorkbenchUI\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this.__nodesUI = [];\n this.__edgesUI = [];\n this.__selectedNodeUIs = [];\n this.__annotations = {};\n this.__selectedAnnotations = [];\n\n this._setLayout(new qx.ui.layout.HBox());\n\n this._addItemsToLayout();\n\n this._addEventListeners();\n },\n\n statics: {\n getDashedBorderStyle(isRight) {\n const side = isRight ? \"right\" : \"left\";\n const borderStyle = {};\n borderStyle[\"background-image\"] = `linear-gradient(to bottom, #3D3D3D 50%, rgba(255, 255, 255, 0) 0%)`;\n borderStyle[\"background-position\"] = side;\n borderStyle[\"background-size\"] = \"5px 50px\";\n borderStyle[\"background-repeat\"] = \"repeat-y\";\n return borderStyle;\n },\n\n ZOOM_VALUES: [\n 0.1,\n 0.2,\n 0.3,\n 0.4,\n 0.5,\n 0.7,\n 0.8,\n 0.9,\n 1,\n 1.1,\n 1.2,\n 1.3,\n 1.5,\n 2,\n 2.5,\n 3\n ]\n },\n\n events: {\n \"nodeSelected\": \"qx.event.type.Data\",\n \"removeNode\": \"qx.event.type.Data\",\n \"removeNodes\": \"qx.event.type.Data\",\n \"removeEdge\": \"qx.event.type.Data\",\n \"changeSelectedNode\": \"qx.event.type.Data\",\n \"requestOpenLogger\": \"qx.event.type.Data\",\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"__applyStudy\",\n nullable: false\n },\n\n scale: {\n check: \"osparc.workbench.WorkbenchUI.ZOOM_VALUES\",\n init: 1,\n apply: \"__applyScale\",\n event: \"changeScale\",\n nullable: false\n }\n },\n\n members: {\n _currentModel: null,\n __deleteItemButton: null,\n __nodesUI: null,\n __edgesUI: null,\n __selectedNodeUIs: null,\n __workbenchLayer: null,\n __workbenchLayout: null,\n _workbenchLayoutScroll: null,\n __desktop: null,\n __svgLayer: null,\n __tempEdgeNodeId: null,\n __tempEdgeIsInput: null,\n __tempEdgeRepr: null,\n __pointerPos: null,\n __selectedItemId: null,\n __startHint: null,\n __toolHint: null,\n __dropHereUI: null,\n __selectionRectInitPos: null,\n __selectionRectRepr: null,\n __panning: null,\n __isDraggingFile: null,\n __isDraggingLink: null,\n __annotations: null,\n __annotatingNote: null,\n __annotatingRect: null,\n __annotatingText: null,\n __annotationInitPos: null,\n __selectedAnnotations: null,\n __annotationEditor: null,\n __annotationLastColor: null,\n\n __applyStudy: function(study) {\n study.getWorkbench().addListener(\"reloadModel\", () => this.__reloadCurrentModel(), this);\n },\n\n _addItemsToLayout: function() {\n this._addWorkbenchLayer();\n this.__addExtras();\n },\n\n _addWorkbenchLayer: function() {\n const workbenchLayer = this.__workbenchLayer = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n this._add(workbenchLayer, {\n flex: 1\n });\n\n const workbenchLayoutScroll = this._workbenchLayoutScroll = new qx.ui.container.Scroll();\n osparc.utils.Utils.setIdToWidget(workbenchLayoutScroll, \"WorkbenchUI-scroll\");\n const workbenchLayout = this.__workbenchLayout = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n workbenchLayoutScroll.add(workbenchLayout);\n workbenchLayer.add(workbenchLayoutScroll, {\n left: 0,\n top: 0,\n right: 0,\n bottom: 0\n });\n\n this.__addDesktop();\n this.__addSVGLayer();\n },\n\n __addDesktop: function() {\n const desktop = this.__desktop = new qx.ui.window.Desktop(new qx.ui.window.Manager());\n osparc.utils.Utils.setIdToWidget(desktop, \"desktopWindow\");\n this.__workbenchLayout.add(desktop, {\n left: 0,\n top: 0,\n right: 0,\n bottom: 0\n });\n },\n\n __addSVGLayer: function() {\n const svgLayer = this.__svgLayer = new osparc.workbench.SvgWidget();\n this.__desktop.add(svgLayer, {\n left: 0,\n top: 0,\n right: 0,\n bottom: 0\n });\n },\n\n __addExtras: function() {\n this.__addStartHint();\n this.__addToolHint();\n this.__addDeleteItemButton();\n },\n\n __addStartHint: function() {\n this.__startHint = new qx.ui.basic.Label(this.tr(\"Double click to start adding a node\")).set({\n font: \"workbench-start-hint\",\n textColor: \"workbench-start-hint\",\n visibility: \"excluded\"\n });\n this.__workbenchLayout.add(this.__startHint);\n },\n\n __addToolHint: function() {\n const toolHint = this.__toolHint = new qx.ui.basic.Label().set({\n font: \"workbench-start-hint\",\n textColor: \"workbench-start-hint\",\n visibility: \"excluded\"\n });\n toolHint.bind(\"value\", toolHint, \"visibility\", {\n converter: val => val ? \"visible\" : \"excluded\"\n });\n this.__workbenchLayout.add(this.__toolHint, {\n bottom: 20,\n left: 20\n });\n },\n\n __addDeleteItemButton: function() {\n const deleteItemButton = this.__deleteItemButton = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/trash/18\",\n width: BUTTON_SIZE,\n height: BUTTON_SIZE,\n visibility: \"excluded\"\n });\n deleteItemButton.addListener(\"execute\", () => {\n if (this.__isSelectedItemAnEdge()) {\n this.__removeEdge(this.__getEdgeUI(this.__selectedItemId));\n this.resetSelection();\n }\n }, this);\n\n this.__workbenchLayer.add(deleteItemButton, {\n bottom: 10,\n right: 10\n });\n },\n\n __getAnnotationEditorView: function() {\n if (this.__annotationEditor) {\n this.__workbenchLayer.remove(this.__annotationEditor);\n }\n\n const annotationEditor = this.__annotationEditor = new osparc.editor.AnnotationEditor().set({\n backgroundColor: \"background-main-2\",\n visibility: \"excluded\"\n });\n annotationEditor.addDeleteButton();\n\n this.__workbenchLayer.add(annotationEditor, {\n top: 10,\n right: 10\n });\n\n return annotationEditor;\n },\n\n __getWorkbench: function() {\n return this.getStudy().getWorkbench();\n },\n\n __createInputOutputNodesLayout: function(isInput) {\n const label = isInput ? this.tr(\"INPUTS\") : this.tr(\"OUTPUTS\");\n const inputOutputNodesLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n inputOutputNodesLayout.set({\n width: NODE_INPUTS_WIDTH,\n maxWidth: NODE_INPUTS_WIDTH,\n allowGrowX: false,\n padding: [0, 6]\n });\n inputOutputNodesLayout.getContentElement().setStyles(this.self().getDashedBorderStyle(isInput));\n const title = new qx.ui.basic.Label(label).set({\n alignX: \"center\",\n margin: [15, 0],\n font: \"workbench-start-hint\",\n textColor: \"workbench-start-hint\"\n });\n inputOutputNodesLayout.add(title);\n\n return inputOutputNodesLayout;\n },\n\n __openServiceCatalog: function(e) {\n const nodePos = this.__pointerEventToWorkbenchPos(e);\n this.openServiceCatalog(nodePos);\n },\n\n openServiceCatalog: function(nodePos) {\n if (this.getStudy().isReadOnly()) {\n return null;\n }\n if (this.getStudy().isPipelineRunning()) {\n osparc.FlashMessenger.getInstance().logAs(osparc.data.model.Workbench.CANT_ADD_NODE, \"ERROR\");\n return null;\n }\n const srvCat = new osparc.workbench.ServiceCatalog();\n srvCat.addListener(\"addService\", async e => {\n const {\n service,\n nodeLeftId,\n nodeRightId\n } = e.getData();\n const nodeUI = await this.__addNode(service, nodePos);\n if (nodeUI && nodeLeftId !== null || nodeRightId !== null) {\n const newNodeId = nodeUI.getNodeId();\n this._createEdgeBetweenNodes(nodeLeftId ? nodeLeftId : newNodeId, nodeRightId ? nodeRightId : newNodeId, true);\n }\n }, this);\n srvCat.center();\n srvCat.open();\n return srvCat;\n },\n\n __createTemporaryNodeUI: function(pos) {\n const boxWidth = osparc.workbench.NodeUI.NODE_WIDTH;\n const boxHeight = osparc.workbench.NodeUI.NODE_HEIGHT;\n const circleSize = 26;\n const temporaryNodeUI = new qx.ui.basic.Image(\"@FontAwesome5Solid/circle-notch/\"+circleSize).set({\n opacity: 0.8\n });\n temporaryNodeUI.getContentElement().addClass(\"rotate\");\n this.__workbenchLayout.add(temporaryNodeUI);\n temporaryNodeUI.rect = this.__svgLayer.drawDashedRect(boxWidth, boxHeight);\n temporaryNodeUI.setLayoutProperties({\n left: pos.x + parseInt(boxWidth/2) - parseInt(circleSize/2),\n top: pos.y + parseInt(boxHeight/2) - parseInt(circleSize/2)\n });\n osparc.wrapper.Svg.updateItemPos(temporaryNodeUI.rect, pos.x, pos.y);\n\n return temporaryNodeUI;\n },\n\n __removeTemporaryNodeUI: function(temporaryNodeUI) {\n temporaryNodeUI.exclude();\n osparc.wrapper.Svg.removeItem(temporaryNodeUI.rect);\n this.__workbenchLayout.add(temporaryNodeUI);\n temporaryNodeUI = null;\n },\n\n __addNode: async function(service, pos) {\n // render temporary node\n let tempNodeUI = this.__createTemporaryNodeUI(pos);\n\n let nodeUI = null;\n try {\n const node = await this.__getWorkbench().createNode(service.getKey(), service.getVersion());\n nodeUI = this._createNodeUI(node.getNodeId());\n this._addNodeUIToWorkbench(nodeUI, pos);\n qx.ui.core.queue.Layout.flush();\n this.__createDragDropMechanism(nodeUI);\n } catch (err) {\n console.error(err);\n } finally {\n // remove temporary node\n this.__removeTemporaryNodeUI(tempNodeUI);\n }\n return nodeUI;\n },\n\n __getNodesBounds: function() {\n if (this.__nodesUI.length === 0) {\n return null;\n }\n\n const bounds = {\n left: 0,\n top: 0,\n right: 0,\n bottom: 0\n };\n this.__nodesUI.forEach(nodeUI => {\n const nodePos = nodeUI.getNode().getPosition();\n bounds.left = Math.max(bounds.left, nodePos.x);\n bounds.top = Math.max(bounds.top, nodePos.y);\n bounds.right = Math.max(bounds.right, nodePos.x + osparc.workbench.NodeUI.NODE_WIDTH);\n bounds.bottom = Math.max(bounds.bottom, nodePos.y + osparc.workbench.NodeUI.NODE_HEIGHT);\n });\n return bounds;\n },\n\n __cursorOnNodeUI: function(pos) {\n if (this.__nodesUI.length === 0) {\n return null;\n }\n let onNodeUI = null;\n this.__nodesUI.forEach(nodeUI => {\n const nBounds = nodeUI.getBounds();\n if (onNodeUI === null &&\n pos.x > nBounds.left &&\n pos.x < nBounds.left + nBounds.width &&\n pos.y > nBounds.top &&\n pos.y < nBounds.top + nBounds.height) {\n onNodeUI = nodeUI;\n }\n });\n return onNodeUI;\n },\n\n _addNodeUIToWorkbench: function(nodeUI, position) {\n if (position === undefined || !(\"x\" in position) || isNaN(position[\"x\"]) || position[\"x\"] < 0) {\n position = {\n x: 10,\n y: 10\n };\n }\n\n nodeUI.setPosition(position);\n this.__desktop.add(nodeUI);\n nodeUI.open();\n this.__nodesUI.push(nodeUI);\n\n nodeUI.addListener(\"appear\", () => this.__updateNodeUIPos(nodeUI), this);\n\n const isStudyReadOnly = this.getStudy().isReadOnly();\n nodeUI.set({\n movable: !isStudyReadOnly,\n selectable: !isStudyReadOnly,\n focusable: !isStudyReadOnly\n });\n if (isStudyReadOnly) {\n nodeUI.getChildControl(\"captionbar\").set({\n cursor: \"default\"\n });\n } else {\n this.__addNodeListeners(nodeUI);\n }\n\n this.__updateHint();\n },\n\n __itemStartedMoving: function() {\n this.getSelectedNodeUIs().forEach(selectedNodeUI => selectedNodeUI.initPos = selectedNodeUI.getNode().getPosition());\n this.getSelectedAnnotations().forEach(selectedAnnotation => selectedAnnotation.initPos = selectedAnnotation.getPosition());\n },\n\n __itemMoving: function(itemId, xDiff, yDiff) {\n this.getSelectedNodeUIs().forEach(selectedNodeUI => {\n if (itemId !== selectedNodeUI.getNodeId()) {\n selectedNodeUI.setPosition({\n x: selectedNodeUI.initPos.x + xDiff,\n y: selectedNodeUI.initPos.y + yDiff\n });\n this.__updateNodeUIPos(selectedNodeUI);\n }\n });\n\n this.getSelectedAnnotations().forEach(selectedAnnotation => {\n const newPos = {\n x: selectedAnnotation.initPos.x + xDiff,\n y: selectedAnnotation.initPos.y + yDiff\n };\n selectedAnnotation.setPosition(newPos.x, newPos.y);\n });\n },\n\n __itemStoppedMoving: function(nodeUI) {\n this.getSelectedNodeUIs().forEach(selectedNodeUI => delete selectedNodeUI[\"initPos\"]);\n this.getSelectedAnnotations().forEach(selectedAnnotation => delete selectedAnnotation[\"initPos\"]);\n\n if (nodeUI && osparc.Preferences.getInstance().isSnapNodeToGrid()) {\n nodeUI.snapToGrid();\n // make sure nodeUI is moved, then update edges\n setTimeout(() => this.__updateNodeUIPos(nodeUI), 10);\n }\n\n this.__updateWorkbenchBounds();\n\n // After moving a nodeUI, a new element with z-index 100000+ appears on the DOM tree and prevents from clicking\n // elsewhere. Here we go through every the children of the WorkbenchUI and remove the undesired element\n const allChildren = Array.from(this.getContentElement().getDomElement().getElementsByTagName(\"*\"));\n const nodesAndSuspicious = allChildren.filter(child => parseInt(child.style.zIndex) >= 100000);\n nodesAndSuspicious.forEach(child => {\n if (child.className !== \"qx-node-ui-cap\") {\n console.warn(\"moving undesired element to background\");\n child.style.zIndex = \"1\";\n }\n });\n },\n\n __addNodeListeners: function(nodeUI) {\n nodeUI.addListener(\"updateNodeDecorator\", () => this.__updateNodeUIPos(nodeUI), this);\n nodeUI.addListener(\"requestOpenLogger\", () => this.fireDataEvent(\"requestOpenLogger\", nodeUI.getNodeId()), this);\n\n nodeUI.addListener(\"nodeMovingStart\", () => {\n if (!this.getSelectedNodeIDs().includes(nodeUI.getNodeId())) {\n this.__selectNode(nodeUI);\n }\n this.__itemStartedMoving();\n }, this);\n\n nodeUI.addListener(\"nodeMoving\", () => {\n this.__updateNodeUIPos(nodeUI);\n if (\"initPos\" in nodeUI) {\n // multi node move\n const xDiff = nodeUI.getNode().getPosition().x - nodeUI.initPos.x;\n const yDiff = nodeUI.getNode().getPosition().y - nodeUI.initPos.y;\n this.__itemMoving(nodeUI.getNodeId(), xDiff, yDiff);\n }\n }, this);\n nodeUI.addListener(\"nodeMovingStop\", () => this.__itemStoppedMoving(nodeUI), this);\n\n nodeUI.addListener(\"tap\", e => {\n this.__selectNode(nodeUI, e.isCtrlPressed());\n e.stopPropagation();\n }, this);\n\n nodeUI.addListener(\"dbltap\", e => {\n this.fireDataEvent(\"nodeSelected\", nodeUI.getNodeId());\n if (nodeUI.getNode().canNodeStart()) {\n nodeUI.getNode().requestStartNode();\n }\n e.stopPropagation();\n }, this);\n },\n\n __addAnnotationListeners: function(annotation) {\n annotation.addListener(\"annotationStartedMoving\", () => {\n this.__selectAnnotation(annotation);\n this.__itemStartedMoving();\n }, this);\n\n annotation.addListener(\"annotationMoving\", () => {\n if (\"initPos\" in annotation) {\n const reprPos = annotation.getRepresentationPosition();\n const xDiff = reprPos.x - annotation.initPos.x;\n const yDiff = reprPos.y - annotation.initPos.y;\n this.__itemMoving(annotation.getId(), xDiff, yDiff);\n }\n }, this);\n\n annotation.addListener(\"annotationStoppedMoving\", () => this.__itemStoppedMoving(), this);\n\n annotation.addListener(\"annotationClicked\", e => this.__selectAnnotation(annotation, e.getData()), this);\n },\n\n getCurrentModel: function() {\n return this._currentModel;\n },\n\n getSelectedAnnotations: function() {\n return this.__selectedAnnotations;\n },\n\n getSelectedNodeUIs: function() {\n return this.__selectedNodeUIs;\n },\n\n getSelectedNodes: function() {\n return this.getSelectedNodeUIs().map(selectedNodeUI => selectedNodeUI.getNode());\n },\n\n getSelectedNodeIDs: function() {\n return this.getSelectedNodeUIs().map(selectedNodeUI => selectedNodeUI.getNodeId());\n },\n\n resetSelection: function() {\n this.__setSelectedNodes([]);\n this.__setSelectedAnnotations([]);\n this.__setSelectedItem(null);\n },\n\n __setSelectedNodes: function(selectedNodeUIs) {\n this.getSelectedNodeUIs().forEach(node => {\n if (!selectedNodeUIs.includes(node)) {\n node.removeState(\"selected\");\n }\n });\n selectedNodeUIs.forEach(selectedNode => selectedNode.addState(\"selected\"));\n this.__selectedNodeUIs = selectedNodeUIs;\n\n qx.event.message.Bus.dispatchByName(\"changeNodeSelection\", this.getSelectedNodes());\n },\n\n __setSelectedAnnotations: function(selectedAnnotations) {\n this.getSelectedAnnotations().forEach(annotation => {\n if (!selectedAnnotations.includes(annotation)) {\n annotation.setSelected(false);\n }\n });\n selectedAnnotations.forEach(selectedAnnotation => selectedAnnotation.setSelected(true));\n this.__selectedAnnotations = selectedAnnotations;\n },\n\n __selectNode: function(activeNodeUI, isControlPressed = false) {\n if (isControlPressed) {\n const index = this.getSelectedNodeUIs().indexOf(activeNodeUI);\n if (index > -1) {\n activeNodeUI.removeState(\"selected\");\n this.getSelectedNodeUIs().splice(index, 1);\n } else {\n activeNodeUI.addState(\"selected\");\n this.getSelectedNodeUIs().push(activeNodeUI);\n this.__setSelectedItem(activeNodeUI.getNodeId());\n }\n } else {\n this.__setSelectedNodes([activeNodeUI]);\n this.__setSelectedAnnotations([]);\n this.__setSelectedItem(activeNodeUI.getNodeId());\n }\n\n qx.event.message.Bus.dispatchByName(\"changeNodeSelection\", this.getSelectedNodes());\n },\n\n __selectAnnotation: function(annotation, isControlPressed = false) {\n if (isControlPressed) {\n const index = this.getSelectedAnnotations().indexOf(annotation);\n if (index > -1) {\n annotation.setSelected(false);\n this.getSelectedAnnotations().splice(index, 1);\n } else {\n annotation.setSelected(true);\n this.getSelectedAnnotations().push(annotation);\n if (this.__selectedItemId === null) {\n this.__setSelectedItem(annotation.getId());\n }\n }\n } else {\n this.__setSelectedNodes([]);\n this.__setSelectedAnnotations([annotation]);\n this.__setSelectedItem(annotation.getId());\n }\n },\n\n nodeSelected: function(nodeId) {\n const nodeUI = this.getNodeUI(nodeId);\n if (nodeUI && nodeUI.classname.includes(\"NodeUI\")) {\n this.__selectNode(nodeUI);\n }\n },\n\n _createNodeUI: function(nodeId) {\n const node = this.__getWorkbench().getNode(nodeId);\n\n const nodeUI = new osparc.workbench.NodeUI(node);\n this.bind(\"scale\", nodeUI, \"scale\");\n node.addListener(\"keyChanged\", () => this.__selectNode(nodeUI), this);\n nodeUI.populateNodeLayout(this.__svgLayer);\n nodeUI.addListener(\"renameNode\", e => this.__openNodeRenamer(e.getData()), this);\n nodeUI.addListener(\"markerClicked\", e => this.__openMarkerEditor(e.getData()), this);\n nodeUI.addListener(\"infoNode\", e => this.__openNodeInfo(e.getData()), this);\n nodeUI.addListener(\"removeNode\", e => this.fireDataEvent(\"removeNode\", e.getData()), this);\n\n if (nodeUI.getNode().getPropsForm()) {\n nodeUI.getNode().getPropsForm().addListener(\"highlightEdge\", e => {\n const {\n highlight,\n fromNodeId,\n toNodeId,\n } = e.getData();\n const edgeFound = this.__edgesUI.find(edgeUI => {\n const edge = edgeUI.getEdge();\n const inputNode = edge.getInputNode();\n const outputNode = edge.getOutputNode();\n return (inputNode.getNodeId() === fromNodeId && outputNode.getNodeId() === toNodeId)\n });\n if (edgeFound) {\n edgeFound.setHighlighted(highlight);\n }\n });\n }\n\n return nodeUI;\n },\n\n __edgeRepresentationExists: function(edge) {\n for (let i=0; i {\n let data = e.getData();\n let event = data.event;\n let dragNodeId = data.nodeId;\n let dragIsInput = data.isInput;\n\n // Register supported actions\n event.addAction(\"move\");\n\n // Register supported types\n event.addType(\"osparc-node-link\");\n let dragData = {\n dragNodeId: dragNodeId,\n dragIsInput: dragIsInput\n };\n event.addData(\"osparc-node-link\", dragData);\n\n this.__tempEdgeNodeId = dragData.dragNodeId;\n this.__tempEdgeIsInput = dragData.dragIsInput;\n\n qx.bom.Element.addListener(\n this.__desktop,\n evType,\n this.__updateTempEdge,\n this\n );\n nodeUI.setActive(false);\n }, this);\n\n nodeUI.addListener(\"edgeDragOver\", e => {\n let data = e.getData();\n let event = data.event;\n let dropNodeId = data.nodeId;\n let dropIsInput = data.isInput;\n\n let compatible = false;\n if (event.supportsType(\"osparc-node-link\")) {\n const dragNodeId = event.getData(\"osparc-node-link\").dragNodeId;\n const dragIsInput = event.getData(\"osparc-node-link\").dragIsInput;\n const dragNode = this.getNodeUI(dragNodeId);\n const dropNode = this.getNodeUI(dropNodeId);\n const dragPortTarget = dragIsInput ? dragNode.getInputPort() : dragNode.getOutputPort();\n const dropPortTarget = dropIsInput ? dropNode.getInputPort() : dropNode.getOutputPort();\n compatible = dragPortTarget.isInput !== dropPortTarget.isInput;\n }\n\n if (!compatible) {\n event.preventDefault();\n }\n }, this);\n\n nodeUI.addListener(\"edgeDrop\", e => {\n let data = e.getData();\n let event = data.event;\n let dropNodeId = data.nodeId;\n let dropIsInput = data.isInput;\n\n if (event.supportsType(\"osparc-node-link\")) {\n let dragNodeId = event.getData(\"osparc-node-link\").dragNodeId;\n let dragIsInput = event.getData(\"osparc-node-link\").dragIsInput;\n\n let nodeAId = dropIsInput ? dragNodeId : dropNodeId;\n let nodeBId = dragIsInput ? dragNodeId : dropNodeId;\n\n this._createEdgeBetweenNodes(nodeAId, nodeBId, true);\n this.__removeTempEdge();\n this.__removePointerMoveListener();\n }\n }, this);\n\n nodeUI.addListener(\"edgeDragEnd\", e => {\n if (this.__pointerPos === null) {\n return;\n }\n let data = e.getData();\n let dragNodeId = data.nodeId;\n\n if (this.__tempEdgeNodeId === dragNodeId) {\n const srvCat = this.openServiceCatalog(this.__pointerPos);\n if (srvCat) {\n this.__tempEdgeIsInput === true ? srvCat.setContext(null, dragNodeId) : srvCat.setContext(dragNodeId, null);\n srvCat.addListener(\"close\", () => this.__removeTempEdge(), this);\n } else {\n this.__removeTempEdge();\n }\n }\n this.__removePointerMoveListener();\n }, this);\n },\n\n _createEdgeBetweenNodes: function(node1Id, node2Id, autoConnect = true) {\n const edge = this.__getWorkbench().createEdge(null, node1Id, node2Id, autoConnect);\n if (!edge) {\n return;\n }\n if (this.__edgeRepresentationExists(edge)) {\n return;\n }\n\n // build representation\n const nodeUI1 = this.getNodeUI(node1Id);\n const nodeUI2 = this.getNodeUI(node2Id);\n if (nodeUI1.getCurrentBounds() === null || nodeUI2.getCurrentBounds() === null) {\n console.error(\"bounds not ready\");\n return;\n }\n\n const port1 = nodeUI1.getOutputPort();\n const port2 = nodeUI2.getInputPort();\n if (port1 && port2) {\n nodeUI2.getNode().addInputNode(node1Id);\n const pointList = this.__getEdgePoints(nodeUI1, port1, nodeUI2, port2);\n const x1 = pointList[0] ? pointList[0][0] : 0;\n const y1 = pointList[0] ? pointList[0][1] : 0;\n const x2 = pointList[1] ? pointList[1][0] : 0;\n const y2 = pointList[1] ? pointList[1][1] : 0;\n const edgeRepresentation = this.__svgLayer.drawCurve(x1, y1, x2, y2, !edge.isPortConnected());\n\n const edgeUI = new osparc.workbench.EdgeUI(edge, edgeRepresentation);\n this.__edgesUI.push(edgeUI);\n\n const hint = edgeUI.getHint();\n const that = this;\n [\n edgeRepresentation.widerCurve.node,\n edgeRepresentation.node\n ].forEach(svgEl => {\n svgEl.addEventListener(\"click\", e => {\n // this is needed to get out of the context of svg\n that.__setSelectedItem(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle\n e.stopPropagation();\n }, this);\n\n const topOffset = 20;\n [\n \"mouseover\",\n \"mousemove\"\n ].forEach(ev => {\n svgEl.addEventListener(ev, e => {\n const leftOffset = -(parseInt(hint.getHintBounds().width/2));\n const properties = {\n top: e.clientY + topOffset,\n left: e.clientX + leftOffset\n };\n hint.setLayoutProperties(properties);\n if (hint.getText()) {\n hint.show();\n }\n }, this);\n });\n });\n edgeUI.getRepresentation().widerCurve.node.addEventListener(\"mouseout\", () => hint.exclude(), this);\n this.__svgLayer.addListener(\"mouseout\", () => hint.exclude(), this);\n }\n },\n\n __updateAllEdges: function() {\n this.__nodesUI.forEach(nodeUI => {\n this.__updateNodeUIPos(nodeUI);\n });\n },\n\n __updateEdges: function(nodeUI) {\n let edgesInvolved = [];\n if (nodeUI.getNodeType() === \"service\") {\n edgesInvolved = this.__getWorkbench().getConnectedEdges(nodeUI.getNodeId());\n }\n\n edgesInvolved.forEach(edgeId => {\n const edgeUI = this.__getEdgeUI(edgeId);\n if (edgeUI) {\n let node1 = null;\n if (edgeUI.getEdge().getInputNodeId()) {\n node1 = this.getNodeUI(edgeUI.getEdge().getInputNodeId());\n }\n let port1 = node1.getOutputPort();\n let node2 = this.getNodeUI(edgeUI.getEdge().getOutputNodeId());\n let port2 = node2.getInputPort();\n const pointList = this.__getEdgePoints(node1, port1, node2, port2);\n const x1 = pointList[0][0];\n const y1 = pointList[0][1];\n const x2 = pointList[1][0];\n const y2 = pointList[1][1];\n osparc.workbench.SvgWidget.updateCurve(edgeUI.getRepresentation(), x1, y1, x2, y2);\n }\n });\n },\n\n __updateIteratorShadows: function(nodeUI) {\n if (\"shadows\" in nodeUI) {\n const shadowDiffX = -5;\n const shadowDiffY = +3;\n const pos = nodeUI.getNode().getPosition();\n const nShadows = nodeUI.shadows.length;\n for (let i=0; i nodeUI.getNodeType() === \"service\" && nodeUI.getNodeId() === nodeId);\n },\n\n __getEdgeUI: function(edgeId) {\n for (let i = 0; i < this.__edgesUI.length; i++) {\n if (this.__edgesUI[i].getEdgeId() === edgeId) {\n return this.__edgesUI[i];\n }\n }\n return null;\n },\n\n clearNode(nodeId) {\n const nodeUI = this.getNodeUI(nodeId);\n this.__clearNodeUI(nodeUI);\n },\n\n clearEdge: function(edgeId) {\n this.__clearEdge(this.__getEdgeUI(edgeId));\n },\n\n __removeEdge: function(edge) {\n this.fireDataEvent(\"removeEdge\", edge.getEdgeId());\n },\n\n __clearNodeUI: function(nodeUI) {\n if (this.__desktop.getChildren().includes(nodeUI)) {\n this.__desktop.remove(nodeUI);\n }\n nodeUI.removeShadows();\n let index = this.__nodesUI.indexOf(nodeUI);\n if (index > -1) {\n this.__nodesUI.splice(index, 1);\n }\n this.__updateHint();\n },\n\n __clearAllNodes: function() {\n while (this.__nodesUI.length) {\n this.__clearNodeUI(this.__nodesUI[this.__nodesUI.length-1]);\n }\n },\n\n __clearEdge: function(edge) {\n if (edge) {\n osparc.wrapper.Svg.removeCurve(edge.getRepresentation());\n const index = this.__edgesUI.indexOf(edge);\n if (index > -1) {\n this.__edgesUI.splice(index, 1);\n }\n }\n },\n\n __clearAllEdges: function() {\n while (this.__edgesUI.length > 0) {\n this.__clearEdge(this.__edgesUI[this.__edgesUI.length - 1]);\n }\n },\n\n __clearAnnotation: function(annotation) {\n if (annotation) {\n if (annotation.getRepresentation()) {\n osparc.wrapper.Svg.removeItem(annotation.getRepresentation());\n }\n if (annotation.getId() in this.__annotations) {\n delete this.__annotations[annotation.getId()];\n }\n }\n },\n\n __clearAllAnnotations: function() {\n while (Object.keys(this.__annotations).length > 0) {\n const keys = Object.keys(this.__annotations);\n this.__clearAnnotation(this.__annotations[keys[keys.length - 1]]);\n }\n },\n\n _clearAll: function() {\n this.__clearAllNodes();\n this.__clearAllEdges();\n this.__clearAllAnnotations();\n },\n\n __reloadCurrentModel: function() {\n if (this._currentModel) {\n this.loadModel(this.getStudy().getWorkbench());\n }\n },\n\n loadModel: function(model) {\n if (this.__svgLayer.getReady()) {\n this._loadModel(model);\n } else {\n this.__svgLayer.addListenerOnce(\"SvgWidgetReady\", () => this._loadModel(model), this);\n }\n },\n\n _loadModel: async function(model) {\n this._clearAll();\n this._currentModel = model;\n if (model) {\n // create nodes\n const nodes = model.getNodes();\n this.__renderNodes(nodes);\n this.__renderAnnotations(model.getStudy().getUi());\n }\n },\n\n __renderNodes: function(nodes) {\n let nNodesToRender = Object.keys(nodes).length;\n const nodeUIs = [];\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const nodeUI = this._createNodeUI(nodeId);\n nodeUI.addListenerOnce(\"appear\", () => {\n nNodesToRender--;\n if (nNodesToRender === 0) {\n // all nodes rendered\n this.__renderEdges(nodes);\n\n setTimeout(() => {\n // move to position (0, 0)\n this._workbenchLayoutScroll.scrollToX(0);\n this._workbenchLayoutScroll.scrollToY(0);\n }, 10);\n }\n }, this);\n this._addNodeUIToWorkbench(nodeUI, node.getPosition());\n nodeUIs.push(nodeUI);\n }\n nodeUIs.forEach(nodeUI => this.__createDragDropMechanism(nodeUI));\n },\n\n __renderEdges: async function(nodes) {\n // create edges\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const inputNodeIDs = node.getInputNodes();\n inputNodeIDs.forEach(inputNodeId => {\n if (inputNodeId in nodes) {\n this._createEdgeBetweenNodes(inputNodeId, nodeId, false);\n }\n });\n }\n },\n\n __renderAnnotations: function(studyUI) {\n const initData = studyUI.getAnnotationsInitData();\n const annotations = initData ? initData : studyUI.getAnnotations();\n Object.entries(annotations).forEach(([annotationId, annotation]) => {\n if (annotation instanceof osparc.workbench.Annotation) {\n this.__addAnnotation(annotation.serialize(), annotationId);\n } else {\n this.__addAnnotation(annotation, annotationId);\n }\n });\n if (initData) {\n studyUI.nullAnnotationsInitData();\n }\n },\n\n __setSelectedItem: function(newID) {\n const oldId = this.__selectedItemId;\n if (oldId) {\n if (this.__isSelectedItemAnEdge()) {\n const edge = this.__getEdgeUI(oldId);\n edge.setSelected(false);\n } else if (this.__isSelectedItemAnAnnotation()) {\n const annotation = this.__getAnnotation(oldId);\n annotation.setSelected(false);\n }\n }\n\n this.__selectedItemId = newID;\n if (this.__isSelectedItemAnEdge()) {\n const edge = this.__getEdgeUI(newID);\n edge.setSelected(true);\n } else if (this.__isSelectedItemAnAnnotation()) {\n const annotation = this.__getAnnotation(newID);\n this.__setSelectedAnnotations([annotation]);\n const annotationEditor = this.__getAnnotationEditorView();\n annotationEditor.setAnnotation(annotation);\n annotationEditor.makeItModal();\n annotationEditor.addListener(\"deleteAnnotation\", () => {\n annotationEditor.exclude();\n this.__removeAnnotation(annotation.getId());\n this.resetSelection();\n }, this);\n annotation.addListener(\"changeColor\", e => this.__annotationLastColor = e.getData());\n } else {\n this.fireDataEvent(\"changeSelectedNode\", newID);\n }\n\n if (this.__deleteItemButton) {\n this.__deleteItemButton.setVisibility(this.__isSelectedItemAnEdge() ? \"visible\" : \"excluded\");\n }\n },\n\n __isSelectedItemAnEdge: function() {\n return Boolean(this.__selectedItemId && this.__getEdgeUI(this.__selectedItemId));\n },\n\n __isSelectedItemAnAnnotation: function() {\n return Object.keys(this.__annotations).includes(this.__selectedItemId);\n },\n\n __getAnnotation: function() {\n return this.__isSelectedItemAnAnnotation() ? this.__annotations[this.__selectedItemId] : null;\n },\n\n __scaleCoordinates: function(x, y) {\n return {\n x: parseInt(x / this.getScale()),\n y: parseInt(y / this.getScale())\n };\n },\n\n __unscaleCoordinates: function(x, y) {\n return {\n x: parseInt(x * this.getScale()),\n y: parseInt(y * this.getScale())\n };\n },\n\n __openContextMenu: function(e) {\n const radialMenuWrapper = osparc.wrapper.RadialMenu.getInstance();\n if (radialMenuWrapper.getLibReady()) {\n this.__doOpenContextMenu(e);\n } else {\n radialMenuWrapper.init()\n .then(loaded => {\n if (loaded) {\n this.__doOpenContextMenu(e);\n }\n });\n }\n },\n\n __doOpenContextMenu: function(e) {\n const wbPos = this.__pointerEventToWorkbenchPos(e);\n const nodeUI = this.__cursorOnNodeUI(wbPos);\n const actions = {\n addService: {\n \"text\": \"\\uf067\", // plus\n \"action\": () => this.__openServiceCatalog(e)\n },\n zoomIn: {\n \"text\": \"\\uf00e\", // search-plus\n \"action\": () => {\n this.__pointerPos = this.__pointerEventToWorkbenchPos(e);\n this.zoom(true);\n }\n },\n zoomReset: {\n \"text\": \"\\uf002\", // search\n \"action\": () => this.setScale(1)\n },\n zoomOut: {\n \"text\": \"\\uf010\", // search-minus\n \"action\": () => {\n this.__pointerPos = this.__pointerEventToWorkbenchPos(e);\n this.zoom(false);\n }\n },\n drawText: {\n \"text\": \"\\uf040\", // pencil\n \"action\": () => {\n const pointerPos = this.__pointerEventToWorkbenchPos(e);\n this.startAnnotationsText(pointerPos);\n }\n },\n drawRect: {\n \"text\": \"\\uf044\", // brush with rect\n \"action\": () => this.startAnnotationsRect()\n },\n removeNode: {\n \"text\": \"\\uf014\", // trash\n \"action\": () => nodeUI.fireDataEvent(\"removeNode\", nodeUI.getNodeId())\n },\n startDynService: {\n \"text\": \"\\uf04b\", // play\n \"action\": () => nodeUI.getNode().requestStartNode()\n },\n stopDynService: {\n \"text\": \"\\uf04d\", // stop\n \"action\": () => nodeUI.getNode().requestStopNode(true)\n },\n addRemoveMarker: {\n \"text\": \"\\uf097\", // marker\n \"action\": () => nodeUI.getNode().toggleMarker()\n },\n addServiceInput: {\n \"text\": \"\\uf090\", // in\n \"action\": () => {\n const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), true);\n const srvCat = this.openServiceCatalog(freePos);\n if (srvCat) {\n srvCat.setContext(null, nodeUI.getNodeId());\n }\n }\n },\n addServiceOutput: {\n \"text\": \"\\uf08b\", // out\n \"action\": () => {\n const freePos = this.getStudy().getWorkbench().getFreePosition(nodeUI.getNode(), false);\n const srvCat = this.openServiceCatalog(freePos);\n if (srvCat) {\n srvCat.setContext(nodeUI.getNodeId(), null);\n }\n }\n },\n noAction: {\n \"text\": \"\\uf05e\", // verboten\n \"action\": () => {}\n }\n };\n let buttons = [];\n if (nodeUI) {\n const node = nodeUI.getNode();\n if (node.isDynamic()) {\n const status = node.getStatus().getInteractive();\n if ([\"idle\", \"failed\"].includes(status)) {\n buttons.push(actions.startDynService);\n } else if ([\"ready\"].includes(status)) {\n buttons.push(actions.stopDynService);\n }\n }\n if (buttons.length === 0) {\n buttons.push(actions.addRemoveMarker);\n }\n buttons = buttons.concat([\n node.hasOutputs() ? actions.addServiceOutput : actions.noAction,\n actions.removeNode,\n node.hasInputs() ? actions.addServiceInput : actions.noAction\n ]);\n } else {\n buttons = [\n actions.addService,\n actions.drawText,\n actions.drawRect\n ];\n }\n this.__buttonsToContextMenu(e, buttons);\n },\n\n __buttonsToContextMenu: function(e, buttons) {\n if (this.__contextMenu) {\n this.__contextMenu.hide();\n }\n let rotation = 3 * Math.PI / 2;\n rotation -= (2/buttons.length) * (Math.PI / 2);\n const radialMenuWrapper = osparc.wrapper.RadialMenu.getInstance();\n const contextMenu = this.__contextMenu = radialMenuWrapper.createMenu({rotation});\n contextMenu.addButtons(buttons);\n contextMenu.setPos(e.getDocumentLeft() - contextMenu.w2, e.getDocumentTop() - contextMenu.h2);\n contextMenu.show();\n },\n\n __mouseDown: function(e) {\n if (e.isMiddlePressed()) {\n this.__pointerPos = this.__pointerEventToWorkbenchPos(e);\n this.__panning = true;\n this.set({\n cursor: \"move\"\n });\n } else if (e.isRightPressed()) {\n this.__openContextMenu(e);\n }\n },\n\n __mouseDownOnSVG: function(e) {\n if (e.isLeftPressed()) {\n if (this.__annotatingNote || this.__annotatingRect || this.__annotatingText) {\n this.__annotationInitPos = this.__pointerEventToWorkbenchPos(e);\n } else {\n this.__selectionRectInitPos = this.__pointerEventToWorkbenchPos(e);\n }\n }\n },\n\n __mouseMove: function(e) {\n if (this.__isDraggingLink) {\n this.__draggingLink(e, true);\n } else if (this.__tempEdgeRepr === null && (this.__annotatingNote || this.__annotatingRect || this.__annotatingText) && this.__annotationInitPos && e.isLeftPressed()) {\n this.__drawingAnnotation(e);\n } else if (this.__tempEdgeRepr === null && this.__selectionRectInitPos && e.isLeftPressed()) {\n this.__drawingSelectionRect(e);\n } else if (this.__panning && e.isMiddlePressed()) {\n const oldPos = this.__pointerPos;\n const newPos = this.__pointerPos = this.__pointerEventToWorkbenchPos(e);\n const moveX = parseInt((oldPos.x-newPos.x) * this.getScale());\n const moveY = parseInt((oldPos.y-newPos.y) * this.getScale());\n this._workbenchLayoutScroll.scrollToX(this._workbenchLayoutScroll.getScrollX() + moveX);\n this._workbenchLayoutScroll.scrollToY(this._workbenchLayoutScroll.getScrollY() + moveY);\n this.set({\n cursor: \"move\"\n });\n }\n },\n\n __mouseUp: function(e) {\n if (this.__selectionRectInitPos) {\n this.__selectionRectInitPos = null;\n }\n if (this.__selectionRectRepr) {\n osparc.wrapper.Svg.removeItem(this.__selectionRectRepr);\n this.__selectionRectRepr = null;\n }\n\n const annotationInitPos = osparc.utils.Utils.deepCloneObject(this.__annotationInitPos);\n if (this.__annotationInitPos) {\n this.__annotationInitPos = null;\n }\n if (this.__annotatingNote || this.__annotatingRect || this.__annotatingText) {\n let annotationType = null;\n if (this.__annotatingNote) {\n annotationType = \"note\";\n } else if (this.__annotatingRect) {\n annotationType = \"rect\";\n } else if (this.__annotatingText) {\n annotationType = \"text\";\n }\n if (this.__consolidateAnnotation(annotationType, annotationInitPos, this.__rectAnnotationRepr)) {\n if (this.__rectAnnotationRepr) {\n osparc.wrapper.Svg.removeItem(this.__rectAnnotationRepr);\n this.__rectAnnotationRepr = null;\n }\n this.__annotatingNote = false;\n this.__annotatingRect = false;\n this.__annotatingText = false;\n this.__toolHint.setValue(null);\n }\n }\n\n if (this.__panning) {\n this.__panning = false;\n this.set({\n cursor: \"auto\"\n });\n } else if (this.__isDraggingLink) {\n this.__dropLink(e);\n }\n\n this.activate();\n },\n\n __mouseWheel: function(e) {\n this.__pointerPos = this.__pointerEventToWorkbenchPos(e);\n const zoomIn = e.getWheelDelta() < 0;\n this.zoom(zoomIn);\n },\n\n zoom: function(zoomIn = true) {\n const zoomValues = this.self().ZOOM_VALUES;\n const nextItem = () => {\n const i = zoomValues.indexOf(this.getScale());\n if (i+1 {\n const i = zoomValues.indexOf(this.getScale());\n if (i-1>=0) {\n return zoomValues[i-1];\n }\n return zoomValues[i];\n };\n\n const newScale = zoomIn ? nextItem() : prevItem();\n this.setScale(newScale);\n },\n\n __applyScale: function(value) {\n const el = this.__workbenchLayout.getContentElement().getDomElement();\n osparc.utils.Utils.setZoom(el, value);\n\n this.__updateWorkbenchBounds();\n },\n\n __updateWorkbenchBounds: function() {\n const nodeBounds = this.__getNodesBounds();\n if (nodeBounds === null) {\n this.__updateHint();\n return;\n }\n\n // Fit to nodes size\n let scale = this.getScale();\n const nodesWidth = nodeBounds.right + osparc.workbench.NodeUI.NODE_WIDTH;\n const nodesHeight = nodeBounds.bottom + osparc.workbench.NodeUI.NODE_HEIGHT;\n const scaledWidth = parseInt(nodesWidth * scale);\n const scaledHeight = parseInt(nodesHeight * scale);\n let wbWidth = scaledWidth;\n let wbHeight = scaledHeight;\n this.__workbenchLayout.set({\n minWidth: scale > 1 ? scaledWidth : nodesWidth,\n minHeight: scale > 1 ? scaledHeight : nodesHeight\n });\n this.__workbenchLayout.set({\n width: scale > 1 ? scaledWidth : nodesWidth,\n height: scale > 1 ? scaledHeight : nodesHeight\n });\n\n // Fill Screen\n const screenWidth = this.getBounds().width - 10; // scrollbar\n const screenHeight = this.getBounds().height - 10; // scrollbar\n const scaledScreenWidth = parseInt(screenWidth / scale);\n const scaledScreenHeight = parseInt(screenHeight / scale);\n if (this.__workbenchLayout.getWidth() < scaledScreenWidth) {\n wbWidth = 0;\n this.__workbenchLayout.set({\n minWidth: scaledScreenWidth\n });\n }\n if (this.__workbenchLayout.getHeight() < scaledScreenHeight) {\n wbHeight = 0;\n this.__workbenchLayout.set({\n minHeight: scaledScreenHeight\n });\n }\n\n // Hack/Workaround: recalculate sliders\n setTimeout(() => {\n // eslint-disable-next-line no-underscore-dangle\n this._workbenchLayoutScroll._computeScrollbars();\n\n const paneSize = this._workbenchLayoutScroll.getChildControl(\"pane\").getInnerSize();\n const barX = this._workbenchLayoutScroll.getChildControl(\"scrollbar-x\");\n const barY = this._workbenchLayoutScroll.getChildControl(\"scrollbar-y\");\n const sliderKnobX = barX.getChildControl(\"slider\").getChildControl(\"knob\");\n const sliderKnobY = barY.getChildControl(\"slider\").getChildControl(\"knob\");\n if (wbWidth > paneSize.width) {\n barX.setMaximum(wbWidth - paneSize.width);\n barX.setKnobFactor(paneSize.width / wbWidth);\n sliderKnobX.resetBackgroundColor();\n } else {\n barX.setMaximum(0);\n barX.setKnobFactor(1);\n // changing visibility triggers _computeScrollbars, which undoes the workaround\n sliderKnobX.setBackgroundColor(\"transparent\");\n }\n if (wbHeight > paneSize.height) {\n barY.setMaximum(wbHeight - paneSize.height);\n barY.setKnobFactor(paneSize.height / wbHeight);\n sliderKnobY.resetBackgroundColor();\n } else {\n barY.setMaximum(0);\n barY.setKnobFactor(1);\n // changing visibility triggers _computeScrollbars, which undoes the workaround\n sliderKnobY.setBackgroundColor(\"transparent\");\n }\n }, 20);\n },\n\n _fitScaleToNodes: function(maxScale = 1.0) {\n const xFit = this.getBounds().width / this._currentModel.getFarthestPosition().x;\n const yFit = this.getBounds().height / this._currentModel.getFarthestPosition().y;\n\n const prefScale = Math.min(Math.min(xFit, yFit), maxScale);\n\n // reverse mutates original. make a copy first\n const closestDown = this.self().ZOOM_VALUES.slice().reverse().find(z => z <= prefScale);\n this.setScale(closestDown);\n },\n\n startAnnotationsNote: function() {\n this.__annotatingNote = true;\n this.__annotatingRect = false;\n this.__annotatingText = false;\n this.__toolHint.setValue(this.tr(\"Pick the position\"));\n },\n\n startAnnotationsRect: function() {\n this.__annotatingNote = false;\n this.__annotatingRect = true;\n this.__annotatingText = false;\n this.__toolHint.setValue(this.tr(\"Draw a rectangle\"));\n },\n\n startAnnotationsText: function(workbenchPos) {\n this.__annotatingNote = false;\n this.__annotatingText = true;\n this.__annotatingRect = false;\n if (workbenchPos) {\n this.__annotationInitPos = workbenchPos;\n this.__mouseUp();\n } else {\n this.__toolHint.setValue(this.tr(\"Pick the position\"));\n }\n },\n\n __openNodeRenamer: function(nodeId) {\n const node = this.getStudy().getWorkbench().getNode(nodeId);\n const treeItemRenamer = new osparc.widget.Renamer(node.getLabel());\n treeItemRenamer.addListener(\"labelChanged\", e => {\n const {\n newLabel\n } = e.getData();\n if (node) {\n node.renameNode(newLabel);\n }\n treeItemRenamer.close();\n }, this);\n treeItemRenamer.center();\n treeItemRenamer.open();\n },\n\n __openMarkerEditor: function(nodeId) {\n if (nodeId) {\n const node = this.getStudy().getWorkbench().getNode(nodeId);\n const marker = node.getMarker();\n if (marker) {\n const annotationEditor = this.__getAnnotationEditorView();\n annotationEditor.setMarker(marker);\n annotationEditor.makeItModal();\n }\n }\n },\n\n __openNodeInfo: function(nodeId) {\n if (nodeId) {\n const node = this.getStudy().getWorkbench().getNode(nodeId);\n const metadata = node.getMetaData();\n const serviceDetails = new osparc.info.ServiceLarge(metadata, {\n nodeId,\n label: node.getLabel(),\n studyId: this.getStudy().getUuid()\n });\n osparc.info.ServiceLarge.popUpInWindow(serviceDetails);\n }\n },\n\n _addEventListeners: function() {\n this.addListener(\"appear\", () => {\n this.addListener(\"resize\", () => this.__updateAllEdges(), this);\n }, this);\n\n this.addListenerOnce(\"appear\", () => {\n const domEl = this.getContentElement().getDomElement();\n [\n \"dragenter\",\n \"dragover\",\n \"dragleave\"\n ].forEach(signalName => {\n domEl.addEventListener(signalName, e => {\n const dragging = signalName !== \"dragleave\";\n this.__draggingFile(e, dragging);\n }, this);\n });\n domEl.addEventListener(\"drop\", this.__dropFile.bind(this), false);\n\n this.setDroppable(true);\n const stopDragging = e => {\n this.__isDraggingLink = null;\n this.__updateDropHere(false);\n };\n const startDragging = e => {\n this.addListenerOnce(\"dragleave\", stopDragging, this);\n this.addListenerOnce(\"dragover\", startDragging, this);\n this.__draggingLink(e, true);\n };\n this.addListenerOnce(\"dragover\", startDragging, this);\n\n this.addListener(\"mousedown\", this.__mouseDown, this);\n this.addListener(\"mousemove\", this.__mouseMove, this);\n this.addListener(\"mouseup\", this.__mouseUp, this);\n this._listenToMouseWheel();\n });\n\n this.addListener(\"keypress\", keyEvent => {\n const selectedNodeIDs = this.getSelectedNodeIDs();\n switch (keyEvent.getKeyIdentifier()) {\n case \"F2\":\n if (selectedNodeIDs.length === 1) {\n this.__openNodeRenamer(selectedNodeIDs[0]);\n }\n break;\n case \"I\":\n if (selectedNodeIDs.length === 1) {\n this.__openNodeInfo(selectedNodeIDs[0]);\n }\n break;\n case \"Delete\":\n if (selectedNodeIDs.length === 1) {\n this.fireDataEvent(\"removeNode\", selectedNodeIDs[0]);\n } else if (selectedNodeIDs.length) {\n this.fireDataEvent(\"removeNodes\", selectedNodeIDs);\n } else if (this.__isSelectedItemAnEdge()) {\n this.__removeEdge(this.__getEdgeUI(this.__selectedItemId));\n this.resetSelection();\n }\n break;\n case \"Escape\":\n this.resetSelection();\n this.__removeTempEdge();\n this.__removePointerMoveListener();\n break;\n }\n }, this);\n\n this.__workbenchLayout.addListener(\"tap\", () => this.resetSelection(), this);\n this.__workbenchLayout.addListener(\"dbltap\", e => this.__openServiceCatalog(e), this);\n this.__workbenchLayout.addListener(\"resize\", () => this.__updateHint(), this);\n\n this.__svgLayer.addListener(\"mousedown\", this.__mouseDownOnSVG, this);\n },\n\n _listenToMouseWheel: function() {\n this.addListener(\"mousewheel\", this.__mouseWheel, this);\n },\n\n __allowDragFile: function(e) {\n let allow = false;\n if (this.__isDraggingFile) {\n // item still being dragged\n allow = true;\n } else {\n // item drag from the outside world\n allow = e.target instanceof SVGElement;\n this.__isDraggingFile = allow;\n }\n return allow;\n },\n\n __allowDragLink: function(e) {\n let allow = false;\n if (this.__isDraggingLink) {\n // item still being dragged\n allow = true;\n } else if (\"supportsType\" in e) {\n // item drag from osparc's file tree\n allow = e.supportsType(\"osparc-file-link\");\n if (allow) {\n // store \"osparc-file-link\" data in variable,\n // because the mousemove event doesn't contain that information\n this.__isDraggingLink = e.getData(\"osparc-file-link\");\n }\n }\n return allow;\n },\n\n __draggingFile: function(e, dragging) {\n if (this.__allowDragFile(e)) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n dragging = false;\n }\n\n if (!this.isPropertyInitialized(\"study\") || this.getStudy().isReadOnly()) {\n return;\n }\n\n const posX = e.offsetX + 2;\n const posY = e.offsetY + 2;\n this.__updateDropHere(dragging, posX, posY);\n },\n\n __draggingLink: function(e, dragging) {\n if (this.__allowDragLink(e)) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n dragging = false;\n }\n\n if (!this.isPropertyInitialized(\"study\") || this.getStudy().isReadOnly()) {\n return;\n }\n\n const pos = this.__pointerEventToWorkbenchPos(e);\n this.__updateDropHere(dragging, pos.x, pos.y);\n },\n\n __updateDropHere: function(show, posX, posY) {\n const boxWidth = 120;\n const boxHeight = 60;\n if (this.__dropHereUI === null) {\n const dropHereNodeUI = this.__dropHereUI = new qx.ui.basic.Label(this.tr(\"Drop here\")).set({\n font: \"workbench-start-hint\",\n textColor: \"workbench-start-hint\"\n });\n dropHereNodeUI.exclude();\n this.__workbenchLayout.add(dropHereNodeUI);\n dropHereNodeUI.rect = this.__svgLayer.drawDashedRect(boxWidth, boxHeight);\n }\n let dropHere = this.__dropHereUI;\n if (show) {\n dropHere.show();\n const dropMeBounds = dropHere.getBounds() || dropHere.getSizeHint();\n dropHere.setLayoutProperties({\n left: posX - parseInt(dropMeBounds.width/2) - parseInt(boxWidth/2),\n top: posY - parseInt(dropMeBounds.height/2)- parseInt(boxHeight/2)\n });\n if (\"rect\" in dropHere) {\n osparc.wrapper.Svg.updateItemPos(dropHere.rect, posX - boxWidth, posY - boxHeight);\n }\n } else {\n dropHere.exclude();\n osparc.wrapper.Svg.removeItem(dropHere.rect);\n dropHere = null;\n }\n },\n\n __drawingSelectionRect: function(e) {\n // draw rect\n const initPos = this.__selectionRectInitPos;\n const currentPos = this.__pointerEventToWorkbenchPos(e);\n const x = Math.min(initPos.x, currentPos.x);\n const y = Math.min(initPos.y, currentPos.y);\n const width = Math.abs(initPos.x - currentPos.x);\n const height = Math.abs(initPos.y - currentPos.y);\n if (this.__selectionRectRepr === null) {\n this.__selectionRectRepr = this.__svgLayer.drawFilledRect(width, height, x, y);\n } else {\n osparc.wrapper.Svg.updateRect(this.__selectionRectRepr, width, height, x, y);\n }\n\n // select nodes\n const nodeUIs = [];\n this.__nodesUI.forEach(nodeUI => {\n const nodeBounds = nodeUI.getCurrentBounds();\n if (nodeBounds) {\n const nodePos = nodeUI.getNode().getPosition();\n const nodePosX = nodePos.x + nodeBounds.width/2;\n const nodePosY = nodePos.y + nodeBounds.height/2;\n if (\n nodePosX > x &&\n nodePosX < x+width &&\n nodePosY > y &&\n nodePosY < y+height\n ) {\n nodeUIs.push(nodeUI);\n }\n }\n });\n this.__setSelectedNodes(nodeUIs);\n\n // select annotations\n const annotations = [];\n Object.keys(this.__annotations).forEach(annotationId => {\n const annotation = this.__annotations[annotationId];\n const attrs = annotation.getAttributes();\n const annotationPosX = parseInt(attrs.x) + parseInt(attrs.width/2);\n const annotationPosY = parseInt(attrs.y) + parseInt(attrs.height/2);\n if (\n annotationPosX > x &&\n annotationPosX < x+width &&\n annotationPosY > y &&\n annotationPosY < y+height\n ) {\n annotations.push(annotation);\n }\n });\n this.__setSelectedAnnotations(annotations);\n },\n\n __drawingAnnotation: function(e) {\n // draw rect\n const initPos = this.__annotationInitPos;\n const currentPos = this.__pointerEventToWorkbenchPos(e);\n const x = Math.min(initPos.x, currentPos.x);\n const y = Math.min(initPos.y, currentPos.y);\n const width = Math.abs(initPos.x - currentPos.x);\n const height = Math.abs(initPos.y - currentPos.y);\n if ([null, undefined].includes(this.__rectAnnotationRepr)) {\n const color = this.__annotationLastColor ? this.__annotationLastColor : osparc.workbench.Annotation.DEFAULT_COLOR;\n this.__rectAnnotationRepr = this.__svgLayer.drawAnnotationRect(width, height, x, y, color);\n } else {\n osparc.wrapper.Svg.updateRect(this.__rectAnnotationRepr, width, height, x, y);\n }\n },\n\n __consolidateAnnotation: function(type, initPos, annotation) {\n const color = this.__annotationLastColor ? this.__annotationLastColor : osparc.workbench.Annotation.DEFAULT_COLOR;\n const serializeData = {\n type,\n color,\n attributes: {}\n };\n if (type === \"rect\") {\n if ([null, undefined].includes(annotation)) {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Draw a rectangle first\"), \"WARNING\");\n return false;\n }\n serializeData.attributes = osparc.wrapper.Svg.getRectAttributes(annotation);\n } else {\n serializeData.attributes = initPos;\n }\n if (type === \"note\") {\n const noteEditor = new osparc.editor.AnnotationNoteCreator();\n const win = osparc.editor.AnnotationNoteCreator.popUpInWindow(noteEditor);\n noteEditor.addListener(\"addNote\", () => {\n const gid = noteEditor.getRecipientGid();\n serializeData.attributes.recipientGid = gid;\n serializeData.attributes.text = noteEditor.getNote();\n const user = osparc.store.Groups.getInstance().getUserByGroupId(gid)\n if (user) {\n osparc.notification.Notifications.postNewAnnotationNote(user.getUserId(), this.getStudy().getUuid());\n }\n this.__addAnnotation(serializeData);\n win.close();\n }, this);\n noteEditor.addListener(\"cancel\", () => win.close());\n } else if (type === \"rect\") {\n this.__addAnnotation(serializeData);\n } else if (type === \"text\") {\n const tempAnnotation = new osparc.workbench.Annotation(null, {\n type: \"text\",\n color,\n attributes: {\n text: \"\",\n fontSize: 12\n }\n });\n const annotationEditor = new osparc.editor.AnnotationEditor(tempAnnotation);\n annotationEditor.addAddButtons();\n tempAnnotation.addListener(\"changeColor\", e => this.__annotationLastColor = e.getData());\n annotationEditor.addListener(\"appear\", () => {\n const textField = annotationEditor.getChildControl(\"text-field\");\n textField.focus();\n textField.activate();\n });\n const win = osparc.ui.window.Window.popUpInWindow(annotationEditor, \"Add Text Annotation\", 220, 135).set({\n clickAwayClose: true,\n showClose: true\n });\n annotationEditor.addListener(\"addAnnotation\", () => {\n win.close();\n const form = annotationEditor.getForm();\n serializeData.attributes.text = form.getItem(\"text\").getValue();\n serializeData.attributes.color = form.getItem(\"color\").getValue();\n serializeData.color = form.getItem(\"color\").getValue();\n serializeData.attributes.fontSize = form.getItem(\"size\").getValue();\n this.__addAnnotation(serializeData);\n }, this);\n win.open();\n }\n return true;\n },\n\n __addAnnotation: function(data, id) {\n const annotation = new osparc.workbench.Annotation(this.__svgLayer, data, id);\n this.__addAnnotationListeners(annotation);\n this.__annotations[annotation.getId()] = annotation;\n this.getStudy().getUi().addAnnotation(annotation);\n },\n\n __removeAnnotation: function(id) {\n if (id in this.__annotations) {\n const annotation = this.__annotations[id];\n this.__clearAnnotation(annotation);\n this.getStudy().getUi().removeAnnotation(id);\n }\n },\n\n __dropFile: async function(e) {\n this.__draggingFile(e, false);\n\n if (\"dataTransfer\" in e) {\n this.__isDraggingFile = false;\n const files = osparc.file.FileDrop.getFilesFromEvent(e);\n if (files.length) {\n if (files.length === 1) {\n const pos = {\n x: e.offsetX,\n y: e.offsetY\n };\n const service = qx.data.marshal.Json.createModel(osparc.service.Utils.getFilePicker());\n const nodeUI = await this.__addNode(service, pos);\n if (nodeUI) {\n const filePicker = new osparc.file.FilePicker(nodeUI.getNode(), \"workbench\");\n filePicker.uploadPendingFiles(files);\n filePicker.addListener(\"fileUploaded\", () => this.fireDataEvent(\"nodeSelected\", nodeUI.getNodeId()), this);\n }\n } else {\n osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, \"ERROR\");\n }\n } else {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Folders are not accepted. You might want to upload a zip file.\"), \"ERROR\");\n }\n }\n },\n\n __dropLink: async function(e) {\n this.__draggingLink(e, false);\n\n if (this.__isDraggingLink && \"dragData\" in this.__isDraggingLink) {\n const data = this.__isDraggingLink[\"dragData\"];\n this.__isDraggingLink = null;\n const pos = this.__pointerEventToWorkbenchPos(e, false);\n const service = qx.data.marshal.Json.createModel(osparc.service.Utils.getFilePicker());\n const nodeUI = await this.__addNode(service, pos);\n if (nodeUI) {\n const node = nodeUI.getNode();\n osparc.file.FilePicker.setOutputValueFromStore(node, data.getLocation(), data.getDatasetId(), data.getFileId(), data.getLabel());\n }\n }\n },\n\n __updateHint: function() {\n if (!this.isPropertyInitialized(\"study\") || this.__startHint === null) {\n return;\n }\n const isEmptyWorkspace = this.getStudy().isPipelineEmpty();\n this.__startHint.setVisibility(isEmptyWorkspace ? \"visible\" : \"excluded\");\n if (isEmptyWorkspace) {\n const hintBounds = this.__startHint.getBounds() || this.__startHint.getSizeHint();\n const {\n height,\n width\n } = this.__workbenchLayout.getBounds();\n this.__startHint.setLayoutProperties({\n top: Math.round((height - hintBounds.height) / 2),\n left: Math.round((width - hintBounds.width) / 2)\n });\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(SVGElement)\n */\n\n/**\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let workbenchUIPreview = new osparc.workbench.WorkbenchUIPreview();\n * this.getRoot().add(workbenchUIPreview);\n *
\n */\n\nqx.Class.define(\"osparc.workbench.WorkbenchUIPreview\", {\n extend: osparc.workbench.WorkbenchUI,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n backgroundColor: \"background-main\"\n });\n },\n\n members: {\n // overridden\n _addItemsToLayout: function() {\n this._addWorkbenchLayer();\n },\n\n // overridden\n _loadModel: function(model) {\n this._clearAll();\n this.resetSelection();\n this._currentModel = model;\n if (model) {\n qx.ui.core.queue.Visibility.flush();\n\n // create nodes\n const nodes = model.getNodes();\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const nodeUI = this._createNodeUI(nodeId);\n nodeUI.setIsMovable(false);\n this._addNodeUIToWorkbench(nodeUI, node.getPosition());\n }\n qx.ui.core.queue.Layout.flush();\n\n // create edges\n for (const nodeId in nodes) {\n const node = nodes[nodeId];\n const inputNodeIDs = node.getInputNodes();\n inputNodeIDs.forEach(inputNodeId => {\n if (inputNodeId in nodes) {\n this._createEdgeBetweenNodes(inputNodeId, nodeId, false);\n }\n });\n }\n\n const maxScale = 0.7;\n this._fitScaleToNodes(maxScale);\n }\n },\n\n // overridden\n _addEventListeners: function() {\n this.addListenerOnce(\"appear\", this._listenToMouseWheel, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/* global GitgraphJS */\n\n/**\n * @asset(gitgraph/gitgraph.js)\n * @ignore(GitgraphJS)\n */\n\n/**\n * A qooxdoo wrapper for\n * GitGraph\n */\n\nqx.Class.define(\"osparc.wrapper.GitGraph\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this.__commits = [];\n },\n\n statics: {\n NAME: \"GitGraph\",\n VERSION: \"1.4.0\",\n URL: \"https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-js\",\n\n COMMIT_SPACING: 20,\n\n getTemplateConfig: function() {\n const textColor = qx.theme.manager.Color.getInstance().resolve(\"text\");\n const masterColor = \"#1486da\";\n const iterationColor = \"#e01a94\";\n const colors = Array(50).fill(iterationColor);\n colors.unshift(masterColor);\n const defaultFont = osparc.utils.Utils.getDefaultFont();\n return {\n colors: colors,\n commit: {\n spacing: osparc.wrapper.GitGraph.COMMIT_SPACING,\n dot: {\n size: 3\n },\n message: {\n display: false,\n displayAuthor: false,\n displayBranch: false,\n displayHash: false,\n color: textColor,\n font: `normal ${defaultFont[\"size\"]}px ${defaultFont[\"family\"]}`\n }\n },\n branch: {\n spacing: 20,\n lineWidth: 1,\n label: {\n display: false,\n bgColor: \"transparent\",\n strokeColor: \"transparent\"\n }\n }\n };\n }\n },\n\n properties: {\n libReady: {\n nullable: false,\n init: false,\n check: \"Boolean\"\n }\n },\n\n events: {\n \"snapshotTap\": \"qx.event.type.Data\"\n },\n\n members: {\n __gitGraphCanvas: null,\n __gitgraph: null,\n __selectedCommit: null,\n __commits: null,\n __branches: null,\n __parentIDs: null,\n\n init: function(gitGraphCanvas, gitGraphInteract) {\n return new Promise((resolve, reject) => {\n this.__gitGraphCanvas = gitGraphCanvas;\n this.__gitGraphInteract = gitGraphInteract;\n const el = gitGraphCanvas.getContentElement().getDomElement();\n if (this.getLibReady()) {\n const gitgraph = this.__createGraph(el);\n resolve(gitgraph);\n return;\n }\n\n // initialize the script loading\n const gitGraphPath = \"gitgraph/gitgraph.js\";\n const dynLoader = new qx.util.DynamicScriptLoader([\n gitGraphPath\n ]);\n\n dynLoader.addListenerOnce(\"ready\", e => {\n console.log(gitGraphPath + \" loaded\");\n const gitgraph = this.__createGraph(el);\n this.setLibReady(true);\n resolve(gitgraph);\n }, this);\n\n dynLoader.addListener(\"failed\", e => {\n let data = e.getData();\n console.error(\"failed to load \" + data.script);\n reject(data);\n }, this);\n\n dynLoader.start();\n });\n },\n\n __createGraph: function(graphContainer) {\n const myTemplate = GitgraphJS.templateExtend(\"metro\", this.self().getTemplateConfig());\n\n const gitgraph = this.__gitgraph = GitgraphJS.createGitgraph(graphContainer, {\n // \"mode\": \"compact\",\n \"template\": myTemplate\n });\n return gitgraph;\n },\n\n __commit: function(branch, commitData, isCurrent = false) {\n if (isCurrent) {\n const defaultFont = osparc.utils.Utils.getDefaultFont();\n branch.commit({\n subject: commitData[\"tags\"],\n style: {\n dot: {\n size: 4 // default is 3\n },\n message: {\n font: `normal ${defaultFont[\"size\"]}px ${defaultFont[\"family\"]}`\n }\n }\n });\n } else {\n branch.commit(commitData[\"tags\"]);\n }\n branch[\"lastCommit\"] = commitData[\"id\"];\n\n // Widget for highlighting the overed commit with hint\n const widget = new qx.ui.core.Widget().set({\n opacity: 0.1,\n height: this.self().COMMIT_SPACING,\n minWidth: this.self().COMMIT_SPACING*this.__branches.length,\n allowGrowX: true\n });\n const texts = [];\n texts.push(commitData[\"tags\"]);\n if (commitData[\"message\"]) {\n texts.push(commitData[\"message\"]);\n }\n texts.push(commitData[\"createdAt\"]);\n const hintText = texts.join(\"
\");\n const hint = new osparc.ui.hint.Hint(widget, hintText);\n this.__gitGraphInteract.addAt(widget, 0);\n this.__commits.push({\n id: commitData[\"id\"],\n branch,\n commitData,\n widget\n });\n const bgColor = widget.getBackgroundColor();\n widget.addListener(\"mouseover\", e => {\n widget.set({\n backgroundColor: \"white\",\n cursor: \"pointer\"\n });\n hint.show();\n // since the widget might be hidden in the scroll area, take mouse's position.\n const native = e.getNativeEvent();\n hint.setLayoutProperties({\n top: native.clientY+2, // offset avoids flickering\n left: native.clientX\n });\n });\n widget.addListener(\"mouseout\", () => {\n widget.set({\n cursor: \"auto\"\n });\n if (this.__selectedCommit && this.__selectedCommit.id === commitData[\"id\"]) {\n widget.set({\n backgroundColor: \"white\"\n });\n } else {\n widget.set({\n backgroundColor: bgColor\n });\n }\n hint.exclude();\n });\n widget.addListener(\"tap\", () => {\n this.setSelection(commitData[\"id\"]);\n this.fireDataEvent(\"snapshotTap\", commitData[\"id\"]);\n });\n },\n\n resetSelection: function() {\n this.__selectedCommit = null;\n const bgColor = this.getBackgroundColor();\n this.__commits.forEach(commit => {\n commit.widget.set({\n backgroundColor: bgColor\n });\n });\n },\n\n setSelection: function(snapshotId) {\n this.resetSelection();\n this.__commits.forEach(commit => {\n if (commit.id === snapshotId) {\n commit.widget.set({\n backgroundColor: \"white\"\n });\n this.__selectedCommit = commit;\n }\n });\n },\n\n __createBranch: function(lastCommit, fromBranch, name) {\n if (name === undefined) {\n name = \"b-\"+this.__branches.length.toString();\n }\n const branch = fromBranch ? fromBranch.branch(name) : this.__gitgraph.branch(name);\n branch[\"lastCommit\"] = lastCommit;\n this.__branches.push(branch);\n return branch;\n },\n\n __getBranch: function(commitData) {\n if (commitData[\"parents_ids\"] === null) {\n const master = this.__createBranch(commitData[\"id\"], null, \"master\");\n return master;\n }\n const branchFound = this.__branches.find(branch => branch.lastCommit === commitData[\"parents_ids\"][0]);\n if (branchFound) {\n return branchFound;\n }\n const myOnHoldBranch = this.__branches.find(branch => branch.waitingFor === commitData[\"id\"]);\n if (myOnHoldBranch) {\n return myOnHoldBranch;\n }\n const newBranch = this.__createBranch(commitData[\"id\"]);\n return newBranch;\n },\n\n populateGraph: function(snapshots, currentSnapshot) {\n this.__branches = [];\n this.__parentIDs = [];\n const snapshotsClone = JSON.parse(JSON.stringify(snapshots));\n const sortedSnapshots = snapshotsClone.reverse();\n sortedSnapshots.forEach(snapshot => {\n if (\"parents_ids\" in snapshot && snapshot[\"parents_ids\"]) {\n snapshot[\"parents_ids\"].forEach(parentID => this.__parentIDs.push(parentID));\n }\n });\n sortedSnapshots.forEach(snapshot => {\n const currentBranch = this.__getBranch(snapshot);\n const snapshotDate = new Date(snapshot[\"created_at\"]);\n const commitData = {\n id: snapshot[\"id\"],\n tags: snapshot[\"tags\"].join(\", \"),\n message: snapshot[\"message\"],\n createdAt: osparc.utils.Utils.formatDateAndTime(snapshotDate),\n parentsIDs: snapshot[\"parents_ids\"]\n };\n this.__commit(currentBranch, commitData, snapshot[\"id\"] === currentSnapshot[\"id\"]);\n\n // create as many branches as necessary\n let idx = this.__parentIDs.indexOf(snapshot[\"id\"]);\n while (idx > -1) {\n this.__createBranch(snapshot[\"id\"], currentBranch);\n this.__parentIDs.splice(idx, 1);\n idx = this.__parentIDs.indexOf(snapshot[\"id\"]);\n }\n /*\n // due to this bug https://github.com/nicoespeon/gitgraph.js/issues/270\n // check if more branches need to be created now\n const needBranchedNow = snapshots.filter((snapshotCheck, j) => {\n if (j > i+1) {\n return snapshotCheck[\"parents_ids\"] && snapshotCheck[\"parents_ids\"][0] === snapshot[\"id\"];\n }\n return false;\n });\n needBranchedNow.forEach(snapshotOnHold => {\n const branchOnHold = this.__gitgraph.branch(\"it-\"+this.__branches.length);\n branchOnHold[\"waitingFor\"] = snapshotOnHold[\"id\"];\n this.__branches.push(branchOnHold);\n });\n */\n });\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Qooxdoo's table widget with some convenient methods.\n */\nqx.Class.define(\"osparc.ui.table.Table\", {\n extend: qx.ui.table.Table,\n\n properties: {\n data: {\n check: \"Array\",\n apply: \"_applyData\"\n }\n },\n\n members: {\n getSelection: function() {\n const ret = [];\n const selectionRanges = this.getSelectionModel().getSelectedRanges();\n if (selectionRanges.length > 0) {\n selectionRanges.forEach(range => {\n for (let i=range.minIndex; i<=range.maxIndex; i++) {\n ret.push(this.getTableModel().getRowData(i));\n }\n });\n }\n return ret;\n },\n\n _applyData: function(data) {\n this.getTableModel().setData(data, false);\n },\n\n makeItLoose: function() {\n this.setHeaderCellHeight(26);\n this.setRowHeight(26);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.snapshots.Loading\", {\n extend: osparc.ui.table.Table,\n\n construct: function(resourceName) {\n const model = this.__initModel();\n\n this.base(arguments, model, {\n statusBarVisible: false\n });\n\n this.setColumnWidth(this.self().T_POS.NAME.col, 200);\n\n this.__populateTable(resourceName);\n },\n\n statics: {\n T_POS: {\n NAME: {\n col: 0,\n label: qx.locale.Manager.tr(\"Name\")\n }\n }\n },\n\n members: {\n\n __initModel: function() {\n const model = new qx.ui.table.model.Simple();\n\n const cols = [];\n Object.keys(this.self().T_POS).forEach(colKey => {\n const idx = this.self().T_POS[colKey].col;\n const label = this.self().T_POS[colKey].label;\n cols.splice(idx, 0, label);\n });\n\n model.setColumns(cols);\n\n return model;\n },\n\n __populateTable: function(resourceName) {\n const columnModel = this.getTableColumnModel();\n columnModel.setDataCellRenderer(this.self().T_POS.NAME.col, new qx.ui.table.cellrenderer.String());\n\n const rows = [];\n const row = [];\n row[this.self().T_POS.NAME.col] = this.tr(\"Loading \") + resourceName + \"...\";\n rows.push(row);\n\n this.getTableModel().setData(rows, false);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.snapshots.Iterations\", {\n extend: osparc.ui.table.Table,\n\n construct: function(metaStudy) {\n this.__metaStudy = metaStudy;\n const model = this.__initModel();\n\n this.base(arguments, model, {\n initiallyHiddenColumns: [\n this.self().T_POS.ID.col\n ],\n statusBarVisible: false\n });\n\n this.setColumnWidth(this.self().T_POS.NAME.col, 150);\n this.setColumnWidth(this.self().T_POS.PROGRESS.col, 70);\n },\n\n statics: {\n T_POS: {\n ID: {\n col: 0,\n label: \"uuid\"\n },\n NAME: {\n col: 1,\n label: qx.locale.Manager.tr(\"Name\")\n },\n PROGRESS: {\n col: 2,\n label: qx.locale.Manager.tr(\"Progress\")\n }\n },\n\n extractIterators: function(iteration) {\n const iterators = [];\n Object.values(iteration[\"workbench\"]).forEach(node => {\n if (osparc.data.model.Node.isIterator(node)) {\n iterators.push(node);\n }\n });\n return iterators;\n },\n\n extractProbes: function(iteration) {\n const probes = [];\n Object.values(iteration[\"workbench\"]).forEach(node => {\n if (osparc.data.model.Node.isProbe(node)) {\n probes.push(node);\n }\n });\n return probes;\n },\n\n extractIteratorOutput: function(iterator) {\n if (\"outputs\" in iterator && \"out_1\" in iterator[\"outputs\"]) {\n return iterator[\"outputs\"][\"out_1\"];\n }\n return null;\n },\n\n extractProbeOutput: function(iteration, probe) {\n let nodeUuid = null;\n let portKey = null;\n if (\"inputs\" in probe && \"in_1\" in probe[\"inputs\"]) {\n const input = probe[\"inputs\"][\"in_1\"];\n nodeUuid = input[\"nodeUuid\"];\n portKey = input[\"output\"];\n }\n const itWB = iteration[\"workbench\"];\n if (nodeUuid && nodeUuid in itWB &&\n \"outputs\" in itWB[nodeUuid] &&\n portKey && portKey in itWB[nodeUuid][\"outputs\"]) {\n return itWB[nodeUuid][\"outputs\"][portKey];\n }\n return null;\n }\n },\n\n members: {\n __metaStudy: null,\n\n getRowData: function(rowIdx) {\n return this.getTableModel().getRowDataAsMap(rowIdx);\n },\n\n __initModel: function() {\n const model = new qx.ui.table.model.Simple();\n\n const cols = [];\n Object.keys(this.self().T_POS).forEach(colKey => {\n const idx = this.self().T_POS[colKey].col;\n const label = this.self().T_POS[colKey].label;\n cols.splice(idx, 0, label);\n });\n\n const iteratorsInMeta = this.self().extractIterators(this.__metaStudy);\n iteratorsInMeta.forEach(iteratorInMeta => cols.push(iteratorInMeta[\"label\"]));\n\n const probesInMeta = this.self().extractProbes(this.__metaStudy);\n probesInMeta.forEach(probeInMeta => cols.push(probeInMeta[\"label\"]));\n\n model.setColumns(cols);\n\n return model;\n },\n\n populateTable: function(iterations) {\n if (iterations.length === 0) {\n return;\n }\n\n const iteratorsInMeta = this.self().extractIterators(iterations[0]);\n const probesInMeta = this.self().extractProbes(iterations[0]);\n\n const columnModel = this.getTableColumnModel();\n columnModel.setDataCellRenderer(this.self().T_POS.ID.col, new qx.ui.table.cellrenderer.Number());\n columnModel.setDataCellRenderer(this.self().T_POS.NAME.col, new qx.ui.table.cellrenderer.String());\n columnModel.setDataCellRenderer(this.self().T_POS.PROGRESS.col, new qx.ui.table.cellrenderer.String());\n let countFormat = this.self().T_POS.PROGRESS.col+1;\n iteratorsInMeta.forEach(() => {\n columnModel.setDataCellRenderer(countFormat, new qx.ui.table.cellrenderer.String());\n countFormat++;\n });\n probesInMeta.forEach(() => {\n columnModel.setDataCellRenderer(countFormat, new qx.ui.table.cellrenderer.String());\n countFormat++;\n });\n\n this.iterationsToTable(iterations);\n },\n\n iterationsToTable(iterations) {\n const rows = [];\n iterations.forEach(iteration => {\n const iterators = this.self().extractIterators(iteration);\n const probes = this.self().extractProbes(iteration);\n const row = [];\n row[this.self().T_POS.ID.col] = iteration[\"uuid\"];\n row[this.self().T_POS.NAME.col] = iteration[\"name\"];\n const studyProgress = osparc.data.model.Study.computeStudyProgress(iteration);\n row[this.self().T_POS.PROGRESS.col] = Math.floor(studyProgress)+\"%\";\n let countRow = this.self().T_POS.PROGRESS.col+1;\n iterators.forEach(iterator => {\n const itOut = this.self().extractIteratorOutput(iterator);\n if (itOut === null) {\n row[countRow] = \"unknown\";\n } else {\n row[countRow] = itOut.toString();\n }\n countRow++;\n });\n probes.forEach(probe => {\n const porbeOut = this.self().extractProbeOutput(iteration, probe);\n if (porbeOut === null) {\n row[countRow] = \"unknown\";\n } else {\n row[countRow] = porbeOut.toString();\n }\n countRow++;\n });\n rows.push(row);\n });\n this.getTableModel().setData(rows, false);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Andrei Neagu (gitHK)\n\n************************************************************************ */\n\n/**\n * @asset(schedulerWorker.js)\n */\n\n/**\n * Singleton class to be used as a drop-in replacement for`setInterval` and `clearInterval`.\n * Depending on browser and OS, `setInterval` might not be called if the window is\n * not visible on the screen.\n */\n\n\nqx.Class.define(\"osparc.utils.WebWorkerScheduler\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.__registeredCallbacks = {};\n this.__schedulerWorker = new Worker(\"resource/osparc/schedulerWorker.js\");\n this.__schedulerWorker.onmessage = event => {\n const { id, event: workerEvent } = event.data;\n\n if (workerEvent === \"tick\") {\n if (id in this.__registeredCallbacks) {\n const { callback } = this.__registeredCallbacks[id];\n callback();\n }\n } else {\n console.log(\"Received unsupported event from worker\", workerEvent)\n }\n };\n },\n\n members: {\n __schedulerWorker: null,\n __registeredCallbacks: null,\n\n setInterval: function(callback, interval) {\n const id = osparc.utils.Utils.uuidV4();\n this.__registeredCallbacks[id] = {\n callback,\n interval,\n };\n this.__schedulerWorker.postMessage({\n command: \"scheduleInterval\",\n id: id,\n interval: interval\n });\n return id;\n },\n\n clearInterval: function(id) {\n if (id in this.__registeredCallbacks) {\n this.__schedulerWorker.postMessage({\n command: \"clearInterval\",\n id: id\n });\n delete this.__registeredCallbacks[id];\n }\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2011 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n************************************************************************ */\n\n/**\n * Checks whether a given font is available on the document and fires events\n * accordingly.\n * \n * This class does not need to be disposed, unless you want to abort the validation\n * early\n */\nqx.Class.define(\"qx.bom.webfonts.Validator\", {\n\n extend : qx.core.Object,\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param fontFamily {String} The name of the font to be verified\n * @param comparisonString {String?} String to be used to detect whether a font was loaded or not\n * whether the font has loaded properly\n */\n construct : function(fontFamily, comparisonString)\n {\n this.base(arguments);\n\n if (comparisonString) {\n this.setComparisonString(comparisonString);\n }\n\n if (fontFamily) {\n this.setFontFamily(fontFamily);\n this.__requestedHelpers = this._getRequestedHelpers();\n }\n },\n\n\n\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /**\n * Sets of serif and sans-serif fonts to be used for size comparisons.\n * At least one of these fonts should be present on any system.\n */\n COMPARISON_FONTS : {\n sans : [\"Arial\", \"Helvetica\", \"sans-serif\"],\n serif : [\"Times New Roman\", \"Georgia\", \"serif\"]\n },\n\n\n /**\n * Map of common CSS attributes to be used for all size comparison elements\n */\n HELPER_CSS : {\n position: \"absolute\",\n margin: \"0\",\n padding: \"0\",\n top: \"-1000px\",\n left: \"-1000px\",\n fontSize: \"350px\",\n width: \"auto\",\n height: \"auto\",\n lineHeight: \"normal\",\n fontVariant: \"normal\",\n visibility: \"hidden\"\n },\n\n\n /**\n * The string to be used in the size comparison elements. This is the default string\n * which is used for the {@link #COMPARISON_FONTS} and the font to be validated. It\n * can be overridden for the font to be validated using the {@link #comparisonString}\n * property.\n */\n COMPARISON_STRING : \"WEei\",\n __defaultSizes : null,\n __defaultHelpers : null,\n\n\n /**\n * Removes the two common helper elements used for all size comparisons from\n * the DOM\n */\n removeDefaultHelperElements : function()\n {\n var defaultHelpers = qx.bom.webfonts.Validator.__defaultHelpers;\n if (defaultHelpers) {\n for (var prop in defaultHelpers) {\n document.body.removeChild(defaultHelpers[prop]);\n }\n }\n delete qx.bom.webfonts.Validator.__defaultHelpers;\n }\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * The font-family this validator should check\n */\n fontFamily :\n {\n nullable : true,\n init : null,\n apply : \"_applyFontFamily\"\n },\n\n /**\n * Comparison string used to check whether the font has loaded or not.\n */\n comparisonString :\n {\n nullable : true,\n init : null\n },\n\n /**\n * Time in milliseconds from the beginning of the check until it is assumed\n * that a font is not available\n */\n timeout :\n {\n check : \"Integer\",\n init : 5000\n }\n },\n\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /**\n * Fired when the status of a web font has been determined. The event data\n * is a map with the keys \"family\" (the font-family name) and \"valid\"\n * (Boolean).\n */\n \"changeStatus\" : \"qx.event.type.Data\"\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __requestedHelpers : null,\n __checkTimer : null,\n __checkStarted : null,\n\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Validates the font\n */\n validate : function()\n {\n this.__checkStarted = new Date().getTime();\n\n if (this.__checkTimer) {\n this.__checkTimer.restart();\n }\n else {\n this.__checkTimer = new qx.event.Timer(100);\n this.__checkTimer.addListener(\"interval\", this.__onTimerInterval, this);\n // Give the browser a chance to render the new elements\n qx.event.Timer.once(function() {\n this.__checkTimer.start();\n }, this, 0);\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n PROTECTED API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Removes the helper elements from the DOM\n */\n _reset : function()\n {\n if (this.__requestedHelpers) {\n for (var prop in this.__requestedHelpers) {\n var elem = this.__requestedHelpers[prop];\n document.body.removeChild(elem);\n }\n this.__requestedHelpers = null;\n }\n },\n\n\n /**\n * Checks if the font is available by comparing the widths of the elements\n * using the generic fonts to the widths of the elements using the font to\n * be validated\n *\n * @return {Boolean} Whether or not the font caused the elements to differ\n * in size\n */\n _isFontValid : function()\n {\n if (!qx.bom.webfonts.Validator.__defaultSizes) {\n this.__init();\n }\n\n if (!this.__requestedHelpers) {\n this.__requestedHelpers = this._getRequestedHelpers();\n }\n\n // force rerendering for chrome\n this.__requestedHelpers.sans.style.visibility = \"visible\";\n this.__requestedHelpers.sans.style.visibility = \"hidden\";\n this.__requestedHelpers.serif.style.visibility = \"visible\";\n this.__requestedHelpers.serif.style.visibility = \"hidden\";\n\n var requestedSans = qx.bom.element.Dimension.getWidth(this.__requestedHelpers.sans);\n var requestedSerif = qx.bom.element.Dimension.getWidth(this.__requestedHelpers.serif);\n\n var cls = qx.bom.webfonts.Validator;\n if (requestedSans !== cls.__defaultSizes.sans ||\n requestedSerif !== cls.__defaultSizes.serif)\n {\n return true;\n }\n return false;\n },\n\n\n /**\n * Creates the two helper elements styled with the font to be checked\n *\n * @return {Map} A map with the keys sans
and serif
\n * and the created span elements as values\n */\n _getRequestedHelpers : function()\n {\n var fontsSans = [this.getFontFamily()].concat(qx.bom.webfonts.Validator.COMPARISON_FONTS.sans);\n var fontsSerif = [this.getFontFamily()].concat(qx.bom.webfonts.Validator.COMPARISON_FONTS.serif);\n return {\n sans : this._getHelperElement(fontsSans, this.getComparisonString()),\n serif : this._getHelperElement(fontsSerif, this.getComparisonString())\n };\n },\n\n\n /**\n * Creates a span element with the comparison text (either {@link #COMPARISON_STRING} or\n * {@link #comparisonString}) and styled with the default CSS ({@link #HELPER_CSS}) plus\n * the given font-family value and appends it to the DOM\n *\n * @param fontFamily {String} font-family string\n * @param comparisonString {String?} String to be used to detect whether a font was loaded or not\n * @return {Element} the created DOM element\n */\n _getHelperElement : function(fontFamily, comparisonString)\n {\n var styleMap = qx.lang.Object.clone(qx.bom.webfonts.Validator.HELPER_CSS);\n if (fontFamily) {\n if (styleMap.fontFamily) {\n styleMap.fontFamily += \",\" + fontFamily.join(\",\");\n }\n else {\n styleMap.fontFamily = fontFamily.join(\",\");\n }\n }\n\n var elem = document.createElement(\"span\");\n elem.innerHTML = comparisonString || qx.bom.webfonts.Validator.COMPARISON_STRING;\n qx.bom.element.Style.setStyles(elem, styleMap);\n document.body.appendChild(elem);\n return elem;\n },\n\n\n // property apply\n _applyFontFamily : function(value, old)\n {\n if (value !== old) {\n this._reset();\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n PRIVATE API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Creates the default helper elements and gets their widths\n */\n __init : function()\n {\n var cls = qx.bom.webfonts.Validator;\n if (!cls.__defaultHelpers) {\n cls.__defaultHelpers = {\n sans : this._getHelperElement(cls.COMPARISON_FONTS.sans),\n serif : this._getHelperElement(cls.COMPARISON_FONTS.serif)\n };\n }\n\n cls.__defaultSizes = {\n sans : qx.bom.element.Dimension.getWidth(cls.__defaultHelpers.sans),\n serif: qx.bom.element.Dimension.getWidth(cls.__defaultHelpers.serif)\n };\n },\n\n\n /**\n * Triggers helper element size comparison and fires a ({@link #changeStatus})\n * event with the result.\n */\n __onTimerInterval : function()\n {\n if (this._isFontValid()) {\n this.__checkTimer.stop();\n this._reset();\n this.fireDataEvent(\"changeStatus\", {\n family : this.getFontFamily(),\n valid : true\n });\n }\n else\n {\n var now = new Date().getTime();\n if (now - this.__checkStarted >= this.getTimeout()) {\n this.__checkTimer.stop();\n this._reset();\n this.fireDataEvent(\"changeStatus\", {\n family : this.getFontFamily(),\n valid : false\n });\n }\n }\n }\n\n },\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function()\n {\n this._reset();\n this.__checkTimer.stop();\n this.__checkTimer.removeListener(\"interval\", this.__onTimerInterval, this);\n this._disposeObjects(\"__checkTimer\");\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Edge data.\n *\n * -> {EDGES}\n * STUDY -> METADATA + WORKBENCH ->|\n * -> {LINKS}\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let edge = new osparc.data.model.Edge(edgeId, node1, node2);\n *
\n */\n\nqx.Class.define(\"osparc.data.model.Edge\", {\n extend: qx.core.Object,\n\n /**\n * @param edgeId {String} uuid if the edge. If not provided, a random one will be assigned\n * @param node1 {osparc.data.model.Node} node where the edge comes from\n * @param node2 {osparc.data.model.Node} node where the edge goes to\n */\n construct: function(edgeId, node1, node2) {\n this.base();\n\n this.setEdgeId(edgeId || osparc.utils.Utils.uuidV4());\n this.setInputNode(node1);\n this.setOutputNode(node2);\n },\n\n properties: {\n edgeId: {\n check: \"String\",\n nullable: false\n },\n\n inputNode: {\n check: \"osparc.data.model.Node\",\n nullable: false\n },\n\n outputNode: {\n check: \"osparc.data.model.Node\",\n apply: \"__applyOutputNode\",\n nullable: false\n },\n\n portConnected: {\n check: \"Boolean\",\n init: false,\n event: \"changePortConnected\",\n nullable: false\n }\n },\n\n statics: {\n checkAnyPortsConnected: function(node1, node2) {\n if (node2.getPropsForm()) {\n const links = node2.getLinks();\n const anyConnected = links.some(link => link[\"nodeUuid\"] === node1.getNodeId());\n return anyConnected;\n }\n return false;\n }\n },\n\n members: {\n getInputNodeId: function() {\n return this.getInputNode().getNodeId();\n },\n\n getOutputNodeId: function() {\n return this.getOutputNode().getNodeId();\n },\n\n __applyOutputNode: function(node2) {\n node2.bind(\"portsConnected\", this, \"portConnected\", {\n converter: () => {\n const isConnected = this.__checkIsPortConnected();\n return Boolean(isConnected);\n }\n });\n },\n\n __checkIsPortConnected: function() {\n let anyConnected = false;\n const node1 = this.getInputNode();\n let node2 = this.getOutputNode();\n if (node2.getPropsForm()) {\n anyConnected |= this.self().checkAnyPortsConnected(node1, node2);\n }\n return anyConnected;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.workbench.BaseNodeUI\", {\n extend: qx.ui.window.Window,\n include: osparc.filter.MFilterable,\n implement: osparc.filter.IFilterable,\n type: \"abstract\",\n\n construct: function() {\n this.base();\n\n const grid = new qx.ui.layout.Grid(4, 1);\n grid.setColumnFlex(1, 1);\n\n this.set({\n appearance: \"node-ui-cap\",\n layout: grid,\n showMinimize: false,\n showMaximize: false,\n showClose: false,\n showStatusbar: false,\n resizable: false,\n allowMaximize: false,\n contentPadding: this.self().CONTENT_PADDING\n });\n\n this.getContentElement().setStyles({\n \"border-radius\": \"4px\"\n });\n\n this.subscribeToFilterGroup(\"workbench\");\n\n const captionBar = this.getChildControl(\"captionbar\");\n captionBar.set({\n cursor: \"move\",\n paddingRight: 0,\n paddingLeft: this.self().PORT_WIDTH\n });\n\n const menuBtn = this.__getMenuButton();\n captionBar.add(menuBtn, {\n row: 0,\n column: this.self().CAPTION_POS.MENU\n });\n\n const captionTitle = this.getChildControl(\"title\");\n captionTitle.set({\n rich: true,\n cursor: \"move\"\n });\n captionTitle.addListener(\"appear\", () => {\n qx.event.Timer.once(() => {\n const labelDom = captionTitle.getContentElement().getDomElement();\n const maxWidth = parseInt(labelDom.style.width);\n // eslint-disable-next-line no-underscore-dangle\n const width = captionTitle.__contentSize.width;\n if (width > maxWidth) {\n this.getNode().bind(\"label\", captionTitle, \"toolTipText\");\n }\n }, this, 50);\n });\n\n this.__nodeMoving = false;\n },\n\n properties: {\n scale: {\n check: \"Number\",\n event: \"changeScale\",\n nullable: false\n },\n\n isMovable: {\n check: \"Boolean\",\n init: true,\n nullable: false\n }\n },\n\n statics: {\n PORT_HEIGHT: 18,\n PORT_WIDTH: 11,\n CONTENT_PADDING: 2,\n PORT_CONNECTED: \"@FontAwesome5Regular/dot-circle/18\",\n PORT_DISCONNECTED: \"@FontAwesome5Regular/circle/18\",\n\n CAPTION_POS: {\n ICON: 0, // from qooxdoo\n TITLE: 1, // from qooxdoo\n LOCK: 2,\n MARKER: 3,\n DEPRECATED: 4,\n MENU: 5\n },\n\n captionHeight: function() {\n return osparc.theme.Appearance.appearances[\"node-ui-cap/captionbar\"].style().height ||\n osparc.theme.Appearance.appearances[\"node-ui-cap/captionbar\"].style().minHeight;\n }\n },\n\n events: {\n \"renameNode\": \"qx.event.type.Data\",\n \"infoNode\": \"qx.event.type.Data\",\n \"markerClicked\": \"qx.event.type.Data\",\n \"removeNode\": \"qx.event.type.Data\",\n \"edgeDragStart\": \"qx.event.type.Data\",\n \"edgeDragOver\": \"qx.event.type.Data\",\n \"edgeDrop\": \"qx.event.type.Data\",\n \"edgeDragEnd\": \"qx.event.type.Data\",\n \"nodeMovingStart\": \"qx.event.type.Event\",\n \"nodeMoving\": \"qx.event.type.Event\",\n \"nodeMovingStop\": \"qx.event.type.Event\"\n },\n\n members: {\n __inputLayout: null,\n __outputLayout: null,\n _optionsMenu: null,\n _markerBtn: null,\n _deleteBtn: null,\n __nodeMoving: null,\n\n __getMenuButton: function() {\n const optionsMenu = this._optionsMenu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n const renameBtn = new qx.ui.menu.Button().set({\n label: this.tr(\"Rename\"),\n icon: \"@FontAwesome5Solid/i-cursor/10\"\n });\n renameBtn.getChildControl(\"shortcut\").setValue(\"F2\");\n renameBtn.addListener(\"execute\", () => this.fireDataEvent(\"renameNode\", this.getNodeId()));\n optionsMenu.add(renameBtn);\n\n const markerBtn = this._markerBtn = new qx.ui.menu.Button().set({\n icon: \"@FontAwesome5Solid/bookmark/10\",\n visibility: \"excluded\"\n });\n optionsMenu.add(markerBtn);\n\n const infoBtn = new qx.ui.menu.Button().set({\n label: this.tr(\"Information...\"),\n icon: \"@FontAwesome5Solid/info/10\"\n });\n infoBtn.getChildControl(\"shortcut\").setValue(\"I\");\n infoBtn.addListener(\"execute\", () => this.fireDataEvent(\"infoNode\", this.getNodeId()));\n optionsMenu.add(infoBtn);\n\n const deleteBtn = this._deleteBtn = new qx.ui.menu.Button().set({\n label: this.tr(\"Delete\"),\n icon: \"@FontAwesome5Solid/trash/10\"\n });\n deleteBtn.getChildControl(\"shortcut\").setValue(\"Del\");\n deleteBtn.addListener(\"execute\", () => this.fireDataEvent(\"removeNode\", this.getNodeId()));\n optionsMenu.add(deleteBtn);\n\n const menuBtn = new qx.ui.form.MenuButton().set({\n menu: optionsMenu,\n icon: \"@FontAwesome5Solid/ellipsis-v/9\",\n height: 18,\n width: 18,\n allowGrowX: false,\n allowGrowY: false\n });\n return menuBtn;\n },\n\n getInputPort: function() {\n return this.__inputLayout;\n },\n\n getOutputPort: function() {\n return this.__outputLayout;\n },\n\n _createPort: function(isInput, placeholder = false) {\n let port = null;\n const width = this.self().PORT_HEIGHT;\n if (placeholder) {\n port = new qx.ui.core.Spacer(width, width);\n } else {\n port = new qx.ui.basic.Image().set({\n source: this.self().PORT_DISCONNECTED, // disconnected by default\n height: width,\n draggable: true,\n droppable: true,\n width: width,\n alignY: \"top\",\n backgroundColor: \"background-main\"\n });\n port.setCursor(\"pointer\");\n port.getContentElement().setStyles({\n \"border-radius\": width+\"px\"\n });\n port.isInput = isInput;\n }\n // make the ports exit the NodeUI\n port.set({\n marginLeft: isInput ? (-10 + this.self().CONTENT_PADDING) : 0,\n marginRight: isInput ? 0 : (-10 - this.self().CONTENT_PADDING)\n });\n\n this.add(port, {\n row: 0,\n column: isInput ? 0 : 2\n });\n\n if (isInput) {\n this.__inputLayout = port;\n } else {\n this.__outputLayout = port;\n }\n\n return port;\n },\n\n getEdgePoint: function(port) {\n const bounds = this.getCurrentBounds();\n const captionHeight = Math.max(this.getChildControl(\"captionbar\").getSizeHint().height, this.self().captionHeight());\n const x = port.isInput ? bounds.left - 6 : bounds.left + bounds.width - 1;\n const y = bounds.top + captionHeight + this.self().PORT_HEIGHT/2 + 2;\n return [x, y];\n },\n\n getCurrentBounds: function() {\n let bounds = this.getBounds();\n let cel = this.getContentElement();\n if (cel) {\n let domeEle = cel.getDomElement();\n if (domeEle) {\n bounds.left = parseInt(domeEle.style.left);\n bounds.top = parseInt(domeEle.style.top);\n }\n }\n return bounds;\n },\n\n __scaleCoordinates: function(x, y) {\n return {\n x: parseInt(x / this.getScale()),\n y: parseInt(y / this.getScale())\n };\n },\n\n _setPositionFromEvent: function(e) {\n const sideBarWidth = this.__dragRange.left;\n const navigationBarHeight = this.__dragRange.top;\n const native = e.getNativeEvent();\n const x = native.clientX + this.__dragLeft - sideBarWidth;\n const y = native.clientY + this.__dragTop - navigationBarHeight;\n const coords = this.__scaleCoordinates(x, y);\n const insets = this.getLayoutParent().getInsets();\n this.setDomPosition(coords.x - (insets.left || 0), coords.y - (insets.top || 0));\n return coords;\n },\n\n // override qx.ui.core.MMovable\n _onMovePointerMove: function(e) {\n // Only react when dragging is active\n if (!this.hasState(\"move\") || !this.getIsMovable()) {\n return;\n }\n e.stopPropagation();\n if (this.__nodeMoving === false) {\n this.__nodeMoving = true;\n this.fireEvent(\"nodeMovingStart\");\n }\n this.fireEvent(\"nodeMoving\");\n },\n\n // override qx.ui.core.MMovable\n _onMovePointerUp : function(e) {\n if (this.hasListener(\"roll\")) {\n this.removeListener(\"roll\", this._onMoveRoll, this);\n }\n\n // Only react when dragging is active\n if (!this.hasState(\"move\") || !this.getIsMovable()) {\n return;\n }\n\n this._onMovePointerMove(e);\n\n this.__nodeMoving = false;\n this.fireEvent(\"nodeMovingStop\");\n\n // Remove drag state\n this.removeState(\"move\");\n\n this.releaseCapture();\n\n e.stopPropagation();\n },\n\n // implement osparc.filter.IFilterable\n _filter: function() {\n this.setOpacity(0.4);\n },\n\n // implement osparc.filter.IFilterable\n _unfilter: function() {\n this.setOpacity(1);\n },\n\n /**\n * @abstract\n */\n _shouldApplyFilter: function(data) {\n throw new Error(\"Abstract method called!\");\n },\n\n // implement osparc.filter.IFilterable\n _shouldReactToFilter: function(data) {\n if (data.text && data.text.length > 1) {\n return true;\n }\n if (data.tags && data.tags.length) {\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Window that is used to represent a node in the WorkbenchUI.\n *\n * It implements Drag&Drop mechanism to provide internode connections.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let nodeUI = new osparc.workbench.NodeUI(node);\n * nodeUI.populateNodeLayout();\n * workbench.add(nodeUI)\n *
\n */\n\nqx.Class.define(\"osparc.workbench.NodeUI\", {\n extend: osparc.workbench.BaseNodeUI,\n\n /**\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(node) {\n this.base(arguments);\n\n this.setNode(node);\n\n this.__resetNodeUILayout();\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n nullable: false,\n apply: \"__applyNode\"\n },\n\n type: {\n check: [\"normal\", \"file\", \"parameter\", \"iterator\", \"probe\"],\n init: \"normal\",\n nullable: false,\n apply: \"__applyType\"\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n apply: \"__applyThumbnail\"\n }\n },\n\n statics: {\n NODE_WIDTH: 180,\n NODE_HEIGHT: 80,\n FILE_NODE_WIDTH: 120,\n },\n\n events: {\n \"updateNodeDecorator\": \"qx.event.type.Event\",\n \"requestOpenLogger\": \"qx.event.type.Event\",\n },\n\n members: {\n __thumbnail: null,\n __svgWorkbenchCanvas: null,\n\n getNodeType: function() {\n return \"service\";\n },\n\n getNodeId: function() {\n return this.getNode().getNodeId();\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"lock\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/lock/12\",\n padding: 4,\n visibility: \"excluded\"\n });\n this.getChildControl(\"captionbar\").add(control, {\n row: 0,\n column: osparc.workbench.BaseNodeUI.CAPTION_POS.LOCK\n });\n break;\n case \"marker\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/bookmark/12\",\n padding: 4,\n visibility: \"excluded\"\n });\n this.getChildControl(\"captionbar\").add(control, {\n row: 0,\n column: osparc.workbench.BaseNodeUI.CAPTION_POS.MARKER\n });\n control.addListener(\"tap\", () => this.fireDataEvent(\"markerClicked\", this.getNode().getNodeId()));\n break;\n case \"deprecated-icon\":\n control = new qx.ui.basic.Image().set({\n source: \"@MaterialIcons/update/14\",\n padding: 4\n });\n this.getChildControl(\"captionbar\").add(control, {\n row: 0,\n column: osparc.workbench.BaseNodeUI.CAPTION_POS.DEPRECATED\n });\n break;\n case \"chips\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.Flow(3, 3).set({\n alignY: \"middle\"\n })).set({\n margin: [3, 4]\n });\n let nodeType = this.getNode().getMetaData().type;\n if (this.getNode().isIterator()) {\n nodeType = \"iterator\";\n } else if (this.getNode().isProbe()) {\n nodeType = \"probe\";\n }\n const type = osparc.service.Utils.getType(nodeType);\n if (type) {\n const chip = new osparc.ui.basic.Chip().set({\n icon: type.icon + \"14\",\n toolTipText: type.label\n });\n control.add(chip);\n }\n const nodeStatus = new osparc.ui.basic.NodeStatusUI(this.getNode());\n control.add(nodeStatus);\n const statusLabel = nodeStatus.getChildControl(\"label\");\n const requestOpenLogger = () => this.fireEvent(\"requestOpenLogger\");\n const evaluateLabel = () => {\n const failed = statusLabel.getValue() === \"Failed\";\n statusLabel.setCursor(failed ? \"pointer\" : \"auto\");\n if (nodeStatus.hasListener(\"tap\")) {\n nodeStatus.removeListener(\"tap\", requestOpenLogger);\n }\n if (failed) {\n nodeStatus.addListener(\"tap\", requestOpenLogger);\n }\n };\n evaluateLabel();\n statusLabel.addListener(\"changeValue\", evaluateLabel);\n this.add(control, {\n row: 0,\n column: 1\n });\n break;\n }\n case \"progress\":\n control = new qx.ui.indicator.ProgressBar().set({\n height: 10,\n margin: 4\n });\n this.add(control, {\n row: 1,\n column: 0,\n colSpan: 3\n });\n break;\n case \"usage-indicator\":\n control = new osparc.workbench.DiskUsageIndicator();\n this.add(control, {\n row: 2,\n column: 0,\n colSpan: 4\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __resetNodeUILayout: function() {\n this.set({\n width: this.self(arguments).NODE_WIDTH,\n maxWidth: this.self(arguments).NODE_WIDTH,\n minWidth: this.self(arguments).NODE_WIDTH\n });\n this.resetThumbnail();\n\n this.__createWindowLayout();\n },\n\n __createWindowLayout: function() {\n const node = this.getNode();\n\n this.getChildControl(\"chips\").show();\n\n if (node.isComputational() || node.isFilePicker() || node.isIterator()) {\n this.getChildControl(\"progress\").show();\n }\n },\n\n populateNodeLayout: function(svgWorkbenchCanvas) {\n const node = this.getNode();\n node.bind(\"label\", this, \"caption\", {\n onUpdate: () => {\n setTimeout(() => this.fireEvent(\"updateNodeDecorator\"), 50);\n }\n });\n const metadata = node.getMetaData();\n this.__createPorts(true, Boolean((metadata && metadata.inputs && Object.keys(metadata.inputs).length)));\n this.__createPorts(false, Boolean((metadata && metadata.outputs && Object.keys(metadata.outputs).length)));\n if (node.isComputational() || node.isFilePicker()) {\n node.getStatus().bind(\"progress\", this.getChildControl(\"progress\"), \"value\", {\n converter: val => val === null ? 0 : val\n });\n }\n if (node.isFilePicker()) {\n this.setType(\"file\");\n } else if (node.isParameter()) {\n this.setType(\"parameter\");\n } else if (node.isIterator()) {\n this.__svgWorkbenchCanvas = svgWorkbenchCanvas;\n this.setType(\"iterator\");\n } else if (node.isProbe()) {\n this.setType(\"probe\");\n }\n },\n\n __applyNode: function(node) {\n if (node.isDynamic()) {\n const startButton = new qx.ui.menu.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/10\"\n });\n node.attachHandlersToStartButton(startButton);\n this._optionsMenu.addAt(startButton, 0);\n\n const stopButton = new qx.ui.menu.Button().set({\n label: this.tr(\"Stop\"),\n icon: \"@FontAwesome5Solid/stop/10\"\n });\n node.attachHandlersToStopButton(stopButton);\n this._optionsMenu.addAt(stopButton, 1);\n }\n\n if (node.getKey().includes(\"parameter/int\")) {\n const makeIterator = new qx.ui.menu.Button().set({\n label: this.tr(\"Convert to Iterator\"),\n icon: \"@FontAwesome5Solid/sync-alt/10\"\n });\n makeIterator.addListener(\"execute\", () => node.convertToIterator(\"int\"), this);\n this._optionsMenu.add(makeIterator);\n } else if (node.getKey().includes(\"data-iterator/int-range\")) {\n const convertToParameter = new qx.ui.menu.Button().set({\n label: this.tr(\"Convert to Parameter\"),\n icon: \"@FontAwesome5Solid/sync-alt/10\"\n });\n convertToParameter.addListener(\"execute\", () => node.convertToParameter(\"int\"), this);\n this._optionsMenu.add(convertToParameter);\n }\n\n const lock = this.getChildControl(\"lock\");\n if (node.getPropsForm()) {\n node.getPropsForm().bind(\"enabled\", lock, \"visibility\", {\n converter: val => val ? \"excluded\" : \"visible\"\n });\n }\n this._markerBtn.show();\n this.getNode().bind(\"marker\", this._markerBtn, \"label\", {\n converter: val => val ? this.tr(\"Remove Marker\") : this.tr(\"Add Marker\")\n });\n this._markerBtn.addListener(\"execute\", () => node.toggleMarker());\n\n const marker = this.getChildControl(\"marker\");\n const updateMarker = () => {\n node.bind(\"marker\", marker, \"visibility\", {\n converter: val => val ? \"visible\" : \"excluded\"\n });\n if (node.getMarker()) {\n node.getMarker().bind(\"color\", marker, \"textColor\");\n }\n };\n node.addListener(\"changeMarker\", () => updateMarker());\n updateMarker();\n\n node.getStudy().bind(\"pipelineRunning\", this._deleteBtn, \"enabled\", {\n converter: running => !running\n });\n\n const evaluateLifeCycleIcon = () => {\n const deprecatedIcon = this.getChildControl(\"deprecated-icon\");\n deprecatedIcon.exclude();\n if (node.isDeprecated()) {\n deprecatedIcon.show();\n deprecatedIcon.set({\n textColor: osparc.service.StatusUI.getColor(\"deprecated\")\n });\n let ttMsg = osparc.service.Utils.DEPRECATED_SERVICE_TEXT;\n const deprecatedDateMsg = osparc.service.Utils.getDeprecationDateText(node.getMetaData());\n if (deprecatedDateMsg) {\n ttMsg = ttMsg + \"
\" + deprecatedDateMsg;\n }\n const deprecatedTTMsg = node.isDynamic() ? osparc.service.Utils.DEPRECATED_DYNAMIC_INSTRUCTIONS : osparc.service.Utils.DEPRECATED_COMPUTATIONAL_INSTRUCTIONS;\n if (deprecatedTTMsg) {\n ttMsg = ttMsg + \"
\" + deprecatedTTMsg;\n }\n const toolTip = new qx.ui.tooltip.ToolTip().set({\n label: ttMsg,\n icon: osparc.service.StatusUI.getIconSource(\"deprecated\"),\n rich: true,\n maxWidth: 250\n });\n deprecatedIcon.setToolTip(toolTip);\n } else if (node.isRetired()) {\n deprecatedIcon.show();\n deprecatedIcon.set({\n textColor: osparc.service.StatusUI.getColor(\"retired\")\n });\n\n let ttMsg = osparc.service.Utils.RETIRED_SERVICE_TEXT;\n const deprecatedTTMsg = node.isDynamic() ? osparc.service.Utils.RETIRED_DYNAMIC_INSTRUCTIONS : osparc.service.Utils.RETIRED_COMPUTATIONAL_INSTRUCTIONS;\n if (deprecatedTTMsg) {\n ttMsg = ttMsg + \"
\" + deprecatedTTMsg;\n }\n const toolTip = new qx.ui.tooltip.ToolTip().set({\n label: ttMsg,\n icon: osparc.service.StatusUI.getIconSource(\"retired\"),\n rich: true,\n maxWidth: 250\n });\n deprecatedIcon.setToolTip(toolTip);\n }\n };\n evaluateLifeCycleIcon();\n this.getNode().addListener(\"changeVersion\", () => evaluateLifeCycleIcon());\n const indicator = this.getChildControl(\"usage-indicator\");\n indicator.setCurrentNode(node);\n },\n\n __applyType: function(type) {\n switch (type) {\n case \"file\":\n this.__checkTurnIntoFileUI();\n this.getNode().addListener(\"changeOutputs\", () => this.__checkTurnIntoFileUI(), this);\n break;\n case \"parameter\":\n this.__turnIntoParameterUI();\n break;\n case \"iterator\":\n this.__checkTurnIntoIteratorUI();\n this.getNode().addListener(\"changeOutputs\", () => this.__checkTurnIntoIteratorUI(), this);\n break;\n case \"probe\":\n this.__turnIntoProbeUI();\n break;\n }\n },\n\n __setNodeUIWidth: function(width) {\n this.set({\n width: width,\n maxWidth: width,\n minWidth: width,\n minHeight: 60\n });\n },\n\n __checkTurnIntoFileUI: function() {\n const outputs = this.getNode().getOutputs();\n if ([null, \"\"].includes(osparc.file.FilePicker.getOutput(outputs))) {\n this.__resetNodeUILayout();\n } else {\n this.__turnIntoFileUI();\n }\n },\n\n __turnIntoFileUI: function() {\n const width = this.self().FILE_NODE_WIDTH;\n this.__setNodeUIWidth(width);\n\n const chipContainer = this.getChildControl(\"chips\");\n chipContainer.exclude();\n\n if (this.hasChildControl(\"progress\")) {\n this.getChildControl(\"progress\").exclude();\n }\n\n const title = this.getChildControl(\"title\");\n title.set({\n // maxHeight: 28, // two lines in Roboto\n maxHeight: 34, // two lines in Manrope\n maxWidth: 90\n });\n\n const outputs = this.getNode().getOutputs();\n let imageSrc = null;\n if (osparc.file.FilePicker.isOutputFromStore(outputs)) {\n imageSrc = \"@FontAwesome5Solid/file-alt/34\";\n } else if (osparc.file.FilePicker.isOutputDownloadLink(outputs)) {\n imageSrc = \"@FontAwesome5Solid/link/34\";\n }\n if (imageSrc) {\n this.setThumbnail(imageSrc);\n }\n this.fireEvent(\"updateNodeDecorator\");\n },\n\n __turnIntoParameterUI: function() {\n const width = 100;\n this.__setNodeUIWidth(width);\n\n const label = new qx.ui.basic.Label().set({\n font: \"text-18\"\n });\n const chipContainer = this.getChildControl(\"chips\");\n chipContainer.add(label);\n\n this.getNode().bind(\"outputs\", label, \"value\", {\n converter: outputs => {\n if (\"out_1\" in outputs && \"value\" in outputs[\"out_1\"]) {\n const val = outputs[\"out_1\"][\"value\"];\n if (Array.isArray(val)) {\n return \"[\" + val.join(\",\") + \"]\";\n }\n return String(val);\n }\n return \"\";\n }\n });\n this.fireEvent(\"updateNodeDecorator\");\n },\n\n __turnIntoIteratorUI: function() {\n const width = 150;\n const height = 69;\n this.__setNodeUIWidth(width);\n\n // add shadows\n if (this.__svgWorkbenchCanvas) {\n const nShadows = 2;\n this.shadows = [];\n for (let i=0; i this.__setProbeValue(linkLabel), this);\n this.__setProbeValue(linkLabel);\n },\n\n __checkTurnIntoIteratorUI: function() {\n const outputs = this.getNode().getOutputs();\n const portKey = \"out_1\";\n if (portKey in outputs && \"value\" in outputs[portKey]) {\n this.__turnIntoIteratorIteratedUI();\n } else {\n this.__turnIntoIteratorUI();\n }\n },\n\n removeShadows: function() {\n if (this.__svgWorkbenchCanvas && \"shadows\" in this) {\n this.shadows.forEach(shadow => {\n osparc.wrapper.Svg.removeItem(shadow);\n });\n delete this[\"shadows\"];\n }\n },\n\n __setProbeValue: function(linkLabel) {\n const populateLinkLabel = linkInfo => {\n const download = true;\n const locationId = linkInfo.store;\n const fileId = linkInfo.path;\n osparc.store.Data.getInstance().getPresignedLink(download, locationId, fileId)\n .then(presignedLinkData => {\n if (\"resp\" in presignedLinkData && presignedLinkData.resp) {\n const filename = linkInfo.filename || osparc.file.FilePicker.getFilenameFromPath(linkInfo);\n linkLabel.set({\n value: filename,\n url: presignedLinkData.resp.link\n });\n }\n });\n }\n\n const link = this.getNode().getLink(\"in_1\");\n if (link && \"nodeUuid\" in link) {\n const inputNodeId = link[\"nodeUuid\"];\n const portKey = link[\"output\"];\n const inputNode = this.getNode().getWorkbench().getNode(inputNodeId);\n if (inputNode) {\n inputNode.bind(\"outputs\", linkLabel, \"value\", {\n converter: outputs => {\n if (portKey in outputs && \"value\" in outputs[portKey] && outputs[portKey][\"value\"]) {\n const val = outputs[portKey][\"value\"];\n if (this.getNode().getMetaData()[\"key\"].includes(\"probe/array\")) {\n return \"[\" + val.join(\",\") + \"]\";\n } else if (this.getNode().getMetaData()[\"key\"].includes(\"probe/file\")) {\n const filename = val.filename || osparc.file.FilePicker.getFilenameFromPath(val);\n populateLinkLabel(val);\n return filename;\n }\n return String(val);\n }\n return \"\";\n }\n });\n }\n } else {\n linkLabel.setValue(\"\");\n }\n },\n\n __createPorts: function(isInput, draw) {\n if (draw === false) {\n this._createPort(isInput, true);\n return;\n }\n const port = this._createPort(isInput);\n port.addListener(\"mouseover\", () => {\n port.setSource(osparc.workbench.BaseNodeUI.PORT_CONNECTED);\n }, this);\n port.addListener(\"mouseout\", () => {\n const isConnected = isInput ? this.getNode().getInputConnected() : this.getNode().getOutputConnected();\n port.set({\n source: isConnected ? osparc.workbench.BaseNodeUI.PORT_CONNECTED : osparc.workbench.BaseNodeUI.PORT_DISCONNECTED\n });\n }, this);\n if (isInput) {\n this.getNode().getStatus().bind(\"dependencies\", port, \"textColor\", {\n converter: dependencies => {\n if (dependencies !== null) {\n return osparc.service.StatusUI.getColor(dependencies.length ? \"modified\" : \"ready\");\n }\n return osparc.service.StatusUI.getColor();\n }\n });\n this.getNode().bind(\"inputConnected\", port, \"source\", {\n converter: isConnected => isConnected ? osparc.workbench.BaseNodeUI.PORT_CONNECTED : osparc.workbench.BaseNodeUI.PORT_DISCONNECTED\n });\n } else {\n this.getNode().getStatus().bind(\"output\", port, \"textColor\", {\n converter: output => osparc.service.StatusUI.getColor(output)\n });\n this.getNode().bind(\"outputConnected\", port, \"source\", {\n converter: isConnected => isConnected ? osparc.workbench.BaseNodeUI.PORT_CONNECTED : osparc.workbench.BaseNodeUI.PORT_DISCONNECTED\n });\n }\n\n this.__addDragDropMechanism(port, isInput);\n },\n\n __addDragDropMechanism: function(port, isInput) {\n [\n [\"dragstart\", \"edgeDragStart\"],\n [\"dragover\", \"edgeDragOver\"],\n [\"drop\", \"edgeDrop\"],\n [\"dragend\", \"edgeDragEnd\"]\n ].forEach(eventPair => {\n port.addListener(eventPair[0], e => {\n const eData = this.__createDragDropEventData(e, isInput);\n this.fireDataEvent(eventPair[1], eData);\n }, this);\n }, this);\n },\n\n __createDragDropEventData: function(e, isInput) {\n return {\n event: e,\n nodeId: this.getNodeId(),\n isInput: isInput\n };\n },\n\n // override qx.ui.core.MMovable\n _onMovePointerMove: function(e) {\n // Only react when dragging is active\n if (!this.hasState(\"move\") || !this.getIsMovable()) {\n return;\n }\n const coords = this._setPositionFromEvent(e);\n this.getNode().setPosition(coords);\n this.base(arguments, e);\n },\n\n setPosition: function(pos) {\n const node = this.getNode();\n node.setPosition(pos);\n this.moveTo(node.getPosition().x, node.getPosition().y);\n },\n\n snapToGrid: function() {\n const node = this.getNode();\n const {\n x,\n y\n } = node.getPosition();\n const snapGrid = 20;\n const snapX = Math.round(x/snapGrid)*snapGrid;\n const snapY = Math.round(y/snapGrid)*snapGrid;\n node.setPosition({\n x: snapX,\n y: snapY\n });\n this.moveTo(node.getPosition().x, node.getPosition().y);\n },\n\n __applyThumbnail: function(thumbnailSrc) {\n if (this.__thumbnail) {\n this.remove(this.__thumbnail);\n this.__thumbnail = null;\n }\n if (thumbnailSrc) {\n if (osparc.utils.Utils.isUrl(thumbnailSrc)) {\n this.__thumbnail = new qx.ui.basic.Image(thumbnailSrc).set({\n height: 100,\n allowShrinkX: true,\n scale: true\n });\n } else {\n this.__thumbnail = new osparc.ui.basic.Thumbnail(thumbnailSrc).set({\n padding: 12\n });\n }\n this.add(this.__thumbnail, {\n row: 0,\n column: 1\n });\n }\n },\n\n __filterText: function(text) {\n const label = this.getNode().getLabel()\n .trim()\n .toLowerCase();\n if (label.indexOf(text) === -1) {\n return true;\n }\n return false;\n },\n\n __filterTags: function(tags) {\n if (tags && tags.length) {\n const category = this.getNode().getMetaData().category || \"\";\n const type = this.getNode().getMetaData().type || \"\";\n if (!tags.includes(osparc.utils.Utils.capitalize(category.trim())) && !tags.includes(osparc.utils.Utils.capitalize(type.trim()))) {\n return true;\n }\n }\n return false;\n },\n\n // implement osparc.filter.IFilterable\n _shouldApplyFilter: function(data) {\n if (data.text) {\n return this.__filterText(data.text);\n }\n if (data.tags && data.tags.length) {\n return this.__filterTags(data.tags);\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.data.model.Slideshow\", {\n extend: qx.core.Object,\n\n /**\n * @param slideshowData {Object} Object containing the serialized Slide Show Data\n */\n construct: function(slideshowData) {\n this.base(arguments);\n\n this.setData(slideshowData);\n },\n\n properties: {\n data: {\n check: \"Object\",\n init: {},\n nullable: true\n }\n },\n\n events: {\n \"changeSlideshow\": \"qx.event.type.Event\"\n },\n\n statics: {\n getSortedNodes: function(slideshow) {\n const nodes = [];\n for (let nodeId in slideshow) {\n const node = slideshow[nodeId];\n if (node[\"position\"] !== -1) {\n nodes.push({\n ...node,\n nodeId\n });\n }\n }\n nodes.sort((a, b) => (a.position > b.position) ? 1 : -1);\n return nodes;\n },\n\n getSortedNodeIds: function(slideshow) {\n const nodes = this.self().getSortedNodes(slideshow);\n const nodeIds = [];\n nodes.forEach(node => {\n nodeIds.push(node.nodeId);\n });\n return nodeIds;\n }\n },\n\n members: {\n isEmpty: function() {\n return Object.values(this.getData()).every(node => node.position === -1);\n },\n\n getSortedNodes: function() {\n return this.self().getSortedNodes(this.getData());\n },\n\n getSortedNodeIds: function() {\n return this.self().getSortedNodeIds(this.getData());\n },\n\n insertNode: function(nodeId, pos) {\n const slideshow = this.getData();\n for (let nodeId2 in slideshow) {\n if (slideshow[nodeId2].position >= pos) {\n slideshow[nodeId2].position++;\n }\n }\n slideshow[nodeId] = {\n position: pos,\n instructions: null\n };\n },\n\n removeNode: function(nodeId) {\n const slideshow = this.getData();\n if (nodeId in slideshow) {\n const pos = slideshow[nodeId];\n for (let nodeId2 in slideshow) {\n if (slideshow[nodeId2].position > pos.position) {\n slideshow[nodeId2].position--;\n }\n }\n\n delete slideshow[nodeId];\n }\n },\n\n getPosition: function(nodeId) {\n const slideshow = this.getData();\n if (nodeId in slideshow) {\n return slideshow[nodeId].position;\n }\n return -1;\n },\n\n getInstructions: function(nodeId) {\n const slideshow = this.getData();\n if (nodeId in slideshow && \"instructions\" in slideshow[nodeId]) {\n return slideshow[nodeId].instructions;\n }\n return \"\";\n },\n\n setInstructions: function(nodeId, instructions) {\n const slideshow = this.getData();\n if (nodeId in slideshow) {\n slideshow[nodeId][\"instructions\"] = instructions;\n }\n },\n\n addNodeToSlideshow: function(newNode, leftNodeId, rightNodeId) {\n const nodeId = newNode.getNodeId();\n if (leftNodeId) {\n let leftPos = this.getPosition(leftNodeId);\n this.insertNode(nodeId, leftPos+1);\n } else if (rightNodeId) {\n const rightPos = this.getPosition(rightNodeId);\n this.insertNode(nodeId, rightPos);\n } else {\n this.insertNode(nodeId, 0);\n }\n },\n\n __moveNode: function(nodes, from, to) {\n let numberOfDeletedElm = 1;\n const elm = nodes.splice(from, numberOfDeletedElm)[0];\n numberOfDeletedElm = 0;\n nodes.splice(to, numberOfDeletedElm, elm);\n },\n\n isMovingForward: function(lastNodeId, targetNodeId) {\n let movingForward = false;\n if (lastNodeId && targetNodeId) {\n const sortedNodeIds = this.getSortedNodeIds();\n movingForward = sortedNodeIds.indexOf(lastNodeId) < sortedNodeIds.indexOf(targetNodeId);\n }\n return movingForward;\n },\n\n serialize: function() {\n return this.getData();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.data.model.IframeHandler\", {\n extend: qx.core.Object,\n include: qx.locale.MTranslation,\n\n construct: function(study, node) {\n this.setStudy(study);\n this.setNode(node);\n\n node.getStatus().addListener(\"changeInteractive\", e => {\n const newStatus = e.getData();\n const oldStatus = e.getOldData();\n this.__statusInteractiveChanged(newStatus, oldStatus);\n });\n\n this.__initLoadingPage();\n this.__initIFrame();\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false,\n event: \"changeStudy\"\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false\n },\n\n loadingPage: {\n check: \"osparc.ui.message.Loading\",\n init: null,\n nullable: true\n },\n\n iFrame: {\n check: \"osparc.widget.PersistentIframe\",\n init: null,\n nullable: true\n }\n },\n\n events: {\n \"iframeChanged\": \"qx.event.type.Event\"\n },\n\n members: {\n __unresponsiveRetries: null,\n __stopRequestingStatus: null,\n __retriesLeft: null,\n\n checkState: function() {\n this.getNode().getStatus().getProgressSequence()\n .resetSequence();\n\n this.__unresponsiveRetries = 5;\n this.__nodeState();\n },\n\n stopIframe: function() {\n this.getNode().getStatus().getProgressSequence()\n .resetSequence();\n\n this.__unresponsiveRetries = 5;\n this.__nodeState();\n\n if (this.getIFrame()) {\n this.getIFrame().resetSource();\n }\n },\n\n __initIFrame: function() {\n const iframe = new osparc.widget.PersistentIframe();\n osparc.utils.Utils.setIdToWidget(iframe.getIframe(), \"iframe_\"+this.getNode().getNodeId());\n if (osparc.product.Utils.isProduct(\"s4llite\")) {\n iframe.setShowToolbar(false);\n } else {\n this.getStudy().getUi().bind(\"mode\", iframe, \"showToolbar\", {\n converter: mode => mode !== \"standalone\"\n });\n }\n iframe.addListener(\"restart\", () => this.restartIFrame(), this);\n iframe.getDiskUsageIndicator().setCurrentNode(this.getNode())\n this.setIFrame(iframe);\n },\n\n __initLoadingPage: function() {\n const loadingPage = new osparc.ui.message.Loading().set({\n header: this.__getLoadingPageHeader()\n });\n if (osparc.product.Utils.isProduct(\"s4llite\")) {\n loadingPage.setShowToolbar(false);\n } else {\n this.getStudy().getUi().bind(\"mode\", loadingPage, \"showToolbar\", {\n converter: mode => mode !== \"standalone\"\n });\n }\n\n const node = this.getNode();\n const thumbnail = node.getMetaData()[\"thumbnail\"];\n if (thumbnail) {\n loadingPage.setLogo(thumbnail);\n }\n node.addListener(\"changeLabel\", () => loadingPage.setHeader(this.__getLoadingPageHeader()), this);\n\n const nodeStatus = node.getStatus();\n const sequenceWidget = nodeStatus.getProgressSequence().getWidgetForLoadingPage().set({\n width: 400\n });\n nodeStatus.bind(\"interactive\", sequenceWidget, \"visibility\", {\n converter: state => [\"pending\", \"pulling\", \"starting\", \"connecting\"].includes(state) ? \"visible\" : \"excluded\"\n });\n loadingPage.addExtraWidget(sequenceWidget);\n\n this.setLoadingPage(loadingPage);\n },\n\n __getLoadingPageHeader: function(status) {\n const node = this.getNode();\n if (status === undefined) {\n status = node.getStatus().getInteractive();\n }\n const statusText = status ? (status.charAt(0).toUpperCase() + status.slice(1)) : this.tr(\"Starting\");\n const metadata = node.getMetaData();\n const versionDisplay = osparc.service.Utils.extractVersionDisplay(metadata);\n return statusText + \" \" + node.getLabel() + \" v\" + versionDisplay + \"\";\n },\n\n __nodeState: function() {\n // Check if study is still there\n if (this.getStudy() === null || this.__stopRequestingStatus === true) {\n return;\n }\n // Check if node is still there\n if (this.getStudy().getWorkbench().getNode(this.getNode().getNodeId()) === null) {\n return;\n }\n\n const node = this.getNode();\n const params = {\n url: {\n studyId: this.getStudy().getUuid(),\n nodeId: node.getNodeId()\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"getNode\", params)\n .then(data => this.onNodeState(data))\n .catch(err => {\n let errorMsg = `Error retrieving ${node.getLabel()} status: ${err}`;\n if (\"status\" in err && err.status === 406) {\n errorMsg = node.getKey() + \":\" + node.getVersion() + \"is retired\";\n node.getStatus().setInteractive(\"retired\");\n osparc.FlashMessenger.getInstance().logAs(node.getLabel() + this.tr(\" is retired\"), \"ERROR\");\n }\n const errorMsgData = {\n nodeId: node.getNodeId(),\n msg: errorMsg,\n level: \"ERROR\"\n };\n node.fireDataEvent(\"showInLogger\", errorMsgData);\n if (\"status\" in err && err.status === 406) {\n return;\n }\n if (this.__unresponsiveRetries > 0) {\n const retryMsg = `Retrying (${this.__unresponsiveRetries})`;\n const retryMsgData = {\n nodeId: node.getNodeId(),\n msg: retryMsg,\n level: \"ERROR\"\n };\n node.fireDataEvent(\"showInLogger\", retryMsgData);\n this.__unresponsiveRetries--;\n } else {\n node.getStatus().setInteractive(\"failed\");\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"There was an error starting\") + \" \" + node.getLabel(), \"ERROR\");\n }\n });\n },\n\n onNodeState: function(data) {\n const serviceState = data[\"service_state\"];\n const nodeId = data[\"service_uuid\"];\n const node = this.getNode();\n const status = node.getStatus();\n const loadingPage = this.getLoadingPage();\n loadingPage.clearMessages();\n switch (serviceState) {\n case \"idle\": {\n status.setInteractive(serviceState);\n if (this.__unresponsiveRetries>0) {\n // a bit of a hack. We will get rid of it when the backend pushes the states\n this.__unresponsiveRetries--;\n }\n break;\n }\n case \"pending\": {\n if (data[\"service_message\"]) {\n const serviceMessage = data[\"service_message\"];\n loadingPage.setMessages([serviceMessage]);\n // show pending messages only after 10\"\n loadingPage.getMessageLabels().forEach(label => label.exclude());\n setTimeout(() => {\n loadingPage.getMessageLabels().forEach(label => label.show());\n }, 10000);\n const serviceName = node.getLabel();\n const msg = `The service \"${serviceName}\" is waiting for available ` +\n `resources. Please inform support and provide the following message ` +\n `in case this does not resolve in a few minutes: \"${nodeId}\" ` +\n `reported \"${serviceMessage}\"`;\n const msgData = {\n nodeId: node.getNodeId(),\n msg: msg,\n level: \"INFO\"\n };\n node.fireDataEvent(\"showInLogger\", msgData);\n }\n status.setInteractive(serviceState);\n break;\n }\n case \"stopping\":\n case \"unknown\":\n case \"starting\":\n case \"pulling\": {\n status.setInteractive(serviceState);\n break;\n }\n case \"running\": {\n if (nodeId !== node.getNodeId()) {\n break;\n }\n const {\n srvUrl,\n isDynamicV2\n } = osparc.utils.Utils.computeServiceUrl(data);\n node.setDynamicV2(isDynamicV2);\n if (\n srvUrl &&\n srvUrl !== node.getServiceUrl() // if it's already connected, do not restart the connection process\n ) {\n this.__statusInteractiveChanged(\"connecting\", node.getStatus().getInteractive());\n this.__retriesLeft = 40;\n this.__waitForServiceReady(srvUrl);\n }\n break;\n }\n case \"complete\":\n break;\n case \"failed\": {\n status.setInteractive(serviceState);\n const msg = \"Service failed: \" + data[\"service_message\"];\n const errorMsgData = {\n nodeId: node.getNodeId(),\n msg,\n level: \"ERROR\"\n };\n node.fireDataEvent(\"showInLogger\", errorMsgData);\n return;\n }\n default:\n console.error(serviceState, \"service state not supported\");\n break;\n }\n },\n\n __waitForServiceReady: function(srvUrl) {\n if (this.__retriesLeft === 0) {\n return;\n }\n\n const retry = () => {\n this.__retriesLeft--;\n\n // Check if node is still there\n if (this.getStudy().getWorkbench().getNode(this.getNode().getNodeId()) === null) {\n return;\n }\n const interval = 5000;\n qx.event.Timer.once(() => this.__waitForServiceReady(srvUrl), this, interval);\n };\n\n // ping for some time until it is really reachable\n try {\n if (osparc.utils.Utils.isDevelopmentPlatform()) {\n console.log(\"Connecting: about to fetch\", srvUrl);\n }\n fetch(srvUrl, {credentials: \"include\"})\n .then(response => {\n if (osparc.utils.Utils.isDevelopmentPlatform()) {\n console.log(\"Connecting: fetch's response status\", response.status);\n }\n if (response.status < 400) {\n this.__serviceReadyIn(srvUrl);\n } else {\n console.error(`Connecting: ${srvUrl} is not reachable. Status: ${response.status}`);\n retry();\n }\n })\n .catch(err => {\n console.error(\"Connecting: Error\", err);\n retry();\n });\n } catch (error) {\n console.error(`Connecting: Error while checking ${srvUrl}:`, error);\n retry();\n }\n },\n\n __serviceReadyIn: function(srvUrl) {\n const node = this.getNode();\n node.setServiceUrl(srvUrl);\n node.getStatus().setInteractive(\"ready\");\n },\n\n __statusInteractiveChanged: function(status, oldStatus) {\n if (status === oldStatus) {\n return;\n }\n\n const node = this.getNode();\n\n const loadingPage = node.getLoadingPage();\n loadingPage.setHeader(this.__getLoadingPageHeader(status));\n loadingPage.clearMessages();\n if ([\"idle\", \"failed\"].includes(status)) {\n const startButton = new qx.ui.form.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/18\",\n font: \"text-18\",\n allowGrowX: false,\n height: 32\n });\n startButton.addListener(\"execute\", () => node.requestStartNode());\n loadingPage.addWidgetToMessages(startButton);\n }\n\n if (status === \"ready\") {\n const msg = `Service ${node.getLabel()} ${status}`;\n const msgData = {\n nodeId: node.getNodeId(),\n msg,\n level: \"INFO\"\n };\n node.fireDataEvent(\"showInLogger\", msgData);\n\n // will switch to iframe's content\n this.restartIFrame();\n if (!node.isDynamicV2()) {\n node.callRetrieveInputs();\n }\n } else if ([\"idle\", \"failed\", \"stopping\"].includes(status) && oldStatus) {\n const msg = `Service ${node.getLabel()} ${status}`;\n const msgData = {\n nodeId: node.getNodeId(),\n msg,\n level: \"INFO\"\n };\n node.fireDataEvent(\"showInLogger\", msgData);\n\n // will switch to the loading page\n node.resetServiceUrl();\n if (this.getIFrame()) {\n this.getIFrame().resetSource();\n }\n this.fireEvent(\"iframeChanged\");\n }\n },\n\n restartIFrame: function() {\n const node = this.getNode();\n if (node.getServiceUrl() !== null) {\n // restart button pushed\n if (this.getIFrame() && this.getIFrame().getSource().includes(node.getServiceUrl())) {\n this.__loadIframe();\n }\n\n const loadingPage = this.getLoadingPage();\n const bounds = loadingPage.getBounds();\n const domEle = loadingPage.getContentElement().getDomElement();\n const boundsCR = domEle ? domEle.getBoundingClientRect() : null;\n if (bounds !== null && boundsCR && boundsCR.width > 0) {\n this.__loadIframe();\n } else {\n // lazy loading\n loadingPage.addListenerOnce(\"appear\", () => this.__loadIframe(), this);\n }\n }\n },\n\n __loadIframe: function() {\n const node = this.getNode();\n const status = node.getStatus().getInteractive();\n // it might have been stopped\n if ([\"running\", \"ready\"].includes(status)) {\n if (this.getIFrame()) {\n this.getIFrame().resetSource();\n this.getIFrame().setSource(node.getServiceUrl());\n }\n\n // fire event to force switching to iframe's content:\n // it is required in those cases where the native 'load' event isn't triggered (voila)\n this.fireEvent(\"iframeChanged\");\n }\n }\n }\n});\n","/* ************************************************************************\n Copyright: 2013 OETIKER+PARTNER AG\n 2018 ITIS Foundation\n License: MIT\n Authors: Tobi Oetiker \n Utf8Check: äöü\n************************************************************************ */\n\n/**\n * Create a form. The argument to the form\n * widget defines the structure of the form.\n *\n * \n * {\n * key: {\n * displayOrder: 5,\n * label: \"Widget SelectBox Test\",\n * description: \"Test Input for SelectBox\",\n * defaultValue: \"dog\",\n * type: \"string\",\n * widget: {\n * type: \"SelectBox\",\n * structure: [{\n * key: \"dog\",\n * label: \"A Dog\"\n * }, {\n * key: \"cat\",\n * label: \"A Cat\"\n * }]\n * }\n * },\n * }\n * \n *\n * The default widgets for data types are as follows:\n * string: text\n * integer: spinner\n * bool: checkBox\n * number: text\n * data: file-upload/selection\n *\n * The following widget types are supported:\n * selectBox: { structure: [ {key: x, label: y}, ...] },\n * date: { }, // following unix tradition, dates are represented in epoc seconds\n * password: {},\n * textArea: {},\n * hiddenText: {},\n * checkBox: {},\n * comboBox: {},\n *\n *\n * Populate the new form using the setData method, providing a map\n * with the required data.\n *\n */\n\nqx.Class.define(\"osparc.form.Auto\", {\n extend: qx.ui.form.Form,\n include: [qx.locale.MTranslation],\n\n /**\n * @param structure {Object} form structure\n */\n construct: function(structure) {\n this.base(arguments);\n this.__ctrlMap = {};\n let formCtrl = this.__formCtrl = new qx.data.controller.Form(null, this);\n this.__boxCtrl = {};\n for (let key in structure) {\n this.__addField(structure[key], key);\n }\n let model = this.__model = formCtrl.createModel(true);\n\n model.addListener(\"changeBubble\", e => {\n if (!this.__settingData) {\n this.fireDataEvent(\"changeData\", this.getData());\n }\n },\n this);\n },\n\n events: {\n /**\n * fire when the form changes content and\n * and provide access to the data\n */\n \"changeData\": \"qx.event.type.Data\"\n },\n\n statics: {\n hasValidatableProp: function(s) {\n return Object.keys(s).some(r => [\"minimum\", \"maximum\"].includes(r));\n }\n },\n\n members: {\n __boxCtrl: null,\n __ctrlMap: null,\n __formCtrl: null,\n __model: null,\n __settingData: false,\n\n\n /**\n * Use normal Form validation to validate the content of the form\n *\n * @return {let} validation output\n */\n validate: function() {\n return this.__formCtrl.validate();\n },\n\n\n /**\n * Reset the form content\n *\n */\n reset: function() {\n this.__formCtrl.reset();\n },\n\n\n /**\n * get a handle to the control with the given name\n *\n * @param key {let} key of the the field\n * @return {let} control associated with the field\n */\n getControl: function(key) {\n return this.__ctrlMap[key];\n },\n\n getControls: function() {\n return this.__ctrlMap;\n },\n\n\n /**\n * fetch the data for this form\n *\n * @return {let} all data from the form\n */\n getData: function() {\n return this.__getData(this.__model);\n },\n\n /**\n * load new data into the data main model\n *\n * @param data {let} map with key value pairs to apply\n * @param relax {let} ignore non existing keys\n */\n setData: function(data, relax) {\n this.__setData(this.__model, data, relax);\n },\n\n\n /**\n * load new data into a model\n * if relax is set unknown properties will be ignored\n *\n * @param model {let} TODOC\n * @param data {let} TODOC\n * @param relax {let} TODOC\n */\n __setData: function(model, data, relax) {\n this.__settingData = true;\n\n for (let key in data) {\n // this.getControl(key).setEnabled(true);\n let upkey = qx.lang.String.firstUp(key);\n let setter = \"set\" + upkey;\n let value = data[key];\n if (relax && !model[setter]) {\n continue;\n }\n model[setter](value);\n }\n\n this.__settingData = false;\n\n /* only fire ONE if there was an attempt at change */\n this.fireDataEvent(\"changeData\", this.getData());\n },\n\n\n /**\n * turn a model object into a plain data structure\n *\n * @param model {let} TODOC\n * @return {let} TODOC\n */\n __getData: function(model) {\n let props = model.constructor.$$properties;\n let data = {};\n\n for (let key in props) {\n let getter = \"get\" + qx.lang.String.firstUp(key);\n data[key] = model[getter]();\n }\n\n return data;\n },\n\n\n /**\n * set the data in a selectbox\n *\n * @param box {let} selectbox name\n * @param data {let} configuration of the box\n */\n setSelectBoxData: function(box, data) {\n let model;\n this.__settingData = true;\n\n if (data.length == 0) {\n model = qx.data.marshal.Json.createModel([{\n label: \"\",\n key: null\n }]);\n } else {\n model = qx.data.marshal.Json.createModel(data);\n }\n\n this.__boxCtrl[box].setModel(model);\n this.__boxCtrl[box].getTarget().resetSelection();\n this.__settingData = false;\n },\n\n __setupDateField: function(s) {\n this.__formCtrl.addBindingOptions(s.key,\n { // model2target\n converter: function(data) {\n if (/^\\d+$/.test(String(data))) {\n let d = new Date();\n d.setTime(parseInt(data) * 1000);\n let d2 = new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), 0, 0, 0, 0);\n return d2;\n }\n if (qx.lang.Type.isDate(data)) {\n return data;\n }\n return null;\n }\n },\n { // target2model\n converter: function(data) {\n if (qx.lang.Type.isDate(data)) {\n let d = new Date(Date.UTC(data.getFullYear(), data.getMonth(), data.getDate(), 0, 0, 0, 0));\n return Math.round(d.getTime()/1000);\n }\n return null;\n }\n }\n );\n s.set.dateFormat = new qx.util.format.DateFormat(\n this[\"tr\"](\n s.set.dateFormat ?\n s.set.dateFormat :\n \"dd.MM.yyyy\"\n )\n );\n let dateValue = s.defaultValue;\n if (dateValue !== null) {\n if (typeof dateValue == \"number\") {\n s.defaultValue = new Date(dateValue * 1000);\n } else {\n s.defaultValue = new Date(dateValue);\n }\n }\n },\n __setupTextArea: function(s, key, control) {\n if (s.widget.minHeight) {\n control.setMinHeight(s.widget.minHeight);\n }\n this.__setupTextField(s, key, control);\n },\n __setupTextField: function(s, key) {\n this.__formCtrl.addBindingOptions(key,\n { // model2target\n converter: function(data) {\n return String(data);\n }\n },\n { // target2model\n converter: function(data) {\n return data;\n }\n }\n );\n },\n __setupNumberField: function(s, key) {\n if (s.defaultValue) {\n s.set.value = qx.lang.Type.isNumber(s.defaultValue) ? String(s.defaultValue) : s.defaultValue;\n } else {\n s.set.value = String(0);\n }\n const model2target = {\n converter: function(data) {\n if (qx.lang.Type.isNumber(data) && !isNaN(parseFloat(data))) {\n return String(data);\n }\n return null;\n }\n };\n const target2model = {\n myContext: {\n that: this,\n s,\n key\n },\n converter: function(data) {\n if (!data) {\n // this avoids the moustached template issue\n return parseFloat(s.defaultValue);\n }\n const tmp = data.split(\" \");\n if (tmp.length > 1 && \"x_unit\" in this.myContext.s) {\n // extract unit with prefix from text\n const prefix = osparc.utils.Units.getPrefix(this.myContext.s[\"x_unit\"], tmp[1]);\n if (prefix !== null) {\n // eslint-disable-next-line no-underscore-dangle\n const item = this.myContext.that.__ctrlMap[key];\n item.unitPrefix = prefix;\n osparc.form.renderer.PropFormBase.updateUnitLabelPrefix(item);\n }\n }\n return parseFloat(data);\n }\n };\n this.__formCtrl.addBindingOptions(key, model2target, target2model);\n },\n __setupSpinner: function(s, key) {\n s.set.maximum = s.maximum ? parseInt(s.maximum) : 10000;\n s.set.minimum = s.minimum ? parseInt(s.minimum) : -10000;\n s.set.value = s.defaultValue ? parseInt(String(s.defaultValue)) : 0;\n\n this.__formCtrl.addBindingOptions(key,\n { // model2target\n converter: function(data) {\n let d = String(data);\n if (/^\\d+$/.test(d)) {\n return parseInt(d);\n }\n return null;\n }\n },\n { // target2model\n converter: function(data) {\n return parseInt(data);\n }\n }\n );\n },\n\n __setupSelectBox: function(s, key, control) {\n let controller = this.__boxCtrl[key] = new qx.data.controller.List(null, control, \"label\");\n controller.setDelegate({\n bindItem: function(ctrl, item, index) {\n ctrl.bindProperty(\"key\", \"model\", null, item, index);\n ctrl.bindProperty(\"label\", \"label\", null, item, index);\n }\n });\n // Content Schema\n if (\"enum\" in s) {\n const entries = [];\n s.enum.forEach(entry => {\n entries.push({\n label: entry.toString(),\n key: entry\n });\n });\n s.widget[\"structure\"] = entries;\n }\n const cfg = s.widget;\n let items = cfg.structure;\n if (items) {\n items.forEach(item => {\n item.label = item.label || \"\";\n }, this);\n } else {\n items = [{\n label: \"\",\n key: null\n }];\n }\n if (\"defaultValue\" in s) {\n s.set.value = [s.defaultValue];\n }\n // Content Schema\n if (\"default\" in s) {\n s.set.value = [s.default];\n }\n let sbModel = qx.data.marshal.Json.createModel(items);\n controller.setModel(sbModel);\n control.setModelSelection(s.set.value);\n },\n __setupComboBox: function(s, key, control) {\n let ctrl = this.__boxCtrl[key] = new qx.data.controller.List(null, control);\n let cfg = s.cfg;\n if (cfg.structure) {\n cfg.structure.forEach(function(item) {\n item = item ? this[\"tr\"](item):null;\n }, this);\n } else {\n cfg.structure = [];\n }\n let sbModel = qx.data.marshal.Json.createModel(cfg.structure);\n ctrl.setModel(sbModel);\n },\n __setupBoolField: function(s, key, control) {\n if (s.set.value && typeof s.set.value === \"string\") {\n s.set.value = Boolean(s.set.value.toLowerCase() === \"true\");\n }\n this.__formCtrl.addBindingOptions(key,\n { // model2target\n converter: function(data) {\n return data;\n }\n },\n { // target2model\n converter: function(data) {\n return data;\n }\n }\n );\n },\n __setupFileButton: function(s, key) {\n this.__formCtrl.addBindingOptions(key,\n { // model2target\n converter: function(data) {\n return String(data);\n }\n },\n { // target2model\n converter: function(data) {\n return data;\n }\n }\n );\n },\n __setupContentSchema: function(s, key, control) {\n control.setContentSchema(s.contentSchema);\n },\n\n __addField: function(s, key) {\n const control = this.__getField(s, key);\n\n this.__ctrlMap[key] = control;\n let option = {}; // could use this to pass on info to the form renderer\n this.add(control, s.label ? this[\"tr\"](s.label) : null, null, key, null, option);\n },\n\n __getField: function(s, key) {\n if (s.type === \"ref_contentSchema\") {\n Object.assign(s, s.contentSchema);\n }\n\n if (!s.set) {\n s.set = {};\n }\n if (\"defaultValue\" in s) {\n s.set.value = s.defaultValue;\n }\n // Content Schema\n if (\"default\" in s) {\n s.set.value = s.default;\n }\n\n if (!s.widget) {\n let type = s.type;\n if (type.match(/^data:/)) {\n type = \"data\";\n }\n s.widget = {\n type: {\n string: \"Text\",\n integer: \"Spinner\",\n number: \"Number\",\n boolean: \"CheckBox\",\n data: \"FileButton\",\n array: \"ArrayTextField\",\n \"ref_contentSchema\": \"ContentSchema\"\n }[type]\n };\n }\n // Content Schema\n if (\"enum\" in s) {\n s.widget[\"type\"] = \"SelectBox\";\n }\n let control;\n let setup;\n switch (s.widget.type) {\n case \"Date\":\n control = new qx.ui.form.DateField();\n setup = this.__setupDateField;\n break;\n case \"Text\":\n control = new qx.ui.form.TextField();\n setup = this.__setupTextField;\n break;\n case \"Number\":\n control = new qx.ui.form.TextField();\n setup = this.__setupNumberField;\n break;\n case \"Spinner\":\n control = new qx.ui.form.Spinner();\n setup = this.__setupSpinner;\n break;\n case \"Password\":\n control = new osparc.ui.form.PasswordField();\n setup = this.__setupTextField;\n break;\n case \"TextArea\":\n control = new qx.ui.form.TextArea();\n setup = this.__setupTextArea;\n break;\n case \"CheckBox\":\n control = new qx.ui.form.CheckBox();\n setup = this.__setupBoolField;\n break;\n case \"SelectBox\":\n control = new qx.ui.form.SelectBox();\n setup = this.__setupSelectBox;\n s.set[\"minWidth\"] = 80;\n break;\n case \"ComboBox\":\n control = new qx.ui.form.ComboBox();\n setup = this.__setupComboBox;\n break;\n case \"FileButton\":\n control = new qx.ui.form.TextField();\n setup = this.__setupFileButton;\n break;\n case \"ArrayTextField\":\n control = new osparc.ui.form.ContentSchemaArray();\n setup = this.__setupContentSchema;\n break;\n default:\n throw new Error(\"unknown widget type \" + s.widget.type);\n }\n\n setup.call(this, s, key, control);\n\n if (s.set) {\n if (s.set.filter) {\n s.set.filter = RegExp(s.filter);\n }\n if (\"minimum\" in s.set) {\n control.setMinimum(s.set[\"minimum\"]);\n }\n if (\"maximum\" in s.set) {\n control.setMaximum(s.set[\"maximum\"]);\n }\n control.set(s.set);\n }\n control.key = key;\n control.description = s.description;\n const rangeText = osparc.ui.form.ContentSchemaHelper.getDomainText(s);\n if (rangeText) {\n control.description += `
----
${rangeText}`;\n }\n control.type = s.type;\n control.widgetType = s.widget.type;\n control.unitShort = s.unitShort;\n control.unitLong = s.unitLong;\n if (\"x_unit\" in s) {\n const {\n unitPrefix,\n unit\n } = osparc.utils.Units.decomposeXUnit(s.x_unit);\n control.unitPrefix = unitPrefix;\n control.unit = unit;\n }\n\n let validator = null;\n if (\"getValidator\" in control) {\n validator = control.getValidator();\n } else if (this.self().hasValidatableProp(s)) {\n validator = osparc.ui.form.ContentSchemaHelper.createValidator(control, s);\n }\n if (validator) {\n control.addListener(\"changeValue\", () => validator.validate());\n }\n\n return control;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Here is a little example of how to use the widget.\n *\n * \n * let nodeOutputs = new osparc.widget.NodeOutputs(node, port);\n * this.getRoot().add(nodeOutputs);\n *
\n */\n\nqx.Class.define(\"osparc.widget.NodeOutputs\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(node) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n const grid = new qx.ui.layout.Grid(5, 5);\n grid.setColumnFlex(this.self().POS.LABEL, 1);\n grid.setColumnFlex(this.self().POS.VALUE, 1);\n grid.setColumnMinWidth(this.self().POS.VALUE, 50);\n grid.setColumnMaxWidth(this.self().POS.RETRIEVE_STATUS, 25);\n Object.keys(this.self().POS).forEach((_, idx) => grid.setColumnAlign(idx, \"left\", \"middle\"));\n const gridLayout = this.__gridLayout = new qx.ui.container.Composite(grid);\n this._add(gridLayout);\n\n this.set({\n node,\n ports: node.getMetaData().outputs\n });\n\n node.addListener(\"changeOutputs\", () => this.__outputsChanged(), this);\n\n this.addListener(\"appear\", () => this.__makeLabelsResponsive(), this);\n this.addListener(\"resize\", () => this.__makeLabelsResponsive(), this);\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n nullable: false\n },\n\n ports: {\n nullable: false,\n apply: \"__populateGrid\"\n },\n\n offerProbes: {\n check: \"Boolean\",\n init: false,\n event: \"changeOfferProbes\"\n }\n },\n\n events: {\n \"probeRequested\": \"qx.event.type.Data\"\n },\n\n statics: {\n POS: {\n LABEL: 0,\n INFO: 1,\n ICON: 2,\n VALUE: 3,\n UNIT: 4,\n PROBE: 5,\n RETRIEVE_STATUS: 6,\n }\n },\n\n members: {\n __gridLayout: null,\n\n __populateGrid: function() {\n this.__gridLayout.removeAll();\n\n const ports = this.getPorts();\n const portKeys = Object.keys(ports);\n for (let i=0; i val ? \"visible\" : \"excluded\"\n });\n probeBtn.addListener(\"execute\", () => this.getNode().fireDataEvent(\"probeRequested\", {\n portId: portKey,\n nodeId: this.getNode().getNodeId()\n }));\n this.__gridLayout.add(probeBtn, {\n row: i,\n column: this.self().POS.PROBE\n });\n\n this.__gridLayout.getLayout().setRowHeight(i, 23);\n }\n },\n\n __outputsChanged: function() {\n const outputs = this.getNode().getOutputs();\n const ports = this.getPorts();\n const portKeys = Object.keys(ports);\n for (let i=0; i {\n if (\"resp\" in presignedLinkData && presignedLinkData.resp) {\n valueWidget.setUrl(presignedLinkData.resp.link);\n }\n });\n } else if (\"downloadLink\" in value) {\n // it's a link\n const filename = (value.filename && value.filename.length > 0) ? value.filename : osparc.file.FileDownloadLink.extractLabelFromLink(value[\"downloadLink\"]);\n valueWidget.set({\n value: filename,\n url: value.downloadLink\n });\n }\n } else {\n valueWidget = new qx.ui.basic.Label(\"-\");\n if (value) {\n valueWidget.setValue(String(value));\n }\n }\n\n // remove first if any\n this.__removeEntry(row, this.self().POS.VALUE);\n\n this.__gridLayout.add(valueWidget, {\n row: row,\n column: this.self().POS.VALUE\n });\n },\n\n __makeLabelsResponsive: function() {\n const grid = this.__gridLayout.getLayout();\n const firstColumnWidth = osparc.utils.Utils.getGridsFirstColumnWidth(grid);\n if (firstColumnWidth === null) {\n // not rendered yet\n setTimeout(() => this.__makeLabelsResponsive(), 100);\n return;\n }\n const extendedVersion = firstColumnWidth > 300;\n\n const ports = this.getPorts();\n const portKeys = Object.keys(ports);\n for (let i=0; i\" + port.description: port.label\n });\n infoButton.setVisibility(extendedVersion ? \"hidden\" : \"visible\");\n grid.setColumnMinWidth(this.self().POS.VALUE, extendedVersion ? 150 : 50);\n }\n },\n\n __removeEntry: function(row, column) {\n let children = this.__gridLayout.getChildren();\n for (let i=0; i {\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores Workspace data.\n */\n\nqx.Class.define(\"osparc.data.model.Workspace\", {\n extend: qx.core.Object,\n\n /**\n * @param workspaceData {Object} Object containing the serialized Workspace Data\n */\n construct: function(workspaceData) {\n this.base(arguments);\n\n this.set({\n workspaceId: workspaceData.workspaceId,\n name: workspaceData.name,\n description: workspaceData.description,\n thumbnail: workspaceData.thumbnail,\n myAccessRights: workspaceData.myAccessRights,\n accessRights: workspaceData.accessRights,\n createdAt: new Date(workspaceData.createdAt),\n modifiedAt: new Date(workspaceData.modifiedAt),\n trashedAt: workspaceData.trashedAt ? new Date(workspaceData.trashedAt) : null,\n trashedBy: workspaceData.trashedBy,\n });\n },\n\n properties: {\n workspaceId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeId\"\n },\n\n name: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeName\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDescription\"\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeThumbnail\"\n },\n\n myAccessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeMyAccessRights\"\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeAccessRights\"\n },\n\n createdAt: {\n check: \"Date\",\n nullable: true,\n init: null,\n event: \"changeCreatedAt\"\n },\n\n modifiedAt: {\n check: \"Date\",\n nullable: true,\n init: null,\n event: \"changeModifiedAt\"\n },\n\n trashedAt: {\n check: \"Date\",\n nullable: true,\n init: null,\n event: \"changeTrashedAt\",\n },\n\n trashedBy: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeTrashedBy\",\n },\n },\n\n statics: {\n getProperties: function() {\n return Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.Workspace));\n }\n },\n\n members: {\n serialize: function() {\n const jsonObject = {};\n const propertyKeys = this.self().getProperties();\n propertyKeys.forEach(key => {\n jsonObject[key] = this.get(key);\n });\n return jsonObject;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2015 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Adrian Olaru (adrianolaru)\n\n************************************************************************ */\n\n\n/**\n * The Progress bar is designed to simply display the current % complete\n * for a process.\n *\n * The Value is limited between 0 and Maximum value.\n * It's not allowed to set a Maximum value of 0. If you set a Maximum value\n * bigger than 0, but smaller than Value, it will be limited to Value.\n *\n * The following example creates and adds a progress bar to the root element.\n * A listener is used to show the user if the value is changed,\n * and another one when the progress is complete.\n *\n * \n * var pb = new qx.ui.indicator.ProgressBar();\n * this.getRoot().add(pb, { left : 20, top: 20});\n *\n * pb.addListener(\"change\", function(e) {\n * this.debug(e.getData()); // % complete\n * this.debug(pb.getValue()); // absolute value\n * });\n *\n * pb.addListener(\"complete\", function(e) {\n * this.debug(\"complete\");\n * });\n *\n * //set a value\n * pb.setValue(20);\n * \n *\n * @childControl progress {qx.ui.container.Composite} The progress bar\n */\nqx.Class.define(\"qx.ui.indicator.ProgressBar\",\n{\n extend: qx.ui.container.Composite,\n\n\n /**\n * @param value {Number ? 0} Progress bar value\n * @param maximum {Number ? 100} Progress bar maximum value\n */\n construct: function(value, maximum) {\n this.base(arguments);\n\n this._createChildControl(\"progress\");\n\n this.setLayout(new qx.ui.layout.HBox());\n\n if (maximum != null) {\n this.setMaximum(maximum);\n }\n\n if (value != null) {\n this.setValue(value);\n }\n\n },\n\n\n properties:\n {\n appearance:\n {\n refine: true,\n init: \"progressbar\"\n },\n\n /** Maximum value of the progress bar */\n maximum :\n {\n init : 100,\n event : \"changeMaximum\",\n apply : \"_applyMaximum\"\n },\n\n /** Current value of the progress bar */\n value :\n {\n init : 0,\n event : \"changeValue\",\n apply : \"_applyValue\"\n }\n },\n\n\n events:\n {\n /**\n * Fired when the process is complete (value === maximum value)\n */\n complete: \"qx.event.type.Event\",\n\n\n /**\n * Fired when the % complete value is changed.\n */\n change: \"qx.event.type.Data\"\n },\n\n\n members:\n {\n // property apply\n _applyValue: function(value, old) {\n var max = this.getMaximum();\n\n //do nothing if is not a number\n if (!qx.lang.Type.isNumber(value) || !isFinite(value)) {\n value = old;\n }\n\n if (value < 0) {\n // limit value to 0\n value = 0;\n } else if (value > max) {\n // limit value to max\n value = max;\n }\n\n //set value\n this.setValue(value);\n\n //update progress\n this._changeProgress(value / max);\n },\n\n\n // property apply\n _applyMaximum: function(value, old) {\n var max = value;\n var val = this.getValue();\n\n //do nothing if is not a number, is negative or zero\n if (!qx.lang.Type.isNumber(max) || !isFinite(max) || max <= 0) {\n max = old;\n }\n\n //limit max to a greater than 0 value\n if (max < val) {\n max = val;\n }\n\n //set max\n this.setMaximum(max);\n\n //update progress\n this._changeProgress(val / max);\n },\n\n\n //overridden\n _createChildControlImpl: function(id, hash) {\n var control;\n\n switch (id)\n {\n case \"progress\":\n control = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n this._add(control, { width: \"0%\" });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n\n /**\n * Update the progress bar.\n *\n * @param value {Number} future value of progress bar\n */\n _changeProgress: function(value) {\n var bar = this.getChildControl(\"progress\");\n var to = Math.floor(value * 100);\n var from = parseInt(bar.getLayoutProperties().width, 10);\n\n bar.setLayoutProperties({width: to + \"%\"});\n\n //fire change event\n if (to != from) {\n this.fireDataEvent(\"change\", to, from);\n }\n\n //fire complete event if 100% complete\n if (to === 100) {\n this.fireEvent(\"complete\");\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that provides a way to use a download link\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let typeDownloadLink = new osparc.file.FileDownloadLink();\n * this.getRoot().add(typeDownloadLink);\n *
\n */\n\nqx.Class.define(\"osparc.file.FileDownloadLink\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5));\n\n const downloadLinkField = this.getChildControl(\"downloadLinkField\");\n\n const selectButton = this.getChildControl(\"selectButton\");\n selectButton.addListener(\"execute\", () => {\n const downloadLink = downloadLinkField.getValue();\n if (osparc.utils.Utils.isValidHttpUrl(downloadLink)) {\n this.fireDataEvent(\"fileLinkAdded\", downloadLink);\n } else {\n downloadLinkField.resetValue();\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Error checking link\"), \"WARNING\");\n }\n }, this);\n },\n\n events: {\n \"fileLinkAdded\": \"qx.event.type.Data\"\n },\n\n statics: {\n extractLabelFromLink: function(downloadLink) {\n // works for sparc.science portal download links\n // http://www.mydomain.com/my_file.ext?word=blah\n // until question mark\n const regex = \"(^.*)(?=\\\\?)\";\n const found = downloadLink.match(regex);\n if (found && found.length > 1) {\n const parts = found[1].split(\"/\");\n return parts[parts.length - 1];\n }\n\n const idx = downloadLink.lastIndexOf(\"/\");\n if (idx > -1) {\n return downloadLink.substring(idx + 1);\n }\n\n return \"unknown\";\n },\n\n checkFileExists: function(urlToFile) {\n return new Promise(resolve => {\n const xhr = new XMLHttpRequest();\n xhr.open(\"HEAD\", urlToFile, true);\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4) { // 4=this.DONE\n resolve(true);\n } else {\n resolve(false);\n }\n };\n xhr.send();\n });\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"downloadLinkField\":\n control = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"Type a Link\")\n });\n this._add(control, {\n flex: 1\n });\n break;\n case \"checkButton\":\n control = new qx.ui.form.Button(this.tr(\"Validate\"));\n this._add(control);\n break;\n case \"checkLink\":\n control = new qx.ui.basic.Image();\n control.set({\n source: \"@FontAwesome5Solid/question-circle/14\"\n });\n this._add(control);\n break;\n case \"selectButton\":\n control = new qx.ui.form.Button(this.tr(\"Select\"));\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n getValue: function() {\n return this.getChildControl(\"downloadLinkField\").getValue();\n },\n\n setValue: function(value) {\n this.getChildControl(\"downloadLinkField\").setValue(value);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * @ignore(SVGElement)\n */\n\nqx.Class.define(\"osparc.file.FileDrop\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n const contentElement = this.getContentElement();\n contentElement.setStyles(this.self().getBorderStyle());\n const colorManager = qx.theme.manager.Color.getInstance();\n colorManager.addListener(\"changeTheme\", () => {\n if (this.getShowBorder()) {\n contentElement.setStyles(this.self().getBorderStyle());\n }\n }, this);\n\n let msg = \"\";\n const options = [\n this.tr(\"Upload file\"),\n this.tr(\"Drop file from explorer\"),\n this.tr(\"Drop file from tree\"),\n this.tr(\"Provide Link\")\n ];\n for (let i=0; i\" + this.tr(\"or\") + \"
\";\n }\n }\n msg += \" \";\n\n const dropHereMessage = this.__dropHereMessage = new qx.ui.basic.Label(msg).set({\n font: \"text-14\",\n rich: true,\n alignX: \"center\",\n alignY: \"middle\"\n });\n this._add(dropHereMessage);\n\n dropHereMessage.addListener(\"appear\", () => this.__centerDropHereMessage(), this);\n this.addListener(\"resize\", () => this.__centerDropHereMessage(), this);\n\n const svgLayer = this.__svgLayer = new osparc.workbench.SvgWidget();\n this._add(svgLayer, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n\n this.__addDragAndDropListeners();\n },\n\n statics: {\n getBorderStyle: function() {\n return {\n \"border-width\": \"3px\",\n \"border-radius\": \"10px\",\n \"border-color\": qx.theme.manager.Color.getInstance().resolve(\"background-main-4\"),\n \"border-style\": \"dotted\"\n };\n },\n\n getNoBorderStyle: function() {\n return {\n \"border-width\": \"0px\"\n };\n },\n\n getFilesFromEvent: function(e) {\n const files = [];\n if (e.dataTransfer.items) {\n const items = e.dataTransfer.items;\n for (let i = 0; i < items.length; i++) {\n // If dropped items aren't files, reject them\n if (items[i].webkitGetAsEntry()[\"isFile\"]) {\n const file = items[i].getAsFile();\n files.push(file);\n }\n }\n }\n return files;\n },\n\n ONE_FILE_ONLY: qx.locale.Manager.tr(\"Only one file at a time is accepted.\") + \"
\" + qx.locale.Manager.tr(\"Please zip all files together.\"),\n },\n\n events: {\n \"localFileDropped\": \"qx.event.type.Data\",\n \"fileLinkDropped\": \"qx.event.type.Data\"\n },\n\n properties: {\n showBorder: {\n check: \"Boolean\",\n init: true,\n apply: \"__applyShowBorder\"\n },\n\n showDropHere: {\n check: \"Boolean\",\n init: true,\n apply: \"__applyShowDropHere\"\n }\n },\n\n members: {\n __svgLayer: null,\n __dropHereMessage: null,\n __dropMe: null,\n __isDraggingFile: null,\n __isDraggingLink: null,\n\n __applyShowBorder: function(show) {\n const contentElement = this.getContentElement();\n contentElement.setStyles(show ? this.self().getBorderStyle() : this.self().getNoBorderStyle());\n },\n\n __applyShowDropHere: function(value) {\n this.__dropHereMessage.setVisibility(value ? \"visible\" : \"excluded\");\n },\n\n __centerDropHereMessage: function() {\n const dropHere = this.__dropHereMessage;\n // center it\n const dropHereBounds = dropHere.getBounds() || dropHere.getSizeHint();\n const fileDropBounds = this.getBounds() || this.getSizeHint();\n dropHere.setLayoutProperties({\n top: parseInt((fileDropBounds.height - dropHereBounds.height) / 2),\n left: parseInt((fileDropBounds.width - dropHereBounds.width) / 2)\n });\n },\n\n setDropHereMessage: function(msg) {\n this.__dropHereMessage.set({\n value: msg\n });\n this.__centerDropHereMessage();\n },\n\n resetDropAction: function() {\n this.__updateWidgets(false);\n },\n\n __pointerFileEventToScreenPos: function(e) {\n const rect = this.getContentElement().getDomElement().getBoundingClientRect();\n return {\n x: e.pageX - rect.x,\n y: e.pageY - rect.y\n };\n },\n\n __pointerLinkEventToScreenPos: function(e) {\n const rect = this.getContentElement().getDomElement().getBoundingClientRect();\n return {\n x: e.getDocumentLeft() - rect.x,\n y: e.getDocumentTop() - rect.y\n };\n },\n\n __allowDragFile: function(e) {\n let allow = false;\n if (this.__isDraggingFile) {\n // item still being dragged\n allow = true;\n } else {\n allow = e.target instanceof SVGElement;\n this.__isDraggingFile = allow;\n }\n return allow;\n },\n\n __allowDragLink: function(e) {\n let allow = false;\n if (this.__isDraggingLink) {\n // item still being dragged\n allow = true;\n } else if (\"supportsType\" in e) {\n // item drag from osparc's file tree\n allow = e.supportsType(\"osparc-file-link\");\n if (allow) {\n // store \"osparc-file-link\" data in variable,\n // because the mousemove event doesn't contain that information\n this.__isDraggingLink = e.getData(\"osparc-file-link\");\n }\n }\n return allow;\n },\n\n __draggingFile: function(e, dragging) {\n if (this.__allowDragFile(e)) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n dragging = false;\n }\n\n const pos = this.__pointerFileEventToScreenPos(e);\n this.__updateWidgets(dragging, pos.x, pos.y);\n },\n\n __draggingLink: function(e, dragging) {\n if (this.__allowDragLink(e)) {\n e.preventDefault();\n e.stopPropagation();\n } else {\n dragging = false;\n }\n\n const pos = this.__pointerLinkEventToScreenPos(e);\n this.__updateWidgets(dragging, pos.x, pos.y);\n },\n\n __updateWidgets: function(dragging, posX, posY) {\n if (dragging) {\n this.__dropHereMessage.exclude();\n this.__updateDropMe(posX, posY);\n } else {\n if (this.getShowDropHere()) {\n this.__dropHereMessage.show();\n }\n this.__hideDropMe();\n }\n },\n\n __updateDropMe: function(posX, posY) {\n const boxWidth = 120;\n const boxHeight = 60;\n if (this.__dropMe === null) {\n this.__dropMe = new qx.ui.basic.Label(this.tr(\"Drop me\")).set({\n font: \"text-14\",\n textAlign: \"center\"\n });\n this._add(this.__dropMe);\n const svgLayer = this.__svgLayer;\n if (svgLayer.getReady()) {\n this.__dropMe.rect = svgLayer.drawDashedRect(boxWidth, boxHeight);\n } else {\n svgLayer.addListenerOnce(\"SvgWidgetReady\", () => this.__dropMe.rect = svgLayer.drawDashedRect(boxWidth, boxHeight), this);\n }\n }\n const dropMe = this.__dropMe;\n dropMe.show();\n const dropMeBounds = dropMe.getBounds() || dropMe.getSizeHint();\n dropMe.setLayoutProperties({\n left: posX - parseInt(dropMeBounds.width/2) - parseInt(boxWidth/2),\n top: posY - parseInt(dropMeBounds.height/2)- parseInt(boxHeight/2)\n });\n if (\"rect\" in dropMe) {\n dropMe.rect.stroke({\n width: 1\n });\n osparc.wrapper.Svg.updateItemPos(dropMe.rect, posX - boxWidth, posY - boxHeight);\n }\n },\n\n __hideDropMe: function() {\n const dropMe = this.__dropMe;\n if (dropMe) {\n if (\"rect\" in dropMe) {\n dropMe.rect.stroke({\n width: 0\n });\n }\n dropMe.exclude();\n }\n },\n\n __dropFile: function(e) {\n this.__draggingFile(e, false);\n\n this.__isDraggingFile = false;\n if (\"dataTransfer\" in e) {\n const files = osparc.file.FileDrop.getFilesFromEvent(e);\n if (files.length) {\n if (files.length === 1) {\n this.fireDataEvent(\"localFileDropped\", {\n data: files,\n pos: this.__pointerFileEventToScreenPos(e)\n });\n } else {\n osparc.FlashMessenger.getInstance().logAs(osparc.file.FileDrop.ONE_FILE_ONLY, \"ERROR\");\n }\n } else {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Folders are not accepted. You might want to upload a zip file.\"), \"ERROR\");\n }\n }\n },\n\n __dropLink: function(e) {\n this.__draggingLink(e, false);\n\n if (this.__isDraggingLink && \"dragData\" in this.__isDraggingLink) {\n this.fireDataEvent(\"fileLinkDropped\", {\n data: this.__isDraggingLink[\"dragData\"],\n pos: this.__pointerLinkEventToScreenPos(e)\n });\n this.__isDraggingLink = null;\n }\n },\n\n __addDragAndDropListeners: function() {\n this.addListenerOnce(\"appear\", () => {\n // listen to drag&drop files from local-storage\n const domEl = this.getContentElement().getDomElement();\n [\n \"dragenter\",\n \"dragover\",\n \"dragleave\"\n ].forEach(signalName => {\n domEl.addEventListener(signalName, e => {\n const dragging = signalName !== \"dragleave\";\n this.__draggingFile(e, dragging);\n }, this);\n });\n domEl.addEventListener(\"drop\", this.__dropFile.bind(this), false);\n\n // listen to drag&drop file-links from osparc-storage\n this.setDroppable(true);\n\n const stopDraggingLink = () => {\n this.__isDraggingLink = null;\n this.__updateWidgets(false);\n };\n const startDraggingLink = e => {\n this.addListenerOnce(\"dragleave\", stopDraggingLink, this);\n this.addListenerOnce(\"dragover\", startDraggingLink, this);\n this.__draggingLink(e, true);\n };\n this.addListenerOnce(\"dragover\", startDraggingLink, this);\n\n this.addListener(\"mousemove\", e => {\n if (this.__isDraggingLink) {\n this.__draggingLink(e, true);\n }\n }, this);\n this.addListener(\"mouseup\", e => {\n if (this.__isDraggingLink) {\n this.__dropLink(e, true);\n }\n }, this);\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.file.FileUploader\", {\n extend: qx.core.Object,\n\n /**\n * @param node {osparc.data.model.Node} Node owning the widget\n */\n construct: function(node) {\n this.base(arguments);\n\n this.set({\n node\n });\n\n this.__presignedLinkData = null;\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\"\n }\n },\n\n events: {\n \"uploadAborted\": \"qx.event.type.Event\",\n \"fileUploaded\": \"qx.event.type.Data\",\n },\n\n statics: {\n PROGRESS_VALUES: {\n FETCHING_PLINK: 1,\n CHUNKING: 2,\n COMPLETING: 99\n },\n\n createChunk: function(file, fileSize, chunkIdx, chunkSize) {\n const start = chunkIdx * chunkSize;\n const chunkEnd = Math.min(start + chunkSize, fileSize);\n const chunkBlob = file.slice(start, chunkEnd);\n return chunkBlob;\n }\n },\n\n members: {\n __presignedLinkData: null,\n __uploadedParts: null,\n __fileMetadata: null,\n\n // Request to the server an upload URL.\n retrieveUrlAndUpload: function(file) {\n if (this.getNode() === null) {\n return;\n }\n\n const download = false;\n const locationId = 0;\n const studyId = this.getNode().getStudy().getUuid();\n const nodeId = this.getNode() ? this.getNode().getNodeId() : osparc.utils.Utils.uuidV4();\n const fileId = file.name;\n const fileUuid = studyId +\"/\"+ nodeId +\"/\"+ fileId;\n const fileSize = file.size;\n const dataStore = osparc.store.Data.getInstance();\n this.getNode().getStatus().setProgress(this.self().PROGRESS_VALUES.FETCHING_PLINK);\n dataStore.getPresignedLink(download, locationId, fileUuid, fileSize)\n .then(presignedLinkData => {\n if (presignedLinkData.resp.urls) {\n this.__presignedLinkData = presignedLinkData;\n\n this.__fileMetadata = {\n location: presignedLinkData.locationId,\n dataset: studyId,\n path: presignedLinkData.fileUuid,\n name: file.name\n };\n\n try {\n this.__uploadFile(file);\n } catch (error) {\n console.error(error);\n this.__abortUpload();\n }\n }\n });\n },\n\n // Use XMLHttpRequest to upload the file to S3.\n __uploadFile: async function(file) {\n const presignedLinkData = this.__presignedLinkData;\n this.getNode().getStatus().setProgress(this.self().PROGRESS_VALUES.CHUNKING);\n\n // create empty object, it will be filled up with etags and 1 based chunk ids when chunks get uploaded\n this.__uploadedParts = [];\n for (let chunkIdx = 0; chunkIdx < presignedLinkData.resp.urls.length; chunkIdx++) {\n this.__uploadedParts.push({\n \"number\": chunkIdx+1,\n \"e_tag\": null\n });\n }\n const fileSize = presignedLinkData.fileSize;\n const chunkSize = presignedLinkData.resp[\"chunk_size\"];\n for (let chunkIdx = 0; chunkIdx < presignedLinkData.resp.urls.length; chunkIdx++) {\n if (this.getNode()[\"fileUploadAbortRequested\"]) {\n this.__abortUpload();\n break;\n }\n const chunkBlob = this.self().createChunk(file, fileSize, chunkIdx, chunkSize);\n try {\n const eTag = await this.__uploadChunk(chunkBlob, chunkIdx);\n if (eTag) {\n // remove double double quotes \"\"e_tag\"\" -> \"e_tag\"\n this.__uploadedParts[chunkIdx][\"e_tag\"] = eTag.slice(1, -1);\n const uploadedParts = this.__uploadedParts.filter(uploadedPart => uploadedPart[\"e_tag\"] !== null).length;\n const progress = uploadedParts/this.__uploadedParts.length;\n // normalize progress value between CHUNKING and COMPLETING\n const min = this.self().PROGRESS_VALUES.CHUNKING;\n const max = this.self().PROGRESS_VALUES.COMPLETING;\n const nProgress = Math.min(Math.max(100*progress-min, min), max);\n this.getNode().getStatus().setProgress(nProgress);\n if (this.__uploadedParts.every(uploadedPart => uploadedPart[\"e_tag\"] !== null)) {\n this.__checkCompleteUpload();\n }\n }\n } catch (err) {\n console.error(err);\n this.__abortUpload();\n }\n }\n },\n\n __uploadChunk: function(chunkBlob, chunkIdx) {\n return new Promise((resolve, reject) => {\n // From https://github.com/minio/cookbook/blob/master/docs/presigned-put-upload-via-browser.md\n const url = this.__presignedLinkData.resp.urls[chunkIdx];\n const xhr = new XMLHttpRequest();\n xhr.onload = () => {\n if (xhr.status == 200) {\n const eTag = xhr.getResponseHeader(\"etag\");\n resolve(eTag);\n } else {\n reject(xhr.response);\n }\n };\n xhr.open(\"PUT\", url, true);\n xhr.send(chunkBlob);\n });\n },\n\n // Use XMLHttpRequest to complete the upload to S3\n __checkCompleteUpload: function() {\n if (this.getNode()[\"fileUploadAbortRequested\"]) {\n this.__abortUpload();\n return;\n }\n\n const presignedLinkData = this.__presignedLinkData;\n this.getNode().getStatus().setProgress(this.self().PROGRESS_VALUES.COMPLETING);\n const completeUrl = presignedLinkData.resp.links.complete_upload;\n const xhr = new XMLHttpRequest();\n xhr.onloadend = () => {\n const resp = JSON.parse(xhr.responseText);\n if (\"error\" in resp && resp[\"error\"]) {\n console.error(resp[\"error\"]);\n this.__abortUpload();\n } else if (\"data\" in resp) {\n if (xhr.status == 202) {\n console.log(\"waiting for completion\", this.__fileMetadata.name);\n // @odeimaiz: we need to poll the received new location in the response\n // we do have links.state -> poll that link until it says ok\n // right now this kind of work if files are small and this happens fast\n this.__pollFileUploadState(resp[\"data\"][\"links\"][\"state\"]);\n } else if (xhr.status == 200) {\n this.__completeUpload();\n }\n }\n };\n xhr.open(\"POST\", completeUrl, true);\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\n const body = {\n parts: this.__uploadedParts\n };\n xhr.send(JSON.stringify(body));\n },\n\n __pollFileUploadState: function(stateLink) {\n const xhr = new XMLHttpRequest();\n xhr.open(\"POST\", stateLink, true);\n xhr.setRequestHeader(\"Content-Type\", \"application/json\");\n xhr.onloadend = () => {\n const resp = JSON.parse(xhr.responseText);\n if (\"data\" in resp && resp[\"data\"] && resp[\"data\"][\"state\"] === \"ok\") {\n this.__completeUpload();\n } else {\n const interval = 2000;\n qx.event.Timer.once(() => this.__pollFileUploadState(stateLink), this, interval);\n }\n };\n xhr.send();\n },\n\n __completeUpload: function() {\n this.getNode()[\"fileUploadAbortRequested\"] = false;\n\n this.__presignedLinkData = null;\n this.fireDataEvent(\"fileUploaded\", this.__fileMetadata);\n },\n\n __abortUpload: function() {\n this.getNode()[\"fileUploadAbortRequested\"] = false;\n\n const aborted = () => {\n this.__presignedLinkData = null;\n // avoid interfering with the progress update\n setTimeout(() => this.fireEvent(\"uploadAborted\"), osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL*2);\n };\n const abortUrl = this.__presignedLinkData.resp.links.abort_upload;\n if (abortUrl) {\n const xhr = new XMLHttpRequest();\n xhr.open(\"POST\", abortUrl, true);\n xhr.onload = () => aborted();\n xhr.send();\n } else {\n aborted();\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (ignapas)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.RadioCollapsibleViews\", {\n extend: qx.core.Object,\n\n /**\n * @param {Array} collapsibleViews array of osparc.widget.CollapsibleView\n */\n construct: function(collapsibleViews = []) {\n this.base(arguments);\n\n this.__collapsibleViews = [];\n\n collapsibleViews.forEach(cv => this.addCollapsibleView(cv));\n },\n\n members: {\n __collapsibleViews: null,\n\n /**\n * @param {osparc.widget.CollapsibleView | osparc.desktop.PanelView} collapsibleView\n */\n addCollapsibleView: function(collapsibleView) {\n this.__collapsibleViews.push(collapsibleView);\n\n collapsibleView.addListener(\"changeCollapsed\", e => {\n const collapsed = e.getData();\n if (collapsed === false) {\n // close the other views\n const idx = this.__collapsibleViews.indexOf(collapsibleView);\n this.__collapsibleViews.forEach((cv, idx2) => {\n if (idx !== idx2) {\n cv.setCollapsed(true);\n }\n })\n }\n }, this);\n },\n\n openCollapsibleView: function(idx = 0) {\n if (idx < this.__collapsibleViews.length) {\n this.__collapsibleViews[idx].setCollapsed(false);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.file.FolderViewer\", {\n extend: qx.ui.core.Widget,\n\n construct: function(allowMultiSelection = true) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.setPaddingLeft(10);\n\n const folderUpBtn = this.getChildControl(\"folder-up\");\n folderUpBtn.addListener(\"execute\", () => this.fireDataEvent(\"folderUp\", this.getFolder()), this);\n this.getChildControl(\"folder-path\");\n let multiSelectButton = null;\n if (allowMultiSelection) {\n multiSelectButton = this.getChildControl(\"multi-select-button\");\n }\n const listViewButton = this.getChildControl(\"view-options-list\");\n const gridViewButton = this.getChildControl(\"view-options-icons\");\n const folderContent = this.getChildControl(\"folder-content\");\n const selectedFileLayout = this.getChildControl(\"selected-file-layout\");\n\n this.bind(\"folder\", this.getChildControl(\"folder-up\"), \"enabled\", {\n converter: folder => Boolean(folder && folder.getPathLabel && folder.getPathLabel().length > 1)\n });\n\n this.bind(\"folder\", this.getChildControl(\"folder-path\"), \"value\", {\n converter: folder => folder ? folder.getPathLabel().join(\" / \") : this.tr(\"Select folder\")\n });\n\n this.bind(\"folder\", folderContent, \"folder\");\n\n if (allowMultiSelection) {\n multiSelectButton.bind(\"value\", folderContent, \"multiSelect\");\n folderContent.bind(\"multiSelect\", multiSelectButton, \"value\");\n multiSelectButton.addListener(\"changeValue\", e => {\n selectedFileLayout.setMultiSelect(e.getData());\n });\n }\n gridViewButton.addListener(\"execute\", () => {\n folderContent.setMode(\"icons\");\n selectedFileLayout.resetSelection();\n multiSelectButton.setValue(false);\n });\n listViewButton.addListener(\"execute\", () => {\n folderContent.setMode(\"list\");\n selectedFileLayout.resetSelection();\n multiSelectButton.setValue(false);\n });\n\n folderContent.addListener(\"requestDatasetFiles\", e => this.fireDataEvent(\"requestDatasetFiles\", e.getData()));\n folderContent.addListener(\"selectionChanged\", e => {\n const selectionData = e.getData();\n selectedFileLayout.setItemSelected(selectionData);\n }, this);\n folderContent.addListener(\"multiSelectionChanged\", e => {\n const multiSelectionData = e.getData();\n selectedFileLayout.setMultiItemSelected(multiSelectionData);\n }, this);\n folderContent.addListener(\"openItemSelected\", e => {\n const entry = e.getData();\n this.fireDataEvent(\"openItemSelected\", entry);\n if (osparc.file.FilesTree.isDir(entry)) {\n this.setFolder(entry);\n }\n });\n },\n\n properties: {\n folder: {\n check: \"qx.core.Object\",\n init: null,\n nullable: true,\n event: \"changeFolder\",\n apply: \"__applyFolder\",\n },\n },\n\n events: {\n \"openItemSelected\": \"qx.event.type.Data\", // dbltap\n \"folderUp\": \"qx.event.type.Data\",\n \"requestDatasetFiles\": \"qx.event.type.Data\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"header\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n this._add(control);\n break;\n case \"folder-up\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/arrow-up/12\").set({\n enabled: false\n });\n header.addAt(control, 0);\n break;\n }\n case \"folder-path\": {\n const header = this.getChildControl(\"header\");\n control = new qx.ui.basic.Label(this.tr(\"Select folder\")).set({\n font: \"text-14\",\n allowGrowX: true,\n alignY: \"middle\",\n marginLeft: 10,\n marginRight: 10\n });\n header.addAt(control, 1, {\n flex: 1\n });\n break;\n }\n case \"multi-select-button\": {\n control = new qx.ui.form.ToggleButton(this.tr(\"Multiselect\")).set({\n value: false,\n marginRight: 10,\n });\n const header = this.getChildControl(\"header\");\n header.addAt(control, 2);\n break;\n }\n case \"view-options-radio-group\":\n control = new qx.ui.form.RadioGroup();\n break;\n case \"view-options-icons\": {\n control = new qx.ui.form.ToggleButton(null, \"@MaterialIcons/apps/18\");\n osparc.utils.Utils.setIdToWidget(control, \"folderGridView\");\n const group = this.getChildControl(\"view-options-radio-group\");\n group.add(control);\n const header = this.getChildControl(\"header\");\n header.addAt(control, 3);\n break;\n }\n case \"view-options-list\": {\n control = new qx.ui.form.ToggleButton(null, \"@MaterialIcons/reorder/18\");\n const group = this.getChildControl(\"view-options-radio-group\");\n group.add(control);\n const header = this.getChildControl(\"header\");\n header.addAt(control, 4);\n break;\n }\n case \"folder-content\": {\n control = new osparc.file.FolderContent();\n this._add(control, {\n flex: 1\n });\n break;\n }\n case \"selected-file-layout\":\n control = new osparc.file.FileLabelWithActions().set({\n alignY: \"middle\"\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyFolder: function() {\n this.getChildControl(\"selected-file-layout\").resetSelection();\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * The container used by {@link Part} to insert the buttons.\n *\n * @internal\n */\nqx.Class.define(\"qx.ui.toolbar.PartContainer\",\n{\n extend : qx.ui.container.Composite,\n\n\n construct : function()\n {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox);\n },\n\n\n events : {\n /** Fired if a child has been added or removed */\n changeChildren : \"qx.event.type.Event\"\n },\n\n properties :\n {\n appearance :\n {\n refine : true,\n init : \"toolbar/part/container\"\n },\n\n /** Whether icons, labels, both or none should be shown. */\n show :\n {\n init : \"both\",\n check : [ \"both\", \"label\", \"icon\" ],\n inheritable : true,\n event : \"changeShow\"\n }\n },\n\n\n members : {\n // overridden\n _afterAddChild : function(child) {\n this.fireEvent(\"changeChildren\");\n },\n\n\n // overridden\n _afterRemoveChild : function(child) {\n this.fireEvent(\"changeChildren\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.ServiceUtils\", {\n type: \"static\",\n\n statics: {\n /**\n * @param label {String} label\n */\n createTitle: function(label) {\n const title = osparc.info.Utils.createTitle();\n title.setValue(label);\n return title;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createNodeId: function(instanceUuid) {\n const label = osparc.info.Utils.createLabel();\n label.set({\n value: instanceUuid\n });\n return label;\n },\n\n /**\n * @param serviceKey {String} Service key\n */\n createKey: function(serviceKey) {\n const key = osparc.info.Utils.createLabel();\n key.set({\n value: serviceKey,\n toolTipText: serviceKey\n });\n return key;\n },\n\n /**\n * @param serviceVersion {String} Service version\n */\n createVersion: function(serviceVersion) {\n const version = osparc.info.Utils.createLabel();\n version.set({\n value: serviceVersion\n });\n return version;\n },\n\n createVersionDisplay: function(key, version) {\n const versionDisplay = osparc.service.Utils.getVersionDisplay(key, version);\n const label = new qx.ui.basic.Label(versionDisplay);\n osparc.utils.Utils.setIdToWidget(label, \"serviceVersion\");\n return label;\n },\n\n createReleasedDate: function(key, version) {\n const releasedDate = osparc.service.Utils.getReleasedDate(key, version);\n if (releasedDate) {\n const label = new qx.ui.basic.Label();\n label.set({\n value: osparc.utils.Utils.formatDateAndTime(new Date(releasedDate)),\n });\n return label;\n }\n return null;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createContact: function(serviceData) {\n const contact = osparc.store.Support.getMailToLabel(serviceData[\"contact\"], serviceData[\"name\"] + \":\" + serviceData[\"version\"]);\n return contact;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createAuthors: function(serviceData) {\n const authors = new qx.ui.basic.Label().set({\n rich: true\n });\n serviceData[\"authors\"].forEach(author => {\n const oldVal = authors.getValue();\n const oldTTT = authors.getToolTipText();\n authors.set({\n value: (oldVal ? oldVal : \"\") + `${author[\"name\"]}
`,\n toolTipText: (oldTTT ? oldTTT : \"\") + `${author[\"email\"]} - ${author[\"affiliation\"]}
`\n });\n });\n return authors;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createAccessRights: function(serviceData) {\n let permissions = \"\";\n const myGID = osparc.auth.Data.getInstance().getGroupId();\n const ar = serviceData[\"accessRights\"];\n if (myGID in ar) {\n if (ar[myGID][\"write\"]) {\n permissions = qx.locale.Manager.tr(\"Write\");\n } else if (ar[myGID][\"execute\"]) {\n permissions = qx.locale.Manager.tr(\"Execute\");\n }\n } else {\n permissions = qx.locale.Manager.tr(\"Public\");\n }\n const accessRights = new qx.ui.basic.Label(permissions);\n return accessRights;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createClassifiers: function(serviceData) {\n const nClassifiers = new qx.ui.basic.Label();\n nClassifiers.setValue(`(${serviceData[\"classifiers\"].length})`);\n return nClassifiers;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n createQuality: function(serviceData) {\n const tsrLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(2)).set({\n toolTipText: qx.locale.Manager.tr(\"Ten Simple Rules score\")\n });\n const addStars = data => {\n tsrLayout.removeAll();\n const quality = data[\"quality\"];\n if (osparc.metadata.Quality.isEnabled(quality)) {\n const tsrRating = new osparc.ui.basic.StarsRating();\n tsrRating.set({\n nStars: 4,\n showScore: true\n });\n osparc.ui.basic.StarsRating.scoreToStarsRating(quality[\"tsr_current\"], quality[\"tsr_target\"], tsrRating);\n tsrLayout.add(tsrRating);\n } else {\n tsrLayout.exclude();\n }\n };\n addStars(serviceData);\n return tsrLayout;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n * @param maxHeight {Number} description's maxHeight\n */\n createDescription: function(serviceData) {\n const descriptionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\"\n }));\n\n const label = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Description\")).set({\n font: \"text-13\"\n });\n descriptionLayout.add(label);\n\n const description = new osparc.ui.markdown.Markdown();\n // display markdown link content if that's the case\n if (\n osparc.utils.Utils.isValidHttpUrl(serviceData[\"description\"]) &&\n serviceData[\"description\"].endsWith(\".md\")\n ) {\n // if it's a link, fetch the content\n fetch(serviceData[\"description\"])\n .then(response => response.blob())\n .then(blob => blob.text())\n .then(markdown => {\n description.setValue(markdown)\n })\n .catch(err => {\n console.error(err);\n description.setValue(serviceData[\"description\"]);\n });\n } else {\n description.setValue(serviceData[\"description\"]);\n }\n descriptionLayout.add(description);\n\n return descriptionLayout;\n },\n\n RESOURCES_INFO: {\n \"limit\": {\n label: qx.locale.Manager.tr(\"Limit\"),\n tooltip: qx.locale.Manager.tr(\"Runtime check:
The service can consume a maximum of 'limit' resources - if it attempts to use more resources than this limit, it will be stopped\")\n }\n },\n\n createResourcesInfo: function() {\n const resourcesLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\"\n }));\n\n const label = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Resources\")).set({\n font: \"text-13\"\n });\n resourcesLayout.add(label);\n\n const grid = new qx.ui.layout.Grid(10, 5);\n grid.setColumnAlign(0, \"right\", \"middle\"); // subservice name\n grid.setColumnAlign(1, \"left\", \"middle\"); // resource type\n grid.setColumnAlign(2, \"left\", \"middle\"); // resource limit value\n const resourcesInfo = new qx.ui.container.Composite(grid).set({\n allowGrowX: false,\n alignX: \"left\",\n alignY: \"middle\"\n });\n resourcesLayout.add(resourcesInfo);\n\n const limitLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n limitLayout.add(new qx.ui.basic.Label(this.RESOURCES_INFO[\"limit\"].label).set({\n font: \"text-13\"\n }));\n limitLayout.add(new osparc.ui.hint.InfoHint(this.RESOURCES_INFO[\"limit\"].tooltip));\n resourcesInfo.add(limitLayout, {\n row: 0,\n column: 2\n });\n\n return resourcesLayout;\n },\n\n createResourcesInfoCompact: function() {\n const resourcesLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignY: \"middle\"\n }));\n\n const headerLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const label = new qx.ui.basic.Label(qx.locale.Manager.tr(\"Resource Limits\")).set({\n font: \"text-13\"\n });\n headerLayout.add(label);\n const infoHint = new osparc.ui.hint.InfoHint(this.RESOURCES_INFO[\"limit\"].tooltip);\n headerLayout.add(infoHint);\n resourcesLayout.add(headerLayout);\n\n const grid = new qx.ui.layout.Grid(10, 5);\n grid.setColumnAlign(0, \"left\", \"middle\"); // resource type\n grid.setColumnAlign(1, \"left\", \"middle\"); // resource limit value\n const resourcesInfo = new qx.ui.container.Composite(grid).set({\n allowGrowX: false,\n alignX: \"left\",\n alignY: \"middle\"\n });\n resourcesLayout.add(resourcesInfo);\n\n return resourcesLayout;\n },\n\n resourcesToResourcesInfo: function(resourcesLayout, imagesResourcesInfo) {\n if (resourcesLayout.getChildren().length < 2) {\n return;\n }\n const layout = resourcesLayout.getChildren()[1];\n let row = 1;\n Object.entries(imagesResourcesInfo).forEach(([imageName, imageInfo]) => {\n layout.add(new qx.ui.basic.Label(imageName).set({\n font: \"text-13\"\n }), {\n row,\n column: 0\n });\n if (\"resources\" in imageInfo) {\n const resourcesInfo = imageInfo[\"resources\"];\n Object.keys(resourcesInfo).forEach(resourceKey => {\n let column = 1;\n const resourceInfo = resourcesInfo[resourceKey];\n let label = resourceKey;\n if (resourceKey === \"RAM\") {\n label += \" (GiB)\";\n }\n layout.add(new qx.ui.basic.Label(label).set({\n font: \"text-13\"\n }), {\n row,\n column\n });\n column++;\n Object.keys(this.RESOURCES_INFO).forEach(resourceInfoKey => {\n if (resourceInfoKey in resourceInfo) {\n let value = resourceInfo[resourceInfoKey];\n if (resourceKey === \"RAM\") {\n value = osparc.utils.Utils.bytesToGiB(value);\n }\n layout.add(new qx.ui.basic.Label(String(value)).set({\n font: \"text-12\"\n }), {\n row,\n column\n });\n column++;\n }\n });\n row++;\n });\n }\n });\n },\n\n resourcesToResourcesInfoCompact: function(resourcesLayout, imagesResourcesInfo) {\n if (resourcesLayout.getChildren().length < 2) {\n return;\n }\n const gridLayout = resourcesLayout.getChildren()[1];\n\n const compactInfo = {};\n Object.values(imagesResourcesInfo).forEach(imageInfo => {\n const resourcesInfo = imageInfo[\"resources\"];\n Object.keys(resourcesInfo).forEach(resourceKey => {\n if (resourcesInfo[resourceKey][\"limit\"]) {\n if (!(resourceKey in compactInfo)) {\n compactInfo[resourceKey] = 0;\n }\n compactInfo[resourceKey] += resourcesInfo[resourceKey][\"limit\"]\n }\n });\n });\n\n let row = 0;\n Object.entries(compactInfo).forEach(([resourceKey, limitsSumUp]) => {\n let label = resourceKey;\n let value = limitsSumUp;\n if (resourceKey === \"RAM\") {\n label += \" (GiB)\";\n value = osparc.utils.Utils.bytesToGiB(value);\n }\n gridLayout.add(new qx.ui.basic.Label(label).set({\n font: \"text-13\"\n }), {\n row,\n column: 0\n });\n gridLayout.add(new qx.ui.basic.Label(String(value)).set({\n font: \"text-13\"\n }), {\n row,\n column: 1\n });\n row++;\n });\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n openAccessRights: function(serviceData) {\n const permissionsView = new osparc.share.CollaboratorsService(serviceData);\n const title = qx.locale.Manager.tr(\"Share with Collaborators and Organizations\");\n osparc.ui.window.Window.popUpInWindow(permissionsView, title, 400, 300);\n return permissionsView;\n },\n\n /**\n * @param serviceData {Object} Serialized Service Object\n */\n openQuality: function(serviceData) {\n const qualityEditor = new osparc.metadata.QualityEditor(serviceData);\n const title = serviceData[\"name\"] + \" - \" + qx.locale.Manager.tr(\"Quality Assessment\");\n osparc.ui.window.Window.popUpInWindow(qualityEditor, title, 650, 700);\n return qualityEditor;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.Utils\", {\n type: \"static\",\n\n statics: {\n createTitle: function() {\n const label = new qx.ui.basic.Label().set({\n font: \"text-14\",\n maxWidth: 600,\n rich: true,\n wrap: true\n });\n return label;\n },\n\n createLabel: function() {\n const label = new qx.ui.basic.Label().set({\n maxWidth: 220\n });\n return label;\n },\n\n createThumbnail: function(maxWidth, maxHeight = 160) {\n const image = new osparc.ui.basic.Thumbnail(null, maxWidth, maxHeight);\n return image;\n },\n\n extraInfosToGrid: function(extraInfos) {\n const grid = new qx.ui.layout.Grid(8, 5);\n grid.setColumnAlign(0, \"right\", \"middle\");\n grid.setColumnAlign(1, \"left\", \"middle\");\n const moreInfo = new qx.ui.container.Composite(grid);\n\n for (let i=0; i {\n const cb = extraInfo.action.callback;\n if (typeof cb === \"string\") {\n extraInfo.action.ctx.fireEvent(cb);\n } else {\n cb.call(extraInfo.action.ctx);\n }\n }, this);\n moreInfo.add(extraInfo.action.button, {\n row: i,\n column: 2\n });\n }\n }\n\n return moreInfo;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Widget containing a JsonTreeViewer dom element\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let jsonTreeWidget = new osparc.ui.basic.JsonTreeWidget(data);\n * this.getRoot().add(jsonTreeWidget);\n *
\n */\n\nqx.Class.define(\"osparc.ui.basic.JsonTreeWidget\", {\n extend: qx.ui.basic.Label,\n\n /**\n * @param data {Object} Json object to be displayed by JsonTreeViewer\n */\n construct: function(data) {\n this.base(arguments);\n this.set({\n rich: true,\n selectable: true\n });\n\n if (data) {\n this.setJson(data);\n }\n },\n\n members: {\n setJson(data) {\n const prettyJson = JSON.stringify(data, null, \" \").replace(/\\n/ig, \"
\");\n this.setValue(prettyJson);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.TextEditor\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param initText {String} Initialization text\n */\n construct: function(initText = \"\") {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(2));\n\n this.getChildControl(\"text-area\");\n if (initText) {\n this.setText(initText);\n }\n\n this.__addButtons();\n },\n\n events: {\n \"textChanged\": \"qx.event.type.Data\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n properties: {\n text: {\n check: \"String\",\n event: \"changeText\",\n init: \"\",\n nullable: true\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tabs\":\n control = new qx.ui.tabview.TabView().set({\n contentPadding: 0,\n barPosition: \"top\"\n });\n this._add(control, {\n flex: 1\n });\n break;\n case \"text-area\": {\n control = new qx.ui.form.TextArea().set({\n allowGrowX: true\n });\n control.addListener(\"appear\", () => {\n if (control.getValue()) {\n control.setTextSelection(0, control.getValue().length);\n }\n }, this);\n this.bind(\"text\", control, \"value\");\n const tabs = this.getChildControl(\"tabs\");\n const writePage = new qx.ui.tabview.Page(this.tr(\"Write\")).set({\n layout: new qx.ui.layout.VBox(5)\n });\n writePage.getChildControl(\"button\").getChildControl(\"label\").set({\n font: \"text-13\"\n });\n writePage.add(control, {\n flex: 1\n });\n const subtitle = this.getChildControl(\"subtitle\").set({\n value: this.tr(\"Supports HTML\")\n });\n writePage.add(subtitle);\n tabs.add(writePage);\n break;\n }\n case \"subtitle\":\n control = new qx.ui.basic.Label().set({\n font: \"text-12\"\n });\n this._add(control);\n break;\n case \"buttons\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignX: \"right\"\n }));\n this._add(control);\n break;\n case \"cancel-button\": {\n const buttons = this.getChildControl(\"buttons\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n control.addListener(\"execute\", () => {\n this.fireDataEvent(\"cancel\");\n }, this);\n buttons.add(control);\n break;\n }\n case \"accept-button\": {\n const buttons = this.getChildControl(\"buttons\");\n control = new qx.ui.form.Button(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n const newText = this.getChildControl(\"text-area\").getValue();\n this.fireDataEvent(\"textChanged\", newText);\n }, this);\n buttons.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __addButtons: function() {\n this.getChildControl(\"cancel-button\");\n this.getChildControl(\"accept-button\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Window that shows a text area with a given input text.\n * It can be used to dit a longer texts\n */\n\nqx.Class.define(\"osparc.editor.MarkdownEditor\", {\n extend: osparc.editor.TextEditor,\n\n /**\n * @param initText {String} Initialization text\n */\n construct: function(initText = \"\") {\n this.base(arguments, initText);\n\n this.getChildControl(\"preview-markdown\");\n this.getChildControl(\"subtitle\").set({\n value: this.tr(\"Supports Markdown\")\n });\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"preview-markdown\": {\n control = new osparc.ui.markdown.Markdown().set({\n padding: 3,\n });\n const textArea = this.getChildControl(\"text-area\");\n textArea.bind(\"value\", control, \"value\");\n const tabs = this.getChildControl(\"tabs\");\n const previewPage = new qx.ui.tabview.Page(this.tr(\"Preview\")).set({\n layout: new qx.ui.layout.VBox(5)\n });\n previewPage.getChildControl(\"button\").getChildControl(\"label\").set({\n font: \"text-13\"\n });\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(control);\n previewPage.add(scrollContainer, {\n flex: 1\n });\n tabs.add(previewPage);\n break;\n }\n }\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.Pricing\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.pricingPlansCached = [];\n },\n\n events: {\n \"pricingPlansChanged\": \"qx.event.type.Data\",\n },\n\n members: {\n pricingPlansCached: null,\n\n fetchPricingPlans: function() {\n const resourceName = osparc.data.Permissions.getInstance().isAdmin() ? \"adminPricingPlans\" : \"pricingPlans\";\n return osparc.data.Resources.getInstance().getAllPages(resourceName)\n .then(pricingPlansData => {\n const pricingPlans = [];\n pricingPlansData.forEach(pricingPlanData => {\n const pricingPlan = this.__addToCache(pricingPlanData);\n pricingPlans.push(pricingPlan);\n });\n return pricingPlans;\n });\n },\n\n postPricingPlan: function(newPricingPlanData) {\n const params = {\n data: newPricingPlanData\n };\n return osparc.data.Resources.fetch(\"adminPricingPlans\", \"post\", params)\n .then(pricingPlanData => {\n const pricingPlan = this.__addToCache(pricingPlanData);\n this.fireDataEvent(\"pricingPlansChanged\", pricingPlan);\n return pricingPlan;\n });\n },\n\n putPricingPlan: function(pricingPlanId, updateData) {\n const params = {\n url: {\n pricingPlanId\n },\n data: updateData\n };\n return osparc.data.Resources.getInstance().fetch(\"adminPricingPlans\", \"update\", params)\n .then(pricingPlanData => {\n return this.__addToCache(pricingPlanData);\n })\n .catch(console.error);\n },\n\n fetchPricingPlansService: function(serviceKey, serviceVersion) {\n const plansParams = {\n url: osparc.data.Resources.getServiceUrl(serviceKey, serviceVersion)\n };\n return osparc.data.Resources.fetch(\"services\", \"pricingPlans\", plansParams)\n .then(pricingPlansData => {\n return pricingPlansData;\n });\n },\n\n fetchPricingUnits: function(pricingPlanId) {\n if (this.getPricingPlan(pricingPlanId) && this.getPricingPlan(pricingPlanId).getPricingUnits().length !== 0) {\n return new Promise(resolve => resolve(this.getPricingPlan(pricingPlanId).getPricingUnits()));\n }\n const params = {\n url: {\n pricingPlanId,\n }\n };\n const resourceName = osparc.data.Permissions.getInstance().isAdmin() ? \"adminPricingPlans\" : \"pricingPlans\";\n return osparc.data.Resources.fetch(resourceName, \"getOne\", params)\n .then(pricingPlanData => {\n const pricingPlan = this.__addToCache(pricingPlanData);\n const pricingUnits = pricingPlan.getPricingUnits();\n pricingUnits.length = 0;\n pricingPlanData[\"pricingUnits\"].forEach(pricingUnitData => {\n this.__addPricingUnitToCache(pricingPlan, pricingUnitData);\n });\n return pricingUnits;\n });\n },\n\n createPricingUnit: function(pricingPlanId, pricingUnitData) {\n const params = {\n url: {\n \"pricingPlanId\": pricingPlanId\n },\n data: pricingUnitData\n };\n return osparc.data.Resources.fetch(\"pricingUnits\", \"post\", params)\n .then(newPricingUnitData => {\n const pricingPlan = this.getPricingPlan(pricingPlanId);\n this.__addPricingUnitToCache(pricingPlan, newPricingUnitData);\n return pricingPlan;\n })\n },\n\n updatePricingUnit: function(pricingPlanId, pricingUnitId, pricingUnitData) {\n const params = {\n url: {\n \"pricingPlanId\": pricingPlanId,\n \"pricingUnitId\": pricingUnitId,\n },\n data: pricingUnitData\n };\n return osparc.data.Resources.fetch(\"pricingUnits\", \"post\", params)\n .then(() => {\n const pricingPlan = this.getPricingPlan(pricingPlanId);\n // OM do not add but replace\n this.__addPricingUnitToCache(pricingPlan, pricingUnitData);\n return pricingPlan;\n })\n },\n\n getPricingPlans: function() {\n return this.pricingPlansCached;\n },\n\n getPricingPlan: function(pricingPlanId = null) {\n return this.pricingPlansCached.find(f => f.getPricingPlanId() === pricingPlanId);\n },\n\n getPricingUnits: function(pricingPlanId) {\n const pricingPlan = this.getPricingPlan(pricingPlanId);\n if (pricingPlan) {\n return pricingPlan.getPricingUnits();\n }\n return null;\n },\n\n getPricingUnit: function(pricingPlanId, pricingUnitId) {\n const pricingPlan = this.getPricingPlan(pricingPlanId);\n if (pricingPlan) {\n return pricingPlan.getPricingUnits().find(pricingUnit => pricingUnit.getPricingUnitId() === pricingUnitId);\n }\n return null;\n },\n\n __addToCache: function(pricingPlanData) {\n let pricingPlan = this.pricingPlansCached.find(f => f.getPricingPlanId() === pricingPlanData[\"pricingPlanId\"]);\n if (pricingPlan) {\n // put\n pricingPlan.set({\n pricingPlanKey: pricingPlanData[\"pricingPlanKey\"],\n name: pricingPlanData[\"displayName\"],\n description: pricingPlanData[\"description\"],\n classification: pricingPlanData[\"classification\"],\n isActive: pricingPlanData[\"isActive\"],\n });\n } else {\n // get and post\n pricingPlan = new osparc.data.model.PricingPlan(pricingPlanData);\n this.pricingPlansCached.unshift(pricingPlan);\n }\n return pricingPlan;\n },\n\n __addPricingUnitToCache: function(pricingPlan, pricingUnitData) {\n const pricingUnits = pricingPlan.getPricingUnits();\n let pricingUnit = pricingUnits ? pricingUnits.find(unit => (\"getPricingUnitId\" in unit) && unit.getPricingUnitId() === pricingUnitData[\"pricingUnitId\"]) : null;\n if (pricingUnit) {\n const props = Object.keys(qx.util.PropertyUtil.getProperties(osparc.data.model.PricingPlan));\n // put\n Object.keys(pricingUnitData).forEach(key => {\n if (props.includes(key)) {\n pricingPlan.set(key, pricingUnitData[key]);\n }\n });\n } else {\n // get and post\n pricingUnit = new osparc.data.model.PricingUnit(pricingUnitData);\n pricingPlan.bind(\"classification\", pricingUnit, \"classification\");\n pricingUnits.push(pricingUnit);\n }\n return pricingUnit;\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.PricingUnitTiers\", {\n extend: qx.ui.container.Composite,\n\n construct: function(pricingUnitsData, preselectedPricingUnit, changeSelectionAllowed = true) {\n this.base(arguments);\n\n this.set({\n layout: new qx.ui.layout.HBox(10),\n allowGrowY: false,\n });\n\n this.__buildLayout(pricingUnitsData, preselectedPricingUnit, changeSelectionAllowed);\n },\n\n properties: {\n selectedUnitId: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeSelectedUnitId\",\n apply: \"__applySelectedUnitId\",\n }\n },\n\n events: {\n \"selectPricingUnitRequested\": \"qx.event.type.Event\",\n },\n\n members: {\n __pricingUnitTiers: null,\n\n __buildLayout: function(pricingUnitsData, preselectedPricingUnit, changeSelectionAllowed) {\n const pricingUnitTiers = this.__pricingUnitTiers = [];\n pricingUnitsData.forEach(pricingUnitData => {\n const pricingUnit = new osparc.data.model.PricingUnit(pricingUnitData);\n const pricingUnitTier = new osparc.study.PricingUnitTier(pricingUnit).set({\n showSelectButton: changeSelectionAllowed,\n });\n pricingUnitTiers.push(pricingUnitTier);\n this._add(pricingUnitTier);\n });\n\n if (preselectedPricingUnit) {\n const pricingUnitTierFound = pricingUnitTiers.find(pricingUnitTier => pricingUnitTier.getUnitData().getPricingUnitId() === preselectedPricingUnit[\"pricingUnitId\"]);\n if (pricingUnitTierFound) {\n pricingUnitTierFound.setSelected(true);\n }\n } else {\n // preselect default\n pricingUnitTiers.forEach(pricingUnitTier => {\n if (pricingUnitTier.getUnitData().getIsDefault()) {\n pricingUnitTier.setSelected(true);\n }\n });\n }\n\n pricingUnitTiers.forEach(pricingUnitTier => {\n pricingUnitTier.addListener(\"selectPricingUnit\", () => {\n if (changeSelectionAllowed) {\n this.fireDataEvent(\"selectPricingUnitRequested\", pricingUnitTier.getUnitData().getPricingUnitId());\n }\n });\n });\n },\n\n __applySelectedUnitId: function(selectedUnitId) {\n // select and unselect the rest\n this.__pricingUnitTiers.forEach(puTIer => puTIer.setSelected(puTIer.getUnitData().getPricingUnitId() === selectedUnitId));\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.info.CommentUI\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param comment {Object} comment\n */\n construct: function(comment) {\n this.base(arguments);\n\n this.__comment = comment;\n\n const isMyComment = this.__isMyComment();\n const layout = new qx.ui.layout.Grid(12, 5);\n layout.setColumnFlex(isMyComment ? 0 : 1, 1); // message content\n this._setLayout(layout);\n this.setPadding(5);\n\n this.__buildLayout();\n },\n\n members: {\n __comment: null,\n\n __isMyComment: function() {\n return this.__comment && osparc.auth.Data.getInstance().getUserId() === this.__comment[\"user_id\"];\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"meta-data-grid\": {\n const layout = new qx.ui.layout.Grid(12, 5)\n layout.setColumnWidth(this.__isMyComment() ? 1 : 0, 32); // thumbnail\n control = new qx.ui.container.Composite(layout);\n this._add(control, {\n row: 0,\n column: this.__isMyComment() ? 1 : 0\n });\n break;\n }\n case \"thumbnail\":\n control = new qx.ui.basic.Image().set({\n scale: true,\n maxWidth: 32,\n maxHeight: 32,\n decorator: \"rounded\",\n });\n this.getChildControl(\"meta-data-grid\").add(control, {\n row: 0,\n column: this.__isMyComment() ? 1 : 0,\n rowSpan: 2\n });\n break;\n case \"user-name\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this.getChildControl(\"meta-data-grid\").add(control, {\n row: 0,\n column: this.__isMyComment() ? 0 : 1\n });\n break;\n case \"last-updated\":\n control = new qx.ui.basic.Label().set({\n font: \"text-12\"\n });\n this.getChildControl(\"meta-data-grid\").add(control, {\n row: 1,\n column: this.__isMyComment() ? 0 : 1\n });\n break;\n case \"comment-content\":\n control = new osparc.ui.markdown.Markdown();\n control.getContentElement().setStyles({\n \"text-align\": this.__isMyComment() ? \"right\" : \"left\"\n });\n this._add(control, {\n row: 0,\n column: this.__isMyComment() ? 0 : 1\n });\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n const thumbnail = this.getChildControl(\"thumbnail\");\n thumbnail.setSource(osparc.utils.Avatar.emailToThumbnail(\"\", \"\", 32));\n\n const userName = this.getChildControl(\"user-name\");\n userName.setValue(\"Unknown\");\n\n const date = new Date(this.__comment[\"modified\"]);\n const date2 = osparc.utils.Utils.formatDateAndTime(date);\n const lastUpdate = this.getChildControl(\"last-updated\");\n lastUpdate.setValue(date2);\n\n const commentContent = this.getChildControl(\"comment-content\");\n commentContent.setValue(this.__comment[\"contents\"]);\n\n const user = osparc.store.Groups.getInstance().getUserByUserId(this.__comment[\"user_id\"])\n if (user) {\n thumbnail.setSource(user.getThumbnail());\n userName.setValue(user.getLabel());\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\nqx.Class.define(\"osparc.filter.ClassifiersFilter\", {\n extend: osparc.filter.UIFilter,\n\n /**\n * @param {string} filterId Group-unique id for the filter.\n * @param {string} filterGroupId Unique group id where the filter belongs.\n * @param {Array} initTreeData Initialization data\n */\n construct: function(filterId, filterGroupId, initTreeData = []) {\n this.base(arguments, filterId, filterGroupId);\n this._setLayout(new qx.ui.layout.Grow());\n this.__createClassifiersTree(initTreeData);\n },\n\n members: {\n __tree: null,\n\n recreateTree: function() {\n const checkedClassifiers = this.getCheckedClassifierIDs();\n this.__createClassifiersTree(checkedClassifiers);\n },\n\n __createClassifiersTree: function(checkedClassifiers, reload = false) {\n osparc.utils.Classifiers.getClassifiersAsTree(reload)\n .then(classifiers => {\n if (classifiers && classifiers.children.length) {\n this.__tree = new osparc.ui.tree.CheckboxTree(classifiers);\n this.__tree.addListener(\"checkedChanged\", e => {\n this._filterChange(e.getData());\n });\n this._removeAll();\n this._add(this.__tree);\n\n if (checkedClassifiers.length) {\n this.__setCheckedClassifiers(this.__tree.getModel(), checkedClassifiers);\n this._filterChange(this.__tree.getChecked());\n }\n }\n });\n },\n\n getCheckedClassifierIDs: function() {\n const checkedClassifierIDs = [];\n if (this.__tree) {\n this.__tree.getChecked().forEach(checkedClassifier => {\n if (checkedClassifier.children.length === 0) {\n checkedClassifierIDs.push(checkedClassifier.data.classifier);\n }\n });\n }\n return checkedClassifierIDs;\n },\n\n __setCheckedClassifiers: function(model, checkedClassifiers) {\n if (checkedClassifiers.length === 0) {\n return;\n }\n\n const nodes = model.getChildren();\n nodes.forEach(node => {\n if (\"getData\" in node) {\n // this is a leaf\n if (checkedClassifiers.includes(node.getData().getClassifier())) {\n node.setChecked(true);\n }\n } else {\n // this is a branch\n this.__setCheckedClassifiers(node, checkedClassifiers);\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of methods for dealing with Classifiers.\n *\n */\n\nqx.Class.define(\"osparc.utils.Classifiers\", {\n type: \"static\",\n\n statics: {\n /**\n * @param reload {Boolean} Whether Classifiers need to be reloaded\n * @param filtered {Array} Only the Classifiers included in this array will be added to the tree\n */\n getClassifiersAsTree: function(reload = false, filtered = null) {\n return new Promise((resolve, reject) => {\n const rootData = {\n label: \"root\",\n children: []\n };\n osparc.store.Store.getInstance().getAllClassifiers(reload)\n .then(classifiers => {\n const idxs = Object.keys(classifiers);\n if (idxs.length) {\n // Tree-ify\n const tree = {};\n idxs.forEach(idx => {\n const classifier = classifiers[idx];\n if (filtered === null || filtered.includes(classifier[\"classifier\"])) {\n this.__buildTree(classifiers, idx, classifier[\"key\"].split(\"::\"), tree);\n }\n }, this);\n rootData.children.push(...this.__virtualTree(tree));\n }\n resolve(rootData);\n });\n });\n },\n\n // Converts the classifiers to a tree-shaped object\n __buildTree: function(classifiers, classifierId, currentPath, currentNode) {\n const pathName = currentPath.shift();\n if (currentPath.length) {\n currentNode[pathName] = currentNode[pathName] || {};\n this.__buildTree(classifiers, classifierId, currentPath, currentNode[pathName]);\n } else {\n currentNode[pathName] = classifiers[classifierId];\n }\n },\n\n // Converts the treefied classifiers to a Qooxdoo's VirtualTree friendly format\n __virtualTree: function(currentNode) {\n return Object.entries(currentNode).map(([key, value]) => {\n if (value.classifier) {\n return {\n label: value[\"display_name\"],\n description: value[\"short_description\"],\n url: value[\"url\"],\n data: value\n };\n }\n return {\n label: key,\n children: this.__virtualTree(currentNode[key])\n };\n });\n },\n\n getLeafClassifiers: function(classifiers, leaves = []) {\n for (let i=0; i this.__extendData(child));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * @asset(hint/hint.css)\n */\n\nqx.Class.define(\"osparc.form.FieldWHint\", {\n extend: qx.ui.core.Widget,\n\n /**\n * Text field with a hint tooltip\n *\n * @extends qx.ui.core.Widget\n */\n construct: function(value, hint, field) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.__field = field || new qx.ui.form.TextField();\n if (value) {\n this.__field.setValue(value);\n }\n this.__field.setPaddingRight(18);\n this.getContentElement().addClass(\"hint-input\");\n this.__field.getContentElement().addClass(\"hint-field\");\n this._add(this.__field, {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n });\n\n this.__infoButton = this.getChildControl(\"infobutton\");\n if (hint) {\n this.__infoButton.setHintText(hint);\n }\n\n this.__field.bind(\"visibility\", this, \"visibility\");\n },\n\n properties: {\n hintPosition: {\n check: [\"left\", \"right\"],\n init: \"right\",\n apply: \"__applyHintPosition\"\n }\n },\n\n statics: {\n TOP_MARGIN: 3\n },\n\n members: {\n __field: null,\n __infoButton: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"infobutton\":\n control = new osparc.ui.hint.InfoHint();\n this._add(control, {\n right: 0,\n top: this.self().TOP_MARGIN\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyHintPosition: function(value) {\n this._removeAll();\n this._add(this.__field, {\n top: 0,\n right: 0,\n bottom: 0,\n left: value === \"left\" ? 18 : 0\n });\n if (value === \"left\") {\n this._add(this.__infoButton, {\n left: 0,\n top: this.self().TOP_MARGIN\n });\n } else {\n this._add(this.__infoButton, {\n right: 0,\n top: this.self().TOP_MARGIN\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * TextField to make a simple text filter.\n */\nqx.Class.define(\"osparc.filter.TextFilter\", {\n extend: osparc.filter.UIFilter,\n\n /**\n * Constructor for the TextFilter takes UIFilters mandatory params plus an optional translation id for its label.\n *\n * @extends osparc.filter.UIFilter\n */\n construct: function(filterId, filterGroupId) {\n this.base(arguments, filterId, filterGroupId);\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.set({\n allowStretchX: false,\n allowStretchY: false\n });\n\n this.getChildControl(\"textfield\");\n this.getChildControl(\"clearbutton\");\n\n this.__attachEventHandlers();\n },\n\n properties: {\n appearance: {\n refine: true,\n init: \"textfilter\"\n },\n\n compact: {\n check: \"Boolean\",\n init: false,\n apply: \"__applyCompact\",\n },\n },\n\n members: {\n /**\n * Function that resets the field and dispatches the update.\n */\n reset: function() {\n const textField = this.getChildControl(\"textfield\");\n textField.resetValue();\n textField.fireDataEvent(\"input\", \"\");\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"textfield\":\n control = new qx.ui.form.TextField().set({\n paddingRight: 15,\n placeholder: this.tr(\"Filter\")\n });\n control.getContentElement().setAttribute(\"autocomplete\", \"off\");\n // FIXME: autocomplete \"off\" doesn't work on Chrome\n // https://www.codementor.io/leonardofaria/disabling-autofill-in-chrome-zec47xcui\n this._add(control, {\n width: \"100%\"\n });\n break;\n case \"clearbutton\":\n control = new osparc.ui.basic.IconButton(\"@MaterialIcons/close/12\", () => {\n this.reset();\n this.getChildControl(\"textfield\").focus();\n });\n this._add(control, {\n right: 0,\n bottom: 6\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyCompact: function(compact) {\n this.set({\n allowStretchX: compact,\n allowGrowX: compact,\n maxHeight: compact ? 30 : null,\n margin: compact ? 0 : null,\n });\n\n this.getChildControl(\"textfield\").set({\n margin: compact ? 0 : null,\n });\n },\n\n __attachEventHandlers: function() {\n this.getChildControl(\"textfield\").addListener(\"input\", evt => {\n this._filterChange(evt.getData().trim().toLowerCase());\n });\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Represents one tag in the preferences page.\n */\nqx.Class.define(\"osparc.form.tag.TagItem\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox(5));\n this.set({\n alignY: \"middle\",\n });\n this.__validationManager = new qx.ui.form.validation.Manager();\n },\n\n statics: {\n modes: {\n DISPLAY: \"display\",\n EDIT: \"edit\"\n }\n },\n\n properties: {\n tag: {\n check: \"osparc.data.model.Tag\",\n nullable: false,\n init: null,\n event: \"changeTag\",\n apply: \"__applyTag\",\n },\n\n id: {\n check: \"Integer\"\n },\n\n name: {\n check: \"String\",\n event: \"changeName\",\n init: \"\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n event: \"changeDescription\",\n init: \"\"\n },\n\n color: {\n check: \"Color\",\n event: \"changeColor\",\n init: \"#303030\"\n },\n\n myAccessRights: {\n check: \"Object\",\n nullable: false,\n event: \"changeMyAccessRights\",\n },\n\n accessRights: {\n check: \"Object\",\n nullable: false,\n event: \"changeAccessRights\",\n },\n\n mode: {\n check: \"String\",\n init: \"display\",\n nullable: false,\n apply: \"__applyMode\"\n },\n\n appearance: {\n init: \"tagitem\",\n refine: true\n }\n },\n\n events: {\n \"tagSaved\": \"qx.event.type.Event\",\n \"cancelNewTag\": \"qx.event.type.Event\",\n \"deleteTag\": \"qx.event.type.Event\"\n },\n\n members: {\n __validationManager: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"tag\":\n control = new osparc.ui.basic.Tag().set({\n alignY: \"middle\",\n });\n this.bind(\"name\", control, \"value\");\n this.bind(\"color\", control, \"color\");\n break;\n case \"description\":\n control = new qx.ui.basic.Label().set({\n rich: true,\n allowGrowX: true,\n alignY: \"middle\",\n });\n this.bind(\"description\", control, \"value\");\n break;\n case \"shared-icon\":\n control = new qx.ui.basic.Image().set({\n minWidth: 30,\n alignY: \"middle\",\n });\n osparc.dashboard.CardBase.populateShareIcon(control, this.getAccessRights());\n break;\n case \"name-input\":\n control = new qx.ui.form.TextField().set({\n required: true\n });\n this.__validationManager.add(control);\n control.getContentElement().setAttribute(\"autocomplete\", \"off\");\n break;\n case \"description-input\":\n control = new qx.ui.form.TextArea().set({\n autoSize: true,\n minimalLineHeight: 1\n });\n break;\n case \"color-input\":\n control = new qx.ui.form.TextField().set({\n value: this.getColor(),\n width: 60,\n required: true\n });\n control.bind(\"value\", this.getChildControl(\"color-button\"), \"backgroundColor\");\n control.bind(\"value\", this.getChildControl(\"color-button\"), \"textColor\", {\n converter: value => osparc.utils.Utils.getContrastedBinaryColor(value)\n });\n this.__validationManager.add(control, osparc.utils.Validators.hexColor);\n break;\n case \"color-button\":\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/sync-alt/12\");\n control.addListener(\"execute\", () => {\n this.getChildControl(\"color-input\").setValue(osparc.utils.Utils.getRandomColor());\n }, this);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyTag: function(tag) {\n tag.bind(\"tagId\", this, \"id\");\n tag.bind(\"name\", this, \"name\");\n tag.bind(\"description\", this, \"description\");\n tag.bind(\"color\", this, \"color\");\n tag.bind(\"myAccessRights\", this, \"myAccessRights\");\n tag.bind(\"accessRights\", this, \"accessRights\");\n\n this.__renderLayout();\n },\n\n /**\n * Renders this tag item from scratch.\n */\n __renderLayout: function() {\n this._removeAll();\n if (this.getMode() === this.self().modes.EDIT) {\n this.__renderEditMode();\n } else if (this.getMode() === this.self().modes.DISPLAY) {\n this.__renderDisplayMode();\n }\n },\n\n __renderEditMode: function() {\n const nameContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n width: 90\n });\n nameContainer.add(new qx.ui.basic.Label(this.tr(\"Name\")).set({\n buddy: this.getChildControl(\"name-input\")\n }));\n nameContainer.add(this.getChildControl(\"name-input\").set({\n value: this.getName()\n }));\n this._add(nameContainer);\n const descInputContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n descInputContainer.add(new qx.ui.basic.Label(this.tr(\"Description\")).set({\n buddy: this.getChildControl(\"description-input\")\n }));\n descInputContainer.add(this.getChildControl(\"description-input\").set({\n value: this.getDescription()\n }));\n this._add(descInputContainer, {\n flex: 1\n });\n this._add(this.__colorPicker());\n this._add(this.__tagItemEditButtons());\n },\n\n __renderDisplayMode: function() {\n this._add(this.getChildControl(\"tag\"));\n this._add(this.getChildControl(\"description\"), {\n flex: 1\n });\n this._add(this.__tagItemButtons());\n this.resetBackgroundColor();\n },\n\n __openAccessRights: function() {\n const permissionsView = new osparc.share.CollaboratorsTag(this.getTag());\n const title = this.tr(\"Share Tag\");\n osparc.ui.window.Window.popUpInWindow(permissionsView, title, 600, 600);\n\n permissionsView.addListener(\"updateAccessRights\", () => {\n const accessRights = this.getTag().getAccessRights();\n if (accessRights) {\n const sharedIcon = this.getChildControl(\"shared-icon\");\n osparc.dashboard.CardBase.populateShareIcon(sharedIcon, accessRights);\n }\n }, this);\n },\n\n /**\n * Generates and returns the buttons for deleting and editing an existing label (display mode)\n */\n __tagItemButtons: function() {\n const canIWrite = osparc.share.CollaboratorsTag.canIWrite(this.getMyAccessRights());\n const canIDelete = osparc.share.CollaboratorsTag.canIDelete(this.getMyAccessRights());\n const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const sharedIcon = this.getChildControl(\"shared-icon\");\n sharedIcon.set({\n cursor: canIWrite ? \"pointer\" : null,\n });\n if (canIWrite) {\n sharedIcon.addListener(\"tap\", () => this.__openAccessRights(), this);\n }\n buttonContainer.add(sharedIcon);\n\n const editButton = new qx.ui.form.Button().set({\n icon: \"@FontAwesome5Solid/pencil-alt/12\",\n toolTipText: this.tr(\"Edit\"),\n enabled: canIWrite,\n });\n buttonContainer.add(editButton);\n editButton.addListener(\"execute\", () => this.setMode(this.self().modes.EDIT), this);\n\n const deleteButton = new osparc.ui.form.FetchButton().set({\n appearance: \"danger-button\",\n icon: \"@FontAwesome5Solid/trash/12\",\n toolTipText: this.tr(\"Delete\"),\n enabled: canIDelete,\n });\n buttonContainer.add(deleteButton);\n deleteButton.addListener(\"execute\", () => {\n deleteButton.setFetching(true);\n osparc.store.Tags.getInstance().deleteTag(this.getId())\n .then(() => this.fireEvent(\"deleteTag\"))\n .catch(console.error)\n .finally(() => deleteButton.setFetching(false));\n }, this);\n\n return buttonContainer;\n },\n /**\n * Generates and returns the buttons for cancelling edition and saving tag of a new or existing label (edit mode)\n */\n __tagItemEditButtons: function() {\n const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n const saveButton = new osparc.ui.form.FetchButton(null, \"@FontAwesome5Solid/check/12\").set({\n appearance: \"link-button\",\n paddingTop: 15, // avoid buddy text\n alignY: \"middle\"\n });\n const cancelButton = new qx.ui.form.Button(null, \"@FontAwesome5Solid/times/12\").set({\n appearance: \"link-button\",\n paddingTop: 15, // avoid buddy text\n alignY: \"middle\"\n });\n buttonContainer.add(saveButton);\n buttonContainer.add(cancelButton);\n saveButton.addListener(\"execute\", () => {\n if (this.__validationManager.validate()) {\n const data = this.__serializeData();\n saveButton.setFetching(true);\n const tagsStore = osparc.store.Tags.getInstance();\n if (this.isPropertyInitialized(\"id\")) {\n tagsStore.patchTag(this.getId(), data)\n .then(tag => this.setTag(tag))\n .catch(console.error)\n .finally(() => {\n this.fireEvent(\"tagSaved\");\n this.setMode(this.self().modes.DISPLAY);\n saveButton.setFetching(false);\n });\n } else {\n let newTag = null;\n tagsStore.postTag(data)\n .then(tag => {\n newTag = tag;\n return tagsStore.fetchAccessRights(tag);\n })\n .then(() => this.setTag(newTag))\n .catch(console.error)\n .finally(() => {\n this.fireEvent(\"tagSaved\");\n this.setMode(this.self().modes.DISPLAY);\n saveButton.setFetching(false);\n });\n }\n }\n }, this);\n cancelButton.addListener(\"execute\", () => {\n if (this.isPropertyInitialized(\"id\")) {\n this.__validationManager.reset();\n this.setMode(this.self().modes.DISPLAY);\n } else {\n this.fireEvent(\"cancelNewTag\");\n }\n }, this);\n return buttonContainer;\n },\n /**\n * Generates and returns the color input (edit mode)\n */\n __colorPicker: function() {\n const container = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n container.add(new qx.ui.basic.Label(this.tr(\"Color\")).set({\n buddy: this.getChildControl(\"color-input\")\n }));\n const innerContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n const refreshButton = this.getChildControl(\"color-button\");\n const colorInput = this.getChildControl(\"color-input\");\n innerContainer.add(refreshButton);\n innerContainer.add(colorInput);\n container.add(innerContainer);\n return container;\n },\n /**\n * Creates an object containing the updated tag info\n */\n __serializeData: function() {\n const name = this.getChildControl(\"name-input\").getValue();\n const description = this.getChildControl(\"description-input\").getValue();\n const color = this.getChildControl(\"color-input\").getValue();\n return {\n name: name.trim(),\n description: description ? description.trim() : \"\",\n color: color,\n };\n },\n __applyMode: function() {\n this.__renderLayout();\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Button to toggle the selection of one tag\n */\nqx.Class.define(\"osparc.form.tag.TagToggleButton\", {\n extend: qx.ui.form.ToggleButton,\n include: osparc.filter.MFilterable,\n implement: osparc.filter.IFilterable,\n\n construct: function(tag, value) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox(8).set({\n alignY: \"middle\"\n }));\n this.set({\n minHeight: 35,\n appearance: \"tagbutton\"\n });\n this.setIcon(\"@FontAwesome5Solid/square/14\");\n this.getChildControl(\"icon\").setTextColor(tag.getColor());\n if (tag.getDescription()) {\n this.setLabel(tag.getName() + \" : \" + tag.getDescription());\n } else {\n this.setLabel(tag.getName());\n }\n this.getChildControl(\"check\");\n\n this.setValue(value ? true : false); // eslint-disable-line no-unneeded-ternary\n },\n\n properties: {\n fetching: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeFetching\",\n apply: \"_applyFetching\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"label\":\n control = new qx.ui.basic.Label(this.getLabel()).set({\n allowStretchX: true\n });\n control.set({\n textColor: \"text\",\n anonymous: true,\n rich: this.getRich()\n });\n if (this.getLabel() == null || this.getShow() === \"icon\") {\n control.exclude();\n }\n this._add(control, {\n flex: 1\n });\n break;\n case \"check\":\n control = new qx.ui.basic.Image();\n control.setAnonymous(true);\n this._add(control);\n this.bind(\"value\", control, \"visibility\", {\n converter: value => value ? \"visible\" : \"hidden\"\n });\n this.bind(\"fetching\", control, \"source\", {\n converter: isFetching =>\n isFetching ?\n \"@FontAwesome5Solid/circle-notch/14\" :\n \"@FontAwesome5Solid/check/14\"\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _applyFetching: function(isFetching) {\n const check = this.getChildControl(\"check\");\n if (isFetching) {\n check.show();\n check.getContentElement().addClass(\"rotate\");\n } else {\n check.setVisibility(this.getValue() ? \"visible\" : \"hidden\");\n check.getContentElement().removeClass(\"rotate\");\n }\n },\n\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n if (data.name) {\n // data.name comes lowercased\n if (!this.getLabel().toLowerCase().includes(data.name)) {\n return true;\n }\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n if (data.name && data.name.length > 1) {\n return true;\n }\n return false;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * GitHub-like tag.\n * It has a message and a background color.\n */\nqx.Class.define(\"osparc.ui.basic.Tag\", {\n extend: qx.ui.basic.Label,\n /**\n * Constructor for the Tag element.\n * @param {osparc.data.model.Tag} tag Short text to be shown on the tag\n * @param {String} [filterGroupId] If present, clicking on the tab will dispatch a bus message with the\n * id ``GroupIdTagsTrigger`` to be subscribed by a filter.\n */\n construct: function(tag, filterGroupId) {\n this.base(arguments);\n\n if (tag) {\n tag.bind(\"name\", this, \"value\");\n tag.bind(\"color\", this, \"color\");\n }\n this.setFont(\"text-11\");\n\n if (filterGroupId) {\n this.setCursor(\"pointer\");\n this.addListener(\"tap\", e => {\n e.stopPropagation();\n qx.event.message.Bus.dispatchByName(osparc.utils.Utils.capitalize(filterGroupId, \"tags\", \"trigger\"), this.getValue());\n }, this);\n // Stop propagation of the pointer event in case the tag is inside a button that we don't want to trigger\n this.addListener(\"pointerdown\", e => e.stopPropagation());\n }\n },\n properties: {\n color: {\n check: \"Color\",\n apply: \"_applyColor\"\n },\n appearance: {\n init: \"tag\",\n refine: true\n }\n },\n members: {\n _applyColor: function(color) {\n this.setBackgroundColor(color);\n // Set the right color for the font\n const textColor = osparc.utils.Utils.getContrastedBinaryColor(color);\n this.setTextColor(textColor);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * View that shows template publishing sharing options:\n * - Private\n * - My organizations\n * - Product everyone\n */\n\nqx.Class.define(\"osparc.share.PublishTemplate\", {\n extend: qx.ui.core.Widget,\n\n /**\n * @param studyData {Object} Object containing part or the entire serialized Study Data\n */\n construct: function(studyData) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__potentialTemplateData = osparc.data.model.Study.deepCloneStudyObject(studyData);\n\n this.__selectedCollabs = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n this.__updateAccessRights();\n\n this.__buildLayout();\n },\n\n members: {\n __potentialTemplateData: null,\n __selectedCollabs: null,\n\n __buildLayout: function() {\n // mark it us template, so that testers can share it with product everyone\n this.__potentialTemplateData[\"resourceType\"] = \"template\";\n const addCollaborators = new osparc.share.AddCollaborators(this.__potentialTemplateData, true);\n addCollaborators.getChildControl(\"intro-text\").set({\n value: this.tr(\"Make the \") + osparc.product.Utils.getTemplateAlias() + this.tr(\" also accessible to:\"),\n font: \"text-14\"\n });\n addCollaborators.getChildControl(\"share-with\").setLabel(this.tr(\"Publish for...\"));\n this._add(addCollaborators);\n\n this._add(this.__selectedCollabs);\n\n addCollaborators.addListener(\"addCollaborators\", e => {\n const gids = e.getData();\n if (gids.length) {\n const potentialCollaborators = osparc.store.Groups.getInstance().getPotentialCollaborators(false, true)\n const currentGids = this.getSelectedGroups();\n gids.forEach(gid => {\n if (gid in potentialCollaborators && !currentGids.includes(gid)) {\n const collabButton = new qx.ui.toolbar.Button(potentialCollaborators[gid].getLabel(), \"@MaterialIcons/close/12\");\n collabButton.gid = gid;\n this.__selectedCollabs.add(collabButton);\n collabButton.addListener(\"execute\", () => {\n this.__selectedCollabs.remove(collabButton);\n this.__updateAccessRights();\n });\n }\n });\n this.__updateAccessRights();\n }\n }, this);\n },\n\n __updateAccessRights: function() {\n // these \"accessRights\" are only used for repopulating potential collaborators in the AddCollaborators -> NewCollaboratorsManager\n const myGroupId = osparc.auth.Data.getInstance().getGroupId();\n this.__potentialTemplateData[\"accessRights\"] = {};\n this.__potentialTemplateData[\"accessRights\"][myGroupId] = osparc.share.CollaboratorsStudy.getOwnerAccessRight();\n this.getSelectedGroups().forEach(gid => this.__potentialTemplateData[\"accessRights\"][gid] = osparc.share.CollaboratorsStudy.getViewerAccessRight());\n },\n\n getSelectedGroups: function() {\n const groupIDs = [];\n this.__selectedCollabs.getChildren().forEach(selectedCollab => groupIDs.push(selectedCollab.gid));\n return groupIDs;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * A menubar button\n */\nqx.Class.define(\"qx.ui.menubar.Button\",\n{\n extend : qx.ui.form.MenuButton,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function(label, icon, menu)\n {\n this.base(arguments, label, icon, menu);\n\n this.removeListener(\"keydown\", this._onKeyDown);\n this.removeListener(\"keyup\", this._onKeyUp);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n appearance :\n {\n refine : true,\n init : \"menubar-button\"\n },\n\n show :\n {\n refine : true,\n init : \"inherit\"\n },\n\n focusable :\n {\n refine : true,\n init : false\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n HELPER METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Inspects the parent chain to find the MenuBar\n *\n * @return {qx.ui.menubar.MenuBar} MenuBar instance or null.\n */\n getMenuBar : function()\n {\n var parent = this;\n while (parent)\n {\n /* this method is also used by toolbar.MenuButton, so we need to check\n for a ToolBar instance. */\n if (parent instanceof qx.ui.toolbar.ToolBar) {\n return parent;\n }\n\n parent = parent.getLayoutParent();\n }\n\n return null;\n },\n\n\n // overridden\n open : function(selectFirst) {\n this.base(arguments, selectFirst);\n\n var menubar = this.getMenuBar();\n if (menubar) {\n menubar._setAllowMenuOpenHover(true);\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Listener for visibility property changes of the attached menu\n *\n * @param e {qx.event.type.Data} Property change event\n */\n _onMenuChange : function(e)\n {\n var menu = this.getMenu();\n var menubar = this.getMenuBar();\n\n if (menu.isVisible())\n {\n this.addState(\"pressed\");\n\n // Sync with open menu property\n if (menubar) {\n menubar.setOpenMenu(menu);\n }\n }\n else\n {\n this.removeState(\"pressed\");\n\n // Sync with open menu property\n if (menubar && menubar.getOpenMenu() == menu) {\n menubar.resetOpenMenu();\n menubar._setAllowMenuOpenHover(false);\n }\n }\n },\n\n // overridden\n _onPointerUp : function(e)\n {\n this.base(arguments, e);\n\n // Set state 'pressed' to visualize that the menu is open.\n var menu = this.getMenu();\n if (menu && menu.isVisible() && !this.hasState(\"pressed\")) {\n this.addState(\"pressed\");\n }\n },\n\n /**\n * Event listener for pointerover event\n *\n * @param e {qx.event.type.Pointer} pointerover event object\n */\n _onPointerOver : function(e)\n {\n // Add hovered state\n this.addState(\"hovered\");\n\n // Open submenu\n if (this.getMenu() && e.getPointerType() == \"mouse\")\n {\n var menubar = this.getMenuBar();\n\n if (menubar && menubar._isAllowMenuOpenHover())\n {\n // Hide all open menus\n qx.ui.menu.Manager.getInstance().hideAll();\n\n // Set it again, because hideAll remove it.\n menubar._setAllowMenuOpenHover(true);\n\n // Then show the attached menu\n if (this.isEnabled()) {\n this.open();\n }\n }\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Container for GridButtons and ListButtons (CardBase, FolderButtonBase and WorkspaceButtonBase), with some convenient methods.\n */\nqx.Class.define(\"osparc.dashboard.CardContainer\", {\n extend: qx.ui.container.Composite,\n\n construct: function() {\n const spacing = osparc.dashboard.GridButtonBase.SPACING;\n const layout = new qx.ui.layout.Flow(spacing, spacing);\n this.base(arguments, layout);\n },\n\n events: {\n \"changeSelection\": \"qx.event.type.Data\",\n \"changeVisibility\": \"qx.event.type.Data\"\n },\n\n statics: {\n isValidCard: function(widget) {\n return (\n widget instanceof osparc.dashboard.CardBase ||\n widget instanceof osparc.dashboard.FolderButtonBase ||\n widget instanceof osparc.dashboard.WorkspaceButtonBase\n );\n },\n },\n\n members: {\n __lastSelectedIdx: null,\n\n // overridden\n add: function(child, options) {\n if (this.self().isValidCard(child)) {\n if (osparc.dashboard.ResourceContainerManager.cardExists(this, child)) {\n return;\n }\n this.base(arguments, child, options);\n child.addListener(\"changeSelected\", () => this.fireDataEvent(\"changeSelection\", this.getSelection()), this);\n child.addListener(\"changeVisibility\", () => this.fireDataEvent(\"changeVisibility\", this.__getVisibles()), this);\n } else {\n console.error(\"CardContainer only allows CardBase as its children.\");\n }\n },\n\n /**\n * Resets the selection so no toggle button is checked.\n */\n resetSelection: function() {\n this.getChildren().map(button => button.setSelected(false));\n this.__lastSelectedIdx = null;\n this.fireDataEvent(\"changeSelection\", this.getSelection());\n },\n\n /**\n * Returns an array that contains all buttons that are checked.\n */\n getSelection: function() {\n return this.getChildren().filter(button => button.getSelected());\n },\n\n /**\n * Returns an array that contains all visible buttons.\n */\n __getVisibles: function() {\n return this.getChildren().filter(button => button.isVisible());\n },\n\n /**\n * Sets the given button's select prop to true (checks it) and unchecks all other buttons. If the given button is not present,\n * every button in the container will get a unselected (unchecked).\n * @param {qx.ui.form.CardBase} child Button that will be checked\n */\n selectOne: function(child) {\n this.getChildren().map(button => button.setSelected(button === child));\n this.setLastSelectedIndex(this.getIndex(child));\n },\n\n /**\n * Gets the index in the container of the given button.\n * @param {qx.ui.form.CardBase} child Button that will be checked\n */\n getIndex: function(child) {\n return this.getChildren().findIndex(button => button === child);\n },\n\n getLastSelectedIndex: function() {\n return this.__lastSelectedIdx;\n },\n\n setLastSelectedIndex: function(idx) {\n if (idx >= 0 && idx < this.getChildren().length) {\n this.__lastSelectedIdx = idx;\n }\n },\n\n setLastSelectedItem: function(item) {\n this.setLastSelectedIndex(this.getIndex(item));\n },\n\n areMoreResourcesRequired: function(loadingResourcesBtn) {\n if (this.nextRequest !== null && loadingResourcesBtn && osparc.utils.Utils.isWidgetOnScreen(loadingResourcesBtn)) {\n return true;\n }\n return false;\n },\n\n removeCard: function(key) {\n const cards = this.getChildren();\n for (let i=0; i expanded ? this.tr(\"Show less\") : this.tr(\"Show all\")\n });\n showAllButton.addListener(\"execute\", () => this.setExpanded(!this.isExpanded()));\n },\n\n properties: {\n groupId: {\n check: \"String\",\n init: null,\n nullable: false\n },\n\n headerLabel: {\n check: \"String\",\n apply: \"__updateHeaderLabel\"\n },\n\n headerIcon: {\n check: \"String\",\n apply: \"__updateHeaderIcon\"\n },\n\n headerColor: {\n check: \"String\",\n apply: \"__updateHeaderColor\"\n },\n\n expanded: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeExpanded\",\n apply: \"__applyExpanded\"\n }\n },\n\n members: {\n __showAllButton: null,\n __contentContainer: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"header-bar\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n this._addAt(control, 0);\n break;\n case \"header\": {\n control = new qx.ui.basic.Atom().set({\n font: \"text-14\",\n gap: 10,\n padding: 10,\n paddingBottom: 5,\n allowGrowX: false\n });\n control.getChildControl(\"icon\").set({\n scale: true,\n allowGrowX: true,\n allowGrowY: true,\n allowShrinkX: true,\n allowShrinkY: true,\n maxWidth: 32,\n maxHeight: 32\n });\n control.getChildControl(\"label\").set({\n rich: true,\n wrap: true\n })\n control.getContentElement().setStyles({\n \"border-top-left-radius\": \"4px\",\n \"border-top-right-radius\": \"4px\"\n });\n const headerBar = this.getChildControl(\"header-bar\");\n headerBar.addAt(control, 0);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __createContentContainer: function() {\n let contentContainer = null;\n const expanded = this.isExpanded();\n const showAllBtn = this.__showAllButton;\n if (expanded) {\n contentContainer = new osparc.dashboard.CardContainer();\n showAllBtn.show();\n } else {\n const spacing = osparc.dashboard.GridButtonBase.SPACING;\n contentContainer = new osparc.widget.SlideBar(spacing);\n contentContainer.setButtonsWidth(30);\n\n // show showAllBtn only if slidebar is full\n const buttonBackward = contentContainer.getChildControl(\"button-backward\");\n const buttonForward = contentContainer.getChildControl(\"button-forward\");\n buttonBackward.bind(\"visibility\", showAllBtn, \"visibility\", {\n converter: visibility => (visibility === \"visible\" || buttonForward.isVisible()) ? \"visible\" : \"excluded\"\n });\n buttonForward.bind(\"visibility\", showAllBtn, \"visibility\", {\n converter: visibility => (visibility === \"visible\" || buttonBackward.isVisible()) ? \"visible\" : \"excluded\"\n });\n }\n contentContainer.set({\n padding: 5,\n allowGrowX: false\n });\n this._addAt(contentContainer, 1, {\n flex: 1\n });\n return contentContainer;\n },\n\n __updateHeaderLabel: function(label) {\n const atom = this.getChildControl(\"header\");\n atom.setLabel(label);\n },\n\n __updateHeaderIcon: function(icon) {\n const atom = this.getChildControl(\"header\");\n atom.setIcon(icon);\n },\n\n __updateHeaderColor: function(color) {\n const atom = this.getChildControl(\"header\");\n atom.getChildControl(\"icon\").setTextColor(color);\n },\n\n __applyExpanded: function() {\n const children = this.__contentContainer.getChildren();\n this._remove(this.__contentContainer);\n\n this.__contentContainer = this.__createContentContainer();\n for (let i=children.length-1; i>=0; i--) {\n this.add(children[i], 0);\n }\n },\n\n getContentContainer: function() {\n return this.__contentContainer;\n },\n\n // overridden\n add: function(child, idx) {\n if (osparc.dashboard.CardContainer.isValidCard(child)) {\n const container = this.getContentContainer();\n if (osparc.dashboard.ResourceContainerManager.cardExists(container, child)) {\n return;\n }\n child.addListener(\"changeVisibility\", () => this.__childVisibilityChanged(), this);\n if (idx === undefined) {\n container.add(child);\n } else {\n container.addAt(child, idx);\n }\n this.__childVisibilityChanged();\n } else {\n console.error(\"CardContainer only allows CardBase as its children.\");\n }\n },\n\n getCards: function() {\n return this.__contentContainer.getChildren();\n },\n\n removeCard: function(key) {\n const cards = this.getCards();\n for (let i=0; i child.isVisible());\n this.set({\n visibility: anyVis ? \"visible\" : \"excluded\"\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used for displaying a Workspace in the Study Browser\n *\n */\n\nqx.Class.define(\"osparc.dashboard.WorkspaceButtonItem\", {\n extend: osparc.dashboard.WorkspaceButtonBase,\n\n /**\n * @param workspace {osparc.data.model.Workspace}\n */\n construct: function(workspace) {\n this.base(arguments);\n\n this.set({\n appearance: \"pb-listitem\"\n });\n\n this.addListener(\"tap\", this.__itemSelected, this);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.ITEM);\n\n this.set({\n workspace: workspace\n });\n },\n\n events: {\n \"workspaceSelected\": \"qx.event.type.Data\",\n \"workspaceUpdated\": \"qx.event.type.Data\",\n \"trashWorkspaceRequested\": \"qx.event.type.Data\",\n \"untrashWorkspaceRequested\": \"qx.event.type.Data\",\n \"deleteWorkspaceRequested\": \"qx.event.type.Data\",\n },\n\n properties: {\n workspace: {\n check: \"osparc.data.model.Workspace\",\n nullable: false,\n init: null,\n apply: \"__applyWorkspace\"\n },\n\n workspaceId: {\n check: \"Number\",\n nullable: false\n },\n\n title: {\n check: \"String\",\n nullable: true,\n apply: \"__applyTitle\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n apply: \"__applyDescription\"\n },\n\n myAccessRights: {\n check: \"Object\",\n nullable: true,\n apply: \"__applyMyAccessRights\"\n },\n\n accessRights: {\n check: \"Object\",\n nullable: true,\n apply: \"__applyAccessRights\"\n },\n\n modifiedAt: {\n check: \"Date\",\n nullable: true,\n apply: \"__applyModifiedAt\"\n },\n\n trashedAt: {\n check: \"Date\",\n nullable: true,\n apply: \"__applyTrashedAt\"\n },\n\n trashedBy: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyTrashedBy\"\n },\n },\n\n statics: {\n MENU_BTN_DIMENSIONS: 24\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n let layout;\n switch (id) {\n case \"shared-icon\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n allowGrowX: false,\n allowShrinkX: false\n });\n layout = this.getChildControl(\"header\");\n layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.HPOS.SHARED);\n break;\n case \"menu-button\":\n control = new qx.ui.form.MenuButton().set({\n appearance: \"form-button-outlined\",\n minWidth: this.self().MENU_BTN_DIMENSIONS,\n minHeight: this.self().MENU_BTN_DIMENSIONS,\n width: this.self().MENU_BTN_DIMENSIONS,\n height: this.self().MENU_BTN_DIMENSIONS,\n padding: [0, 8, 0, 8],\n alignX: \"center\",\n alignY: \"middle\",\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${this.self().MENU_BTN_DIMENSIONS / 2}px`\n });\n osparc.utils.Utils.setIdToWidget(control, \"workspaceItemMenuButton\");\n layout = this.getChildControl(\"header\");\n layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.HPOS.MENU);\n break;\n case \"date-by\":\n control = new osparc.ui.basic.DateAndBy();\n layout = this.getChildControl(\"footer\");\n layout.addAt(control, osparc.dashboard.WorkspaceButtonBase.FPOS.DATE);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyWorkspace: function(workspace) {\n this.set({\n cardKey: \"workspace-\" + workspace.getWorkspaceId()\n });\n workspace.bind(\"workspaceId\", this, \"workspaceId\");\n workspace.bind(\"name\", this, \"title\");\n workspace.bind(\"description\", this, \"description\");\n workspace.bind(\"thumbnail\", this, \"thumbnail\", {\n converter: thumbnail => thumbnail ? thumbnail : osparc.store.Workspaces.iconPath(-1)\n });\n workspace.bind(\"accessRights\", this, \"accessRights\");\n workspace.bind(\"modifiedAt\", this, \"modifiedAt\");\n workspace.bind(\"trashedAt\", this, \"trashedAt\");\n workspace.bind(\"trashedBy\", this, \"trashedBy\");\n workspace.bind(\"myAccessRights\", this, \"myAccessRights\");\n\n osparc.utils.Utils.setIdToWidget(this, \"workspaceItem_\" + workspace.getWorkspaceId());\n },\n\n __applyTitle: function(value) {\n const label = this.getChildControl(\"title\");\n label.setValue(value);\n this.__updateTooltip();\n },\n\n __applyDescription: function() {\n this.__updateTooltip();\n },\n\n __applyMyAccessRights: function(value) {\n if (value && value[\"delete\"]) {\n const menuButton = this.getChildControl(\"menu-button\");\n menuButton.setVisibility(\"visible\");\n\n const menu = new qx.ui.menu.Menu().set({\n appearance: \"menu-wider\",\n position: \"bottom-right\",\n });\n\n const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n if (\n studyBrowserContext === \"search\" ||\n studyBrowserContext === \"workspaces\"\n ) {\n const editButton = new qx.ui.menu.Button(this.tr(\"Edit...\"), \"@FontAwesome5Solid/pencil-alt/12\");\n editButton.addListener(\"execute\", () => {\n const workspace = this.getWorkspace();\n const workspaceEditor = new osparc.editor.WorkspaceEditor(workspace);\n const title = this.tr(\"Edit Workspace\");\n const win = osparc.ui.window.Window.popUpInWindow(workspaceEditor, title, 300, 150);\n workspaceEditor.addListener(\"workspaceUpdated\", () => {\n win.close();\n this.fireDataEvent(\"workspaceUpdated\", workspace.getWorkspaceId());\n });\n workspaceEditor.addListener(\"cancel\", () => win.close());\n });\n menu.add(editButton);\n\n const shareButton = new qx.ui.menu.Button(this.tr(\"Share...\"), \"@FontAwesome5Solid/share-alt/12\");\n shareButton.addListener(\"execute\", () => this.__openShareWith(), this);\n menu.add(shareButton);\n\n menu.addSeparator();\n\n const trashButton = new qx.ui.menu.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/12\");\n trashButton.addListener(\"execute\", () => this.__trashWorkspaceRequested(), this);\n menu.add(trashButton);\n } else if (studyBrowserContext === \"trash\") {\n const restoreButton = new qx.ui.menu.Button(this.tr(\"Restore\"), \"@MaterialIcons/restore_from_trash/16\");\n restoreButton.addListener(\"execute\", () => this.fireDataEvent(\"untrashWorkspaceRequested\", this.getWorkspace()), this);\n menu.add(restoreButton);\n\n menu.addSeparator();\n\n const deleteButton = new qx.ui.menu.Button(this.tr(\"Delete permanently\"), \"@FontAwesome5Solid/trash/12\");\n osparc.utils.Utils.setIdToWidget(deleteButton, \"deleteWorkspaceMenuItem\");\n deleteButton.addListener(\"execute\", () => this.__deleteWorkspaceRequested(), this);\n menu.add(deleteButton);\n }\n menuButton.setMenu(menu);\n }\n },\n\n __applyAccessRights: function(value) {\n if (value && Object.keys(value).length) {\n const shareIcon = this.getChildControl(\"shared-icon\");\n shareIcon.addListener(\"tap\", e => {\n e.stopPropagation();\n this.__openShareWith();\n }, this);\n shareIcon.addListener(\"pointerdown\", e => e.stopPropagation());\n osparc.dashboard.CardBase.populateShareIcon(shareIcon, value);\n }\n },\n\n __applyModifiedAt: function(value) {\n if (value) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Last modified\"),\n })\n }\n },\n\n __applyTrashedAt: function(value) {\n if (value && value.getTime() !== new Date(0).getTime()) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Deleted\"),\n });\n }\n },\n\n __applyTrashedBy: function(gid) {\n if (gid) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.setGroupId(gid);\n }\n },\n\n __updateTooltip: function() {\n const toolTipText = this.getTitle() + (this.getDescription() ? \"
\" + this.getDescription() : \"\");\n const title = this.getChildControl(\"title\");\n title.set({\n toolTipText\n })\n },\n\n __itemSelected: function() {\n const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n // do not allow selecting workspace\n if (studyBrowserContext !== \"trash\") {\n this.fireDataEvent(\"workspaceSelected\", this.getWorkspaceId());\n }\n },\n\n __openShareWith: function() {\n const permissionsView = new osparc.share.CollaboratorsWorkspace(this.getWorkspace());\n const title = this.tr(\"Share Workspace\");\n osparc.ui.window.Window.popUpInWindow(permissionsView, title, 500, 400);\n permissionsView.addListener(\"updateAccessRights\", () => this.__applyAccessRights(this.getWorkspace().getAccessRights()), this);\n },\n\n __trashWorkspaceRequested: function() {\n const trashDays = osparc.store.StaticInfo.getInstance().getTrashRetentionDays();\n let msg = this.tr(\"Are you sure you want to delete the Workspace and all its content?\");\n msg += \"
\" + this.tr(\"It will be permanently deleted after \") + trashDays + \" days.\";\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.fireDataEvent(\"trashWorkspaceRequested\", this.getWorkspaceId());\n }\n }, this);\n },\n\n __deleteWorkspaceRequested: function() {\n let msg = this.tr(\"Are you sure you want to delete\") + \" \" + this.getTitle() + \"?\";\n msg += \"
\" + this.tr(\"All the content of the workspace will be deleted.\");\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Workspace\"),\n confirmText: this.tr(\"Delete permanently\"),\n confirmAction: \"delete\"\n });\n osparc.utils.Utils.setIdToWidget(confirmationWin.getConfirmButton(), \"confirmDeleteWorkspaceButton\");\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.fireDataEvent(\"deleteWorkspaceRequested\", this.getWorkspaceId());\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget used for displaying a Folder in the Study Browser\n *\n */\n\nqx.Class.define(\"osparc.dashboard.FolderButtonItem\", {\n extend: osparc.dashboard.FolderButtonBase,\n\n /**\n * @param folder {osparc.data.model.Folder}\n */\n construct: function(folder) {\n this.base(arguments);\n\n this.set({\n appearance: \"pb-study\"\n });\n\n this.addListener(\"tap\", this.__itemSelected, this);\n\n this.setPriority(osparc.dashboard.CardBase.CARD_PRIORITY.ITEM);\n\n this.set({\n folder: folder\n });\n },\n\n events: {\n \"folderSelected\": \"qx.event.type.Data\",\n \"folderUpdated\": \"qx.event.type.Data\",\n \"moveFolderToRequested\": \"qx.event.type.Data\",\n \"trashFolderRequested\": \"qx.event.type.Data\",\n \"untrashFolderRequested\": \"qx.event.type.Data\",\n \"deleteFolderRequested\": \"qx.event.type.Data\",\n \"changeContext\": \"qx.event.type.Data\",\n \"studyToFolderRequested\": \"qx.event.type.Data\",\n \"folderToFolderRequested\": \"qx.event.type.Data\",\n },\n\n properties: {\n folder: {\n check: \"osparc.data.model.Folder\",\n nullable: false,\n init: null,\n apply: \"__applyFolder\"\n },\n\n workspaceId: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyWorkspaceId\"\n },\n\n folderId: {\n check: \"Number\",\n nullable: false\n },\n\n parentFolderId: {\n check: \"Number\",\n nullable: true,\n init: true\n },\n\n title: {\n check: \"String\",\n nullable: true,\n apply: \"__applyTitle\"\n },\n\n lastModified: {\n check: \"Date\",\n nullable: true,\n apply: \"__applyLastModified\"\n },\n\n trashedAt: {\n check: \"Date\",\n nullable: true,\n apply: \"__applyTrashedAt\"\n },\n\n trashedBy: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyTrashedBy\"\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = new osparc.dashboard.FolderWithSharedIcon().set({\n anonymous: true,\n height: 40,\n padding: 5\n });\n this._add(control, osparc.dashboard.FolderButtonBase.POS.ICON);\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n });\n this._add(control, osparc.dashboard.FolderButtonBase.POS.TITLE);\n break;\n case \"date-by\":\n control = new osparc.ui.basic.DateAndBy();\n this._add(control, osparc.dashboard.FolderButtonBase.POS.SUBTITLE);\n break;\n case \"menu-button\": {\n control = new qx.ui.form.MenuButton().set({\n appearance: \"form-button-outlined\",\n padding: [0, 8],\n maxWidth: osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS,\n maxHeight: osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS,\n icon: \"@FontAwesome5Solid/ellipsis-v/14\",\n focusable: false\n });\n // make it circular\n control.getContentElement().setStyles({\n \"border-radius\": `${osparc.dashboard.ListButtonItem.MENU_BTN_DIMENSIONS / 2}px`\n });\n osparc.utils.Utils.setIdToWidget(control, \"folderItemMenuButton\");\n this._add(control, osparc.dashboard.FolderButtonBase.POS.MENU);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __applyFolder: function(folder) {\n this.getChildControl(\"icon\");\n this.set({\n cardKey: \"folder-\" + folder.getFolderId()\n });\n folder.bind(\"workspaceId\", this, \"workspaceId\");\n folder.bind(\"folderId\", this, \"folderId\");\n folder.bind(\"parentFolderId\", this, \"parentFolderId\");\n folder.bind(\"name\", this, \"title\");\n folder.bind(\"lastModified\", this, \"lastModified\");\n folder.bind(\"trashedAt\", this, \"trashedAt\");\n folder.bind(\"trashedBy\", this, \"trashedBy\");\n\n osparc.utils.Utils.setIdToWidget(this, \"folderItem_\" + folder.getFolderId());\n\n this.__addMenuButton();\n\n this.__attachDragHandlers();\n this.__attachDropHandlers();\n },\n\n __attachDragHandlers: function() {\n this.setDraggable(true);\n\n this.addListener(\"dragstart\", e => {\n const folderOrigin = this.getFolder();\n osparc.dashboard.DragDropHelpers.moveFolder.dragStart(e, this, folderOrigin);\n });\n\n this.addListener(\"dragend\", () => {\n osparc.dashboard.DragDropHelpers.dragEnd(this);\n });\n },\n\n __attachDropHandlers: function() {\n this.setDroppable(true);\n\n this.addListener(\"dragover\", e => {\n const folderDest = this.getFolder();\n if (e.supportsType(\"osparc-moveStudy\")) {\n osparc.dashboard.DragDropHelpers.moveStudy.dragOver(e, this, folderDest.getWorkspaceId(), folderDest.getFolderId());\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n osparc.dashboard.DragDropHelpers.moveFolder.dragOver(e, this, folderDest.getWorkspaceId(), folderDest.getFolderId());\n }\n });\n\n this.addListener(\"dragleave\", () => {\n osparc.dashboard.DragDropHelpers.dragLeave(this);\n });\n\n this.addListener(\"dragend\", () => {\n osparc.dashboard.DragDropHelpers.dragLeave(this);\n });\n\n this.addListener(\"drop\", e => {\n const folderDest = this.getFolder();\n if (e.supportsType(\"osparc-moveStudy\")) {\n const studyToFolderData = osparc.dashboard.DragDropHelpers.moveStudy.drop(e, this, folderDest.getWorkspaceId(), folderDest.getFolderId());\n this.fireDataEvent(\"studyToFolderRequested\", studyToFolderData);\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n const folderToFolderData = osparc.dashboard.DragDropHelpers.moveFolder.drop(e, this, folderDest.getWorkspaceId(), folderDest.getFolderId());\n this.fireDataEvent(\"folderToFolderRequested\", folderToFolderData);\n }\n });\n },\n\n __applyWorkspaceId: function(workspaceId) {\n const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId);\n const accessRights = workspace ? workspace.getAccessRights() : {};\n if (accessRights && Object.keys(accessRights).length) {\n const shareIcon = this.getChildControl(\"icon\").getChildControl(\"shared-icon\");\n // if it's not shared don't show the share icon\n shareIcon.addListener(\"changeSource\", e => {\n const newSource = e.getData();\n shareIcon.set({\n visibility: newSource.includes(osparc.dashboard.CardBase.SHARE_ICON) ? \"hidden\" : \"visible\"\n });\n });\n osparc.dashboard.CardBase.populateShareIcon(shareIcon, accessRights);\n }\n },\n\n __applyTitle: function(value) {\n const label = this.getChildControl(\"title\");\n label.set({\n value,\n toolTipText: value,\n });\n },\n\n __applyLastModified: function(value) {\n if (value) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Last modified\"),\n })\n }\n },\n\n __applyTrashedAt: function(value) {\n if (value && value.getTime() !== new Date(0).getTime()) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.set({\n date: value,\n toolTipText: this.tr(\"Deleted\"),\n });\n }\n },\n\n __applyTrashedBy: function(gid) {\n if (gid) {\n const dateBy = this.getChildControl(\"date-by\");\n dateBy.setGroupId(gid);\n }\n },\n\n __addMenuButton: function() {\n const menuButton = this.getChildControl(\"menu-button\");\n menuButton.setVisibility(\"visible\");\n\n const menu = new qx.ui.menu.Menu().set({\n appearance: \"menu-wider\",\n position: \"bottom-right\",\n });\n\n const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n if (\n studyBrowserContext === \"search\" ||\n studyBrowserContext === \"studiesAndFolders\"\n ) {\n const editButton = new qx.ui.menu.Button(this.tr(\"Rename...\"), \"@FontAwesome5Solid/pencil-alt/12\");\n editButton.addListener(\"execute\", () => this.__editFolder(), this);\n menu.add(editButton);\n\n if (studyBrowserContext === \"search\") {\n const openLocationButton = new qx.ui.menu.Button(this.tr(\"Open location\"), \"@FontAwesome5Solid/external-link-alt/12\");\n openLocationButton.addListener(\"execute\", () => {\n const folder = this.getFolder();\n this.fireDataEvent(\"changeContext\", {\n context: \"studiesAndFolders\",\n workspaceId: folder.getWorkspaceId(),\n folderId: folder.getParentFolderId(),\n });\n }, this);\n menu.add(openLocationButton);\n }\n\n const moveToButton = new qx.ui.menu.Button(this.tr(\"Move to...\"), \"@FontAwesome5Solid/folder/12\");\n moveToButton.addListener(\"execute\", () => this.fireDataEvent(\"moveFolderToRequested\", this.getFolderId()), this);\n osparc.utils.Utils.setIdToWidget(moveToButton, \"moveFolderMenuItem\");\n menu.add(moveToButton);\n\n menu.addSeparator();\n\n const trashButton = new qx.ui.menu.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/12\");\n trashButton.addListener(\"execute\", () => this.fireDataEvent(\"trashFolderRequested\", this.getFolderId()), this);\n menu.add(trashButton);\n } else if (studyBrowserContext === \"trash\") {\n const restoreButton = new qx.ui.menu.Button(this.tr(\"Restore\"), \"@MaterialIcons/restore_from_trash/16\");\n restoreButton.addListener(\"execute\", () => this.fireDataEvent(\"untrashFolderRequested\", this.getFolder()), this);\n menu.add(restoreButton);\n\n menu.addSeparator();\n\n const deleteButton = new qx.ui.menu.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/12\");\n osparc.utils.Utils.setIdToWidget(deleteButton, \"deleteFolderMenuItem\");\n deleteButton.addListener(\"execute\", () => this.__deleteFolderRequested(), this);\n menu.add(deleteButton);\n }\n\n menuButton.setMenu(menu);\n },\n\n __itemSelected: function() {\n const studyBrowserContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n // do not allow selecting workspace\n if (studyBrowserContext !== \"trash\") {\n this.fireDataEvent(\"folderSelected\", this.getFolderId());\n }\n },\n\n __editFolder: function() {\n const folder = this.getFolder();\n const newFolder = false;\n const folderEditor = new osparc.editor.FolderEditor(newFolder).set({\n label: folder.getName(),\n });\n const title = this.tr(\"Edit Folder\");\n const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 120);\n folderEditor.addListener(\"updateFolder\", () => {\n const newName = folderEditor.getLabel();\n const updateData = {\n \"name\": newName,\n \"parentFolderId\": folder.getParentFolderId(),\n };\n osparc.store.Folders.getInstance().putFolder(this.getFolderId(), updateData)\n .then(() => {\n folder.set({\n name: newName,\n });\n this.fireDataEvent(\"folderUpdated\", folder.getFolderId());\n })\n .catch(err => console.error(err));\n win.close();\n });\n folderEditor.addListener(\"cancel\", () => win.close());\n },\n\n __deleteFolderRequested: function() {\n const msg = this.tr(\"Are you sure you want to delete\") + \" \" + this.getTitle() + \"?\";\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Folder\"),\n confirmText: this.tr(\"Delete permanently\"),\n confirmAction: \"delete\"\n });\n osparc.utils.Utils.setIdToWidget(confirmationWin.getConfirmButton(), \"confirmDeleteFolderButton\");\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.fireDataEvent(\"deleteFolderRequested\", this.getFolderId());\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.WorkspacesAndFoldersTree\", {\n extend: qx.ui.tree.VirtualTree,\n\n construct: function() {\n const treeName = \"WorkspacesAndFoldersTree\";\n const rootData = {\n label: treeName,\n children: [],\n loaded: true,\n };\n const rootModel = qx.data.marshal.Json.createModel(rootData, true);\n\n this.__models = [];\n\n this.base(arguments, rootModel, \"label\", \"children\");\n\n this.set({\n openMode: \"dbltap\",\n decorator: \"no-border\",\n font: \"text-14\",\n hideRoot: true,\n contentPadding: 0,\n padding: 0,\n });\n\n this.__addMyWorkspace(rootModel);\n this.__addSharedWorkspaces(rootModel);\n\n this.__initTree();\n\n // preselect \"My Workspace\"\n this.contextChanged(\"studiesAndFolders\");\n\n osparc.store.Folders.getInstance().addListener(\"folderAdded\", e => {\n const folder = e.getData();\n this.__folderAdded(folder);\n }, this);\n\n osparc.store.Folders.getInstance().addListener(\"folderRemoved\", e => {\n const folder = e.getData();\n this.__folderRemoved(folder);\n }, this);\n\n osparc.store.Workspaces.getInstance().addListener(\"workspaceAdded\", e => {\n const workspace = e.getData();\n this.__addWorkspace(workspace);\n }, this);\n\n osparc.store.Workspaces.getInstance().addListener(\"workspaceRemoved\", e => {\n const workspace = e.getData();\n this.__workspaceRemoved(workspace);\n }, this);\n\n this.getSelection().addListener(\"change\", () => {\n const selection = this.getSelection();\n if (selection.getLength() > 0) {\n const item = selection.getItem(0);\n const workspaceId = item.getWorkspaceId();\n const folderId = item.getFolderId();\n this.fireDataEvent(\"locationChanged\", {\n workspaceId,\n folderId,\n });\n }\n }, this);\n },\n\n events: {\n \"openChanged\": \"qx.event.type.Event\",\n \"locationChanged\": \"qx.event.type.Data\",\n \"studyToFolderRequested\": \"qx.event.type.Data\",\n \"folderToFolderRequested\": \"qx.event.type.Data\",\n },\n\n properties: {\n currentWorkspaceId: {\n check: \"Number\",\n nullable: true,\n init: null,\n },\n\n currentFolderId: {\n check: \"Number\",\n nullable: true,\n init: null,\n },\n },\n\n members: {\n __models: null,\n\n __initTree: function() {\n const that = this;\n this.setDelegate({\n createItem: () => new osparc.dashboard.WorkspacesAndFoldersTreeItem(),\n bindItem: (c, item, id) => {\n c.bindDefaultProperties(item, id);\n c.bindProperty(\"\", \"open\", {\n converter(value, _model, _source, target) {\n const isOpen = target.isOpen();\n if (isOpen) {\n // eslint-disable-next-line no-underscore-dangle\n that.__populateFolder(value, value.getWorkspaceId(), value.getFolderId())\n .then(folderModels => {\n // load next level too\n folderModels.forEach(folderModel => {\n // eslint-disable-next-line no-underscore-dangle\n that.__populateFolder(folderModel, folderModel.getWorkspaceId(), folderModel.getFolderId());\n })\n });\n }\n that.fireEvent(\"openChanged\");\n return isOpen;\n },\n }, item, id);\n },\n configureItem: item => {\n item.addListener(\"changeModel\", e => {\n const model = e.getData();\n osparc.utils.Utils.setIdToWidget(item, `workspacesAndFoldersTreeItem_${model.getWorkspaceId()}_${model.getFolderId()}`);\n });\n [\n \"studyToFolderRequested\",\n \"folderToFolderRequested\",\n ].forEach(ev => {\n item.addListener(ev, e => this.fireDataEvent(ev, e.getData()));\n });\n }\n });\n\n this.setIconPath(\"icon\");\n this.setIconOptions({\n converter(value) {\n if (value === \"shared\") {\n return osparc.store.Workspaces.iconPath(18);\n } else if (value === \"home\") {\n return \"@FontAwesome5Solid/home/16\";\n }\n return \"@FontAwesome5Solid/folder/16\";\n },\n });\n },\n\n __createItemData: function(label, icon, workspaceId, folderId) {\n return {\n label,\n icon,\n workspaceId,\n folderId,\n loaded: false,\n children: [{\n label: \"Loading...\",\n }],\n };\n },\n\n __addMyWorkspace: function(rootModel) {\n const workspaceId = null;\n const folderId = null;\n const myWorkspaceData = this.__createItemData(\n \"My Workspace\",\n \"home\",\n workspaceId,\n folderId,\n );\n const myWorkspaceModel = qx.data.marshal.Json.createModel(myWorkspaceData, true);\n this.__models.push(myWorkspaceModel);\n rootModel.getChildren().append(myWorkspaceModel);\n\n // load next level too\n this.__populateFolder(myWorkspaceModel, workspaceId, folderId);\n },\n\n __addSharedWorkspaces: function(rootModel) {\n const workspaceId = -1;\n const folderId = null;\n const sharedWorkspaceData = this.__createItemData(\n \"Shared Workspaces\",\n \"shared\",\n workspaceId,\n folderId,\n );\n const sharedWorkspaceModel = qx.data.marshal.Json.createModel(sharedWorkspaceData, true);\n this.__models.push(sharedWorkspaceModel);\n rootModel.getChildren().append(sharedWorkspaceModel);\n\n osparc.store.Workspaces.getInstance().fetchWorkspaces()\n .then(workspaces => {\n sharedWorkspaceModel.setLoaded(true);\n sharedWorkspaceModel.getChildren().removeAll();\n workspaces.forEach(workspace => {\n this.__addWorkspace(workspace);\n });\n })\n .catch(console.error);\n },\n\n __addWorkspace: function(workspace) {\n const workspaceId = workspace.getWorkspaceId();\n const folderId = null;\n const workspaceData = this.__createItemData(\n \"\",\n \"shared\",\n workspaceId,\n folderId,\n );\n const workspaceModel = qx.data.marshal.Json.createModel(workspaceData, true);\n this.__models.push(workspaceModel);\n workspace.bind(\"name\", workspaceModel, \"label\");\n\n const sharedWorkspaceModel = this.__getModel(-1, null);\n sharedWorkspaceModel.getChildren().append(workspaceModel);\n sharedWorkspaceModel.getChildren().sort(((a, b) => {\n return a.getLabel().localeCompare(b.getLabel());\n }));\n\n // load next level too\n this.__populateFolder(workspaceModel, workspace.getWorkspaceId(), null);\n },\n\n __workspaceRemoved: function(workspace) {\n // remove it from the tree\n const sharedWorkspaceModel = this.__getModel(-1, null);\n const idx = sharedWorkspaceModel.getChildren().toArray().findIndex(w => workspace.getWorkspaceId() === w.getWorkspaceId());\n if (idx > -1) {\n sharedWorkspaceModel.getChildren().removeAt(idx);\n }\n\n // remove it from the cached models\n const modelFound = this.__getModel(workspace.getWorkspaceId(), null);\n if (modelFound) {\n const index = this.__models.indexOf(modelFound);\n if (index > -1) { // only splice array when item is found\n this.__models.splice(index, 1); // 2nd parameter means remove one item only\n }\n }\n },\n\n __addFolder: function(folder, parentModel) {\n const workspaceId = folder.getWorkspaceId();\n const folderData = this.__createItemData(\n \"\",\n workspaceId ? \"shared\" : \"folder\",\n workspaceId,\n folder.getFolderId(),\n );\n const folderModel = qx.data.marshal.Json.createModel(folderData, true);\n this.__models.push(folderModel);\n folder.bind(\"name\", folderModel, \"label\");\n parentModel.getChildren().append(folderModel);\n parentModel.getChildren().sort(((a, b) => {\n return a.getLabel().localeCompare(b.getLabel());\n }));\n return folderModel;\n },\n\n __populateFolder: function(model, workspaceId, folderId) {\n if (model.getLoaded()) {\n return new Promise(resolve => resolve(model.getChildren()));\n }\n return osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId)\n .then(folders => {\n model.setLoaded(true);\n model.getChildren().removeAll();\n const newFolderModels = [];\n folders.forEach(folder => {\n newFolderModels.push(this.__addFolder(folder, model));\n });\n return newFolderModels;\n });\n },\n\n __getModel: function(workspaceId, folderId) {\n return this.__models.find(mdl => mdl.getWorkspaceId() === workspaceId && mdl.getFolderId() === folderId);\n },\n\n __folderAdded: function(folder) {\n const parentModel = this.__getModel(folder.getWorkspaceId(), folder.getParentFolderId());\n if (parentModel) {\n this.__addFolder(folder, parentModel);\n }\n },\n\n __folderRemoved: function(folder) {\n // eslint-disable-next-line no-negated-condition\n const parentModel = this.__getModel(folder.getWorkspaceId(), folder.getParentFolderId());\n if (parentModel) {\n const idx = parentModel.getChildren().toArray().findIndex(c => \"getWorkspaceId\" in c && folder.getWorkspaceId() === c.getWorkspaceId() && folder.getFolderId() === c.getFolderId());\n if (idx > -1) {\n parentModel.getChildren().removeAt(idx);\n }\n }\n\n // remove it from the cached models\n const modelFound = this.__getModel(folder.getWorkspaceId(), folder.getFolderId());\n if (modelFound) {\n const index = this.__models.indexOf(modelFound);\n if (index > -1) { // only splice array when item is found\n this.__models.splice(index, 1); // 2nd parameter means remove one item only\n }\n }\n },\n\n contextChanged: function(context) {\n const selection = this.getSelection();\n if (selection) {\n selection.removeAll();\n }\n if (context === \"studiesAndFolders\" || context === \"workspaces\") {\n const workspaceId = context === \"workspaces\" ? -1 : this.getCurrentWorkspaceId();\n const folderId = this.getCurrentFolderId();\n const locationModel = this.__getModel(workspaceId, folderId);\n if (locationModel) {\n selection.push(locationModel);\n }\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.SlideBase\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function(title) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n if (title) {\n const label = osparc.product.quickStart.Utils.createTitle(title);\n this._add(label);\n }\n\n this._populateCard();\n },\n\n members: {\n /**\n * @abstract\n */\n _populateCard: function() {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.Welcome\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Quick Start Guide\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const welcomeText = this.tr(\"Welcome onboard \") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getFriendlyUsername()) + \",\";\n const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText);\n this._add(welcome);\n\n const introText = this.tr(\"\\\n This quick tutorial gives a basic overview of how the TI Planning Tool works and how to navigate through the interface.
\\\n We will focus on two main aspects, how to:
\\\n - Use the platform
\\\n - Get started with a New Plan
\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n this._add(new qx.ui.core.Spacer(null, 50));\n\n const logo = new osparc.ui.basic.Logo().set({\n width: 260,\n height: 110\n });\n this._add(logo);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.Dashboard\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Dashboard\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const introText = this.tr(\"\\\n The Dashboard is your private hub which contains all of your Plans as well as Plans that have been shared with you. \\\n From the Dashboard you are able to open your Plan or create a New Plan from scratch.\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n const image = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/dashboard.png\");\n osparc.utils.Utils.forceRatioAfterLoad(image, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image);\n this._add(image);\n\n const newPlanText = this.tr(\"\\\n 1) New Plan: by clicking on this card a new study will be created and open.\\\n The planning process will be presented in three successive steps that will be described more in detail in the following steps.\\\n \");\n const newPlan = osparc.product.quickStart.Utils.createLabel(newPlanText);\n this._add(newPlan);\n\n const otherPlansText = this.tr(\"\\\n 2) The other cards are TI Plans that were already created by you or shared with you. You can reopen them to do further analysis \\\n or by clicking three dots, on the top right corner, you can share, delete or check the details and metadata.\\\n \");\n const otherPlans = osparc.product.quickStart.Utils.createLabel(otherPlansText);\n this._add(otherPlans);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.ElectrodeSelector\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Electrode Selector\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const text1 = this.tr(\"\\\n After pressing New Plan, three panels will be shown.\\\n \");\n const label1 = osparc.product.quickStart.Utils.createLabel(text1);\n this._add(label1);\n\n const text2 = this.tr(\"\\\n In a first step, the relevant species, stimulation target, electrode shapes, electrode dimensions and \\\n potential electrode locations (currently required to narrow down the huge exposure configuration search space) are selected.\\\n \");\n const label2 = osparc.product.quickStart.Utils.createLabel(text2);\n this._add(label2);\n\n const image = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/electrode_selector.gif\");\n osparc.utils.Utils.forceRatioAfterLoad(image, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image);\n this._add(image);\n\n const text4 = this.tr(\"\\\n After finishing the set up, the big button on the top right will turn blue and by clicking on it you will submit the configuration.\\\n \");\n const label4 = osparc.product.quickStart.Utils.createLabel(text4);\n this._add(label4);\n\n const text5 = this.tr(\"\\\n Now the Arrow that says 'Next' can be pushed and the optimization will immediately start.\\\n \");\n const label5 = osparc.product.quickStart.Utils.createLabel(text5);\n this._add(label5);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.PostPro\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Post Processing\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const text1 = this.tr(\"\\\n Based on extensive sweeping/optimization, a series of highly performing exposure parameters are proposed for the \\\n user to interactively explore, using predefined quantification metrics and visualizations. Identified \\\n conditions-of-interest can be documented and added to a report.\\\n \");\n const label1 = osparc.product.quickStart.Utils.createLabel(text1);\n this._add(label1);\n\n const text2 = this.tr(\"\\\n These metrics are reported in the Post Processing analysis environment for each electrode pair in the combination in \\\n a sorted tabular form that can be used to inspect the stimulation performances. By clicking on each pair, slice views \\\n of the maximum amplitude modulation (MAP) within the head are produced.
\\\n Pressing the `Load` button on the right, the selected configuration will be loaded.\\\n \");\n const label2 = osparc.product.quickStart.Utils.createLabel(text2);\n this._add(label2);\n\n const image1 = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_1.gif\");\n osparc.utils.Utils.forceRatioAfterLoad(image1, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image1);\n this._add(image1);\n\n const text3 = this.tr(\"\\\n Alternatively, slice views of the maximum interferential E-field can also be visualized and synchronous with the MAP slices \\\n to assess safety-related aspects (e.g., field intensity in proximity of the electrodes). These maps can be edited, thresholded, \\\n and saved offline for further inspection and analysis.
\\\n An isosurface of the TI stimulation distribution for the selected configuration can also be visualized within the head anatomy for inspection.\\\n \");\n const label3 = osparc.product.quickStart.Utils.createLabel(text3);\n this._add(label3);\n\n const image2 = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_2.gif\");\n osparc.utils.Utils.forceRatioAfterLoad(image2, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image2);\n this._add(image2);\n\n const text4 = this.tr(\"\\\n At the end of the optimization procedure, you can automatically generate a report.
\\\n It includes a summary of all the performance metrics calculated for each electrode pair combination, and a detailed performance report \\\n of the optimized electrode configuration. The report includes electrode placement, current intensities, performance metrics, TI and maximum \\\n high-frequency field distributions, cumulative dose histograms and all the graphs generated in the post-pro analysis tab.\\\n \");\n const label4 = osparc.product.quickStart.Utils.createLabel(text4);\n this._add(label4);\n\n const image3 = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_gui_3.gif\");\n osparc.utils.Utils.forceRatioAfterLoad(image3, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image3);\n this._add(image3);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.S4LPostPro\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n let title = \"\";\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n const notAvailableText = this.tr(\"Not available in\");\n title += ` (${notAvailableText} ${osparc.store.StaticInfo.getInstance().getDisplayName()})
`;\n }\n title += this.tr(\"Sim4Life Post Processing\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n if (osparc.product.Utils.isProduct(\"tiplite\")) {\n this.setEnabled(false);\n }\n const text1 = this.tr(\"\\\n Finally, and optionally, exposure conditions-of-interest can be visualized and analyzed freely, using the web-version of the \\\n Sim4Life (ZMT Zurich MedTech AG) computational life sciences platform.\\\n \");\n const label1 = osparc.product.quickStart.Utils.createLabel(text1);\n this._add(label1);\n\n const image = new qx.ui.basic.Image(\"https://itisfoundation.github.io/ti-planning-tool-manual/assets/quickguide/postpro_s4l.gif\");\n osparc.utils.Utils.forceRatioAfterLoad(image, \"width\", osparc.product.quickStart.SlidesBase.CONTENT_WIDTH);\n osparc.utils.Utils.openImageOnTap(image);\n this._add(image);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.tis.MoreInformation\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"For more information:\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n osparc.product.quickStart.tis.Slides.footerLinks().forEach(footerItem => {\n this._add(footerItem);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4llite.Welcome\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Quick Start Guide\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const welcomeText = this.tr(\"Welcome onboard \") + osparc.utils.Utils.capitalize(osparc.auth.Data.getInstance().getFriendlyUsername()) + \",\";\n const welcome = osparc.product.quickStart.Utils.createLabel(welcomeText);\n this._add(welcome);\n\n const introText = this.tr(\"\\\n This quick user’s guide gives a short introduction to Sim4Life.lite. We will show:
\\\n - how to get started with a new project,
\\\n - how to get started from an existing tutorial project
\\\n - how to open Sim4Life desktop simulation projects in Sim4Life.lite,
\\\n - Sim4Life.lite features, limitations and user interface
\\\n
\\\n For more specific technical information, please refer to the Dashboard Manual and the Sim4Life.lite Manual.\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n this._add(new qx.ui.core.Spacer(null, 50));\n\n const logo = new osparc.ui.basic.Logo().set({\n width: 260,\n height: 110\n });\n this._add(logo);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4llite.Dashboard\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Dashboard - Projects & Tutorials\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const introText = this.tr(\"\\\n The Dashboard is the place where Projects and Tutorials can be accessed and organized.\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n const dashboardProjects = new qx.ui.basic.Image(\"https://raw.githubusercontent.com/ZurichMedTech/s4l-lite-manual/main/assets/dashboard/projects.png\").set({\n alignX: \"center\",\n scale: true,\n width: 637,\n height: 301\n });\n this._add(dashboardProjects);\n\n const newProjectText = this.tr(\"\\\n 1) Start Sim4Life.lite: Click the + Start Sim4Life.lite button to create a new project. This will start the user interface of Sim4Life.lite.\\\n \");\n const newProject = osparc.product.quickStart.Utils.createLabel(newProjectText);\n this._add(newProject);\n\n const otherProjectsText = this.tr(\"\\\n 2) Other cards: Each card represents an existing project (own projects, or projects shared by other users) that can be accessed and managed. \\\n Click on the card to open the project. Click the “three dots” in the upper right corner of the card to perform operations such as rename, share, delete.\\\n \");\n const otherProjects = osparc.product.quickStart.Utils.createLabel(otherProjectsText);\n this._add(otherProjects);\n\n const otherProjects2Text = this.tr(\"\\\n 3) TUTORIALS: A set of pre-built read-only tutorial projects with results is available to all Sim4Life.lite users. When a tutorial is selected, a \\\n copy is automatically created and added to the user’s Projects tab. This new copy is editable and can be shared.\\\n \");\n const otherProjects2 = osparc.product.quickStart.Utils.createLabel(otherProjects2Text);\n this._add(otherProjects2);\n\n const dashboardTutorials = new qx.ui.basic.Image(\"https://raw.githubusercontent.com/ZurichMedTech/s4l-lite-manual/main/assets/opensmash.gif\").set({\n alignX: \"center\",\n scale: true,\n width: 627,\n height: 311\n });\n this._add(dashboardTutorials);\n\n const importProjectsText = this.tr(\"\\\n 4) To open an existing desktop project in Sim4Life.lite: \\\n - Click the + Start Sim4Life.lite button to create a new project.
\\\n - Click the menu and select “File Browser…”.
\\\n - Click “Upload File” for the .smash project and select the file from your desktop. Repeat the same step, but this \\\n time select “Upload Folder” and then select the result folder from your desktop. Close the window
\\\n - Click the Menu again and click “Open” to select the file you just uploaded.
\\\n \");\n const importProjects = osparc.product.quickStart.Utils.createLabel(importProjectsText);\n this._add(importProjects);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4llite.S4LLiteSpecs\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Sim4Life.lite: Features and Limitations\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const introText = this.tr(\"\\\n Sim4Life.lite is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to \\\n design complex technical devices in a validated environment. Sim4Life.lite has been created specifically for students to \\\n facilitate their understanding of computational modeling and simulations for various topics, ranging from wireless communication \\\n to medical applications. The access to Sim4Life.lite is available free of charge to students enrolled at registered universities.\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n const featuresText = this.tr(\"\\\n Sim4Life.lite offers
\\\n - Framework (GUI, Modeling, Postprocessing)
\\\n - 3D modeling environment (based on the ACIS toolkit) and CAD translators
\\\n - Postprocessing and visualization of the simulation results (2D and 3D viewers, 2D planar slice, volume rendering, streamlines, surface fields on arbitrary 3D structures, radiation and far-field data)
\\\n - No restrictions on number of modeling objects
\\\n - Solvers & Tissue Models:
\\\n - P-EM-FDTD: Electromagnetics Full-Wave Solver
\\\n - P-EM-QS: Quasi-Static Electromagnetics Solver
\\\n - P-Thermal: Thermodynamic Solver
\\\n - P-Acoustics: Acoustics Solver
\\\n - T-Neuro: Neuronal Tissue Models
\\\n - Computational anatomical model Yoon-sun, the first Korean model of the IT’IS Virtual Population
\\\n - Material database
\\\n - Python and Jupyter Notebook scripting\\\n \");\n const features = osparc.product.quickStart.Utils.createLabel(featuresText);\n this._add(features);\n\n const limitationsText = this.tr(\"\\\n Limitations
\\\n The following limitations apply:
\\\n - Grid size of each simulation is limited to a maximum of 20 million grid cells
\\\n - High-Performance Computing is not supported:
\\\n - GPU acceleration is not available
\\\n - MPI multicore acceleration is not available
\\\n - 3rd-party tools are not available (e.g., MUSAIK, SYSSIM, IMAnalytics, etc…)
\\\n - Additional ViP models cannot be added
\\\n - 30 minutes idle time before logout
\\\n - Hardware resource limits
\\\n - 3 CPUs
\\\n - 3 GB of GPU RAM
\\\n - 5 GB disk space
\\\n - 16 GB RAM
\\\n \");\n const limitations = osparc.product.quickStart.Utils.createLabel(limitationsText);\n this._add(limitations);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.quickStart.s4llite.S4LLiteUI\", {\n extend: osparc.product.quickStart.SlideBase,\n\n construct: function() {\n const title = this.tr(\"Sim4Life.lite\");\n this.base(arguments, title);\n },\n\n members: {\n _populateCard: function() {\n const introText = this.tr(\"\\\n To check the Sim4Life.lite manual, please open a project and access the documentation via Help in the menu as shown below. Enjoy!\\\n \");\n const intro = osparc.product.quickStart.Utils.createLabel(introText);\n this._add(intro);\n\n const manualGif = new qx.ui.basic.Image(\"https://zurichmedtech.github.io/s4l-lite-manual/assets/s4l-docs.gif\").set({\n alignX: \"center\",\n scale: true,\n width: 626,\n height: 392\n });\n this._add(manualGif);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tours.ListItem\", {\n extend: qx.ui.core.Widget,\n\n construct: function(tour) {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid(5, 5);\n layout.setColumnFlex(0, 1);\n\n this._setLayout(layout);\n\n this.set({\n backgroundColor: \"material-button-background\",\n cursor: \"pointer\",\n allowGrowX: true,\n padding: 10\n });\n\n const titleLabel = new qx.ui.basic.Label(tour.name).set({\n font: \"text-14\",\n rich: true\n });\n this._add(titleLabel, {\n row: 0,\n column: 0\n });\n if (tour.description) {\n const descriptionLabel = new qx.ui.basic.Label(tour.description).set({\n font: \"text-13\",\n rich: true\n });\n this._add(descriptionLabel, {\n row: 1,\n column: 0\n });\n }\n const image = new qx.ui.basic.Image(\"@FontAwesome5Solid/arrow-right/14\").set({\n alignY: \"middle\"\n });\n this._add(image, {\n row: 0,\n column: 1,\n rowSpan: 2\n });\n\n this.addListener(\"pointerover\", () => this.setBackgroundColor(\"material-button-background-hovered\"), this);\n this.addListener(\"pointerout\", () => this.setBackgroundColor(\"material-button-background\"), this);\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Timer, which accelerates after each interval. The initial delay and the\n * interval time can be set using the properties {@link #firstInterval}\n * and {@link #interval}. The {@link #interval} events will be fired with\n * decreasing interval times while the timer is running, until the {@link #minimum}\n * is reached. The {@link #decrease} property sets the amount of milliseconds\n * which will decreased after every firing.\n *\n * This class is e.g. used in the {@link qx.ui.form.RepeatButton} and\n * {@link qx.ui.form.HoverButton} widgets.\n * \n * NOTE: Instances of this class must be disposed of after use\n *\n */\nqx.Class.define(\"qx.event.AcceleratingTimer\",\n{\n extend : qx.core.Object,\n implement : [ qx.core.IDisposable ],\n\n construct : function()\n {\n this.base(arguments);\n\n this.__timer = new qx.event.Timer(this.getInterval());\n this.__timer.addListener(\"interval\", this._onInterval, this);\n },\n\n\n events :\n {\n /** This event if fired each time the interval time has elapsed */\n \"interval\" : \"qx.event.type.Event\"\n },\n\n\n properties :\n {\n /**\n * Interval used after the first run of the timer. Usually a smaller value\n * than the \"firstInterval\" property value to get a faster reaction.\n */\n interval :\n {\n check : \"Integer\",\n init : 100\n },\n\n /**\n * Interval used for the first run of the timer. Usually a greater value\n * than the \"interval\" property value to a little delayed reaction at the first\n * time.\n */\n firstInterval :\n {\n check : \"Integer\",\n init : 500\n },\n\n /** This configures the minimum value for the timer interval. */\n minimum :\n {\n check : \"Integer\",\n init : 20\n },\n\n /** Decrease of the timer on each interval (for the next interval) until minTimer reached. */\n decrease :\n {\n check : \"Integer\",\n init : 2\n }\n },\n\n\n members :\n {\n __timer : null,\n __currentInterval : null,\n\n /**\n * Reset and start the timer.\n */\n start : function()\n {\n this.__timer.setInterval(this.getFirstInterval());\n this.__timer.start();\n },\n\n\n /**\n * Stop the timer\n */\n stop : function()\n {\n this.__timer.stop();\n this.__currentInterval = null;\n },\n\n\n /**\n * Interval event handler\n */\n _onInterval : function()\n {\n this.__timer.stop();\n\n if (this.__currentInterval == null) {\n this.__currentInterval = this.getInterval();\n }\n\n this.__currentInterval = Math.max(\n this.getMinimum(),\n this.__currentInterval - this.getDecrease()\n );\n\n this.__timer.setInterval(this.__currentInterval);\n this.__timer.start();\n\n this.fireEvent(\"interval\");\n }\n },\n\n\n destruct : function() {\n this._disposeObjects(\"__timer\");\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.desktop.credits.BuyCreditsInput\", {\n extend: qx.ui.core.Widget,\n\n construct(pricePerCredit, currencySymbol = \"$\") {\n this.base(arguments);\n\n if (isNaN(pricePerCredit)) {\n return;\n }\n\n this.__pricePerCredit = pricePerCredit;\n this.__currencySymbol = currencySymbol;\n this._setLayout(new qx.ui.layout.HBox(25).set({\n alignX: \"center\"\n }));\n this._render();\n },\n\n events: {\n \"input\": \"qx.event.type.Data\"\n },\n\n members: {\n __pricePerCredit: null,\n __currencySymbol: null,\n __priceInput: null,\n __amountInput: null,\n __totalInput: null,\n\n _render: function() {\n this._removeAll();\n\n const [priceContainer, priceInput] = this.__getInputAndLabel(this.tr(\"Credit Price\"), {\n readOnly: true,\n value: this.__pricePerCredit + this.__currencySymbol,\n paddingLeft: 0,\n paddingRight: 0\n });\n this._add(priceContainer);\n this.__priceInput = priceInput;\n\n const [amountContainer, amountInput] = this.__getSpinnerAndLabel(this.tr(\"Credit Amount\"));\n this.__amountInput = amountInput;\n this._add(amountContainer);\n\n const [totalContainer, totalInput] = this.__getInputAndLabel(this.tr(\"Total\"), {\n readOnly: true,\n value: \"-\",\n paddingLeft: 0,\n paddingRight: 0\n });\n this.__totalInput = totalInput;\n const amountChanged = value => {\n totalInput.setValue(value ? 1 * (value * this.__pricePerCredit).toFixed(2) + this.__currencySymbol : \"-\");\n this.fireDataEvent(\"input\", this.getValues());\n }\n amountInput.getChildControl(\"textfield\").addListener(\"input\", e => amountChanged(e.getData()));\n amountInput.addListener(\"changeValue\", e => amountChanged(e.getData()));\n this._add(totalContainer);\n\n osparc.store.Store.getInstance().getMinimumAmount()\n .then(minimum => {\n amountInput.set({\n maximum: 100000,\n minimum: Math.ceil(minimum/this.__pricePerCredit),\n value: Math.ceil(minimum/this.__pricePerCredit)\n });\n });\n },\n\n __getInputAndLabel: function(labelText, inputProps) {\n const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignX: \"center\"\n }));\n const input = new qx.ui.form.TextField().set({\n appearance: \"appmotion-buy-credits-input\",\n textAlign: \"center\",\n width: 100,\n ...inputProps\n });\n const label = new qx.ui.basic.Label(labelText);\n container.add(input);\n container.add(label);\n return [container, input];\n },\n\n __getSpinnerAndLabel: function(labelText, inputProps) {\n const container = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignX: \"center\"\n }));\n const input = new qx.ui.form.Spinner().set({\n appearance: \"appmotion-buy-credits-spinner\",\n width: 110,\n ...inputProps\n });\n input.getChildControl(\"textfield\").set({\n font: \"text-18\",\n textAlign: \"center\"\n });\n const label = new qx.ui.basic.Label(labelText);\n container.add(input);\n container.add(label);\n return [container, input];\n },\n\n getValues: function() {\n return {\n osparcCredits: this.__amountInput.getValue(),\n amountDollars: parseFloat(this.__totalInput.getValue().split(this.__currencySymbol)[0])\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.form.AppMotionSelect\", {\n extend: qx.ui.form.SelectBox,\n construct: function() {\n this.base(arguments);\n this.set({\n appearance: \"appmotion-buy-credits-select\"\n });\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * Generic escaping and unescaping of DOM strings.\n *\n * {@link qx.bom.String} for (un)escaping of HTML strings.\n * {@link qx.xml.String} for (un)escaping of XML strings.\n */\nqx.Bootstrap.define(\"qx.util.StringEscape\",\n{\n statics :\n {\n /**\n * generic escaping method\n *\n * @param str {String} string to escape\n * @param charCodeToEntities {Map} entity to charcode map\n * @return {String} escaped string\n */\n escape : function(str, charCodeToEntities)\n {\n var entity, result = \"\";\n\n for (var i=0, l=str.length; i 0x7F) {\n entity = \"&#\" + code + \";\";\n } else {\n entity = chr;\n }\n }\n\n result += entity;\n }\n\n return result;\n },\n\n\n /**\n * generic unescaping method\n *\n * @param str {String} string to unescape\n * @param entitiesToCharCode {Map} charcode to entity map\n * @return {String} unescaped string\n */\n unescape : function(str, entitiesToCharCode)\n {\n return str.replace(/&[#\\w]+;/gi, function(entity)\n {\n var chr = entity;\n var entity = entity.substring(1, entity.length - 1);\n var code = entitiesToCharCode[entity];\n\n if (code) {\n chr = String.fromCharCode(code);\n }\n else\n {\n if (entity.charAt(0) == '#')\n {\n if (entity.charAt(1).toUpperCase() == 'X')\n {\n code = entity.substring(2);\n\n // match hex number\n if (code.match(/^[0-9A-Fa-f]+$/gi)) {\n chr = String.fromCharCode(parseInt(code, 16));\n }\n }\n else\n {\n code = entity.substring(1);\n\n // match integer\n if (code.match(/^\\d+$/gi)) {\n chr = String.fromCharCode(parseInt(code, 10));\n }\n }\n }\n }\n\n return chr;\n });\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2025 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.filter.SearchingCollaborators\", {\n extend: qx.ui.basic.Atom,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n label: this.tr(\"Searching...\"),\n icon: \"@FontAwesome5Solid/circle-notch/14\",\n appearance: \"tagbutton\",\n gap: 10,\n });\n\n this.getChildControl(\"icon\").getContentElement().addClass(\"rotate\");\n this.getChildControl(\"label\").setTextColor(\"text\");\n },\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2023 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * Button to toggle the selection of one collaborator\n */\nqx.Class.define(\"osparc.filter.CollaboratorToggleButton\", {\n extend: qx.ui.form.ToggleButton,\n include: osparc.filter.MFilterable,\n implement: osparc.filter.IFilterable,\n\n construct: function(collaborator) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox(8).set({\n alignY: \"middle\"\n }));\n this.set({\n minHeight: 30,\n appearance: \"tagbutton\"\n });\n\n let label = collaborator.getLabel();\n if (\"getEmail\" in collaborator && collaborator.getEmail()) {\n label += ` (${collaborator.getEmail()})`;\n }\n this.setLabel(label);\n\n if (collaborator.getDescription()) {\n const ttt = collaborator.getLabel() + \"
\" + collaborator.getDescription();\n this.setToolTipText(ttt);\n }\n\n let iconPath = null;\n switch (collaborator[\"collabType\"]) {\n case 0:\n iconPath = \"@FontAwesome5Solid/globe/14\";\n break;\n case 1:\n iconPath = \"@FontAwesome5Solid/users/14\";\n break;\n case 2:\n iconPath = \"@FontAwesome5Solid/user/14\";\n break;\n }\n this.setIcon(iconPath);\n\n this.getChildControl(\"check\");\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"label\":\n control = new qx.ui.basic.Label(this.getLabel()).set({\n allowStretchX: true\n });\n control.setAnonymous(true);\n control.setRich(this.getRich());\n this._add(control, {\n flex: 1\n });\n if (this.getLabel() == null || this.getShow() === \"icon\") {\n control.exclude();\n }\n break;\n case \"check\":\n control = new qx.ui.basic.Image(\"@FontAwesome5Solid/check/14\");\n control.setAnonymous(true);\n this._add(control);\n this.bind(\"value\", control, \"visibility\", {\n converter: value => value ? \"visible\" : \"hidden\"\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n __filterText: function(text) {\n const checks = [\n this.getLabel(),\n this.getToolTipText()\n ];\n if (text) {\n const includesSome = checks.some(check => (check !== null) && check.toLowerCase().trim().includes(text.toLowerCase()));\n return !includesSome;\n }\n return false;\n },\n\n _shouldApplyFilter: function(data) {\n if (data.name) {\n // data.name comes lowercased\n return this.__filterText(data.name);\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n if (data.name && data.name.length > 1) {\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.OrganizationsList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n const studiesLabel = osparc.product.Utils.getStudyAlias({plural: true});\n const msg = this.tr(\"\\\n An organization is a group of users who can share \") + studiesLabel + this.tr(\" and other resources.
\\\n Here you can see the list of organizations you belong to, create new organizations, \\\n or manage the membership by setting up the access rights of each member in the organization \\\n if you are a manager or administrator.\");\n const intro = new qx.ui.basic.Label().set({\n value: msg,\n alignX: \"left\",\n rich: true,\n font: \"text-13\"\n });\n this._add(intro);\n\n const rolesLayout = osparc.data.Roles.createRolesOrgInfo();\n const orgsFilter = this.__getOrganizationsFilter();\n orgsFilter.setPaddingRight(10);\n osparc.data.Roles.replaceSpacerWithWidget(rolesLayout, orgsFilter);\n this._add(rolesLayout);\n\n this._add(this.__getOrganizationsList(), {\n flex: 1\n });\n\n if (osparc.data.Permissions.getInstance().canDo(\"user.organizations.create\")) {\n this._add(this.__getCreateOrganizationSection());\n }\n\n this.reloadOrganizations();\n },\n\n events: {\n \"organizationSelected\": \"qx.event.type.Data\"\n },\n\n properties: {\n organizationsLoaded: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeOrganizationsLoaded\"\n }\n },\n\n statics: {\n sortOrganizations: function(a, b) {\n const sorted = osparc.share.Collaborators.sortByAccessRights(a.getAccessRights(), b.getAccessRights());\n if (sorted !== 0) {\n return sorted;\n }\n return a.getLabel().localeCompare(b.getLabel());\n }\n },\n\n members: {\n __orgsUIList: null,\n __orgsModel: null,\n\n getOrgModel: function(orgId) {\n let org = null;\n this.__orgsModel.forEach(orgModel => {\n if (orgModel.getGroupId() === parseInt(orgId)) {\n org = orgModel;\n }\n });\n return org;\n },\n\n __getCreateOrganizationSection: function() {\n const createOrgBtn = new qx.ui.form.Button().set({\n appearance: \"form-button\",\n label: this.tr(\"New Organization\"),\n alignX: \"center\",\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n createOrgBtn.addListener(\"execute\", function() {\n const title = this.tr(\"New Organization\");\n const orgEditor = new osparc.editor.OrganizationEditor();\n const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);\n orgEditor.addListener(\"createOrg\", () => {\n this.__createOrganization(win, orgEditor.getChildControl(\"create\"), orgEditor);\n });\n orgEditor.addListener(\"cancel\", () => win.close());\n }, this);\n return createOrgBtn;\n },\n\n __getOrganizationsFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"organizationsList\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n return filter;\n },\n\n __getOrganizationsList: function() {\n const orgsUIList = this.__orgsUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n height: 150,\n width: 150\n });\n osparc.utils.Utils.setIdToWidget(orgsUIList, \"organizationsList\");\n orgsUIList.addListener(\"changeSelection\", e => this.__organizationSelected(e.getData()), this);\n\n const orgsModel = this.__orgsModel = new qx.data.Array();\n const orgsCtrl = new qx.data.controller.List(orgsModel, orgsUIList, \"label\");\n orgsCtrl.setDelegate({\n createItem: () => new osparc.ui.list.OrganizationListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"groupId\", \"key\", null, item, id);\n ctrl.bindProperty(\"groupId\", \"model\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"label\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitle\", null, item, id);\n ctrl.bindProperty(\"groupMembers\", \"groupMembers\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"organizationsList\");\n osparc.utils.Utils.setIdToWidget(item, \"organizationListItem\");\n const thumbnail = item.getChildControl(\"thumbnail\");\n thumbnail.getContentElement()\n .setStyles({\n \"border-radius\": \"16px\"\n });\n\n item.addListener(\"openEditOrganization\", e => {\n const orgKey = e.getData();\n this.__openEditOrganization(orgKey);\n });\n\n item.addListener(\"deleteOrganization\", e => {\n const orgKey = e.getData();\n this.__deleteOrganization(orgKey);\n });\n }\n });\n\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(orgsUIList);\n\n return scrollContainer;\n },\n\n __organizationSelected: function(data) {\n if (data && data.length) {\n const org = data[0];\n this.fireDataEvent(\"organizationSelected\", org.getModel());\n }\n },\n\n reloadOrganizations: function(orgId) {\n this.__orgsUIList.resetSelection();\n const orgsModel = this.__orgsModel;\n orgsModel.removeAll();\n\n const groupsStore = osparc.store.Groups.getInstance();\n const orgs = Object.values(groupsStore.getOrganizations());\n orgs.sort(this.self().sortOrganizations);\n orgs.forEach(org => orgsModel.append(org));\n this.setOrganizationsLoaded(true);\n if (orgId) {\n this.fireDataEvent(\"organizationSelected\", orgId);\n }\n },\n\n __openEditOrganization: function(orgId) {\n const org = this.getOrgModel(orgId);\n if (org === null) {\n return;\n }\n\n const title = this.tr(\"Organization Details Editor\");\n const orgEditor = new osparc.editor.OrganizationEditor(org);\n const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);\n orgEditor.addListener(\"updateOrg\", () => {\n this.__updateOrganization(win, orgEditor.getChildControl(\"save\"), orgEditor);\n });\n orgEditor.addListener(\"cancel\", () => win.close());\n },\n\n __deleteOrganization: function(orgKey) {\n let org = null;\n this.__orgsModel.forEach(orgModel => {\n if (orgModel.getGroupId() === parseInt(orgKey)) {\n org = orgModel;\n }\n });\n if (org === null) {\n return;\n }\n\n const name = org.getLabel();\n const msg = this.tr(\"Are you sure you want to delete \") + name + \"?\";\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Organization\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n const groupsStore = osparc.store.Groups.getInstance(orgKey);\n groupsStore.deleteOrganization(orgKey)\n .then(() => {\n this.reloadOrganizations();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong deleting \") + name, \"ERROR\");\n console.error(err);\n })\n .finally(() => {\n win.close();\n });\n }\n }, this);\n },\n\n __createOrganization: function(win, button, orgEditor) {\n const name = orgEditor.getLabel();\n const description = orgEditor.getDescription();\n const thumbnail = orgEditor.getThumbnail();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.postOrganization(name, description, thumbnail)\n .then(org => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully created\"));\n button.setFetching(false);\n // open it\n this.reloadOrganizations(org.getGroupId());\n })\n .catch(err => {\n const errorMessage = err[\"message\"] || this.tr(\"Something went wrong creating \") + name;\n osparc.FlashMessenger.getInstance().logAs(errorMessage, \"ERROR\");\n button.setFetching(false);\n console.error(err);\n })\n .finally(() => {\n win.close();\n });\n },\n\n __updateOrganization: function(win, button, orgEditor) {\n const groupId = orgEditor.getGid();\n const name = orgEditor.getLabel();\n const description = orgEditor.getDescription();\n const thumbnail = orgEditor.getThumbnail();\n osparc.store.Groups.getInstance().patchOrganization(groupId, name, description, thumbnail)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully edited\"));\n button.setFetching(false);\n win.close();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong editing \") + name, \"ERROR\");\n button.setFetching(false);\n console.error(err);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.OrganizationDetails\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this._add(this.__getTitleLayout());\n this._add(this.__getTabs(), {\n flex: 1\n });\n },\n\n events: {\n \"backToOrganizations\": \"qx.event.type.Event\"\n },\n\n members: {\n __orgModel: null,\n __titleLayout: null,\n __organizationListItem: null,\n __membersList: null,\n __templatesList: null,\n __servicesList: null,\n\n setCurrentOrg: function(organization) {\n if (organization === null) {\n return;\n }\n this.__orgModel = organization;\n\n const organizationListItem = this.__addOrganizationListItem();\n organization.bind(\"groupId\", organizationListItem, \"key\");\n organization.bind(\"groupId\", organizationListItem, \"model\");\n organization.bind(\"thumbnail\", organizationListItem, \"thumbnail\");\n organization.bind(\"label\", organizationListItem, \"title\");\n organization.bind(\"description\", organizationListItem, \"subtitle\");\n organization.bind(\"groupMembers\", organizationListItem, \"groupMembers\");\n organization.bind(\"accessRights\", organizationListItem, \"accessRights\");\n organizationListItem.updateNMembers();\n [\n \"memberAdded\",\n \"memberRemoved\",\n ].forEach(ev => organization.addListener(ev, () => organizationListItem.updateNMembers()));\n\n // set orgModel to the tab views\n this.__membersList.setCurrentOrg(organization);\n this.__templatesList.setCurrentOrg(organization);\n this.__servicesList.setCurrentOrg(organization);\n },\n\n __getTitleLayout: function() {\n const titleLayout = this.__titleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const prevBtn = new qx.ui.form.Button().set({\n toolTipText: this.tr(\"Back to Organizations list\"),\n icon: \"@FontAwesome5Solid/arrow-left/20\",\n backgroundColor: \"transparent\"\n });\n prevBtn.addListener(\"execute\", () => this.fireEvent(\"backToOrganizations\"));\n titleLayout.add(prevBtn);\n\n this.__addOrganizationListItem();\n\n return titleLayout;\n },\n\n __addOrganizationListItem: function() {\n if (this.__organizationListItem) {\n this.__titleLayout.remove(this.__organizationListItem);\n }\n const organizationListItem = this.__organizationListItem = new osparc.ui.list.OrganizationListItem();\n organizationListItem.getChildControl(\"options\").exclude();\n organizationListItem.setShowDeleteButton(false);\n organizationListItem.addListener(\"openEditOrganization\", () => this.__openEditOrganization());\n this.__titleLayout.add(organizationListItem, {\n flex: 1\n });\n return organizationListItem;\n },\n\n __openEditOrganization: function() {\n const org = this.__orgModel;\n const title = this.tr(\"Organization Details Editor\");\n const orgEditor = new osparc.editor.OrganizationEditor(org);\n const win = osparc.ui.window.Window.popUpInWindow(orgEditor, title, 400, 200);\n orgEditor.addListener(\"updateOrg\", () => {\n this.__updateOrganization(win, orgEditor.getChildControl(\"save\"), orgEditor);\n });\n orgEditor.addListener(\"cancel\", () => win.close());\n },\n\n __updateOrganization: function(win, button, orgEditor) {\n const groupId = orgEditor.getGid();\n const name = orgEditor.getLabel();\n const description = orgEditor.getDescription();\n const thumbnail = orgEditor.getThumbnail();\n osparc.store.Groups.getInstance().patchOrganization(groupId, name, description, thumbnail)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully edited\"));\n button.setFetching(false);\n win.close();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong editing \") + name, \"ERROR\");\n button.setFetching(false);\n console.error(err);\n });\n },\n\n __createTabPage: function(label, icon) {\n const tabPage = new qx.ui.tabview.Page().set({\n layout: new qx.ui.layout.VBox()\n });\n if (label) {\n tabPage.setLabel(label);\n }\n if (icon) {\n tabPage.setIcon(icon);\n }\n tabPage.getChildControl(\"button\").set({\n font: \"text-13\"\n });\n return tabPage;\n },\n\n __getTabs: function() {\n const tabView = new qx.ui.tabview.TabView().set({\n contentPadding: 10\n });\n\n const membersListPage = this.__createTabPage(this.tr(\"Members\"), \"@FontAwesome5Solid/users/14\");\n const membersList = this.__membersList = new osparc.desktop.organizations.MembersList();\n membersListPage.add(membersList, {\n flex: 1\n });\n tabView.add(membersListPage);\n\n const templatesText = osparc.product.Utils.getTemplateAlias({\n plural: true,\n firstUpperCase: true\n });\n const templatesListPage = this.__createTabPage(templatesText, \"@FontAwesome5Solid/copy/14\");\n const templatesList = this.__templatesList = new osparc.desktop.organizations.TemplatesList();\n templatesListPage.add(templatesList, {\n flex: 1\n });\n tabView.add(templatesListPage);\n\n const servicesListPage = this.__createTabPage(this.tr(\"Services\"), \"@FontAwesome5Solid/cogs/14\");\n const servicesList = this.__servicesList = new osparc.desktop.organizations.ServicesList();\n servicesListPage.add(servicesList, {\n flex: 1\n });\n tabView.add(servicesListPage);\n\n return tabView;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.Notification\", {\n extend: qx.core.Object,\n\n construct: function(notificationObj) {\n this.base(arguments);\n\n this.set({\n id: notificationObj.id,\n resourceId: notificationObj.resource_id ? notificationObj.resource_id : null,\n category: notificationObj.category,\n actionablePath: notificationObj.actionable_path,\n title: notificationObj.title,\n text: notificationObj.text,\n userFromId: notificationObj.user_from_id ? notificationObj.user_from_id : null,\n date: new Date(notificationObj.date),\n read: [\"true\", \"True\", true].includes(notificationObj.read)\n });\n },\n\n properties: {\n id: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeId\"\n },\n\n resourceId: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeResourceId\"\n },\n\n category: {\n check: [\n \"NEW_ORGANIZATION\",\n \"STUDY_SHARED\",\n \"TEMPLATE_SHARED\",\n \"ANNOTATION_NOTE\",\n \"WALLET_SHARED\"\n ],\n init: null,\n nullable: false,\n event: \"changeCategory\"\n },\n\n actionablePath: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeActionablePath\"\n },\n\n title: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeTitle\"\n },\n\n text: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeText\"\n },\n\n userFromId: {\n check: \"Number\",\n init: null,\n nullable: true,\n event: \"changeUserFromId\"\n },\n\n date: {\n check: \"Date\",\n init: null,\n nullable: false,\n event: \"changeDate\"\n },\n\n read: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeRead\"\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsPerService\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n },\n\n properties: {\n daysRange: {\n check: [1, 7, 30],\n nullable: false,\n init: null,\n apply: \"__populateList\"\n }\n },\n\n members: {\n __populateList: function(nDays) {\n this._removeAll();\n\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (!contextWallet) {\n return;\n }\n const walletId = contextWallet.getWalletId();\n const loadingImage = new qx.ui.basic.Image(\"@FontAwesome5Solid/circle-notch/26\").set({\n alignX: \"center\",\n padding: 6\n });\n loadingImage.getContentElement().addClass(\"rotate\");\n this._add(loadingImage);\n\n const params = {\n \"url\": {\n walletId,\n \"timePeriod\": nDays\n }\n };\n osparc.data.Resources.fetch(\"resourceUsage\", \"getUsagePerService\", params)\n .then(entries => {\n this._removeAll();\n if (entries && entries.length) {\n let totalCredits = 0;\n let totalHours = 0;\n entries.forEach(entry => {\n totalHours += entry[\"running_time_in_hours\"]\n totalCredits+= parseFloat(entry[\"osparc_credits\"])\n });\n let datas = [];\n entries.forEach(entry => {\n datas.push({\n service: entry[\"service_key\"],\n credits: -1*parseFloat(entry[\"osparc_credits\"]),\n hours: entry[\"running_time_in_hours\"],\n percentageHours: totalHours ? 100*entry[\"running_time_in_hours\"]/totalHours : 0,\n percentageCredits: totalCredits ? 100*parseFloat(entry[\"osparc_credits\"])/totalCredits : 0,\n });\n });\n datas.sort((a, b) => {\n if (b.credits !== a.credits) {\n return b.credits - a.credits;\n }\n return b.hours - a.hours;\n });\n // top 5 services\n datas = datas.slice(0, 5);\n datas.forEach(data => {\n const uiEntry = new osparc.desktop.credits.CreditsServiceListItem(data.service, data.credits, data.hours, totalCredits === 0 ? data.percentageHours : data.percentageCredits);\n this._add(uiEntry);\n });\n } else {\n const nothingFound = new qx.ui.basic.Label(this.tr(\"No usage found\")).set({\n font: \"text-14\",\n padding: 20,\n });\n this._add(nothingFound);\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.notification.NotificationUI\", {\n extend: qx.ui.core.Widget,\n\n construct: function(notification) {\n this.base(arguments);\n\n this.set({\n margin: 4,\n maxWidth: this.self().MAX_WIDTH,\n padding: this.self().PADDING,\n cursor: \"pointer\"\n });\n\n const layout = new qx.ui.layout.Grid(10, 3);\n layout.setColumnAlign(0, \"center\", \"middle\");\n layout.setColumnAlign(1, \"left\", \"middle\");\n layout.setColumnFlex(1, 1);\n this._setLayout(layout);\n\n if (notification) {\n this.setNotification(notification);\n }\n\n this.addListener(\"tap\", () => this.__notificationTapped());\n },\n\n events: {\n \"notificationTapped\": \"qx.event.type.Event\"\n },\n\n properties: {\n notification: {\n check: \"osparc.notification.Notification\",\n init: null,\n nullable: false,\n apply: \"__applyNotification\"\n }\n },\n\n statics: {\n MAX_WIDTH: 300,\n PADDING: 10\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/paw/14\",\n alignX: \"center\",\n alignY: \"middle\",\n minWidth: 18\n });\n this._add(control, {\n row: 0,\n column: 0,\n rowSpan: 3\n });\n break;\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\",\n rich: true,\n wrap: true\n });\n this._add(control, {\n row: 0,\n column: 1\n });\n break;\n case \"text\":\n control = new qx.ui.basic.Label().set({\n font: \"text-12\",\n rich: true,\n wrap: true\n });\n this._add(control, {\n row: 1,\n column: 1\n });\n break;\n case \"date\":\n control = new qx.ui.basic.Label().set({\n font: \"text-11\",\n rich: true,\n wrap: true\n });\n this._add(control, {\n row: 2,\n column: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __applyNotification: function(notification) {\n let resourceId = null;\n if (notification.getResourceId()) {\n resourceId = notification.getResourceId();\n } else if (notification.getActionablePath()) {\n // extract it from the actionable path\n const actionablePath = notification.getActionablePath();\n resourceId = actionablePath.split(\"/\")[1];\n }\n const userFromId = notification.getUserFromId();\n\n const icon = this.getChildControl(\"icon\");\n const titleLabel = this.getChildControl(\"title\");\n titleLabel.setValue(notification.getTitle());\n const descriptionLabel = this.getChildControl(\"text\");\n descriptionLabel.setValue(notification.getText());\n\n switch (notification.getCategory()) {\n case \"NEW_ORGANIZATION\":\n icon.setSource(\"@FontAwesome5Solid/users/14\");\n if (resourceId) {\n const org = osparc.store.Groups.getInstance().getOrganization(resourceId);\n if (org) {\n descriptionLabel.setValue(\"You're now member of '\" + org.getLabel() + \"'\")\n } else {\n this.setEnabled(false);\n }\n }\n break;\n case \"STUDY_SHARED\":\n icon.setSource(\"@FontAwesome5Solid/file/14\");\n if (resourceId) {\n const params = {\n url: {\n \"studyId\": resourceId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(study => {\n const studyAlias = osparc.product.Utils.getStudyAlias({\n firstUpperCase: true\n });\n titleLabel.setValue(`${studyAlias} '${study[\"name\"]}'`);\n })\n .catch(() => this.setEnabled(false));\n }\n if (userFromId) {\n const user = osparc.store.Groups.getInstance().getUserByUserId(userFromId);\n if (user) {\n descriptionLabel.setValue(\"was shared by \" + user.getLabel());\n }\n }\n break;\n case \"TEMPLATE_SHARED\":\n icon.setSource(\"@FontAwesome5Solid/copy/14\");\n if (resourceId) {\n const template = osparc.store.Store.getInstance().getTemplate(resourceId);\n if (template) {\n const templateAlias = osparc.product.Utils.getTemplateAlias({\n firstUpperCase: true\n });\n titleLabel.setValue(`${templateAlias} '${template[\"name\"]}'`);\n } else {\n this.setEnabled(false);\n }\n }\n if (userFromId) {\n const user = osparc.store.Groups.getInstance().getUserByUserId(userFromId);\n if (user) {\n descriptionLabel.setValue(\"was shared by \" + user.getLabel());\n }\n }\n break;\n case \"ANNOTATION_NOTE\":\n icon.setSource(\"@FontAwesome5Solid/file/14\");\n if (resourceId) {\n const params = {\n url: {\n \"studyId\": resourceId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(study => titleLabel.setValue(`Note added in '${study[\"name\"]}'`))\n .catch(() => this.setEnabled(false));\n }\n if (userFromId) {\n const user = osparc.store.Groups.getInstance().getUserByUserId(userFromId);\n if (user) {\n descriptionLabel.setValue(\"was added by \" + user.getLabel());\n }\n }\n break;\n case \"WALLET_SHARED\":\n icon.setSource(\"@MaterialIcons/account_balance_wallet/14\");\n break;\n }\n\n const date = this.getChildControl(\"date\");\n notification.bind(\"date\", date, \"value\", {\n converter: value => {\n if (value) {\n return osparc.utils.Utils.formatDateAndTime(new Date(value));\n }\n return \"\";\n }\n });\n\n const highlight = mouseOn => {\n this.set({\n backgroundColor: mouseOn ? \"strong-main\" : \"transparent\"\n })\n };\n this.addListener(\"mouseover\", () => highlight(true));\n this.addListener(\"mouseout\", () => highlight(false));\n highlight(false);\n },\n\n __notificationTapped: function() {\n const notification = this.getNotification();\n if (!notification) {\n return;\n }\n\n this.fireEvent(\"notificationTapped\");\n osparc.notification.Notifications.markAsRead(notification);\n this.__openActionablePath(notification);\n },\n\n __openActionablePath: function(notification) {\n const actionablePath = notification.getActionablePath();\n const items = actionablePath.split(\"/\");\n const resourceId = items.pop();\n const category = notification.getCategory();\n switch (category) {\n case \"NEW_ORGANIZATION\":\n this.__openOrganizationDetails(parseInt(resourceId));\n break;\n case \"TEMPLATE_SHARED\":\n case \"STUDY_SHARED\":\n case \"ANNOTATION_NOTE\":\n this.__openStudyDetails(resourceId, notification);\n break;\n case \"WALLET_SHARED\": {\n const walletsEnabled = osparc.desktop.credits.Utils.areWalletsEnabled();\n if (walletsEnabled) {\n this.__openWalletDetails(parseInt(resourceId));\n }\n break;\n }\n }\n },\n\n __openOrganizationDetails: function(orgId) {\n // make sure org is available\n const org = osparc.store.Groups.getInstance().getOrganization(orgId)\n if (org) {\n const orgsWindow = osparc.desktop.organizations.OrganizationsWindow.openWindow();\n orgsWindow.openOrganizationDetails(orgId);\n } else {\n const msg = this.tr(\"You don't have access anymore\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n }\n },\n\n __openStudyDetails: function(studyId, notification) {\n const params = {\n url: {\n \"studyId\": studyId\n }\n };\n osparc.data.Resources.getOne(\"studies\", params)\n .then(studyData => {\n if (studyData) {\n const studyDataCopy = osparc.data.model.Study.deepCloneStudyObject(studyData);\n studyDataCopy[\"resourceType\"] = notification.getCategory() === \"TEMPLATE_SHARED\" ? \"template\" : \"study\";\n const resourceDetails = new osparc.dashboard.ResourceDetails(studyDataCopy);\n const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n resourceDetails.addListener(\"openStudy\", () => {\n if (notification.getCategory() === \"STUDY_SHARED\") {\n const openCB = () => win.close();\n osparc.dashboard.ResourceBrowserBase.startStudyById(studyId, openCB);\n }\n });\n }\n })\n .catch(err => {\n console.error(err);\n const msg = this.tr(\"You don't have access anymore\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n });\n },\n\n __openWalletDetails: function(walletId) {\n const wallet = osparc.desktop.credits.Utils.getWallet(walletId);\n if (wallet) {\n const myAccountWindow = osparc.desktop.credits.BillingCenterWindow.openWindow();\n if (myAccountWindow.openWallets()) {\n const msg = this.tr(\"Do you want to make it the default Credit Account?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Default Credit Account\"),\n confirmAction: \"create\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n const preferenceSettings = osparc.Preferences.getInstance();\n preferenceSettings.requestChangePreferredWalletId(walletId);\n }\n }, this);\n }\n } else {\n const msg = this.tr(\"You don't have access anymore\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.preferences.pages.GeneralPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n this.__addCreditsIndicatorSettings();\n }\n\n const preferences = osparc.Preferences.getInstance();\n if (preferences.getLowDiskSpaceThreshold()) {\n this.__addLowDiskSpaceSetting();\n }\n\n if (osparc.desktop.credits.Utils.areWalletsEnabled()) {\n this.__addInactivitySetting();\n }\n\n // this.__addJobConcurrencySetting();\n\n if (osparc.product.Utils.isS4LProduct() || osparc.product.Utils.isProduct(\"s4llite\")) {\n this.__addS4LUserPrivacySettings();\n }\n },\n\n members: {\n __addCreditsIndicatorSettings: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Credits Indicator\"));\n\n const form = new qx.ui.form.Form();\n\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const walletIndicatorVisibilitySB = new qx.ui.form.SelectBox().set({\n allowGrowX: false\n });\n [{\n id: \"always\",\n label: \"Always\"\n }, {\n id: \"warning\",\n label: \"Warning\"\n }].forEach(options => {\n const lItem = new qx.ui.form.ListItem(options.label, null, options.id);\n walletIndicatorVisibilitySB.add(lItem);\n });\n const value = preferencesSettings.getWalletIndicatorVisibility();\n walletIndicatorVisibilitySB.getSelectables().forEach(selectable => {\n if (selectable.getModel() === value) {\n walletIndicatorVisibilitySB.setSelection([selectable]);\n }\n });\n walletIndicatorVisibilitySB.addListener(\"changeValue\", e => {\n const selectable = e.getData();\n osparc.Preferences.patchPreferenceField(\"walletIndicatorVisibility\", walletIndicatorVisibilitySB, selectable.getModel());\n });\n form.add(walletIndicatorVisibilitySB, this.tr(\"Show indicator\"));\n\n const creditsWarningThresholdField = new qx.ui.form.Spinner().set({\n minimum: 50,\n maximum: 10000,\n singleStep: 10,\n allowGrowX: false\n });\n preferencesSettings.bind(\"creditsWarningThreshold\", creditsWarningThresholdField, \"value\");\n creditsWarningThresholdField.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"creditsWarningThreshold\", creditsWarningThresholdField, e.getData()));\n form.add(creditsWarningThresholdField, this.tr(\"Show warning when credits below\"));\n\n box.add(new qx.ui.form.renderer.Single(form));\n\n this._add(box);\n },\n\n __addInactivitySetting: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Automatic Shutdown of Idle Instances\"));\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Enter 0 to disable this function\"), \"text-13-italic\");\n box.add(label);\n\n const form = new qx.ui.form.Form();\n const inactivitySpinner = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: Number.MAX_SAFE_INTEGER,\n singleStep: 1,\n allowGrowX: false\n });\n const preferences = osparc.Preferences.getInstance();\n preferences.bind(\"userInactivityThreshold\", inactivitySpinner, \"value\", {\n converter: value => Math.round(value / 60) // Stored in seconds, displayed in minutes\n });\n inactivitySpinner.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"userInactivityThreshold\", inactivitySpinner, e.getData() * 60));\n form.add(inactivitySpinner, this.tr(\"Idle time before closing (in minutes)\"));\n\n box.add(new qx.ui.form.renderer.Single(form));\n\n this._add(box);\n },\n\n __addJobConcurrencySetting: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Job Concurrency\"));\n const form = new qx.ui.form.Form();\n const jobConcurrencySpinner = new qx.ui.form.Spinner().set({\n minimum: 1,\n maximum: 10,\n singleStep: 1,\n allowGrowX: false,\n enabled: false\n });\n const preferences = osparc.Preferences.getInstance();\n preferences.bind(\"jobConcurrencyLimit\", jobConcurrencySpinner, \"value\");\n jobConcurrencySpinner.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"jobConcurrencyLimit\", jobConcurrencySpinner, e.getData()));\n form.add(jobConcurrencySpinner, this.tr(\"Maximum number of concurrent jobs\"));\n box.add(new qx.ui.form.renderer.Single(form));\n this._add(box);\n },\n\n __addLowDiskSpaceSetting: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Low Disk Space Threshold\"));\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Set the warning Threshold for Low Disk Space availability\"), \"text-13-italic\");\n box.add(label);\n const form = new qx.ui.form.Form();\n const diskUsageSpinner = new qx.ui.form.Spinner().set({\n minimum: 1,\n maximum: 10000,\n singleStep: 1,\n allowGrowX: false,\n enabled: true\n });\n const preferences = osparc.Preferences.getInstance();\n preferences.bind(\"lowDiskSpaceThreshold\", diskUsageSpinner, \"value\");\n\n diskUsageSpinner.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"lowDiskSpaceThreshold\", diskUsageSpinner, e.getData()));\n form.add(diskUsageSpinner, this.tr(\"Threshold (in GB)\"));\n box.add(new qx.ui.form.renderer.Single(form));\n this._add(box);\n },\n\n __addS4LUserPrivacySettings: function() {\n const box = osparc.ui.window.TabbedView.createSectionBox(\"Privacy Settings\");\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Help us improve Sim4Life user experience\"), \"text-13-italic\");\n box.add(label);\n\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const cbAllowMetricsCollection = new qx.ui.form.CheckBox(this.tr(\"Share usage data\"));\n preferencesSettings.bind(\"allowMetricsCollection\", cbAllowMetricsCollection, \"value\");\n cbAllowMetricsCollection.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"allowMetricsCollection\", cbAllowMetricsCollection, e.getData()));\n box.add(cbAllowMetricsCollection);\n\n this._add(box);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Confirmations in preferences dialog\n */\n\nqx.Class.define(\"osparc.desktop.preferences.pages.ConfirmationsPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n const confirmationSettings = this.__createConfirmationsSettings();\n this._add(confirmationSettings);\n\n if (osparc.product.Utils.showPreferencesExperimental()) {\n const experimentalSettings = this.__createExperimentalSettings();\n this._add(experimentalSettings);\n }\n },\n\n members: {\n __createConfirmationsSettings: function() {\n // layout\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Ask for confirmation for the following actions:\"));\n this._add(label);\n\n this._add(new qx.ui.core.Spacer(null, 10));\n\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const box = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({\n paddingLeft: 10\n });\n\n const cbConfirmBackToDashboard = new qx.ui.form.CheckBox(this.tr(\"Go back to the Dashboard\"));\n preferencesSettings.bind(\"confirmBackToDashboard\", cbConfirmBackToDashboard, \"value\");\n cbConfirmBackToDashboard.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"confirmBackToDashboard\", cbConfirmBackToDashboard, e.getData()));\n box.add(cbConfirmBackToDashboard);\n\n const studyAlias = osparc.product.Utils.getStudyAlias({firstUpperCase: true});\n const cbConfirmDeleteStudy = new qx.ui.form.CheckBox(this.tr(\"Delete a \") + studyAlias);\n preferencesSettings.bind(\"confirmDeleteStudy\", cbConfirmDeleteStudy, \"value\");\n cbConfirmDeleteStudy.addListener(\"changeValue\", e => {\n if (e.getData()) {\n osparc.Preferences.patchPreferenceField(\"confirmDeleteStudy\", cbConfirmDeleteStudy, true);\n } else {\n const msg = this.tr(\"Warning: deleting a \") + studyAlias + this.tr(\" cannot be undone\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n confirmText: this.tr(\"Understood\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n osparc.Preferences.patchPreferenceField(\"confirmDeleteStudy\", cbConfirmDeleteStudy, false);\n } else {\n cbConfirmDeleteStudy.setValue(true);\n }\n }, this);\n }\n }, this);\n box.add(cbConfirmDeleteStudy);\n\n if (!(\n osparc.product.Utils.isProduct(\"tis\") ||\n osparc.product.Utils.isProduct(\"tiplite\") ||\n osparc.product.Utils.isProduct(\"s4llite\")\n )) {\n const cbConfirmDeleteNode = new qx.ui.form.CheckBox(this.tr(\"Delete a Node\"));\n preferencesSettings.bind(\"confirmDeleteNode\", cbConfirmDeleteNode, \"value\");\n cbConfirmDeleteNode.addListener(\"changeValue\", e => {\n if (e.getData()) {\n osparc.Preferences.patchPreferenceField(\"confirmDeleteNode\", cbConfirmDeleteNode, true);\n } else {\n const msg = this.tr(\"Warning: deleting a node cannot be undone\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n confirmText: this.tr(\"Understood\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n osparc.Preferences.patchPreferenceField(\"confirmDeleteNode\", cbConfirmDeleteNode, false);\n } else {\n cbConfirmDeleteNode.setValue(true);\n }\n }, this);\n }\n }, this);\n box.add(cbConfirmDeleteNode);\n\n const cbConfirmStopNode = new qx.ui.form.CheckBox(this.tr(\"Stop Node\"));\n preferencesSettings.bind(\"confirmStopNode\", cbConfirmStopNode, \"value\");\n cbConfirmStopNode.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"confirmStopNode\", cbConfirmStopNode, e.getData()));\n box.add(cbConfirmStopNode);\n\n const cbSnapNodeToGrid = new qx.ui.form.CheckBox(this.tr(\"Snap Node to Grid\"));\n preferencesSettings.bind(\"snapNodeToGrid\", cbSnapNodeToGrid, \"value\");\n cbSnapNodeToGrid.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"snapNodeToGrid\", cbSnapNodeToGrid, e.getData()));\n box.add(cbSnapNodeToGrid);\n }\n\n return box;\n },\n\n __createExperimentalSettings: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(\"Experimental preferences\");\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\n \"This is a list of experimental preferences\"\n ));\n box.add(label);\n\n const preferencesSettings = osparc.Preferences.getInstance();\n\n const cbAutoPorts = new qx.ui.form.CheckBox(this.tr(\"Connect ports automatically\"));\n preferencesSettings.bind(\"autoConnectPorts\", cbAutoPorts, \"value\");\n cbAutoPorts.addListener(\"changeValue\", e => osparc.Preferences.patchPreferenceField(\"autoConnectPorts\", cbAutoPorts, e.getData()));\n box.add(cbAutoPorts);\n\n return box;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Tokens page\n * - access token\n */\n\nqx.Class.define(\"osparc.desktop.preferences.pages.TokensPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n this._add(this.__createAPIKeysSection());\n this._add(this.__createTokensSection());\n\n this.__rebuildAPIKeysList();\n this.__rebuildTokensList();\n },\n\n members: {\n __apiKeysList: null,\n __validTokensGB: null,\n __supportedExternalsGB: null,\n __requestAPIKeyBtn: null,\n\n __createAPIKeysSection: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"API Keys\"));\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\n \"List API keys associated to your account.\"\n ));\n box.add(label);\n\n const apiKeysList = this.__apiKeysList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));\n box.add(apiKeysList);\n\n const requestAPIKeyBtn = this.__requestAPIKeyBtn = new osparc.ui.form.FetchButton().set({\n appearance: \"strong-button\",\n label: this.tr(\"New API Key\"),\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n requestAPIKeyBtn.addListener(\"execute\", () => {\n this.__requestAPIKey();\n }, this);\n box.add(requestAPIKeyBtn);\n\n return box;\n },\n\n __requestAPIKey: function() {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.apikey.create\", true)) {\n return;\n }\n\n const createAPIKeyWindow = new osparc.desktop.preferences.window.CreateAPIKey();\n createAPIKeyWindow.addListener(\"finished\", e => {\n const formData = e.getData();\n const params = {\n data: {\n \"displayName\": formData[\"name\"]\n }\n };\n if (formData[\"expiration\"]) {\n const seconds = parseInt((new Date(formData[\"expiration\"]).getTime() - new Date().getTime()) / 1000);\n params.data[\"expiration\"] = seconds\n }\n createAPIKeyWindow.close();\n this.__requestAPIKeyBtn.setFetching(true);\n osparc.data.Resources.fetch(\"apiKeys\", \"post\", params)\n .then(data => {\n this.__rebuildAPIKeysList();\n\n const key = data[\"apiKey\"];\n const secret = data[\"apiSecret\"];\n const baseUrl = data[\"apiBaseUrl\"];\n const showAPIKeyWindow = new osparc.desktop.preferences.window.ShowAPIKey(key, secret, baseUrl);\n showAPIKeyWindow.center();\n showAPIKeyWindow.open();\n })\n .catch(err => {\n const errorMsg = err.message || this.tr(\"Cannot create API Key\");\n osparc.FlashMessenger.getInstance().logAs(errorMsg, \"ERROR\");\n console.error(err);\n })\n .finally(() => this.__requestAPIKeyBtn.setFetching(false));\n }, this);\n createAPIKeyWindow.open();\n },\n\n __rebuildAPIKeysList: function() {\n this.__apiKeysList.removeAll();\n osparc.data.Resources.get(\"apiKeys\")\n .then(apiKeys => {\n apiKeys.forEach(apiKey => {\n const apiKeyForm = this.__createAPIKeyEntry(apiKey);\n this.__apiKeysList.add(apiKeyForm);\n });\n })\n .catch(err => console.error(err));\n },\n\n __createAPIKeyEntry: function(apiKey) {\n const grid = this.__createValidEntryLayout();\n\n const nameLabel = new qx.ui.basic.Label(apiKey[\"displayName\"]);\n grid.add(nameLabel, {\n row: 0,\n column: 0\n });\n\n const delAPIKeyBtn = new qx.ui.form.Button(null, \"@FontAwesome5Solid/trash/14\");\n delAPIKeyBtn.addListener(\"execute\", () => this.__deleteAPIKey(apiKey[\"id\"]), this);\n grid.add(delAPIKeyBtn, {\n row: 0,\n column: 1\n });\n\n return grid;\n },\n\n __deleteAPIKey: function(apiKeyId) {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.apikey.delete\", true)) {\n return;\n }\n\n const msg = this.tr(\"Do you want to delete the API key?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete API key\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n const params = {\n url: {\n \"apiKeyId\": apiKeyId\n }\n };\n osparc.data.Resources.fetch(\"apiKeys\", \"delete\", params)\n .then(() => this.__rebuildAPIKeysList())\n .catch(err => {\n const errorMsg = err.message || this.tr(\"Cannot delete API Key\");\n osparc.FlashMessenger.getInstance().logAs(errorMsg, \"ERROR\");\n console.error(err)\n });\n }\n }, this);\n },\n\n __supportedExternalServices: function() {\n const supportedServices = [{\n name: \"pennsieve-datcore\",\n label: \"DAT-Core\",\n link: \"https://app.pennsieve.io\",\n logo: \"osparc/blackfynn-logo.png\"\n }];\n return supportedServices;\n },\n\n __createTokensSection: function() {\n // layout\n const box = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"External Service Tokens\"));\n\n const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(\"Enter the API tokens to access external services.\"));\n box.add(label);\n\n const validTokensGB = this.__validTokensGB = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Existing Tokens\"));\n box.add(validTokensGB);\n\n const supportedExternalsGB = this.__supportedExternalsGB = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Supported services\")).set({\n layout: new qx.ui.layout.Flow(5, 5)\n });\n box.add(supportedExternalsGB);\n\n return box;\n },\n\n __rebuildTokensList: function() {\n this.__validTokensGB.exclude();\n this.__supportedExternalsGB.exclude();\n osparc.data.Resources.get(\"tokens\")\n .then(tokensList => {\n this.__validTokensGB.removeAll();\n this.__supportedExternalsGB.removeAll();\n\n const supportedExternalServices = osparc.utils.Utils.deepCloneObject(this.__supportedExternalServices());\n\n tokensList.forEach(token => {\n const tokenForm = this.__createTokenEntry(token);\n this.__validTokensGB.add(tokenForm);\n const idx = supportedExternalServices.findIndex(srv => srv.name === token.service);\n if (idx > -1) {\n supportedExternalServices.splice(idx, 1);\n }\n });\n\n supportedExternalServices.forEach(srv => {\n const btn = new qx.ui.form.Button(srv.label, srv.logo).set({\n iconPosition: \"top\",\n width: 80,\n height: 80\n });\n btn.getChildControl(\"icon\").set({\n scale: true,\n maxWidth: 50,\n maxHeight: 50\n });\n btn.addListener(\"execute\", () => {\n const newTokenForm = this.__createNewTokenForm(srv);\n const form = new qx.ui.form.renderer.Single(newTokenForm);\n const win = osparc.ui.window.Window.popUpInWindow(form, srv.label, 350, 200);\n newTokenForm.addListener(\"added\", () => {\n this.__rebuildTokensList();\n win.close();\n });\n }, this);\n this.__supportedExternalsGB.add(btn);\n });\n\n if (tokensList.length) {\n this.__validTokensGB.show();\n }\n if (supportedExternalServices.length) {\n this.__supportedExternalsGB.show();\n }\n })\n .catch(err => console.error(err));\n },\n\n __createTokenEntry: function(token) {\n const grid = this.__createValidEntryLayout();\n\n const service = token[\"service\"];\n const nameLabel = new qx.ui.basic.Label(service);\n grid.add(nameLabel, {\n row: 0,\n column: 0\n });\n\n if (\"keyLabel\" in token) {\n const label = token[\"keyLabel\"];\n const nameVal = new qx.ui.basic.Label(label);\n grid.add(nameVal, {\n row: 0,\n column: 1\n });\n }\n\n const delTokenBtn = new qx.ui.form.Button().set({\n appearance: \"danger-button\",\n icon: \"@FontAwesome5Solid/trash/14\"\n });\n delTokenBtn.addListener(\"execute\", e => {\n this.__deleteToken(service);\n }, this);\n grid.add(delTokenBtn, {\n row: 0,\n column: 2\n });\n\n return grid;\n },\n\n __deleteToken: function(service) {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.token.delete\", true)) {\n return;\n }\n\n const msg = this.tr(\"Do you want to delete the Token?\");\n const win = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete Token\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n win.center();\n win.open();\n win.addListener(\"close\", () => {\n if (win.getConfirmed()) {\n const params = {\n url: {\n service\n }\n };\n osparc.data.Resources.fetch(\"tokens\", \"delete\", params)\n .then(() => this.__rebuildTokensList())\n .catch(err => console.error(err));\n }\n }, this);\n },\n\n __createValidEntryLayout: function() {\n const height = 20;\n const gr = new qx.ui.layout.Grid(10, 3);\n gr.setColumnFlex(0, 1);\n gr.setRowHeight(0, height); // Link\n gr.setRowHeight(1, height); // Token entry\n const grid = new qx.ui.container.Composite(gr);\n return grid;\n },\n\n __createNewTokenForm: function(supportedExternalServices) {\n const form = new qx.ui.form.Form();\n\n form.addGroupHeader(\"Add new service API tokens\");\n\n const newTokenService = new qx.ui.form.TextField();\n newTokenService.set({\n value: supportedExternalServices[\"name\"],\n readOnly: true\n });\n form.add(newTokenService, this.tr(\"Service\"));\n\n const newTokenKey = new qx.ui.form.TextField();\n newTokenKey.set({\n placeholder: this.tr(\"Input your token key\")\n });\n form.add(newTokenKey, this.tr(\"Key\"));\n\n const newTokenSecret = new qx.ui.form.TextField();\n newTokenSecret.set({\n placeholder: this.tr(\"Input your token secret\")\n });\n form.add(newTokenSecret, this.tr(\"Secret\"));\n\n const addTokenBtn = new osparc.ui.form.FetchButton(this.tr(\"Add\"));\n addTokenBtn.addListener(\"execute\", e => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.token.create\", true)) {\n return;\n }\n const params = {\n data: {\n \"service\": newTokenService.getValue(),\n \"token_key\": newTokenKey.getValue(),\n \"token_secret\": newTokenSecret.getValue()\n }\n };\n addTokenBtn.setFetching(true);\n osparc.data.Resources.fetch(\"tokens\", \"post\", params)\n .then(() => form.fireEvent(\"added\"))\n .catch(err => console.error(err))\n .finally(() => addTokenBtn.setFetching(false));\n }, this);\n form.addButton(addTokenBtn);\n\n return form;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * Preferences page for managing the user's tags.\n */\nqx.Class.define(\"osparc.desktop.preferences.pages.TagsPage\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(15));\n\n const studiesLabel = osparc.product.Utils.getStudyAlias({plural: true});\n const studyLabel = osparc.product.Utils.getStudyAlias();\n const msg = this.tr(\"\\\n Tags help you organize the \") + studiesLabel + this.tr(\" in the Dashboard by categorizing topics, making it easier to search and filter. \\\n Once the tags are created, they can be assigned to the \") + studyLabel + this.tr(\" via 'More options...' on the \") + studyLabel + this.tr(\" cards.\");\n const intro = osparc.ui.window.TabbedView.createHelpLabel(msg);\n this._add(intro);\n\n this._add(new qx.ui.core.Spacer(null, 10));\n\n this.__renderLayout();\n },\n\n members: {\n __tagsContainer: null,\n\n __renderLayout: async function() {\n // Tags\n this.__tagsContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));\n this.__tagsContainer.set({\n paddingLeft: 10\n });\n const tagContainerScroll = new qx.ui.container.Scroll(this.__tagsContainer);\n this._add(tagContainerScroll, {\n flex: 1\n });\n\n const tags = osparc.store.Tags.getInstance().getTags();\n for (const tag of tags) {\n await osparc.store.Tags.getInstance().fetchAccessRights(tag);\n }\n const tagItems = tags.map(tag => new osparc.form.tag.TagItem().set({tag}));\n tagItems.forEach(tagItem => {\n this.__tagsContainer.add(tagItem);\n this.__attachTagItemEvents(tagItem);\n });\n\n // New tag Button\n const addTagButton = new qx.ui.form.Button().set({\n appearance: \"form-button-outlined\",\n label: this.tr(\"New Tag\"),\n icon: \"@FontAwesome5Solid/plus/14\"\n });\n osparc.utils.Utils.setIdToWidget(addTagButton, \"addTagBtn\");\n addTagButton.addListener(\"execute\", () => {\n const newItem = new osparc.form.tag.TagItem().set({\n mode: osparc.form.tag.TagItem.modes.EDIT\n });\n this.__tagsContainer.add(newItem);\n this.__attachTagItemEvents(newItem);\n\n // scroll down\n const height = tagContainerScroll.getSizeHint().height;\n tagContainerScroll.scrollToY(height);\n });\n\n // New tag button\n const buttonContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignX: \"center\"\n }));\n buttonContainer.add(addTagButton);\n this._add(buttonContainer);\n },\n\n __attachTagItemEvents: function(tagItem) {\n tagItem.addListener(\"cancelNewTag\", e => this.__tagsContainer.remove(e.getTarget()), this);\n tagItem.addListener(\"deleteTag\", e => this.__tagsContainer.remove(e.getTarget()));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.navigation.MiniProfileMenuButton\", {\n extend: qx.ui.menu.Button,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox());\n this._add(osparc.desktop.account.MyAccount.createMiniProfileView());\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2021 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * Switch button for controlling the theme\n */\n\nqx.Class.define(\"osparc.ui.switch.ThemeSwitcherMenuBtn\", {\n extend: qx.ui.menu.Button,\n\n construct: function() {\n this.base(arguments);\n\n if (!osparc.ui.switch.ThemeSwitcher.isSwitchUseful()) {\n this.setVisibility(\"excluded\");\n return;\n }\n\n osparc.ui.switch.ThemeSwitcher.bindLabelToTheme(this);\n osparc.ui.switch.ThemeSwitcher.bindIconToTheme(this, 14);\n this.addListener(\"execute\", () => osparc.ui.switch.ThemeSwitcher.switchTheme());\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.admin.AdminCenterWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function() {\n this.base(arguments, \"admin-center\", this.tr(\"Admin Center\"));\n\n const width = 800;\n const height = 600;\n this.set({\n width: width,\n height: height,\n });\n\n const adminCenter = new osparc.admin.AdminCenter();\n this._setTabbedView(adminCenter);\n },\n\n statics: {\n openWindow: function() {\n const accountWindow = new osparc.admin.AdminCenterWindow();\n accountWindow.center();\n accountWindow.open();\n return accountWindow;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.POCenterWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function() {\n this.base(arguments, \"po-center\", this.tr(\"PO Center\"));\n\n const width = 800;\n const height = 600;\n this.set({\n width,\n height\n });\n\n const poCenter = new osparc.po.POCenter();\n this._setTabbedView(poCenter);\n },\n\n statics: {\n openWindow: function() {\n const accountWindow = new osparc.po.POCenterWindow();\n accountWindow.center();\n accountWindow.open();\n return accountWindow;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tester.TesterCenterWindow\", {\n extend: osparc.ui.window.TabbedWindow,\n\n construct: function() {\n this.base(arguments, \"tester-center\", this.tr(\"Tester Center\"));\n\n const width = 800;\n const maxHeight = 800;\n this.set({\n width,\n maxHeight,\n });\n\n const testerCenter = new osparc.tester.TesterCenter();\n this._setTabbedView(testerCenter);\n },\n\n statics: {\n openWindow: function() {\n const accountWindow = new osparc.tester.TesterCenterWindow();\n accountWindow.center();\n accountWindow.open();\n return accountWindow;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.product.AboutProduct\", {\n extend: osparc.ui.window.Window,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments, this.tr(\"About Product\"));\n\n const displayName = osparc.store.StaticInfo.getInstance().getDisplayName();\n this.setCaption(this.tr(\"About \") + displayName);\n\n this.set({\n layout: new qx.ui.layout.VBox(10),\n width: this.self().WIDTH,\n contentPadding: this.self().PADDING,\n showMaximize: false,\n showMinimize: false,\n resizable: true,\n centerOnAppear: true,\n clickAwayClose: true,\n modal: true\n });\n\n this.__buildLayout();\n },\n\n statics: {\n WIDTH: 500,\n PADDING: 15\n },\n\n members: {\n __buildLayout: function() {\n switch (osparc.product.Utils.getProductName()) {\n case \"s4l\":\n case \"s4lacad\":\n this.__buildS4LLayout();\n break;\n case \"s4llite\":\n this.__buildS4LLiteLayout();\n break;\n case \"tis\":\n case \"tiplite\":\n this.__buildTIPLayout();\n break;\n default: {\n const noInfoText = this.tr(\"Information not available\");\n const noInfoLabel = osparc.product.quickStart.Utils.createLabel(noInfoText);\n this.add(noInfoLabel);\n break;\n }\n }\n },\n\n __buildS4LLayout: function() {\n const licenseUrl = osparc.store.Support.getLicenseURL();\n const text = this.tr(`\n Sim4Life.web is a native implementation of the most advanced simulation platform, Sim4Life, in the cloud. \\\n The platform empowers users to simulate, analyze, and predict complex, multifaceted, and dynamic biological interactions within the full anatomical complexity of the human body. \\\n It provides the ability to set up and run complex simulations directly within any browser, utilizing cloud technology.\n
\n Sim4Life.web makes use of technologies developed by our research partner for the o2S2PARC platform, the IT’IS Foundation, and co-funded by the U.S. National Institutes of Health’s SPARC initiative.\\\n
\n For more information about Sim4Life, please visit ${osparc.utils.Utils.createHTMLLink(\"sim4life.swiss\", \"https://sim4life.swiss/\")}.\n
\n To review license agreements, click ${osparc.utils.Utils.createHTMLLink(\"here\", licenseUrl)}.\n
\n Send us an email ${this.__getMailTo()}\n `);\n\n const label = osparc.product.quickStart.Utils.createLabel(text);\n this.add(label);\n },\n\n __buildS4LLiteLayout: function() {\n // https://zurichmedtech.github.io/s4l-lite-manual/#/docs/what_is_s4l_lite\n const introText = \"Sim4Life.lite is a powerful web-based simulation platform that allows you to model and analyze real-world phenomena and to design complex technical devices in a validated environment. With its intuitive interface and advanced tools, Sim4Life.lite makes it easy to develop your simulation project, wherever you are.\";\n\n const licenseUrl = \"https://zurichmedtech.github.io/s4l-lite-manual/#/docs/licensing/copyright_Sim4Life\";\n const licenseText = `Click ${osparc.utils.Utils.createHTMLLink(\"here\", licenseUrl)} to read the license agreements.`;\n\n // more info ZMT website\n const moreInfoUrl = \"https://zmt.swiss/\";\n const moreInfoText = `For more information about Sim4Life.lite, visit ${osparc.utils.Utils.createHTMLLink(\"our website\", moreInfoUrl)}.`;\n\n const emailText = `Send us an email ${this.__getMailTo()}`;\n\n [\n introText,\n licenseText,\n moreInfoText,\n emailText,\n ].forEach(text => {\n const label = osparc.product.quickStart.Utils.createLabel(text);\n this.add(label);\n });\n\n this.__addCopyright();\n },\n\n __buildTIPLayout: function() {\n const licenseUrl = osparc.store.Support.getLicenseURL();\n const text = this.tr(`\n TIP (TI Planning Tool) is an innovative online platform designed to optimize targeted neurostimulation protocols using \\\n temporal interference (TI) stimulation. Developed by IT'IS Foundation, TIP simplifies the complex process of planning deep \\\n brain stimulation.\n
\n Powered by o2S2PARC technology, TIP utilizes sophisticated electromagnetic simulations, detailed anatomical head models, \\\n and automated optimization to generate comprehensive reports with quantitative and visual information. This tool is \\\n invaluable for neuroscientists and brain stimulation experts, especially those with limited computational modeling experience, \\\n enabling them to create effective and safe stimulation protocols for their research. \\\n
\n For more information about TIP, please visit ${osparc.utils.Utils.createHTMLLink(\"itis.swiss\", \"https://itis.swiss/tools-and-systems/ti-planning/overview\")}.\n
\n To review license agreements, click ${osparc.utils.Utils.createHTMLLink(\"here\", licenseUrl)}.\n
\n Send us an email ${this.__getMailTo()}\n `);\n\n const label = osparc.product.quickStart.Utils.createLabel(text);\n this.add(label);\n },\n\n __getMailTo: function() {\n const supportEmail = osparc.store.VendorInfo.getInstance().getSupportEmail();\n const productName = osparc.store.StaticInfo.getInstance().getDisplayName();\n return osparc.store.Support.mailToLink(supportEmail, \"Support \" + productName, false);\n },\n\n __addCopyright: function() {\n const copyrightLink = new osparc.ui.basic.LinkLabel().set({\n font: \"link-label-14\"\n });\n const vendor = osparc.store.VendorInfo.getInstance().getVendor();\n if (vendor && \"url\" in vendor && \"copyright\" in vendor) {\n copyrightLink.set({\n value: vendor.copyright,\n url: vendor.url\n });\n }\n this.add(copyrightLink);\n },\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Fabian Jakobs (fjakobs)\n\n************************************************************************ */\n\n/**\n * The HoverButton is an {@link qx.ui.basic.Atom}, which fires repeatedly\n * execute events while the pointer is over the widget.\n *\n * The rate at which the execute event is fired accelerates is the pointer keeps\n * inside of the widget. The initial delay and the interval time can be set using\n * the properties {@link #firstInterval} and {@link #interval}. The\n * {@link #execute} events will be fired in a shorter amount of time if the pointer\n * remains over the widget, until the min {@link #minTimer} is reached.\n * The {@link #timerDecrease} property sets the amount of milliseconds which will\n * decreased after every firing.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * var button = new qx.ui.form.HoverButton(\"Hello World\");\n *\n * button.addListener(\"execute\", function(e) {\n * alert(\"Button is hovered\");\n * }, this);\n *\n * this.getRoot.add(button);\n * \n *\n * This example creates a button with the label \"Hello World\" and attaches an\n * event listener to the {@link #execute} event.\n *\n * *External Documentation*\n *\n * \n * Documentation of this widget in the qooxdoo manual.\n */\nqx.Class.define(\"qx.ui.form.HoverButton\",\n{\n extend : qx.ui.basic.Atom,\n include : [qx.ui.core.MExecutable],\n implement : [qx.ui.form.IExecutable],\n\n /**\n * @param label {String} Label to use\n * @param icon {String?null} Icon to use\n */\n construct : function(label, icon)\n {\n this.base(arguments, label, icon);\n\n this.addListener(\"pointerover\", this._onPointerOver, this);\n this.addListener(\"pointerout\", this._onPointerOut, this);\n\n this.__timer = new qx.event.AcceleratingTimer();\n this.__timer.addListener(\"interval\", this._onInterval, this);\n },\n\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"hover-button\"\n },\n\n /**\n * Interval used after the first run of the timer. Usually a smaller value\n * than the \"firstInterval\" property value to get a faster reaction.\n */\n interval :\n {\n check : \"Integer\",\n init : 80\n },\n\n /**\n * Interval used for the first run of the timer. Usually a greater value\n * than the \"interval\" property value to a little delayed reaction at the first\n * time.\n */\n firstInterval :\n {\n check : \"Integer\",\n init : 200\n },\n\n /** This configures the minimum value for the timer interval. */\n minTimer :\n {\n check : \"Integer\",\n init : 20\n },\n\n /** Decrease of the timer on each interval (for the next interval) until minTimer reached. */\n timerDecrease :\n {\n check : \"Integer\",\n init : 2\n }\n },\n\n\n members :\n {\n __timer : null,\n\n\n /**\n * Start timer on pointer over\n *\n * @param e {qx.event.type.Pointer} The pointer event\n */\n _onPointerOver : function(e)\n {\n if (!this.isEnabled() || e.getTarget() !== this) {\n return;\n }\n\n this.__timer.set({\n interval: this.getInterval(),\n firstInterval: this.getFirstInterval(),\n minimum: this.getMinTimer(),\n decrease: this.getTimerDecrease()\n }).start();\n\n this.addState(\"hovered\");\n },\n\n\n /**\n * Stop timer on pointer out\n *\n * @param e {qx.event.type.Pointer} The pointer event\n */\n _onPointerOut : function(e)\n {\n this.__timer.stop();\n this.removeState(\"hovered\");\n\n if (!this.isEnabled() || e.getTarget() !== this) {\n return;\n }\n },\n\n\n /**\n * Fire execute event on timer interval event\n */\n _onInterval : function()\n {\n if (this.isEnabled())\n {\n this.execute();\n } else {\n this.__timer.stop();\n }\n }\n },\n\n\n destruct : function() {\n this._disposeObjects(\"__timer\");\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.list.ListItemWithMenu\", {\n extend: osparc.ui.list.ListItem,\n type: \"abstract\",\n\n properties: {\n accessRights: {\n check: \"Object\",\n apply: \"_applyAccessRights\",\n event: \"changeAccessRights\",\n nullable: true\n },\n\n showOptions: {\n check: \"Boolean\",\n apply: \"__applyShowOptions\",\n event: \"changeShowOptions\",\n nullable: true\n },\n\n options: {\n check: \"Array\",\n nullable: true,\n event: \"changeOptions\",\n apply: \"__applyOptions\"\n }\n },\n\n statics: {\n ICON_SIZE: 24\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"options\": {\n const iconSize = this.self().ICON_SIZE;\n control = new qx.ui.form.MenuButton().set({\n maxWidth: iconSize,\n maxHeight: iconSize,\n alignX: \"center\",\n alignY: \"middle\",\n icon: \"@FontAwesome5Solid/ellipsis-v/\"+(iconSize-11),\n focusable: false\n });\n this._add(control, {\n row: 0,\n column: 3,\n rowSpan: 2\n });\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n _applyAccessRights: function(value) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.hide();\n\n if (value === null) {\n return;\n }\n\n this._setRole();\n\n this._getInfoButton();\n\n this.__applyOptions();\n },\n\n _setRole: function() {\n const accessRights = this.getAccessRights();\n const role = this.getChildControl(\"role\");\n if (\n \"getDelete\" in accessRights && accessRights.getDelete() ||\n \"delete\" in accessRights && accessRights[\"delete\"]\n ) {\n role.setValue(osparc.data.Roles.ORG[3].label);\n } else if (\n \"getWrite\" in accessRights && accessRights.getWrite() ||\n \"write\" in accessRights && accessRights[\"write\"]\n ) {\n role.setValue(osparc.data.Roles.ORG[2].label);\n } else if (\n (\"getRead\" in accessRights && accessRights.getRead()) ||\n (\"getExecute\" in accessRights && accessRights.getExecute()) ||\n (\"read\" in accessRights && accessRights[\"read\"]) ||\n (\"execute\" in accessRights && accessRights[\"execute\"])\n ) {\n role.setValue(osparc.data.Roles.ORG[1].label);\n } else {\n role.setValue(osparc.data.Roles.ORG[0].label);\n }\n },\n\n _getInfoButton: function() {\n return null;\n },\n\n _getOptionsMenu: function() {\n return null;\n },\n\n __applyShowOptions: function(value) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.setVisibility(value ? \"visible\" : \"hidden\");\n },\n\n __applyOptions: function() {\n const menu = this._getOptionsMenu();\n if (menu && menu.getChildren() && menu.getChildren().length) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.setMenu(menu);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.WalletListItem\", {\n extend: osparc.ui.list.ListItemWithMenu,\n\n construct: function() {\n this.base(arguments);\n\n const creditsCol = 7;\n const layout = this._getLayout();\n layout.setSpacingX(10);\n layout.setColumnWidth(creditsCol, 110);\n layout.setColumnAlign(creditsCol, \"right\", \"middle\");\n\n this.__buildLayout();\n },\n\n properties: {\n appearance: {\n refine : true,\n init : \"none\"\n },\n\n creditsAvailable: {\n check: \"Number\",\n nullable: false,\n apply: \"__applyCreditsAvailable\"\n },\n\n status: {\n check: [\"ACTIVE\", \"INACTIVE\"],\n init: null,\n nullable: false,\n apply: \"__applyStatus\"\n },\n\n preferredWallet: {\n check: \"Boolean\",\n init: null,\n nullable: false,\n apply: \"__applyPreferredWallet\"\n },\n\n autoRecharge: {\n check: \"Object\",\n nullable: true,\n event: \"changeAutoRecharge\"\n }\n },\n\n events: {\n \"openShareWallet\": \"qx.event.type.Data\",\n \"openEditWallet\": \"qx.event.type.Data\",\n \"buyCredits\": \"qx.event.type.Data\",\n \"toggleFavourite\": \"qx.event.type.Data\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"thumbnail\":\n control = null\n break\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n control.bind(\"value\", control, \"toolTipText\");\n this._add(control, {\n row: 0,\n column: 0,\n colSpan: 2\n });\n break;\n case \"subtitle\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\",\n rich: true\n });\n this._add(control, {\n row: 1,\n column: 0,\n colSpan: 2\n });\n break;\n case \"credits-indicator\":\n control = new osparc.desktop.credits.CreditsIndicator().set({\n allowStretchY: false\n });\n control.getChildControl(\"credits-text\").set({\n alignX: \"right\"\n });\n this._add(control, {\n row: 0,\n column: 7,\n rowSpan: 2\n });\n break;\n case \"status-button\":\n control = new qx.ui.form.Button().set({\n maxHeight: 30,\n width: 62,\n alignX: \"center\",\n alignY: \"middle\",\n enabled: false\n });\n control.addListener(\"execute\", () => {\n const walletId = this.getKey();\n const store = osparc.store.Store.getInstance();\n const found = store.getWallets().find(wallet => wallet.getWalletId() === parseInt(walletId));\n if (found) {\n // switch status\n const newStatus = found.getStatus() === \"ACTIVE\" ? \"INACTIVE\" : \"ACTIVE\";\n const params = {\n url: {\n \"walletId\": walletId\n },\n data: {\n \"name\": found.getName(),\n \"description\": found.getDescription(),\n \"thumbnail\": found.getThumbnail(),\n \"status\": newStatus\n }\n };\n osparc.data.Resources.fetch(\"wallets\", \"put\", params)\n .then(() => found.setStatus(newStatus))\n .catch(err => {\n console.error(err);\n const msg = err.message || (this.tr(\"Something went wrong updating the state\"));\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n });\n }\n }, this);\n this._add(control, {\n row: 0,\n column: 4,\n rowSpan: 2\n });\n break;\n case \"favourite-button\":\n control = new qx.ui.form.Button().set({\n iconPosition: \"right\",\n width: 110, // make Primary and Secondary buttons same width\n maxHeight: 30,\n alignY: \"middle\"\n });\n control.addListener(\"execute\", () => this.fireDataEvent(\"toggleFavourite\", {\n walletId: this.getKey()\n }), this);\n this._add(control, {\n row: 0,\n column: 8,\n rowSpan: 2\n });\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __buildLayout() {\n this._removeAll();\n\n this.__autorechargeBtn = new qx.ui.form.ToggleButton(this.tr(\"Auto-recharge\")).set({\n maxHeight: 30,\n alignX: \"center\",\n alignY: \"middle\",\n focusable: false\n });\n osparc.utils.Utils.setIdToWidget(this.__autorechargeBtn, \"autorechargeBtn\");\n this.__autorechargeBtn.addListener(\"execute\", () => {\n const autorecharge = new osparc.desktop.credits.AutoRecharge(this.getKey());\n const win = osparc.ui.window.Window.popUpInWindow(autorecharge, \"Auto-recharge\", 400, 550).set({\n resizable: false,\n movable: false\n });\n autorecharge.addListener(\"close\", () => win.close());\n autorecharge.addListener(\"addNewPaymentMethod\", () => {\n win.close()\n const billingCenter = osparc.desktop.credits.BillingCenterWindow.openWindow()\n billingCenter.openPaymentMethods()\n })\n // Revert default execute action (toggle the buttons's value)\n this.__autorechargeBtn.toggleValue();\n });\n this.bind(\"autoRecharge\", this.__autorechargeBtn, \"value\", {\n converter: ar => ar ? ar.enabled : false\n });\n this.__autorechargeBtn.bind(\"value\", this.__autorechargeBtn, \"label\", {\n converter: value => value ? this.tr(\"Auto-recharge: ON\") : this.tr(\"Auto-recharge: OFF\")\n });\n this._add(this.__autorechargeBtn, {\n // Takes the status button place for the moment\n row: 0,\n column: 5,\n rowSpan: 2\n });\n\n this.__shareButton = new qx.ui.form.Button(null, \"@FontAwesome5Solid/users/14\").set({\n maxHeight: 30,\n alignX: \"center\",\n alignY: \"middle\",\n focusable: false,\n visibility: this.__canIWrite() ? \"visible\" : \"excluded\",\n });\n this.__shareButton.addListener(\"execute\", () => this.fireDataEvent(\"openShareWallet\", this.getKey()));\n this._add(this.__shareButton, {\n row: 0,\n column: 4,\n rowSpan: 2\n });\n },\n\n __applyCreditsAvailable: function(creditsAvailable) {\n if (creditsAvailable !== null) {\n const creditsIndicator = this.getChildControl(\"credits-indicator\");\n creditsIndicator.setCreditsAvailable(creditsAvailable);\n }\n },\n\n __canIWrite: function() {\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n const accessRightss = this.getAccessRights();\n const found = accessRightss && accessRightss.find(ar => ar[\"gid\"] === myGid);\n if (found) {\n return found[\"write\"];\n }\n return false;\n },\n\n // overridden\n _applyAccessRights: function(accessRights) {\n this.__buildLayout();\n this.base(arguments, accessRights);\n const buyBtn = new qx.ui.form.Button().set({\n label: this.tr(\"Buy Credits\"),\n icon: \"@FontAwesome5Solid/dollar-sign/16\",\n maxHeight: 30,\n alignY: \"middle\",\n visibility: this.__canIWrite() ? \"visible\" : \"excluded\",\n });\n osparc.utils.Utils.setIdToWidget(buyBtn, \"buyCreditsBtn\");\n this.bind(\"accessRights\", buyBtn, \"enabled\", {\n converter: aR => {\n const myAr = osparc.data.model.Wallet.getMyAccessRights(aR);\n return Boolean(myAr && myAr.write);\n }\n });\n buyBtn.addListener(\"execute\", () => this.fireDataEvent(\"buyCredits\", {\n walletId: this.getKey()\n }), this);\n this._add(buyBtn, {\n row: 0,\n column: 6,\n rowSpan: 2\n });\n this.__autorechargeBtn.setVisibility(this.__canIWrite() ? \"visible\" : \"excluded\");\n },\n\n // overridden\n _setRole: function() {\n const accessRightss = this.getAccessRights();\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n const found = accessRightss && accessRightss.find(ar => ar[\"gid\"] === myGid);\n if (found) {\n const role = this.getChildControl(\"role\");\n if (found[\"write\"]) {\n role.setValue(osparc.data.Roles.WALLET[2].label);\n } else if (found[\"read\"]) {\n role.setValue(osparc.data.Roles.WALLET[1].label);\n }\n }\n },\n\n // overridden\n _getOptionsMenu: function() {\n let menu = null;\n const accessRightss = this.getAccessRights();\n const myGid = osparc.auth.Data.getInstance().getGroupId();\n const found = accessRightss && accessRightss.find(ar => ar[\"gid\"] === myGid);\n if (found && found[\"write\"]) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.show();\n\n menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n const editWalletButton = new qx.ui.menu.Button(this.tr(\"Edit details...\"));\n editWalletButton.addListener(\"execute\", () => this.fireDataEvent(\"openEditWallet\", this.getKey()));\n menu.add(editWalletButton);\n }\n return menu;\n },\n\n // overridden\n _applyThumbnail: function(value) {\n },\n\n __applyStatus: function(status) {\n if (status) {\n const statusButton = this.getChildControl(\"status-button\");\n statusButton.set({\n icon: status === \"ACTIVE\" ? \"@FontAwesome5Solid/toggle-on/16\" : \"@FontAwesome5Solid/toggle-off/16\",\n label: status === \"ACTIVE\" ? this.tr(\"ON\") : this.tr(\"OFF\"),\n toolTipText: status === \"ACTIVE\" ? this.tr(\"Credit Account enabled\") : this.tr(\"Credit Account blocked\"),\n enabled: this.__canIWrite(),\n visibility: \"excluded\" // excluded until the backed implements it\n });\n }\n },\n\n __applyPreferredWallet: function(isPreferredWallet) {\n const favouriteButton = this.getChildControl(\"favourite-button\");\n favouriteButton.setBackgroundColor(\"transparent\");\n const favouriteButtonIcon = favouriteButton.getChildControl(\"icon\");\n if (isPreferredWallet) {\n favouriteButton.set({\n toolTipText: this.tr(\"Currently being used\"),\n icon: \"@FontAwesome5Solid/check-circle/20\"\n });\n favouriteButtonIcon.setTextColor(\"strong-main\");\n } else {\n favouriteButton.set({\n toolTipText: this.tr(\"Switch to this Credit Account\"),\n icon: \"@FontAwesome5Solid/circle/20\"\n });\n favouriteButtonIcon.setTextColor(\"text\");\n }\n },\n\n excludeShareButton: function() {\n if (this.__shareButton) {\n this.__shareButton.exclude()\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.WalletEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n this.__validator = new qx.ui.form.validation.Manager();\n\n this.__buildLayout()\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeWalletId\"\n },\n\n name: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeName\"\n },\n\n description: {\n check: \"String\",\n init: \"\",\n nullable: true,\n event: \"changeDescription\"\n },\n\n isFetching: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeIsFetching\"\n }\n },\n\n events: {\n \"updateWallet\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __buildLayout: function() {\n this._removeAll()\n this._add(new qx.ui.basic.Label(this.tr(\"Title\")).set({\n font: \"text-14\"\n }));\n const title = new qx.ui.form.TextField().set({\n font: \"text-14\",\n backgroundColor: \"background-main\",\n placeholder: this.tr(\"Title\"),\n height: 35,\n required: true\n });\n this.bind(\"name\", title, \"value\");\n title.bind(\"value\", this, \"name\");\n this._add(title);\n this.__validator.add(title)\n\n this._add(new qx.ui.basic.Label(this.tr(\"Description\")).set({\n font: \"text-14\",\n marginTop: 10\n }));\n const description = new qx.ui.form.TextArea().set({\n font: \"text-14\",\n placeholder: this.tr(\"Description\"),\n autoSize: true,\n minHeight: 70,\n maxHeight: 140\n });\n this.bind(\"description\", description, \"value\");\n description.bind(\"value\", this, \"description\");\n this._add(description);\n\n const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n buttons.addAt(cancelButton, 0);\n\n const saveButton = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n saveButton.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n this.fireEvent(\"updateWallet\");\n }\n }, this);\n this.bind(\"isFetching\", saveButton, \"fetching\")\n buttons.addAt(saveButton, 1);\n this._add(buttons);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.MembersList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this._add(this.__createIntroText());\n this._add(this.__getMemberInvitation());\n this._add(this.__getRolesToolbar());\n this._add(this.__getMembersFilter());\n this._add(this.__getMembersList(), {\n flex: 1\n });\n },\n\n statics: {\n getNoReadAccess: function() {\n return {\n \"read\": false,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getReadAccess: function() {\n return {\n \"read\": true,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getWriteAccess: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": false\n };\n },\n\n getDeleteAccess: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": true\n };\n },\n\n sortWalletMembers: function(a, b) {\n const sorted = osparc.share.Collaborators.sortByAccessRights(a[\"accessRights\"], b[\"accessRights\"]);\n if (sorted !== 0) {\n return sorted;\n }\n if ((\"label\" in a) && (\"label\" in b)) {\n return a[\"label\"].localeCompare(b[\"label\"]);\n }\n return 0;\n }\n },\n\n members: {\n __currentModel: null,\n __memberInvitation: null,\n __membersModel: null,\n\n setWallet: function(model) {\n if (model === null) {\n return;\n }\n\n this.__currentModel = model;\n\n this.__memberInvitation.setVisibility(this.__canIWrite() ? \"visible\" : \"excluded\");\n\n this.__reloadWalletMembers();\n },\n\n __canIWrite: function() {\n const wallet = this.__currentModel;\n if (wallet) {\n const myAccessRights = wallet.getMyAccessRights();\n if (myAccessRights) {\n return myAccessRights[\"write\"];\n }\n }\n return false;\n },\n\n __createIntroText: function() {\n const msg = this.tr(\"Only Accountants of an Organization can share a wallet with other users.\");\n const intro = new qx.ui.basic.Label().set({\n value: msg,\n alignX: \"left\",\n rich: true,\n font: \"text-13\"\n });\n return intro;\n },\n\n __getMemberInvitation: function() {\n const vBox = this.__memberInvitation = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n vBox.exclude();\n\n const addMemberBtn = new qx.ui.form.Button(this.tr(\"Add Members...\")).set({\n appearance: \"strong-button\",\n allowGrowX: false\n });\n addMemberBtn.addListener(\"execute\", () => {\n const serializedData = this.__currentModel.serialize();\n serializedData[\"resourceType\"] = \"wallet\";\n const showOrganizations = false;\n const collaboratorsManager = new osparc.share.NewCollaboratorsManager(serializedData, showOrganizations);\n collaboratorsManager.addListener(\"addCollaborators\", e => {\n const cb = () => collaboratorsManager.close();\n this.__addMembers(e.getData(), cb);\n }, this);\n }, this);\n vBox.add(addMemberBtn);\n\n return vBox;\n },\n\n __getRolesToolbar: function() {\n return osparc.data.Roles.createRolesWalletInfo();\n },\n\n __getMembersFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"walletMembersList\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n return filter;\n },\n\n __getMembersList: function() {\n const membersUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n width: 150\n });\n\n const membersModel = this.__membersModel = new qx.data.Array();\n const membersCtrl = new qx.data.controller.List(membersModel, membersUIList, \"name\");\n membersCtrl.setDelegate({\n createItem: () => new osparc.desktop.wallets.MemberListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"userId\", \"model\", null, item, id);\n ctrl.bindProperty(\"userId\", \"key\", null, item, id);\n ctrl.bindProperty(\"groupId\", \"gid\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"label\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitleMD\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", null, item, id);\n ctrl.bindProperty(\"options\", \"options\", null, item, id);\n ctrl.bindProperty(\"showOptions\", \"showOptions\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"walletMembersList\");\n item.getChildControl(\"thumbnail\").getContentElement()\n .setStyles({\n \"border-radius\": \"16px\"\n });\n item.addListener(\"promoteToAccountant\", e => {\n const listedMember = e.getData();\n this.__promoteToAccountant(listedMember);\n });\n item.addListener(\"demoteToMember\", e => {\n const listedMember = e.getData();\n this.__demoteToMember(listedMember);\n });\n item.addListener(\"removeMember\", e => {\n const listedMember = e.getData();\n this.__deleteMember(listedMember);\n });\n }\n });\n\n return membersUIList;\n },\n\n __reloadWalletMembers: async function() {\n const membersModel = this.__membersModel;\n membersModel.removeAll();\n\n const wallet = this.__currentModel;\n if (wallet === null) {\n return;\n }\n\n const myGroupId = osparc.auth.Data.getInstance().getGroupId();\n const membersList = [];\n const canIWrite = wallet.getMyAccessRights()[\"write\"];\n const accessRightss = wallet.getAccessRights();\n const usersStore = osparc.store.Users.getInstance();\n for (let i=0; i membersModel.append(qx.data.marshal.Json.createModel(member)));\n },\n\n __addMembers: function(gids, cb) {\n if (gids.length === 0) {\n return;\n }\n const wallet = this.__currentModel;\n if (wallet === null) {\n return;\n }\n\n const promises = [];\n gids.forEach(gid => {\n const params = {\n url: {\n \"walletId\": wallet.getWalletId(),\n \"groupId\": gid\n },\n data: this.self().getReadAccess()\n };\n promises.push(osparc.data.Resources.fetch(\"wallets\", \"postAccessRights\", params));\n });\n Promise.all(promises)\n .then(() => {\n osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)\n .then(() => {\n this.__reloadWalletMembers();\n if (cb) {\n cb();\n }\n });\n\n // push 'WALLET_SHARED' notification\n const potentialCollaborators = osparc.store.Groups.getInstance().getPotentialCollaborators();\n gids.forEach(gid => {\n if (gid in potentialCollaborators && \"getUserId\" in potentialCollaborators[gid]) {\n // it's a user, not an organization\n const uid = potentialCollaborators[gid].getUserId();\n osparc.notification.Notifications.postNewWallet(uid, wallet.getWalletId());\n }\n });\n });\n },\n\n __promoteToAccountant: function(listedMember) {\n const wallet = this.__currentModel;\n if (wallet === null) {\n return;\n }\n\n const params = {\n url: {\n \"walletId\": wallet.getWalletId(),\n \"groupId\": listedMember[\"gid\"],\n },\n data: this.self().getWriteAccess()\n };\n osparc.data.Resources.fetch(\"wallets\", \"putAccessRights\", params)\n .then(() => {\n osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)\n .then(() => this.__reloadWalletMembers());\n });\n },\n\n __demoteToMember: function(listedMember) {\n const wallet = this.__currentModel;\n if (wallet === null) {\n return;\n }\n\n const params = {\n url: {\n \"walletId\": wallet.getWalletId(),\n \"groupId\": listedMember[\"gid\"],\n },\n data: this.self().getReadAccess()\n };\n osparc.data.Resources.fetch(\"wallets\", \"putAccessRights\", params)\n .then(() => {\n osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)\n .then(() => this.__reloadWalletMembers());\n });\n },\n\n __deleteMember: function(listedMember) {\n const wallet = this.__currentModel;\n if (wallet === null) {\n return;\n }\n\n const params = {\n url: {\n \"walletId\": wallet.getWalletId(),\n \"groupId\": listedMember[\"gid\"],\n }\n };\n osparc.data.Resources.fetch(\"wallets\", \"deleteAccessRights\", params)\n .then(() => {\n osparc.store.Store.getInstance().reloadWalletAccessRights(wallet)\n .then(() => this.__reloadWalletMembers());\n });\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2009 Derrell Lipman\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Derrell Lipman (derrell)\n\n************************************************************************ */\n\n/**\n * Interface for a column menu item corresponding to a table column.\n */\nqx.Interface.define(\"qx.ui.table.IColumnMenuItem\",\n{\n properties :\n {\n /**\n * Whether the table column associated with this menu item is visible\n * Should be of type {Boolean}!\n */\n columnVisible : { }\n },\n\n events :\n {\n /**\n * Dispatched when a column changes visibility state. The event data is a\n * boolean indicating whether the table column associated with this menu\n * item is now visible.\n */\n changeColumnVisible : \"qx.event.type.Data\"\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2024 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\nconst SERVER_MAX_LIMIT = 49\n\nqx.Class.define(\"osparc.desktop.credits.TransactionsTableModel\", {\n extend: qx.ui.table.model.Remote,\n\n construct() {\n this.base(arguments)\n this.setColumns([\n qx.locale.Manager.tr(\"Date\"),\n qx.locale.Manager.tr(\"Price USD\"),\n qx.locale.Manager.tr(\"Credits\"),\n qx.locale.Manager.tr(\"Status\"),\n qx.locale.Manager.tr(\"Comment\"),\n qx.locale.Manager.tr(\"Invoice\")\n ], [\n \"date\",\n \"price\",\n \"credits\",\n \"status\",\n \"comment\",\n \"invoice\"\n ])\n this.setColumnSortable(0, false)\n this.setColumnSortable(1, false)\n this.setColumnSortable(2, false)\n this.setColumnSortable(3, false)\n this.setColumnSortable(4, false)\n this.setColumnSortable(5, false)\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n nullable: false\n },\n filters: {\n check: \"Object\",\n init: null\n },\n isFetching: {\n check: \"Boolean\",\n init: false,\n event: \"changeFetching\"\n }\n },\n\n members: {\n // overridden\n _loadRowCount() {\n const params = {\n url: {\n limit: 1,\n offset: 0\n }\n };\n const options = {\n resolveWResponse: true\n };\n osparc.data.Resources.fetch(\"payments\", \"get\", params, options)\n .then(({ data: resp }) => {\n this._onRowCountLoaded(resp[\"_meta\"].total)\n })\n .catch(() => {\n this._onRowCountLoaded(null)\n })\n },\n // overridden\n _loadRowData(firstRow, qxLastRow) {\n this.setIsFetching(true)\n // Please Qloocloox don't ask for more rows than there are\n const lastRow = Math.min(qxLastRow, this._rowCount - 1)\n const getFetchPromise = (offset, limit=SERVER_MAX_LIMIT) => {\n return osparc.data.Resources.fetch(\"payments\", \"get\", {\n url: {\n limit,\n offset\n }\n })\n .then(({ data: rawData }) => {\n const data = []\n rawData.forEach(rawRow => {\n data.push({\n date: osparc.utils.Utils.formatDateAndTime(new Date(rawRow.createdAt)),\n price: rawRow.priceDollars ? parseFloat(rawRow.priceDollars).toFixed(2) : 0,\n credits: rawRow.osparcCredits ? parseFloat(rawRow.osparcCredits).toFixed(2) * 1 : 0,\n status: this.__addColorTag(rawRow.completedStatus),\n comment: rawRow.comment,\n invoice: rawRow.invoiceUrl ? this.__createPdfIconWithLink(rawRow.walletId, rawRow.paymentId) : \"\"\n })\n })\n return data\n })\n }\n // Divides the model row request into several server requests to comply with the number of rows server limit\n const reqLimit = lastRow - firstRow + 1 // Number of requested rows\n const nRequests = Math.ceil(reqLimit / SERVER_MAX_LIMIT)\n if (nRequests > 1) {\n let requests = []\n for (let i=firstRow; i <= lastRow; i += SERVER_MAX_LIMIT) {\n requests.push(getFetchPromise(i, i > lastRow - SERVER_MAX_LIMIT + 1 ? reqLimit % SERVER_MAX_LIMIT : SERVER_MAX_LIMIT))\n }\n Promise.all(requests)\n .then(responses => {\n this._onRowDataLoaded(responses.flat())\n })\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null)\n })\n .finally(() => this.setIsFetching(false))\n } else {\n getFetchPromise(firstRow, reqLimit)\n .then(data => {\n this._onRowDataLoaded(data)\n })\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null)\n })\n .finally(() => this.setIsFetching(false))\n }\n },\n __getLevelColor: function(status) {\n const colorManager = qx.theme.manager.Color.getInstance();\n let logLevel = null;\n switch (status) {\n case \"SUCCESS\":\n logLevel = \"info\";\n break;\n case \"PENDING\":\n logLevel = \"warning\";\n break;\n case \"CANCELED\":\n case \"FAILED\":\n logLevel = \"error\";\n break;\n default:\n console.error(\"completedStatus unknown\");\n break;\n }\n return colorManager.resolve(`logger-${logLevel}-message`);\n },\n __addColorTag: function(status) {\n return `${osparc.utils.Utils.onlyFirstsUp(status)}`;\n },\n\n __createPdfIconWithLink: function(walletId, paymentId) {\n const urlParams = {\n walletId,\n paymentId\n };\n const req = osparc.data.Resources.getInstance().replaceUrlParams(\"payments\", \"invoiceLink\", urlParams);\n return `
`;\n }\n }\n})\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2007 OpenHex SPRL, http://www.openhex.org\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Gaetan de Menten (ged)\n\n************************************************************************ */\n\n/**\n * Specific data cell renderer for numbers.\n */\nqx.Class.define(\"qx.ui.table.cellrenderer.Number\",\n{\n extend : qx.ui.table.cellrenderer.Conditional,\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /**\n * NumberFormat used to format data. If the numberFormat contains a\n * prefix and/or postfix containing characters which needs to be escaped,\n * those need to be given to the numberFormat in their escaped form\n * because no escaping happens at the cellrenderer level.\n */\n numberFormat :\n {\n check : \"qx.util.format.NumberFormat\",\n init : null,\n nullable : true\n }\n },\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n _getContentHtml : function(cellInfo)\n {\n var nf = this.getNumberFormat();\n\n if (nf)\n {\n if (cellInfo.value || cellInfo.value == 0) {\n // I don't think we need to escape the resulting string, as I\n // don't know of any decimal or separator which use a character\n // which needs escaping. It is much more plausible to have a\n // prefix, postfix containing such characters but those can be\n // (should be) added in their escaped form to the number format.\n return nf.format(cellInfo.value);\n } else {\n return \"\";\n }\n }\n else\n {\n return cellInfo.value == 0 ? \"0\" : (cellInfo.value || \"\");\n }\n },\n\n\n // overridden\n _getCellClass : function(cellInfo) {\n return \"qooxdoo-table-cell qooxdoo-table-cell-right\";\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.ui.table.cellrenderer.StringWithTooltip\", {\n extend: qx.ui.table.cellrenderer.Default,\n members: {\n // overridden\n _getCellAttributes(cellInfo) {\n const attrs = this.base(arguments, cellInfo)\n return `${attrs} title=\"${cellInfo.value}\"`\n }\n }\n})\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n/**\n * A *date field* is like a combo box with the date as popup. As button to\n * open the calendar a calendar icon is shown at the right to the textfield.\n *\n * To be conform with all form widgets, the {@link qx.ui.form.IForm} interface\n * is implemented.\n *\n * The following example creates a date field and sets the current\n * date as selected.\n *\n * \n * var dateField = new qx.ui.form.DateField();\n * this.getRoot().add(dateField, {top: 20, left: 20});\n * dateField.setValue(new Date());\n * \n *\n * @childControl list {qx.ui.control.DateChooser} date chooser component\n * @childControl popup {qx.ui.popup.Popup} popup which shows the list control\n * @childControl textfield {qx.ui.form.TextField} text field for manual date entry\n * @childControl button {qx.ui.form.Button} button that opens the list control\n */\nqx.Class.define(\"qx.ui.form.DateField\",\n{\n extend : qx.ui.core.Widget,\n include : [\n qx.ui.core.MRemoteChildrenHandling,\n qx.ui.form.MForm\n ],\n implement : [\n qx.ui.form.IForm,\n qx.ui.form.IDateForm\n ],\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n // set the layout\n var layout = new qx.ui.layout.HBox();\n this._setLayout(layout);\n layout.setAlignY(\"middle\");\n\n // text field\n var textField = this._createChildControl(\"textfield\");\n this._createChildControl(\"button\");\n\n // register listeners\n this.addListener(\"tap\", this._onTap, this);\n this.addListener(\"blur\", this._onBlur, this);\n\n // forward the focusin and focusout events to the textfield. The textfield\n // is not focusable so the events need to be forwarded manually.\n this.addListener(\"focusin\", function(e) {\n textField.fireNonBubblingEvent(\"focusin\", qx.event.type.Focus);\n }, this);\n\n this.addListener(\"focusout\", function(e) {\n textField.fireNonBubblingEvent(\"focusout\", qx.event.type.Focus);\n }, this);\n\n // initializes the DateField with the default format\n this._setDefaultDateFormat();\n\n // adds a locale change listener\n this._addLocaleChangeListener();\n },\n\n\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /** Whenever the value is changed this event is fired\n *\n * Event data: The new text value of the field.\n */\n \"changeValue\" : \"qx.event.type.Data\"\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n\n /** The formatter, which converts the selected date to a string. **/\n dateFormat :\n {\n check : \"qx.util.format.DateFormat\",\n apply : \"_applyDateFormat\"\n },\n\n /**\n * String value which will be shown as a hint if the field is all of:\n * unset, unfocused and enabled. Set to null to not show a placeholder\n * text.\n */\n placeholder :\n {\n check : \"String\",\n nullable : true,\n apply : \"_applyPlaceholder\"\n },\n\n // overridden\n appearance :\n {\n refine : true,\n init : \"datefield\"\n },\n\n // overridden\n focusable :\n {\n refine : true,\n init : true\n },\n\n // overridden\n width :\n {\n refine : true,\n init : 120\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n statics :\n {\n __dateFormat : null,\n __formatter : null,\n\n /**\n * Get the shared default date formatter\n *\n * @return {qx.util.format.DateFormat} The shared date formatter\n */\n getDefaultDateFormatter : function()\n {\n var format = qx.locale.Date.getDateFormat(\"medium\").toString();\n\n if (format == this.__dateFormat) {\n return this.__formatter;\n }\n\n if (this.__formatter) {\n this.__formatter.dispose();\n }\n\n this.__formatter = new qx.util.format.DateFormat(format, qx.locale.Manager.getInstance().getLocale());\n this.__dateFormat = format;\n\n return this.__formatter;\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __localeListenerId : null,\n\n\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates : {\n focused : true,\n invalid : true\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROTECTED METHODS\n ---------------------------------------------------------------------------\n */\n /**\n * Sets the default date format which is returned by\n * {@link #getDefaultDateFormatter}. You can override this method to\n * define your own default format.\n */\n _setDefaultDateFormat : function() {\n this.setDateFormat(qx.ui.form.DateField.getDefaultDateFormatter());\n },\n\n\n /**\n * Checks for \"qx.dynlocale\" and adds a listener to the locale changes.\n * On every change, {@link #_setDefaultDateFormat} is called to reinitialize\n * the format. You can easily override that method to prevent that behavior.\n */\n _addLocaleChangeListener : function() {\n // listen for locale changes\n if (qx.core.Environment.get(\"qx.dynlocale\"))\n {\n this.__localeListenerId =\n qx.locale.Manager.getInstance().addListener(\"changeLocale\", function() {\n this._setDefaultDateFormat();\n }, this);\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PUBLIC METHODS\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * This method sets the date, which will be formatted according to\n * #dateFormat to the date field. It will also select the date in the\n * calendar popup.\n *\n * @param value {Date} The date to set.\n */\n setValue : function(value)\n {\n // set the date to the textfield\n var textField = this.getChildControl(\"textfield\");\n textField.setValue(this.getDateFormat().format(value));\n\n // set the date in the datechooser\n var dateChooser = this.getChildControl(\"list\");\n dateChooser.setValue(value);\n },\n\n\n /**\n * Returns the current set date, parsed from the input-field\n * corresponding to the {@link #dateFormat}.\n * If the given text could not be parsed, null will be returned.\n *\n * @return {Date} The currently set date.\n */\n getValue : function()\n {\n // get the value of the textfield\n var textfieldValue = this.getChildControl(\"textfield\").getValue();\n\n // return the parsed date\n try {\n if (textfieldValue == null || textfieldValue.length == 0) {\n return null;\n }\n return this.getDateFormat().parse(textfieldValue);\n } catch (ex) {\n return null;\n }\n },\n\n\n /**\n * Resets the DateField. The textfield will be empty and the datechooser\n * will also have no selection.\n */\n resetValue: function()\n {\n // set the date to the textfield\n var textField = this.getChildControl(\"textfield\");\n textField.setValue(\"\");\n\n // set the date in the datechooser\n var dateChooser = this.getChildControl(\"list\");\n dateChooser.setValue(null);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n LIST STUFF\n ---------------------------------------------------------------------------\n */\n\n /**\n * Shows the date chooser popup.\n */\n open : function()\n {\n var popup = this.getChildControl(\"popup\");\n\n popup.placeToWidget(this, true);\n popup.show();\n },\n\n\n /**\n * Hides the date chooser popup.\n */\n close : function() {\n this.getChildControl(\"popup\").hide();\n },\n\n\n /**\n * Toggles the date chooser popup visibility.\n */\n toggle : function()\n {\n var isListOpen = this.getChildControl(\"popup\").isVisible();\n if (isListOpen) {\n this.close();\n } else {\n this.open();\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROPERTY APPLY METHODS\n ---------------------------------------------------------------------------\n */\n\n // property apply routine\n _applyDateFormat : function(value, old)\n {\n // if old is undefined or null do nothing\n if (!old) {\n return;\n }\n\n // get the date with the old date format\n try\n {\n var textfield = this.getChildControl(\"textfield\");\n var dateStr = textfield.getValue();\n if (dateStr != null) {\n var currentDate = old.parse(dateStr);\n textfield.setValue(value.format(currentDate));\n }\n }\n catch (ex) {\n // do nothing if the former date could not be parsed\n }\n },\n\n\n // property apply routine\n _applyPlaceholder : function(value, old) {\n this.getChildControl(\"textfield\").setPlaceholder(value);\n },\n\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"textfield\":\n control = new qx.ui.form.TextField();\n control.setFocusable(false);\n control.addState(\"inner\");\n control.addListener(\"changeValue\", this._onTextFieldChangeValue, this);\n control.addListener(\"blur\", this.close, this);\n this._add(control, {flex: 1});\n break;\n\n case \"button\":\n control = new qx.ui.form.Button();\n control.setFocusable(false);\n control.setKeepActive(true);\n control.addState(\"inner\");\n control.addListener(\"execute\", this.toggle, this);\n this._add(control);\n break;\n\n case \"list\":\n control = new qx.ui.control.DateChooser();\n control.setFocusable(false);\n control.setKeepFocus(true);\n control.addListener(\"execute\", this._onChangeDate, this);\n break;\n\n case \"popup\":\n control = new qx.ui.popup.Popup(new qx.ui.layout.VBox);\n control.setAutoHide(false);\n control.add(this.getChildControl(\"list\"));\n control.addListener(\"pointerup\", this._onChangeDate, this);\n control.addListener(\"changeVisibility\", this._onPopupChangeVisibility, this);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Handler method which handles the tap on the calender popup.\n *\n * @param e {qx.event.type.Pointer} The pointer event.\n */\n _onChangeDate : function(e)\n {\n var textField = this.getChildControl(\"textfield\");\n\n var selectedDate = this.getChildControl(\"list\").getValue();\n\n textField.setValue(this.getDateFormat().format(selectedDate));\n this.close();\n },\n\n\n /**\n * Toggles the popup's visibility.\n *\n * @param e {qx.event.type.Pointer} Pointer tap event\n */\n _onTap : function(e) {\n this.close();\n },\n\n\n /**\n * Handler for the blur event of the current widget.\n *\n * @param e {qx.event.type.Focus} The blur event.\n */\n _onBlur : function(e) {\n this.close();\n },\n\n\n /**\n * Handler method which handles the key press. It forwards all key event\n * to the opened date chooser except the escape key event. Escape closes\n * the popup.\n * If the list is cloned, all key events will not be processed further.\n *\n * @param e {qx.event.type.KeySequence} Keypress event\n */\n _onKeyPress : function(e)\n {\n // get the key identifier\n var iden = e.getKeyIdentifier();\n if (iden == \"Down\" && e.isAltPressed())\n {\n this.toggle();\n e.stopPropagation();\n return;\n }\n\n // if the popup is closed, ignore all\n var popup = this.getChildControl(\"popup\");\n if (popup.getVisibility() == \"hidden\") {\n return;\n }\n\n // hide the list always on escape\n if (iden == \"Escape\")\n {\n this.close();\n e.stopPropagation();\n return;\n }\n\n // Stop navigation keys when popup is open\n if (iden === \"Left\" || iden === \"Right\" || iden === \"Down\" || iden === \"Up\") {\n e.preventDefault();\n }\n\n // forward the rest of the events to the date chooser\n this.getChildControl(\"list\").handleKeyPress(e);\n },\n\n\n /**\n * Redirects changeVisibility event from the list to this widget.\n *\n * @param e {qx.event.type.Data} Property change event\n */\n _onPopupChangeVisibility : function(e)\n {\n e.getData() == \"visible\" ? this.addState(\"popupOpen\") : this.removeState(\"popupOpen\");\n\n // Synchronize the chooser with the current value on every\n // opening of the popup. This is needed when the value has been\n // modified and not saved yet (e.g. no blur)\n var popup = this.getChildControl(\"popup\");\n if (popup.isVisible())\n {\n var chooser = this.getChildControl(\"list\");\n var date = this.getValue();\n chooser.setValue(date);\n }\n },\n\n\n /**\n * Reacts on value changes of the text field and syncs the\n * value to the combobox.\n *\n * @param e {qx.event.type.Data} Change event\n */\n _onTextFieldChangeValue : function(e)\n {\n // Apply to popup\n var date = this.getValue();\n if (date != null)\n {\n var list = this.getChildControl(\"list\");\n list.setValue(date);\n }\n\n // Fire event\n this.fireDataEvent(\"changeValue\", this.getValue());\n },\n\n\n /**\n * Checks if the textfield of the DateField is empty.\n *\n * @return {Boolean} True, if the textfield of the DateField is empty.\n */\n isEmpty: function()\n {\n var value = this.getChildControl(\"textfield\").getValue();\n return value == null || value == \"\";\n },\n\n // overridden\n focus : function()\n {\n this.base(arguments);\n this.getChildControl(\"textfield\").getFocusElement().focus();\n }\n },\n\n\n destruct : function() {\n // listen for locale changes\n if (qx.core.Environment.get(\"qx.dynlocale\"))\n {\n if (this.__localeListenerId) {\n qx.locale.Manager.getInstance().removeListenerById(this.__localeListenerId);\n }\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2024 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\n\nqx.Class.define(\"osparc.desktop.credits.UsageTableModel\", {\n extend: qx.ui.table.model.Remote,\n\n construct(walletId, filters) {\n this.base(arguments);\n\n const usageCols = osparc.desktop.credits.UsageTable.COLS;\n const colLabels = Object.values(usageCols).map(col => col.label);\n const colIDs = Object.values(usageCols).map(col => col.id);\n\n this.setColumns(colLabels, colIDs);\n this.setWalletId(walletId)\n if (filters) {\n this.setFilters(filters)\n }\n this.setSortColumnIndexWithoutSortingData(usageCols.START.column);\n this.setSortAscendingWithoutSortingData(false)\n this.setColumnSortable(usageCols.DURATION.column, false);\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n nullable: true\n },\n filters: {\n check: \"Object\",\n init: null\n },\n isFetching: {\n check: \"Boolean\",\n init: false,\n event: \"changeFetching\"\n },\n orderBy: {\n check: \"Object\",\n init: {\n field: \"started_at\",\n direction: \"desc\"\n }\n }\n },\n\n statics: {\n SERVER_MAX_LIMIT: 49,\n COLUMN_ID_TO_DB_COLUMN_MAP: {\n 0: \"root_parent_project_name\",\n 1: \"node_name\",\n 2: \"service_key\",\n 3: \"started_at\",\n // 4: (not used) SORTING BY DURATION\n 5: \"service_run_status\",\n 6: \"credit_cost\",\n 7: \"user_email\",\n 8: \"projects_tags\",\n }\n },\n\n members: {\n // overridden\n sortByColumn(columnIndex, ascending) {\n this.setOrderBy({\n field: this.self().COLUMN_ID_TO_DB_COLUMN_MAP[columnIndex],\n direction: ascending ? \"asc\" : \"desc\"\n })\n this.base(arguments, columnIndex, ascending)\n },\n\n // overridden\n _loadRowCount() {\n const endpoint = this.getWalletId() == null ? \"get\" : \"getWithWalletFiltered\"\n const params = {\n url: {\n walletId: this.getWalletId(),\n limit: 1,\n offset: 0,\n filters: this.getFilters() ?\n JSON.stringify({\n \"started_at\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy())\n }\n };\n const options = {\n resolveWResponse: true\n };\n osparc.data.Resources.fetch(\"resourceUsage\", endpoint, params, options)\n .then(resp => {\n this._onRowCountLoaded(resp[\"_meta\"].total)\n })\n .catch(() => {\n this._onRowCountLoaded(null)\n })\n },\n\n // overridden\n _loadRowData(firstRow, qxLastRow) {\n this.setIsFetching(true)\n // Please Qloocloox don't ask for more rows than there are\n const lastRow = Math.min(qxLastRow, this._rowCount - 1)\n // Returns a request promise with given offset and limit\n const getFetchPromise = (offset, limit=this.self().SERVER_MAX_LIMIT) => {\n const endpoint = this.getWalletId() == null ? \"get\" : \"getWithWalletFiltered\"\n return osparc.data.Resources.fetch(\"resourceUsage\", endpoint, {\n url: {\n walletId: this.getWalletId(),\n limit,\n offset,\n filters: this.getFilters() ?\n JSON.stringify({\n \"started_at\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy())\n }\n })\n .then(rawData => {\n const data = []\n const usageCols = osparc.desktop.credits.UsageTable.COLS;\n rawData.forEach(rawRow => {\n let service = \"\"\n if (rawRow[\"service_key\"]) {\n const serviceName = rawRow[\"service_key\"].split(\"/\").pop()\n service = `${serviceName}:${rawRow[\"service_version\"]}`\n }\n let start = \"\"\n let duration = \"\"\n if (rawRow[\"started_at\"]) {\n start = osparc.utils.Utils.formatDateAndTime(new Date(rawRow[\"started_at\"]))\n if (rawRow[\"stopped_at\"]) {\n duration = osparc.utils.Utils.formatMsToHHMMSS(new Date(rawRow[\"stopped_at\"]) - new Date(rawRow[\"started_at\"]))\n }\n }\n data.push({\n // root_parent_project is the same as project if it has no parent\n [usageCols.PROJECT.id]: rawRow[\"root_parent_project_name\"] || rawRow[\"root_parent_project_id\"] || rawRow[\"project_name\"] || rawRow[\"project_id\"],\n [usageCols.NODE.id]: rawRow[\"node_name\"] || rawRow[\"node_id\"],\n [usageCols.SERVICE.id]: service,\n [usageCols.START.id]: start,\n [usageCols.DURATION.id]: duration,\n [usageCols.STATUS.id]: qx.lang.String.firstUp(rawRow[\"service_run_status\"].toLowerCase()),\n [usageCols.COST.id]: rawRow[\"credit_cost\"] ? parseFloat(rawRow[\"credit_cost\"]).toFixed(2) : \"\",\n [usageCols.USER.id]: rawRow[\"user_email\"],\n [usageCols.TAGS.id]: rawRow[\"project_tags\"],\n })\n })\n return data\n })\n }\n // Divides the model row request into several server requests to comply with the number of rows server limit\n const reqLimit = lastRow - firstRow + 1 // Number of requested rows\n const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT)\n if (nRequests > 1) {\n let requests = []\n for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {\n requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))\n }\n Promise.all(requests)\n .then(responses => {\n this._onRowDataLoaded(responses.flat())\n })\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null)\n })\n .finally(() => this.setIsFetching(false))\n } else {\n getFetchPromise(firstRow, reqLimit)\n .then(data => {\n this._onRowDataLoaded(data)\n })\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null)\n })\n .finally(() => this.setIsFetching(false))\n }\n }\n }\n})\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.PurchasesTableModel\", {\n extend: qx.ui.table.model.Remote,\n\n construct(walletId, filters) {\n this.base(arguments);\n\n const purchasesCols = osparc.desktop.credits.PurchasesTable.COLS;\n const colLabels = Object.values(purchasesCols).map(col => col.label);\n const colIDs = Object.values(purchasesCols).map(col => col.id);\n\n this.setColumns(colLabels, colIDs);\n this.setWalletId(walletId);\n if (filters) {\n this.setFilters(filters);\n }\n this.setSortColumnIndexWithoutSortingData(purchasesCols.START.column);\n this.setSortAscendingWithoutSortingData(false);\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n nullable: true\n },\n\n filters: {\n check: \"Object\",\n init: null\n },\n\n isFetching: {\n check: \"Boolean\",\n init: false,\n event: \"changeFetching\"\n },\n\n orderBy: {\n check: \"Object\",\n init: {\n field: \"startAt\",\n direction: \"desc\"\n }\n },\n },\n\n statics: {\n SERVER_MAX_LIMIT: 49,\n COLUMN_ID_TO_DB_COLUMN_MAP: {\n 0: \"startAt\",\n },\n },\n\n members: {\n // overridden\n sortByColumn(columnIndex, ascending) {\n this.setOrderBy({\n field: this.self().COLUMN_ID_TO_DB_COLUMN_MAP[columnIndex],\n direction: ascending ? \"asc\" : \"desc\"\n })\n this.base(arguments, columnIndex, ascending);\n },\n\n // overridden\n _loadRowCount() {\n const walletId = this.getWalletId();\n const urlParams = {\n offset: 0,\n limit: 1,\n filters: this.getFilters() ?\n JSON.stringify({\n \"startAt\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy()),\n };\n const options = {\n resolveWResponse: true\n };\n osparc.store.LicensedItems.getInstance().getPurchasedLicensedItems(walletId, urlParams, options)\n .then(resp => this._onRowCountLoaded(resp[\"_meta\"].total))\n .catch(() => this._onRowCountLoaded(null));\n },\n\n // overridden\n _loadRowData(firstRow, qxLastRow) {\n this.setIsFetching(true);\n\n const lastRow = Math.min(qxLastRow, this._rowCount - 1);\n // Returns a request promise with given offset and limit\n const getFetchPromise = (offset, limit=this.self().SERVER_MAX_LIMIT) => {\n const walletId = this.getWalletId();\n const urlParams = {\n limit,\n offset,\n filters: this.getFilters() ?\n JSON.stringify({\n \"started_at\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy())\n };\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n return Promise.all([\n licensedItemsStore.getLicensedItems(),\n licensedItemsStore.getPurchasedLicensedItems(walletId, urlParams),\n ])\n .then(values => {\n const licensedItems = values[0];\n const purchasesItems = values[1];\n\n const data = [];\n const purchasesCols = osparc.desktop.credits.PurchasesTable.COLS;\n purchasesItems.forEach(purchasesItem => {\n const licensedItemId = purchasesItem[\"licensedItemId\"];\n const licensedItem = licensedItems[licensedItemId];\n data.push({\n [purchasesCols.PURCHASE_ID.id]: purchasesItem[\"licensedItemPurchaseId\"],\n [purchasesCols.ITEM_ID.id]: licensedItemId,\n [purchasesCols.ITEM_LABEL.id]: licensedItem ? licensedItem.getDisplayName() : \"unknown model\",\n [purchasesCols.START.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem[\"startAt\"])),\n [purchasesCols.END.id]: osparc.utils.Utils.formatDateAndTime(new Date(purchasesItem[\"expireAt\"])),\n [purchasesCols.SEATS.id]: purchasesItem[\"numOfSeats\"],\n [purchasesCols.COST.id]: purchasesItem[\"pricingUnitCost\"] ? (\"-\" + parseFloat(purchasesItem[\"pricingUnitCost\"]).toFixed(2)) : \"\", // show it negative\n [purchasesCols.USER.id]: purchasesItem[\"userEmail\"],\n });\n });\n return data;\n });\n };\n\n // Divides the model row request into several server requests to comply with the number of rows server limit\n const reqLimit = lastRow - firstRow + 1; // Number of requested rows\n const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT);\n if (nRequests > 1) {\n const requests = [];\n for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {\n requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))\n }\n Promise.all(requests)\n .then(responses => this._onRowDataLoaded(responses.flat()))\n .catch(err => {\n console.error(err);\n this._onRowDataLoaded(null);\n })\n .finally(() => this.setIsFetching(false));\n } else {\n getFetchPromise(firstRow, reqLimit)\n .then(data => this._onRowDataLoaded(data))\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null);\n })\n .finally(() => this.setIsFetching(false));\n }\n }\n }\n})\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n\nqx.Class.define(\"osparc.desktop.credits.CheckoutsTableModel\", {\n extend: qx.ui.table.model.Remote,\n\n construct(walletId, filters) {\n this.base(arguments);\n\n const checkoutsCols = osparc.desktop.credits.CheckoutsTable.COLS;\n const colLabels = Object.values(checkoutsCols).map(col => col.label);\n const colIDs = Object.values(checkoutsCols).map(col => col.id);\n\n this.setColumns(colLabels, colIDs);\n this.setWalletId(walletId);\n if (filters) {\n this.setFilters(filters);\n }\n this.setSortColumnIndexWithoutSortingData(checkoutsCols.START.column);\n this.setSortAscendingWithoutSortingData(false);\n this.setColumnSortable(checkoutsCols.DURATION.column, false);\n },\n\n properties: {\n walletId: {\n check: \"Number\",\n nullable: true\n },\n\n filters: {\n check: \"Object\",\n init: null\n },\n\n isFetching: {\n check: \"Boolean\",\n init: false,\n event: \"changeFetching\"\n },\n\n orderBy: {\n check: \"Object\",\n init: {\n field: \"startAt\",\n direction: \"desc\"\n }\n },\n },\n\n statics: {\n SERVER_MAX_LIMIT: 49,\n COLUMN_ID_TO_DB_COLUMN_MAP: {\n 0: \"startAt\",\n },\n },\n\n members: {\n // overridden\n sortByColumn(columnIndex, ascending) {\n this.setOrderBy({\n field: this.self().COLUMN_ID_TO_DB_COLUMN_MAP[columnIndex],\n direction: ascending ? \"asc\" : \"desc\"\n })\n this.base(arguments, columnIndex, ascending);\n },\n\n // overridden\n _loadRowCount() {\n const walletId = this.getWalletId();\n const urlParams = {\n offset: 0,\n limit: 1,\n filters: this.getFilters() ?\n JSON.stringify({\n \"startAt\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy()),\n };\n const options = {\n resolveWResponse: true\n };\n osparc.store.LicensedItems.getInstance().getCheckedOutLicensedItems(walletId, urlParams, options)\n .then(resp => this._onRowCountLoaded(resp[\"_meta\"].total))\n .catch(() => this._onRowCountLoaded(null));\n },\n\n // overridden\n _loadRowData(firstRow, qxLastRow) {\n this.setIsFetching(true);\n\n const lastRow = Math.min(qxLastRow, this._rowCount - 1);\n // Returns a request promise with given offset and limit\n const getFetchPromise = (offset, limit=this.self().SERVER_MAX_LIMIT) => {\n const walletId = this.getWalletId();\n const urlParams = {\n limit,\n offset,\n filters: this.getFilters() ?\n JSON.stringify({\n \"started_at\": this.getFilters()\n }) :\n null,\n orderBy: JSON.stringify(this.getOrderBy())\n };\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n return Promise.all([\n licensedItemsStore.getLicensedItems(),\n licensedItemsStore.getCheckedOutLicensedItems(walletId, urlParams),\n ])\n .then(values => {\n const licensedItems = values[0];\n const checkoutsItems = values[1];\n\n const data = [];\n const checkoutsCols = osparc.desktop.credits.CheckoutsTable.COLS;\n checkoutsItems.forEach(checkoutsItem => {\n const licensedItemId = checkoutsItem[\"licensedItemId\"];\n const licensedItem = licensedItems[licensedItemId];\n let start = \"\";\n let duration = \"\";\n if (checkoutsItem[\"startedAt\"]) {\n start = osparc.utils.Utils.formatDateAndTime(new Date(checkoutsItem[\"startedAt\"]));\n if (checkoutsItem[\"stoppedAt\"]) {\n duration = osparc.utils.Utils.formatMsToHHMMSS(new Date(checkoutsItem[\"stoppedAt\"]) - new Date(checkoutsItem[\"startedAt\"]));\n }\n }\n data.push({\n [checkoutsCols.CHECKOUT_ID.id]: checkoutsItem[\"licensedItemCheckoutId\"],\n [checkoutsCols.ITEM_ID.id]: licensedItemId,\n [checkoutsCols.ITEM_LABEL.id]: licensedItem ? licensedItem.getDisplayName() : \"unknown model\",\n [checkoutsCols.START.id]: start,\n [checkoutsCols.DURATION.id]: duration,\n [checkoutsCols.SEATS.id]: checkoutsItem[\"numOfSeats\"],\n [checkoutsCols.USER.id]: checkoutsItem[\"userEmail\"],\n });\n });\n return data;\n });\n };\n\n // Divides the model row request into several server requests to comply with the number of rows server limit\n const reqLimit = lastRow - firstRow + 1; // Number of requested rows\n const nRequests = Math.ceil(reqLimit / this.self().SERVER_MAX_LIMIT);\n if (nRequests > 1) {\n const requests = [];\n for (let i=firstRow; i <= lastRow; i += this.self().SERVER_MAX_LIMIT) {\n requests.push(getFetchPromise(i, i > lastRow - this.self().SERVER_MAX_LIMIT + 1 ? reqLimit % this.self().SERVER_MAX_LIMIT : this.self().SERVER_MAX_LIMIT))\n }\n Promise.all(requests)\n .then(responses => this._onRowDataLoaded(responses.flat()))\n .catch(err => {\n console.error(err);\n this._onRowDataLoaded(null);\n })\n .finally(() => this.setIsFetching(false));\n } else {\n getFetchPromise(firstRow, reqLimit)\n .then(data => this._onRowDataLoaded(data))\n .catch(err => {\n console.error(err)\n this._onRowDataLoaded(null);\n })\n .finally(() => this.setIsFetching(false));\n }\n }\n }\n})\n","// DiskUsageManager (singleton)\n// construct() { listen to socket }\n// subscribe(id, cb) { keeps a map of callbacks. one array of callbacks per id }\n// socketHandler(updatedId) { search the map and call all corresponding callbacks }\n/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.workbench.DiskUsageController\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.__prevDiskUsageStateList = [];\n this.base(arguments);\n\n this.__socket = osparc.wrapper.WebSocket.getInstance().getSocket();\n if (!this.__socket) {\n console.error(\"Invalid WebSocket object obtained from source\");\n }\n this.__socket.on(\"serviceDiskUsage\", data => {\n if (data[\"node_id\"] && this.__callbacks[data[\"node_id\"]]) {\n // notify\n this.__evaluateDisplayMessage(data);\n this.__callbacks[data[\"node_id\"]].forEach(cb => {\n cb(data);\n })\n }\n });\n this.__callbacks = {};\n },\n\n\n members: {\n __socket: null,\n __callbacks: null,\n __lowDiskThreshold: null,\n __prevDiskUsageStateList: null,\n __diskUsage: null,\n\n subscribe: function(nodeId, callback) {\n if (this.__callbacks[nodeId]) {\n this.__callbacks[nodeId].push(callback);\n } else {\n this.__callbacks[nodeId] = [callback];\n }\n },\n\n unsubscribe: function(nodeId, callback) {\n if (this.__callbacks[nodeId]) {\n this.__callbacks[nodeId] = this.__callbacks[nodeId].filter(cb => cb !== callback)\n }\n },\n\n __getWarningLevel: function(freeSpace) {\n const lowDiskSpacePreferencesSettings = osparc.Preferences.getInstance();\n this.__lowDiskThreshold = lowDiskSpacePreferencesSettings.getLowDiskSpaceThreshold();\n const warningSize = osparc.utils.Utils.gBToBytes(this.__lowDiskThreshold); // 5 GB Default\n const criticalSize = osparc.utils.Utils.gBToBytes(0.01); // 0 GB\n let warningLevel;\n if (freeSpace <= criticalSize) {\n warningLevel = \"CRITICAL\"\n } else if (freeSpace <= warningSize) {\n warningLevel = \"WARNING\"\n } else {\n warningLevel = \"NORMAL\"\n }\n return warningLevel\n },\n\n __evaluateDisplayMessage: function(data) {\n const id = data[\"node_id\"];\n if (!this.__callbacks[id]) {\n return;\n }\n\n function isMatchingNodeId({nodeId}) {\n return nodeId === id;\n }\n function shouldDisplayMessage(prevDiskUsageState, warningLevel) {\n return prevDiskUsageState && prevDiskUsageState.nodeId === id && prevDiskUsageState.state !== warningLevel\n }\n\n let prevDiskUsageState = this.__prevDiskUsageStateList.find(isMatchingNodeId);\n if (prevDiskUsageState === undefined) {\n // Initialize it\n this.__prevDiskUsageStateList.push({\n nodeId: id,\n state: \"NORMAL\"\n })\n }\n\n const store = osparc.store.Store.getInstance();\n const currentStudy = store.getCurrentStudy();\n if (!currentStudy) {\n return;\n }\n\n const node = currentStudy.getWorkbench().getNode(id);\n const nodeName = node ? node.getLabel() : null;\n if (nodeName === null) {\n return;\n }\n\n const diskHostUsage = data.usage[\"HOST\"]\n let freeSpace = osparc.utils.Utils.bytesToSize(diskHostUsage.free);\n let warningLevel = this.__getWarningLevel(diskHostUsage.free);\n\n if (\"STATES_VOLUMES\" in data.usage) {\n const diskVolsUsage = data.usage[\"STATES_VOLUMES\"];\n if (diskVolsUsage[\"used_percent\"] > diskHostUsage[\"used_percent\"]) {\n // \"STATES_VOLUMES\" is more critical so it takes over\n freeSpace = osparc.utils.Utils.bytesToSize(diskVolsUsage.free);\n warningLevel = this.__getWarningLevel(diskVolsUsage.free);\n }\n }\n\n const objIndex = this.__prevDiskUsageStateList.findIndex((obj => obj.nodeId === id));\n let message;\n switch (warningLevel) {\n case \"CRITICAL\":\n if (shouldDisplayMessage(prevDiskUsageState, warningLevel)) {\n message = qx.locale.Manager.tr(`Out of Disk Space on \"Service Filesystem\" for ${nodeName}
The volume Service Filesystem has only ${freeSpace} disk space remaining. You can free up disk space by removing unused files in your service. Alternatively, you can run your service with a pricing plan that supports your storage requirements.`);\n osparc.FlashMessenger.getInstance().logAs(message, \"ERROR\");\n this.__prevDiskUsageStateList[objIndex].state = warningLevel;\n }\n break;\n case \"WARNING\":\n if (shouldDisplayMessage(prevDiskUsageState, warningLevel)) {\n message = qx.locale.Manager.tr(`Low Disk Space on \"Service Filesystem\" for ${nodeName}
The volume Service Filesystem has only ${freeSpace} disk space remaining. You can free up disk space by removing unused files in your service. Alternatively, you can run your service with a pricing plan that supports your storage requirements.`);\n osparc.FlashMessenger.getInstance().logAs(message, \"WARNING\");\n this.__prevDiskUsageStateList[objIndex].state = warningLevel;\n }\n break;\n default:\n this.__prevDiskUsageStateList[objIndex].state = \"NORMAL\";\n break;\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.Market\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function(openCategory) {\n this.base(arguments);\n\n const miniWallet = osparc.desktop.credits.BillingCenter.createMiniWalletView().set({\n paddingRight: 10,\n minWidth: 150,\n });\n this.addWidgetToTabs(miniWallet);\n\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (!contextWallet) {\n return;\n }\n\n this.__reqOpenCategory = openCategory;\n this.__populateCategories();\n },\n\n events: {\n \"importMessageSent\": \"qx.event.type.Event\",\n },\n\n properties: {\n openBy: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeOpenBy\",\n },\n },\n\n members: {\n __reqOpenCategory: null,\n __myModelsCategoryMarket: null,\n __myModelsCategoryButton: null,\n\n __populateCategories: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n\n const walletId = contextWallet.getWalletId();\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n Promise.all([\n licensedItemsStore.getLicensedItems(),\n licensedItemsStore.getPurchasedLicensedItems(walletId),\n ])\n .then(async values => {\n const licensedItems = values[0];\n const purchasedItems = values[1];\n osparc.data.model.LicensedItem.addSeatsFromPurchases(licensedItems, purchasedItems);\n const categories = [];\n const availableCategory = {\n categoryId: \"availableModels\",\n label: this.tr(\"My Models\"),\n icon: \"osparc/market/RentedModels.svg\",\n items: [],\n };\n categories.push(availableCategory);\n let openCategory = null;\n Object.values(licensedItems).forEach(licensedItem => {\n if (licensedItem.getSeats().length) {\n availableCategory[\"items\"].push(licensedItem);\n if (!this.__reqOpenCategory) {\n openCategory = availableCategory[\"categoryId\"];\n }\n }\n if (licensedItem && licensedItem.getCategoryId()) {\n const categoryId = licensedItem.getCategoryId();\n let category = categories.find(cat => cat[\"categoryId\"] === categoryId);\n if (!category) {\n category = {\n categoryId,\n label: licensedItem.getCategoryDisplay() || \"Category\",\n icon: licensedItem.getCategoryIcon(),\n items: [],\n };\n if (!openCategory) {\n openCategory = categoryId;\n }\n categories.push(category);\n }\n category[\"items\"].push(licensedItem);\n }\n });\n\n await this.__addFreeItems();\n\n categories.forEach(category => {\n this.__buildViPMarketPage(category, category[\"items\"]);\n });\n\n if (openCategory) {\n this.__openCategory(openCategory);\n }\n });\n },\n\n __addFreeItems: function() {\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n return licensedItemsStore.getLicensedItems()\n .then(async licensedItems => {\n this.__freeItems = [];\n const licensedItemsArr = Object.values(licensedItems);\n for (const licensedItem of licensedItemsArr) {\n const pricingUnits = await osparc.store.Pricing.getInstance().fetchPricingUnits(licensedItem.getPricingPlanId());\n if (pricingUnits.length === 1 && pricingUnits[0].getCost() === 0) {\n this.__freeItems.push(licensedItem);\n }\n }\n if (!this.__reqOpenCategory && this.__freeItems.length) {\n this.__openCategory(\"availableModels\");\n }\n this.__repopulateMyModelsCategory();\n });\n },\n\n __buildViPMarketPage: function(marketTabInfo, licensedItems = []) {\n const vipMarketView = new osparc.vipMarket.VipMarket(licensedItems);\n vipMarketView.set({\n category: marketTabInfo[\"categoryId\"],\n });\n this.bind(\"openBy\", vipMarketView, \"openBy\");\n vipMarketView.addListener(\"modelPurchased\", () => this.__repopulateMyModelsCategory());\n vipMarketView.addListener(\"importMessageSent\", () => this.fireEvent(\"importMessageSent\"));\n const page = this.addTab(marketTabInfo[\"label\"], marketTabInfo[\"icon\"], vipMarketView);\n page.category = marketTabInfo[\"categoryId\"];\n if (page.category === \"availableModels\") {\n this.__myModelsCategoryMarket = vipMarketView;\n this.__myModelsCategoryButton = page.getChildControl(\"button\");\n this.__myModelsCategoryButton.setVisibility(licensedItems.length ? \"visible\" : \"excluded\");\n }\n return page;\n },\n\n __repopulateMyModelsCategory: function() {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n const walletId = contextWallet.getWalletId();\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n Promise.all([\n licensedItemsStore.getLicensedItems(),\n licensedItemsStore.getPurchasedLicensedItems(walletId),\n ])\n .then(values => {\n const licensedItems = values[0];\n const purchasedItems = values[1];\n osparc.data.model.LicensedItem.addSeatsFromPurchases(licensedItems, purchasedItems);\n let items = [];\n Object.values(licensedItems).forEach(licensedItem => {\n if (licensedItem.getSeats().length) {\n items.push(licensedItem);\n }\n });\n items = items.concat(this.__freeItems);\n this.__myModelsCategoryButton.setVisibility(items.length ? \"visible\" : \"excluded\");\n this.__myModelsCategoryMarket.setLicensedItems(items);\n });\n },\n\n __openCategory: function(category) {\n const viewFound = this.getChildControl(\"tabs-view\").getChildren().find(view => view.category === category);\n if (viewFound) {\n this._openPage(viewFound);\n return true;\n }\n return false;\n },\n\n sendCloseMessage: function() {\n const store = osparc.store.Store.getInstance();\n const currentStudy = store.getCurrentStudy();\n const nodeId = this.getOpenBy();\n if (currentStudy && nodeId) {\n const msg = {\n \"type\": \"closeMarket\",\n };\n currentStudy.sendMessageToIframe(nodeId, msg);\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.WorkspaceEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(workspace) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n if (!workspace) {\n this.getChildControl(\"intro-text\");\n }\n\n const manager = this.__validator = new qx.ui.form.validation.Manager();\n const title = this.getChildControl(\"title\");\n title.setRequired(true);\n manager.add(title);\n this.getChildControl(\"description\");\n this.getChildControl(\"thumbnail\");\n this.getChildControl(\"cancel\");\n this.getChildControl(\"save\");\n if (workspace) {\n // editing\n this.setWorkspace(workspace);\n } else {\n // creating\n this.__creatingWorkspace = true;\n this.__createWorkspace()\n .then(newWorkspace => {\n this.setWorkspace(newWorkspace);\n this.fireDataEvent(\"workspaceCreated\");\n this.getChildControl(\"sharing\");\n });\n }\n\n this.addListener(\"appear\", this.__onAppear, this);\n },\n\n properties: {\n workspace: {\n check: \"osparc.data.model.Workspace\",\n init: null,\n nullable: false,\n apply: \"__applyWorkspace\"\n },\n\n label: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeLabel\"\n },\n\n description: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeDescription\"\n },\n\n thumbnail: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeThumbnail\"\n },\n },\n\n events: {\n \"workspaceCreated\": \"qx.event.type.Event\",\n \"workspaceDeleted\": \"qx.event.type.Event\",\n \"workspaceUpdated\": \"qx.event.type.Event\",\n \"updateAccessRights\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n statics: {\n POS: {\n INTRO: 0,\n TITLE: 1,\n DESCRIPTION: 2,\n THUMBNAIL: 3,\n SHARING: 4,\n BUTTONS: 5,\n }\n },\n\n members: {\n __creatingWorkspace: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"intro-text\": {\n const studies = osparc.product.Utils.getStudyAlias({ plural: true });\n const text = this.tr(`A Shared Workspace is the context where all the ${studies} and folders are shared among its members.`);\n control = new qx.ui.basic.Label(text).set({\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n this._addAt(control, this.self().POS.INTRO);\n break;\n }\n case \"title\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n backgroundColor: \"background-main\",\n placeholder: this.tr(\"Title\"),\n height: 30,\n });\n osparc.utils.Utils.setIdToWidget(control, \"workspaceEditorTitle\");\n this.bind(\"label\", control, \"value\");\n control.bind(\"value\", this, \"label\");\n this._addAt(control, this.self().POS.TITLE);\n break;\n }\n case \"description\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Description\"),\n height: 30,\n });\n this.bind(\"description\", control, \"value\");\n control.bind(\"value\", this, \"description\");\n this._addAt(control, this.self().POS.DESCRIPTION);\n break;\n }\n case \"thumbnail\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Thumbnail\"),\n height: 30,\n });\n this.bind(\"thumbnail\", control, \"value\");\n control.bind(\"value\", this, \"thumbnail\");\n this._addAt(control, this.self().POS.THUMBNAIL);\n break;\n }\n case \"sharing\": {\n control = new osparc.share.CollaboratorsWorkspace(this.getWorkspace());\n control.addListener(\"updateAccessRights\", () => this.fireDataEvent(\"updateAccessRights\", this.getWorkspace().getWorkspaceId()), this);\n this._addAt(control, this.self().POS.SHARING);\n break;\n }\n case \"buttons-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n this._addAt(control, this.self().POS.BUTTONS);\n break;\n }\n case \"save\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n osparc.utils.Utils.setIdToWidget(control, \"workspaceEditorSave\");\n control.addListener(\"execute\", () => this.__saveWorkspace(control), this);\n buttons.addAt(control, 1);\n break;\n }\n case \"cancel\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n control.addListener(\"execute\", () => this.cancel(), this);\n buttons.addAt(control, 0);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __applyWorkspace: function(workspace) {\n this.set({\n label: workspace.getName(),\n description: workspace.getDescription(),\n thumbnail: workspace.getThumbnail(),\n });\n },\n\n __createWorkspace: function() {\n const workspaceStore = osparc.store.Workspaces.getInstance();\n const workspaces = workspaceStore.getWorkspaces();\n const existingNames = workspaces.map(workspace => workspace.getName());\n const defaultName = osparc.utils.Utils.getUniqueName(\"New Workspace\", existingNames)\n const newWorkspaceData = {\n name: this.getLabel() || defaultName,\n description: this.getDescription(),\n thumbnail: this.getThumbnail(),\n };\n return workspaceStore.postWorkspace(newWorkspaceData)\n },\n\n __saveWorkspace: function(editButton) {\n if (this.__validator.validate()) {\n editButton.setFetching(true);\n const updateData = {\n name: this.getLabel(),\n description: this.getDescription(),\n thumbnail: this.getThumbnail(),\n };\n osparc.store.Workspaces.getInstance().putWorkspace(this.getWorkspace().getWorkspaceId(), updateData)\n .then(() => this.fireEvent(\"workspaceUpdated\"))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => editButton.setFetching(false));\n }\n },\n\n cancel: function() {\n if (this.__creatingWorkspace) {\n osparc.store.Workspaces.getInstance().deleteWorkspace(this.getWorkspace().getWorkspaceId())\n .then(() => this.fireEvent(\"workspaceDeleted\"))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n });\n }\n this.fireEvent(\"cancel\");\n },\n\n __onAppear: function() {\n const title = this.getChildControl(\"title\");\n title.focus();\n title.activate();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.FolderEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(newFolder = true) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n const manager = this.__validator = new qx.ui.form.validation.Manager();\n const title = this.getChildControl(\"title\");\n title.setRequired(true);\n manager.add(title);\n this.__doButton = newFolder ? this.getChildControl(\"create\") : this.getChildControl(\"save\");\n\n this.addListener(\"appear\", this.__onAppear, this);\n },\n\n properties: {\n label: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeLabel\"\n }\n },\n\n events: {\n \"createFolder\": \"qx.event.type.Event\",\n \"updateFolder\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __doButton: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"title\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n backgroundColor: \"background-main\",\n placeholder: this.tr(\"Title\"),\n height: 27\n });\n osparc.utils.Utils.setIdToWidget(control, \"folderEditorTitle\");\n this.bind(\"label\", control, \"value\");\n control.bind(\"value\", this, \"label\");\n this._add(control);\n break;\n }\n case \"create\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Create\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n const title = this.getChildControl(\"title\");\n title.blur();\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.fireEvent(\"createFolder\");\n }\n }, this);\n osparc.utils.Utils.setIdToWidget(control, \"folderEditorCreate\");\n buttons.addAt(control, 1);\n break;\n }\n case \"save\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n const title = this.getChildControl(\"title\");\n title.blur();\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.fireEvent(\"updateFolder\");\n }\n }, this);\n osparc.utils.Utils.setIdToWidget(control, \"folderEditorSave\");\n buttons.addAt(control, 1);\n break;\n }\n case \"buttonsLayout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n control.addAt(cancelButton, 0);\n this._add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __onAppear: function() {\n const title = this.getChildControl(\"title\");\n title.focus();\n title.activate();\n\n const command = new qx.ui.command.Command(\"Enter\");\n this.__doButton.setCommand(command);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.DragWidget\", {\n extend: qx.ui.core.Widget,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\",\n }));\n\n this.set({\n appearance: \"strong-ui\",\n opacity: 0.9,\n padding: 10,\n zIndex: 1000,\n decorator: \"rounded\",\n visibility: \"excluded\",\n });\n\n const root = qx.core.Init.getApplication().getRoot();\n root.add(this);\n\n this.initDropAllowed();\n },\n\n properties: {\n dropAllowed: {\n check: \"Boolean\",\n nullable: false,\n init: null,\n apply: \"__dropAllowed\",\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"allowed-icon\":\n control = new qx.ui.basic.Image();\n this._add(control);\n break;\n case \"dragged-resource\":\n control = new qx.ui.basic.Atom().set({\n font: \"text-14\",\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __dropAllowed: function(allowed) {\n this.getChildControl(\"allowed-icon\").set({\n source: allowed ? \"@FontAwesome5Solid/check/14\" : \"@FontAwesome5Solid/times/14\",\n textColor: allowed ? \"white\" : \"danger-red\",\n });\n },\n\n __onMouseMoveDragging: function(e) {\n if (this.getContentElement()) {\n // place it next to the \"dragdrop-own-cursor\" indicator\n const domEl = this.getContentElement().getDomElement();\n domEl.style.left = `${e.pageX + 15}px`;\n domEl.style.top = `${e.pageY + 5}px`;\n }\n },\n\n start: function() {\n this.show();\n document.addEventListener(\"mousemove\", this.__onMouseMoveDragging.bind(this), false);\n\n const cursor = qx.ui.core.DragDropCursor.getInstance();\n cursor.setAppearance(\"dragdrop-no-cursor\");\n },\n\n end: function() {\n this.exclude();\n document.removeEventListener(\"mousemove\", this.__onMouseMoveDragging.bind(this), false);\n\n const cursor = qx.ui.core.DragDropCursor.getInstance();\n cursor.setAppearance(\"dragdrop-cursor\");\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n Supports:\n \"categories\": [{\n \"id\": \"string\", // required\n \"title\": \"string\", // required\n \"description\": \"string\" // optional\n }],\n \"resources\": [{\n \"resourceType\": \"study\", // it will start an empty study\n \"title\": \"string\", // required\n \"icon\": \"fontAwesome inner link | url\", // optional\n \"newStudyLabel\": \"string\", // optional\n \"idToWidget\": \"string\" // optional\n }, {\n \"resourceType\": \"template\", // it will create a study from the template\n \"expectedTemplateLabel\": \"string\", // required\n \"title\": \"string\", // required\n \"icon\": \"fontAwesome inner link | url\", // optional\n \"newStudyLabel\": \"string\", // optional\n \"category\": \"categories.id\", // optional\n \"idToWidget\": \"string\" // optional\n }, {\n \"resourceType\": \"service\", // it will create a study from the service\n \"expectedKey\": \"service.key\", // required\n \"title\": \"string\", // required\n \"icon\": \"fontAwesome inner link | url\", // optional\n \"newStudyLabel\": \"string\", // optional\n \"category\": \"categories.id\", // optional\n \"idToWidget\": \"string\" // optional\n }, {\n \"resourceType\": \"service\", // it will create a study from the service\n \"myMostUsed\": 2, // required\n \"category\": \"categories.id\", // optional\n }, {\n \"showDisabled\": true, // it will show a disabled button on the defined item\n \"title\": \"string\", // required\n \"icon\": \"fontAwesome inner link | url\", // optional\n \"reason\": \"string\", // optional\n \"newStudyLabel\": \"string\", // optional\n \"category\": \"categories.id\", // optional\n \"idToWidget\": \"string\" // optional\n }]\n */\nqx.Class.define(\"osparc.dashboard.NewPlusMenu\", {\n extend: qx.ui.menu.Menu,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n appearance: \"menu-wider\",\n position: \"bottom-left\",\n spacingX: 20,\n });\n\n osparc.utils.Utils.setIdToWidget(this, \"newPlusMenu\");\n\n this.getContentElement().setStyles({\n \"border-color\": qx.theme.manager.Color.getInstance().resolve(\"strong-main\"),\n });\n\n this.__categoryHeaders = [];\n\n this.__addItems();\n },\n\n events: {\n \"createFolder\": \"qx.event.type.Data\",\n \"newEmptyStudyClicked\": \"qx.event.type.Data\",\n \"newStudyFromTemplateClicked\": \"qx.event.type.Data\",\n \"newStudyFromServiceClicked\": \"qx.event.type.Data\",\n },\n\n statics: {\n createMenuButton: function(icon, title, infoText) {\n title = osparc.utils.Utils.replaceTokens(\n title,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n title = title.replace(/
/g, \" \");\n const menuButton = new qx.ui.menu.Button().set({\n icon: icon || null,\n label: title,\n font: \"text-16\",\n allowGrowX: true,\n });\n menuButton.getChildControl(\"icon\").set({\n alignX: \"center\",\n });\n menuButton.getChildControl(\"label\").set({\n rich: true,\n marginRight: 20,\n });\n if (infoText) {\n infoText = osparc.utils.Utils.replaceTokens(\n infoText,\n \"replace_me_product_name\",\n osparc.store.StaticInfo.getInstance().getDisplayName()\n );\n const infoHint = new osparc.ui.hint.InfoHint(infoText).set({\n source: osparc.ui.hint.InfoHint.INFO_ICON + \"/16\",\n });\n // where the shortcut is supposed to go\n // eslint-disable-next-line no-underscore-dangle\n menuButton._add(infoHint, {column: 2});\n }\n return menuButton;\n },\n\n createHeader: function(icon, label, infoText) {\n return this.createMenuButton(icon, label, infoText).set({\n anonymous: true,\n cursor: \"default\",\n font: \"text-14\",\n textColor: \"text-darker\",\n });\n },\n },\n\n members: {\n __categoryHeaders: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"new-folder\":\n control = this.self().createMenuButton(\n osparc.dashboard.CardBase.NEW_ICON + \"16\",\n this.tr(\"New Folder\"),\n );\n osparc.utils.Utils.setIdToWidget(control, \"newFolderButton\");\n control.addListener(\"tap\", () => this.__createNewFolder());\n this.add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __addItems: async function() {\n this.getChildControl(\"new-folder\");\n this.addSeparator();\n await this.__addNewStudyItems();\n },\n\n __addNewStudyItems: async function() {\n const plusButtonConfig = osparc.store.Products.getInstance().getPlusButtonUiConfig();\n if (plusButtonConfig) {\n await osparc.data.Resources.get(\"templates\")\n .then(templates => {\n if (plusButtonConfig[\"categories\"]) {\n this.__addCategories(plusButtonConfig[\"categories\"]);\n }\n plusButtonConfig[\"resources\"].forEach(newStudyData => {\n if (newStudyData[\"showDisabled\"]) {\n this.__addDisabledButton(newStudyData);\n } else if (newStudyData[\"resourceType\"] === \"study\") {\n this.__addEmptyStudyButton(newStudyData);\n } else if (newStudyData[\"resourceType\"] === \"template\") {\n this.__addFromTemplateButton(newStudyData, templates);\n } else if (newStudyData[\"resourceType\"] === \"service\") {\n this.__addFromServiceButton(newStudyData);\n }\n });\n });\n }\n },\n\n __getLastIdxFromCategory: function(categoryId) {\n for (let i=this.getChildren().length-1; i>=0; i--) {\n const child = this.getChildren()[i];\n if (child && child[\"categoryId\"] && child[\"categoryId\"] === categoryId) {\n return i;\n }\n }\n return null;\n },\n\n __addCategories: function(categories) {\n categories.forEach(category => {\n const categoryHeader = this.self().createHeader(null, category[\"title\"], category[\"description\"]);\n categoryHeader[\"categoryId\"] = category[\"id\"];\n if (this.__categoryHeaders.length) {\n // add spacing between categories\n categoryHeader.setMarginTop(10);\n }\n this.__categoryHeaders.push(categoryHeader);\n this.add(categoryHeader);\n });\n },\n\n __addIcon: function(menuButton, resourceInfo, resourceMetadata) {\n let source = null;\n if (resourceInfo && resourceInfo[\"icon\"]) {\n source = resourceInfo[\"icon\"];\n } else {\n source = osparc.utils.Utils.getIconFromResource(resourceMetadata);\n }\n\n if (source) {\n const thumbnail = new osparc.ui.basic.Thumbnail(source, 24, 24).set({\n minHeight: 24,\n minWidth: 24,\n });\n thumbnail.getChildControl(\"image\").set({\n anonymous: true,\n decorator: \"rounded\",\n });\n // eslint-disable-next-line no-underscore-dangle\n menuButton._add(thumbnail, {column: 0});\n }\n },\n\n __addFromResourceButton: function(menuButton, category) {\n let idx = null;\n if (category) {\n idx = this.__getLastIdxFromCategory(category);\n }\n if (idx) {\n menuButton[\"categoryId\"] = category;\n this.addAt(menuButton, idx+1);\n } else {\n this.add(menuButton);\n }\n },\n\n __addDisabledButton: function(newStudyData) {\n const menuButton = this.self().createMenuButton(null, newStudyData[\"title\"], newStudyData[\"reason\"]);\n osparc.utils.Utils.setIdToWidget(menuButton, newStudyData[\"idToWidget\"]);\n menuButton.setEnabled(false);\n\n this.__addIcon(menuButton, newStudyData);\n this.__addFromResourceButton(menuButton, newStudyData[\"category\"]);\n },\n\n __addEmptyStudyButton: function(newStudyData) {\n const menuButton = this.self().createMenuButton(null, newStudyData[\"title\"]);\n osparc.utils.Utils.setIdToWidget(menuButton, newStudyData[\"idToWidget\"]);\n\n menuButton.addListener(\"tap\", () => {\n this.fireDataEvent(\"newEmptyStudyClicked\", {\n newStudyLabel: newStudyData[\"newStudyLabel\"],\n });\n });\n\n this.__addIcon(menuButton, newStudyData);\n this.__addFromResourceButton(menuButton, newStudyData[\"category\"]);\n },\n\n __addFromTemplateButton: function(newStudyData, templates) {\n const menuButton = this.self().createMenuButton(null, newStudyData[\"title\"]);\n osparc.utils.Utils.setIdToWidget(menuButton, newStudyData[\"idToWidget\"]);\n // disable it until found in templates store\n menuButton.setEnabled(false);\n\n let templateMetadata = templates.find(t => t.name === newStudyData[\"expectedTemplateLabel\"]);\n if (templateMetadata) {\n menuButton.setEnabled(true);\n menuButton.addListener(\"tap\", () => {\n this.fireDataEvent(\"newStudyFromTemplateClicked\", {\n templateData: templateMetadata,\n newStudyLabel: newStudyData[\"newStudyLabel\"],\n });\n });\n this.__addIcon(menuButton, newStudyData, templateMetadata);\n this.__addFromResourceButton(menuButton, newStudyData[\"category\"]);\n }\n },\n\n __addFromServiceButton: function(newStudyData) {\n const addListenerToButton = (menuButton, latestMetadata) => {\n menuButton.addListener(\"tap\", () => {\n this.fireDataEvent(\"newStudyFromServiceClicked\", {\n serviceMetadata: latestMetadata,\n newStudyLabel: newStudyData[\"newStudyLabel\"],\n });\n });\n\n const cb = e => {\n this.hide();\n // so that is not consumed by the menu button itself\n e.stopPropagation();\n latestMetadata[\"resourceType\"] = \"service\";\n const resourceDetails = new osparc.dashboard.ResourceDetails(latestMetadata);\n osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n }\n const infoButton = new osparc.ui.basic.IconButton(osparc.ui.hint.InfoHint.INFO_ICON + \"/16\", cb);\n // where the shortcut is supposed to go\n // eslint-disable-next-line no-underscore-dangle\n menuButton._add(infoButton, {column: 2});\n };\n\n if (\"expectedKey\" in newStudyData) {\n const menuButton = this.self().createMenuButton(null, newStudyData[\"title\"]);\n osparc.utils.Utils.setIdToWidget(menuButton, newStudyData[\"idToWidget\"]);\n // disable it until found in services store\n menuButton.setEnabled(false);\n\n const key = newStudyData[\"expectedKey\"];\n // Include deprecated versions, they should all be updatable to a non deprecated version\n const versions = osparc.service.Utils.getVersions(key, false);\n if (versions.length && newStudyData) {\n // scale to latest compatible\n const latestVersion = versions[0];\n const latestCompatible = osparc.service.Utils.getLatestCompatible(key, latestVersion);\n osparc.store.Services.getService(latestCompatible[\"key\"], latestCompatible[\"version\"])\n .then(latestMetadata => {\n // make sure this one is not deprecated\n if (osparc.service.Utils.isDeprecated(latestMetadata)) {\n return;\n }\n menuButton.setEnabled(true);\n this.__addIcon(menuButton, newStudyData, latestMetadata);\n this.__addFromResourceButton(menuButton, newStudyData[\"category\"]);\n addListenerToButton(menuButton, latestMetadata);\n });\n }\n } else if (\"myMostUsed\" in newStudyData) {\n const excludeFrontend = true;\n const excludeDeprecated = true\n osparc.store.Services.getServicesLatestList(excludeFrontend, excludeDeprecated)\n .then(servicesList => {\n osparc.service.Utils.sortObjectsBasedOn(servicesList, {\n \"sort\": \"hits\",\n \"order\": \"down\"\n });\n for (let i=0; i 0) {\n const menuButton = new qx.ui.menu.Button().set({\n label: latestMetadata[\"name\"],\n font: \"text-16\",\n allowGrowX: true,\n });\n this.__addIcon(menuButton, null, latestMetadata);\n this.__addFromResourceButton(menuButton, newStudyData[\"category\"]);\n addListenerToButton(menuButton, latestMetadata);\n }\n }\n });\n }\n },\n\n __createNewFolder: function() {\n const newFolder = true;\n const folderEditor = new osparc.editor.FolderEditor(newFolder);\n const title = this.tr(\"New Folder\");\n const win = osparc.ui.window.Window.popUpInWindow(folderEditor, title, 300, 120);\n folderEditor.addListener(\"createFolder\", () => {\n const name = folderEditor.getLabel();\n this.fireDataEvent(\"createFolder\", {\n name,\n });\n win.close();\n });\n folderEditor.addListener(\"cancel\", () => win.close());\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.ContextBreadcrumbs\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n\n osparc.store.Store.getInstance().addListener(\"changeStudyBrowserContext\", () => this.__rebuild(), this);\n },\n\n events: {\n \"locationChanged\": \"qx.event.type.Data\",\n },\n\n properties: {\n currentWorkspaceId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentWorkspaceId\",\n apply: \"__rebuild\"\n },\n\n currentFolderId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changeCurrentFolderId\",\n apply: \"__rebuild\"\n }\n },\n\n members: {\n __rebuild: function() {\n this._removeAll();\n\n const currentContext = osparc.store.Store.getInstance().getStudyBrowserContext();\n if (currentContext !== \"studiesAndFolders\") {\n return;\n }\n\n if (this.getCurrentFolderId()) {\n const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());\n this.__createUpstreamButtons(currentFolder);\n }\n\n const currentFolderButton = this.__createCurrentFolderButton();\n if (currentFolderButton) {\n this._add(currentFolderButton);\n }\n },\n\n __createUpstreamButtons: function(childFolder) {\n if (childFolder) {\n const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());\n if (parentFolder) {\n this._addAt(this.__createArrow(), 0);\n const upstreamButton = this.__createFolderButton(parentFolder);\n if (upstreamButton) {\n this._addAt(upstreamButton, 0);\n }\n this.__createUpstreamButtons(parentFolder);\n } else {\n this._addAt(this.__createArrow(), 0);\n }\n }\n },\n\n __createCurrentFolderButton: function() {\n const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());\n return this.__createFolderButton(currentFolder);\n },\n\n __changeFolder: function(folderId) {\n const workspaceId = this.getCurrentWorkspaceId();\n this.set({\n currentWorkspaceId: workspaceId,\n currentFolderId: folderId,\n });\n this.fireDataEvent(\"locationChanged\", {\n workspaceId,\n folderId,\n });\n },\n\n __createFolderButton: function(folder) {\n if (folder) {\n const folderButton = new qx.ui.form.Button(folder.getName()).set({\n maxWidth: 200\n });\n folder.bind(\"name\", folderButton, \"label\");\n folderButton.addListener(\"execute\", () => {\n const folderId = folder ? folder.getFolderId() : null;\n this.__changeFolder(folderId);\n }, this);\n folderButton.set({\n backgroundColor: \"transparent\",\n textColor: \"text\",\n gap: 5\n });\n return folderButton;\n }\n return null;\n },\n\n __createArrow: function() {\n return new qx.ui.basic.Label(\"/\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.WorkbenchToolbar\", {\n extend: osparc.desktop.Toolbar,\n\n events: {\n \"zoomIn\": \"qx.event.type.Event\",\n \"zoomOut\": \"qx.event.type.Event\",\n \"zoomReset\": \"qx.event.type.Event\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"start-stop-btns\":\n control = new osparc.desktop.StartStopButtons();\n this._add(control);\n break;\n case \"zoom-btns\": {\n control = new osparc.desktop.ZoomButtons();\n [\n \"zoomIn\",\n \"zoomOut\",\n \"zoomReset\"\n ].forEach(signalName => {\n control.addListener(signalName, () => {\n this.fireEvent(signalName);\n }, this);\n });\n this._add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n // overridden\n _buildLayout: function() {\n this.getChildControl(\"start-stop-btns\");\n\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n this._createChildControl(\"zoom-btns\");\n },\n\n // overridden\n _populateNodesNavigationLayout: function() {\n return;\n },\n\n // overridden\n _applyStudy: function(study) {\n this.base(arguments, study);\n\n if (study) {\n this.getChildControl(\"start-stop-btns\").setStudy(study);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2009 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * David Perez Carmona (david-perez)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A cell event instance contains all data for pointer events related to cells in\n * a pane.\n **/\nqx.Class.define(\"qx.ui.virtual.core.CellEvent\",\n{\n extend : qx.event.type.Pointer,\n\n\n properties :\n {\n /** The table row of the event target. */\n row :\n {\n check : \"Integer\",\n nullable: true\n },\n\n /** The table column of the event target. */\n column :\n {\n check : \"Integer\",\n nullable: true\n }\n },\n\n\n members :\n {\n /**\n * Initialize the event.\n *\n * @param scroller {qx.ui.table.pane.Scroller} The tables pane scroller.\n * @param me {qx.event.type.Pointer} The original pointer event.\n * @param row {Integer?null} The cell's row index.\n * @param column {Integer?null} The cell's column index.\n */\n init : function(scroller, me, row, column)\n {\n me.clone(this);\n this.setBubbles(false);\n\n this.setRow(row);\n this.setColumn(column);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Tobias Oetiker (oetiker)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * VirtualTreeItem used mainly by NodesTree\n *\n * It consists of an entry icon, label and Node id\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * tree.setDelegate({\n * createItem: () => new osparc.widget.NodeTreeItem(),\n * bindItem: (c, item, id) => {\n * c.bindDefaultProperties(item, id);\n * c.bindProperty(\"label\", \"label\", null, item, id);\n * c.bindProperty(\"nodeId\", \"nodeId\", null, item, id);\n * }\n * });\n * \n */\n\nqx.Class.define(\"osparc.widget.NodeTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n indent: 5,\n textColor: \"text\",\n allowGrowX: true,\n alignY: \"middle\",\n decorator: \"rounded\",\n });\n\n this.__setNotHoveredStyle();\n this.__attachEventHandlers();\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n init: null,\n nullable: false,\n apply: \"__applyStudy\",\n event: \"changeStudy\"\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false,\n apply: \"__applyNode\",\n event: \"changeNode\"\n },\n\n id: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeId\"\n },\n\n iconColor: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeIconColor\",\n apply: \"__applyIconColor\"\n },\n\n simpleNode: {\n check: \"Boolean\",\n nullable: true,\n init: false,\n event: \"changeSimpleNode\"\n }\n },\n\n events: {\n \"fullscreenNode\": \"qx.event.type.Data\",\n \"renameNode\": \"qx.event.type.Data\",\n \"infoNode\": \"qx.event.type.Data\",\n \"deleteNode\": \"qx.event.type.Data\"\n },\n\n members: {\n __optionsMenu: null,\n\n __applyStudy: function(study) {\n const label = this.getChildControl(\"label\");\n osparc.utils.Utils.setKeyToWidget(label, \"root\");\n\n study.bind(\"name\", this, \"toolTipText\");\n\n this.getChildControl(\"delete-button\").exclude();\n },\n\n __applyNode: function(node) {\n const label = this.getChildControl(\"label\");\n osparc.utils.Utils.setKeyToWidget(label, node.getNodeId());\n\n node.bind(\"label\", this, \"toolTipText\");\n\n if (node.isDynamic()) {\n this.getChildControl(\"fullscreen-button\").show();\n\n const startButton = this.getChildControl(\"start-button\");\n node.attachHandlersToStartButton(startButton);\n\n const stopButton = this.getChildControl(\"stop-button\");\n node.attachHandlersToStopButton(stopButton);\n }\n\n const markerBtn = this.getChildControl(\"marker-button\");\n markerBtn.show();\n node.bind(\"marker\", markerBtn, \"label\", {\n converter: val => val ? this.tr(\"Remove Marker\") : this.tr(\"Add Marker\")\n });\n\n const marker = this.getChildControl(\"marker\");\n const updateMarker = () => {\n node.bind(\"marker\", marker, \"visibility\", {\n converter: val => val ? \"visible\" : \"excluded\"\n });\n if (node.getMarker()) {\n node.getMarker().bind(\"color\", marker, \"textColor\");\n }\n };\n node.addListener(\"changeMarker\", () => updateMarker());\n updateMarker();\n\n const deleteBtn = this.getChildControl(\"delete-button\");\n node.getStudy().bind(\"pipelineRunning\", deleteBtn, \"enabled\", {\n converter: running => !running\n });\n },\n\n __applyIconColor: function(textColor) {\n this.getChildControl(\"icon\").set({\n textColor\n });\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"buttons\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n control.exclude();\n this.addWidget(control);\n break;\n }\n case \"fullscreen-button\": {\n control = new qx.ui.form.Button().set({\n icon: \"@MaterialIcons/fullscreen/12\",\n backgroundColor: \"transparent\",\n toolTipText: this.tr(\"Full Screen\"),\n alignY: \"middle\",\n visibility: \"excluded\"\n });\n control.addListener(\"execute\", () => this.fireDataEvent(\"fullscreenNode\", this.getId()));\n const part = this.getChildControl(\"buttons\");\n part.add(control);\n break;\n }\n case \"options-menu-button\": {\n const optionsMenu = this.__optionsMenu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n control = new qx.ui.form.MenuButton().set({\n menu: optionsMenu,\n icon: \"@FontAwesome5Solid/ellipsis-v/8\",\n allowGrowX: false,\n alignY: \"middle\"\n });\n const part = this.getChildControl(\"buttons\");\n part.add(control);\n break;\n }\n case \"start-button\": {\n control = new qx.ui.menu.Button().set({\n backgroundColor: \"background-main\",\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/10\",\n visibility: \"excluded\"\n });\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"stop-button\": {\n control = new qx.ui.menu.Button().set({\n backgroundColor: \"background-main\",\n label: this.tr(\"Stop\"),\n icon: \"@FontAwesome5Solid/stop/10\",\n visibility: \"excluded\"\n });\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"rename-button\": {\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Rename\"),\n icon: \"@FontAwesome5Solid/i-cursor/10\"\n });\n control.getChildControl(\"shortcut\").setValue(\"F2\");\n control.addListener(\"execute\", () => this.fireDataEvent(\"renameNode\", this.getId()));\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"marker-button\": {\n control = new qx.ui.menu.Button().set({\n icon: \"@FontAwesome5Solid/bookmark/10\",\n visibility: \"excluded\"\n });\n control.addListener(\"execute\", () => this.getNode().toggleMarker());\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"info-button\": {\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Information...\"),\n icon: \"@FontAwesome5Solid/info/10\"\n });\n control.getChildControl(\"shortcut\").setValue(\"I\");\n control.addListener(\"execute\", () => this.fireDataEvent(\"infoNode\", this.getId()));\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"delete-button\": {\n control = new qx.ui.menu.Button().set({\n label: this.tr(\"Delete\"),\n icon: \"@FontAwesome5Solid/trash/10\"\n });\n control.getChildControl(\"shortcut\").setValue(\"Del\");\n control.addListener(\"execute\", () => this.fireDataEvent(\"deleteNode\", this.getId()));\n const optionsMenu = this.getChildControl(\"options-menu-button\");\n optionsMenu.getMenu().add(control);\n break;\n }\n case \"node-id\": {\n control = new qx.ui.basic.Label().set({\n maxWidth: 70,\n alignY: \"middle\",\n cursor: \"copy\"\n });\n control.addListener(\"tap\", () => osparc.utils.Utils.copyTextToClipboard(this.getId()));\n this.bind(\"id\", control, \"value\", {\n converter: value => value && value.substring(0, 8)\n });\n const permissions = osparc.data.Permissions.getInstance();\n permissions.bind(\"role\", control, \"visibility\", {\n converter: () => !this.isSimpleNode() && permissions.canDo(\"study.nodestree.uuid.read\") ? \"visible\" : \"excluded\"\n });\n this.bind(\"simpleNode\", control, \"visibility\", {\n converter: simpleNode => !simpleNode && permissions.canDo(\"study.nodestree.uuid.read\") ? \"visible\" : \"excluded\"\n });\n this.addWidget(control);\n break;\n }\n case \"marker\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/bookmark/12\",\n padding: 4,\n visibility: \"excluded\"\n });\n this.addWidget(control);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n _addWidgets: function() {\n // Here's our indentation and tree-lines\n this.addOpenButton();\n\n // The standard tree icon follows\n this.addIcon();\n this.getChildControl(\"icon\").set({\n alignX: \"center\",\n alignY: \"middle\",\n width: 22\n });\n\n // The label\n this.addLabel();\n const label = this.getChildControl(\"label\");\n osparc.utils.Utils.setIdToWidget(label, \"nodeTreeItem\");\n label.set({\n allowGrowX: true,\n allowShrinkX: true,\n // override the one set in osparc-theme\n paddingTop: 0\n });\n label.setLayoutProperties({\n flex: 1\n });\n\n this.getChildControl(\"fullscreen-button\");\n this.getChildControl(\"start-button\");\n this.getChildControl(\"stop-button\");\n this.getChildControl(\"rename-button\");\n this.getChildControl(\"marker-button\");\n this.getChildControl(\"info-button\");\n this.getChildControl(\"delete-button\");\n this.getChildControl(\"node-id\");\n this.getChildControl(\"marker\");\n },\n\n __attachEventHandlers: function() {\n this.addListener(\"mouseover\", () => {\n if (this.isSimpleNode()) {\n return;\n }\n this.getChildControl(\"buttons\").show();\n this.__setHoveredStyle();\n });\n this.addListener(\"mouseout\", () => {\n if (this.isSimpleNode()) {\n return;\n }\n if (this.__optionsMenu.isVisible()) {\n const hideButtonsIfMouseOut = event => {\n if (osparc.utils.Utils.isMouseOnElement(this.__optionsMenu, event, 5)) {\n return;\n }\n document.removeEventListener(\"mousemove\", hideButtonsIfMouseOut);\n this.getChildControl(\"buttons\").exclude();\n this.__optionsMenu.exclude();\n };\n document.addEventListener(\"mousemove\", hideButtonsIfMouseOut);\n } else {\n this.getChildControl(\"buttons\").exclude();\n }\n this.__setNotHoveredStyle();\n });\n },\n\n __setHoveredStyle: function() {\n osparc.utils.Utils.addBorder(this, 1, qx.theme.manager.Color.getInstance().resolve(\"background-selected-dark\"));\n },\n\n __setNotHoveredStyle: function() {\n osparc.utils.Utils.hideBorder(this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Collection of static methods for converting data coming from the webserver into suitable\n * data for the frontend.\n */\n\nqx.Class.define(\"osparc.data.Converters\", {\n type: \"static\",\n\n statics: {\n __mergeFileTreeChildren: function(one, two) {\n let newDir = true;\n for (let i=0; i {\n if (a[\"label\"] > b[\"label\"]) {\n return 1;\n }\n if (a[\"label\"] < b[\"label\"]) {\n return -1;\n }\n return 0;\n });\n children.forEach(child => {\n if (\"children\" in child) {\n this.sortFiles(child[\"children\"]);\n }\n });\n }\n },\n\n sortModelByLabel: function(model) {\n model.getChildren().sort((a, b) => {\n if (a.getLabel() > b.getLabel()) {\n return 1;\n }\n if (a.getLabel() < b.getLabel()) {\n return -1;\n }\n return 0;\n });\n },\n\n fromDSMToVirtualTreeModel: function(datasetId, files) {\n let children = [];\n for (let i=0; i\n * tree.setDelegate({\n * createItem: () => new osparc.file.FileTreeItem(),\n * bindItem: (c, item, id) => {\n * c.bindDefaultProperties(item, id);\n * c.bindProperty(\"fileId\", \"fileId\", null, item, id);\n * c.bindProperty(\"location\", \"location\", null, item, id);\n * c.bindProperty(\"path\", \"path\", null, item, id);\n * c.bindProperty(\"size\", \"size\", null, item, id);\n * }\n * });\n * \n */\n\nqx.Class.define(\"osparc.file.FileTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n indent: 12, // defaults to 19,\n decorator: \"rounded\",\n });\n\n // create a date format like \"Oct. 19, 2018 11:31 AM\"\n this._dateFormat = new qx.util.format.DateFormat(\n qx.locale.Date.getDateFormat(\"medium\") + \" \" +\n qx.locale.Date.getTimeFormat(\"short\")\n );\n },\n\n properties: {\n location: {\n check: \"String\",\n event: \"changePath\",\n nullable: true\n },\n\n path: {\n check: \"String\",\n event: \"changePath\",\n nullable: true\n },\n\n pathLabel: {\n check: \"Array\",\n event: \"changePathLabel\",\n nullable: true\n },\n\n itemId: {\n check: \"String\",\n event: \"changeItemId\",\n apply: \"__applyItemId\",\n nullable: true\n },\n\n isDataset: {\n check: \"Boolean\",\n event: \"changeIsDataset\",\n init: false,\n nullable: false\n },\n\n datasetId: {\n check: \"String\",\n event: \"changeDatasetId\",\n nullable: true\n },\n\n loaded: {\n check: \"Boolean\",\n event: \"changeLoaded\",\n init: true,\n nullable: false\n },\n\n fileId: {\n check: \"String\",\n event: \"changeFileId\",\n nullable: true\n },\n\n lastModified: {\n check: \"String\",\n event: \"changeLastModified\",\n nullable: true\n },\n\n size: {\n check: \"String\",\n event: \"changeSize\",\n nullable: true\n }\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n _dateFormat: null,\n\n // overridden\n _addWidgets: function() {\n // Here's our indentation and tree-lines\n this.addSpacer();\n this.addOpenButton();\n\n // The standard tree icon follows\n this.addIcon();\n\n // The label\n this.addLabel();\n\n // All else should be right justified\n this.addWidget(new qx.ui.core.Spacer(), {\n flex: 1\n });\n\n // Add lastModified\n const lastModifiedWidget = new qx.ui.basic.Label().set({\n maxWidth: 140,\n textAlign: \"right\"\n });\n let that = this;\n this.bind(\"lastModified\", lastModifiedWidget, \"value\", {\n converter: function(value) {\n if (value === null) {\n return \"\";\n }\n const date = new Date(value);\n return that._dateFormat.format(date); // eslint-disable-line no-underscore-dangle\n }\n });\n this.addWidget(lastModifiedWidget);\n\n // Add size\n const sizeWidget = new qx.ui.basic.Label().set({\n maxWidth: 70,\n textAlign: \"right\"\n });\n this.bind(\"size\", sizeWidget, \"value\", {\n converter: function(value) {\n if (value === null) {\n return \"\";\n }\n return osparc.utils.Utils.bytesToSize(value);\n }\n });\n this.addWidget(sizeWidget);\n },\n\n __applyItemId: function(value, old) {\n osparc.utils.Utils.setIdToWidget(this, \"fileTreeItem_\" + value);\n },\n\n // override\n _applyIcon: function(value, old) {\n this.base(arguments, value, old);\n const icon = this.getChildControl(\"icon\", true);\n if (icon && value === \"@FontAwesome5Solid/circle-notch/12\") {\n icon.setPadding(0);\n icon.setMarginRight(4);\n icon.getContentElement().addClass(\"rotate\");\n } else {\n icon.resetPadding();\n icon.resetMargin();\n icon.getContentElement().removeClass(\"rotate\");\n }\n }\n },\n\n destruct: function() {\n this._dateFormat.dispose();\n this._dateFormat = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.form.ContentSchemaArray\", {\n extend: qx.ui.form.TextField,\n\n construct: function(contentSchema) {\n this.base(arguments);\n\n if (contentSchema) {\n this.setContentSchema(contentSchema);\n }\n },\n\n properties: {\n contentSchema: {\n check: \"Object\",\n init: null,\n nullable: true,\n apply: \"__applyContentSchema\"\n },\n\n validator: {\n check: \"qx.ui.form.validation.Manager\",\n init: null,\n nullable: true\n }\n },\n\n statics: {\n addArrayBrackets: function(label) {\n if (label.charAt(0) !== \"[\") {\n label = \"[\" + label;\n }\n if (label.charAt(label.length-1) !== \"]\") {\n label += \"]\";\n }\n return label;\n }\n },\n\n members: {\n // overrriden\n getValue: function() {\n let value = this.base(arguments);\n if (value === null) {\n value = \"\";\n }\n const cSchema = this.getContentSchema();\n if (cSchema) {\n if (cSchema.type === \"array\") {\n value = this.self().addArrayBrackets(value);\n }\n }\n return value;\n },\n\n // overrriden\n setValue: function(value) {\n const cSchema = this.getContentSchema();\n if (cSchema) {\n if (cSchema.type === \"array\") {\n if (Array.isArray(value)) {\n value = JSON.stringify(value);\n }\n value = this.self().addArrayBrackets(value);\n }\n }\n this.base(arguments, value);\n },\n\n __applyContentSchema: function(contentSchema) {\n const isValidatable = Object.keys(contentSchema).some(r => [\"items\", \"minItems\", \"maxItems\"].indexOf(r) >= 0);\n if (isValidatable) {\n const validator = osparc.ui.form.ContentSchemaHelper.createArrayValidator(this, contentSchema);\n this.setValidator(validator);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Martin Wittemann (martinwittemann)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * A *spinner* is a control that allows you to adjust a numerical value,\n * typically within an allowed range. An obvious example would be to specify the\n * month of a year as a number in the range 1 - 12.\n *\n * To do so, a spinner encompasses a field to display the current value (a\n * textfield) and controls such as up and down buttons to change that value. The\n * current value can also be changed by editing the display field directly, or\n * using mouse wheel and cursor keys.\n *\n * An optional {@link #numberFormat} property allows you to control the format of\n * how a value can be entered and will be displayed.\n *\n * A brief, but non-trivial example:\n *\n * \n * var s = new qx.ui.form.Spinner();\n * s.set({\n * maximum: 3000,\n * minimum: -3000\n * });\n * var nf = new qx.util.format.NumberFormat();\n * nf.setMaximumFractionDigits(2);\n * s.setNumberFormat(nf);\n * \n *\n * A spinner instance without any further properties specified in the\n * constructor or a subsequent *set* command will appear with default\n * values and behaviour.\n *\n * @childControl textfield {qx.ui.form.TextField} holds the current value of the spinner\n * @childControl upbutton {qx.ui.form.Button} button to increase the value\n * @childControl downbutton {qx.ui.form.Button} button to decrease the value\n *\n */\nqx.Class.define(\"qx.ui.form.Spinner\",\n{\n extend : qx.ui.core.Widget,\n implement : [\n qx.ui.form.INumberForm,\n qx.ui.form.IRange,\n qx.ui.form.IForm\n ],\n include : [\n qx.ui.core.MContentPadding,\n qx.ui.form.MForm\n ],\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param min {Number} Minimum value\n * @param value {Number} Current value\n * @param max {Number} Maximum value\n */\n construct : function(min, value, max)\n {\n this.base(arguments);\n\n // MAIN LAYOUT\n var layout = new qx.ui.layout.Grid();\n layout.setColumnFlex(0, 1);\n layout.setRowFlex(0,1);\n layout.setRowFlex(1,1);\n this._setLayout(layout);\n\n // EVENTS\n this.addListener(\"keydown\", this._onKeyDown, this);\n this.addListener(\"keyup\", this._onKeyUp, this);\n this.addListener(\"roll\", this._onRoll, this);\n\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().addListener(\"changeLocale\", this._onChangeLocale, this);\n }\n\n // CREATE CONTROLS\n var textField = this._createChildControl(\"textfield\");\n this._createChildControl(\"upbutton\");\n this._createChildControl(\"downbutton\");\n\n // INITIALIZATION\n if (min != null) {\n this.setMinimum(min);\n }\n\n if (max != null) {\n this.setMaximum(max);\n }\n\n if (value !== undefined) {\n this.setValue(value);\n } else {\n this.initValue();\n }\n\n // forward the focusin and focusout events to the textfield. The textfield\n // is not focusable so the events need to be forwarded manually.\n this.addListener(\"focusin\", function(e) {\n textField.fireNonBubblingEvent(\"focusin\", qx.event.type.Focus);\n }, this);\n\n this.addListener(\"focusout\", function(e) {\n textField.fireNonBubblingEvent(\"focusout\", qx.event.type.Focus);\n }, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties:\n {\n // overridden\n appearance:\n {\n refine : true,\n init : \"spinner\"\n },\n\n // overridden\n focusable :\n {\n refine : true,\n init : true\n },\n\n /** The amount to increment on each event (keypress or pointerdown) */\n singleStep:\n {\n check : \"Number\",\n init : 1\n },\n\n /** The amount to increment on each pageup/pagedown keypress */\n pageStep:\n {\n check : \"Number\",\n init : 10\n },\n\n /** minimal value of the Range object */\n minimum:\n {\n check : \"Number\",\n apply : \"_applyMinimum\",\n init : 0,\n event: \"changeMinimum\"\n },\n\n /** The value of the spinner. */\n value:\n {\n check : \"this._checkValue(value)\",\n nullable : true,\n apply : \"_applyValue\",\n init : 0,\n event : \"changeValue\"\n },\n\n /** maximal value of the Range object */\n maximum:\n {\n check : \"Number\",\n apply : \"_applyMaximum\",\n init : 100,\n event: \"changeMaximum\"\n },\n\n /** whether the value should wrap around */\n wrap:\n {\n check : \"Boolean\",\n init : false,\n apply : \"_applyWrap\"\n },\n\n /** Controls whether the textfield of the spinner is editable or not */\n editable :\n {\n check : \"Boolean\",\n init : true,\n apply : \"_applyEditable\"\n },\n\n /** Controls the display of the number in the textfield */\n numberFormat :\n {\n check : \"qx.util.format.NumberFormat\",\n apply : \"_applyNumberFormat\",\n nullable : true\n },\n\n // overridden\n allowShrinkY :\n {\n refine : true,\n init : false\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /** Saved last value in case invalid text is entered */\n __lastValidValue : null,\n\n /** Whether the page-up button has been pressed */\n __pageUpMode : false,\n\n /** Whether the page-down button has been pressed */\n __pageDownMode : false,\n\n\n /*\n ---------------------------------------------------------------------------\n WIDGET INTERNALS\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"textfield\":\n control = new qx.ui.form.TextField();\n control.setFilter(this._getFilterRegExp());\n control.addState(\"inner\");\n control.setWidth(40);\n control.setFocusable(false);\n control.addListener(\"changeValue\", this._onTextChange, this);\n\n this._add(control, {column: 0, row: 0, rowSpan: 2});\n break;\n\n case \"upbutton\":\n control = new qx.ui.form.RepeatButton();\n control.addState(\"inner\");\n control.setFocusable(false);\n control.addListener(\"execute\", this._countUp, this);\n this._add(control, {column: 1, row: 0});\n break;\n\n case \"downbutton\":\n control = new qx.ui.form.RepeatButton();\n control.addState(\"inner\");\n control.setFocusable(false);\n control.addListener(\"execute\", this._countDown, this);\n this._add(control, {column:1, row: 1});\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n /**\n * Returns the regular expression used as the text field's filter\n *\n * @return {RegExp} The filter RegExp.\n */\n _getFilterRegExp : function()\n {\n var decimalSeparator, groupSeparator, locale;\n\n if (this.getNumberFormat() !== null) {\n locale = this.getNumberFormat().getLocale();\n } else {\n locale = qx.locale.Manager.getInstance().getLocale();\n }\n\n decimalSeparator = qx.locale.Number.getDecimalSeparator(locale);\n groupSeparator = qx.locale.Number.getGroupSeparator(locale);\n\n var prefix = \"\";\n var postfix = \"\";\n if (this.getNumberFormat() !== null) {\n prefix = this.getNumberFormat().getPrefix() || \"\";\n postfix = this.getNumberFormat().getPostfix() || \"\";\n }\n\n var filterRegExp = new RegExp(\"[0-9\" +\n qx.lang.String.escapeRegexpChars(decimalSeparator) +\n qx.lang.String.escapeRegexpChars(groupSeparator) +\n qx.lang.String.escapeRegexpChars(prefix) +\n qx.lang.String.escapeRegexpChars(postfix) +\n \"\\-]\"\n );\n\n return filterRegExp;\n },\n\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates : {\n focused : true,\n invalid : true\n },\n\n\n // overridden\n tabFocus : function()\n {\n var field = this.getChildControl(\"textfield\");\n\n field.getFocusElement().focus();\n field.selectAllText();\n },\n\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n APPLY METHODS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Apply routine for the minimum property.\n *\n * It sets the value of the spinner to the maximum of the current spinner\n * value and the given min property value.\n *\n * @param value {Number} The new value of the min property\n * @param old {Number} The old value of the min property\n */\n _applyMinimum : function(value, old)\n {\n if (this.getMaximum() < value) {\n this.setMaximum(value);\n }\n\n if (this.getValue() < value) {\n this.setValue(value);\n } else {\n this._updateButtons();\n }\n },\n\n\n /**\n * Apply routine for the maximum property.\n *\n * It sets the value of the spinner to the minimum of the current spinner\n * value and the given max property value.\n *\n * @param value {Number} The new value of the max property\n * @param old {Number} The old value of the max property\n */\n _applyMaximum : function(value, old)\n {\n if (this.getMinimum() > value) {\n this.setMinimum(value);\n }\n\n if (this.getValue() > value) {\n this.setValue(value);\n } else {\n this._updateButtons();\n }\n },\n\n\n // overridden\n _applyEnabled : function(value, old)\n {\n this.base(arguments, value, old);\n\n this._updateButtons();\n },\n\n\n /**\n * Check whether the value being applied is allowed.\n *\n * If you override this to change the allowed type, you will also\n * want to override {@link #_applyValue}, {@link #_applyMinimum},\n * {@link #_applyMaximum}, {@link #_countUp}, {@link #_countDown}, and\n * {@link #_onTextChange} methods as those cater specifically to numeric\n * values.\n *\n * @param value {var}\n * The value being set\n * @return {Boolean}\n * true if the value is allowed;\n * false> otherwise.\n */\n _checkValue : function(value) {\n return typeof value === \"number\" && value >= this.getMinimum() && value <= this.getMaximum();\n },\n\n\n /**\n * Apply routine for the value property.\n *\n * It disables / enables the buttons and handles the wrap around.\n *\n * @param value {Number} The new value of the spinner\n * @param old {Number} The former value of the spinner\n */\n _applyValue: function(value, old)\n {\n var textField = this.getChildControl(\"textfield\");\n\n this._updateButtons();\n\n // save the last valid value of the spinner\n this.__lastValidValue = value;\n\n // write the value of the spinner to the textfield\n if (value !== null) {\n if (this.getNumberFormat()) {\n textField.setValue(this.getNumberFormat().format(value));\n } else {\n textField.setValue(value + \"\");\n }\n } else {\n textField.setValue(\"\");\n }\n },\n\n\n /**\n * Apply routine for the editable property.
\n * It sets the textfield of the spinner to not read only.\n *\n * @param value {Boolean} The new value of the editable property\n * @param old {Boolean} The former value of the editable property\n */\n _applyEditable : function(value, old)\n {\n var textField = this.getChildControl(\"textfield\");\n\n if (textField) {\n textField.setReadOnly(!value);\n }\n },\n\n\n /**\n * Apply routine for the wrap property.
\n * Enables all buttons if the wrapping is enabled.\n *\n * @param value {Boolean} The new value of the wrap property\n * @param old {Boolean} The former value of the wrap property\n */\n _applyWrap : function(value, old)\n {\n this._updateButtons();\n },\n\n\n /**\n * Apply routine for the numberFormat property.
\n * When setting a number format, the display of the\n * value in the text-field will be changed immediately.\n *\n * @param value {Boolean} The new value of the numberFormat property\n * @param old {Boolean} The former value of the numberFormat property\n */\n _applyNumberFormat : function(value, old) {\n var textField = this.getChildControl(\"textfield\");\n textField.setFilter(this._getFilterRegExp());\n\n if (old) {\n old.removeListener(\"changeNumberFormat\", this._onChangeNumberFormat, this);\n }\n\n var numberFormat = this.getNumberFormat();\n if (numberFormat !== null) {\n numberFormat.addListener(\"changeNumberFormat\", this._onChangeNumberFormat, this);\n }\n\n this._applyValue(this.__lastValidValue, undefined);\n },\n\n /**\n * Returns the element, to which the content padding should be applied.\n *\n * @return {qx.ui.core.Widget} The content padding target.\n */\n _getContentPaddingTarget : function() {\n return this.getChildControl(\"textfield\");\n },\n\n /**\n * Checks the min and max values, disables / enables the\n * buttons and handles the wrap around.\n */\n _updateButtons : function() {\n var upButton = this.getChildControl(\"upbutton\");\n var downButton = this.getChildControl(\"downbutton\");\n var value = this.getValue();\n\n if (!this.getEnabled())\n {\n // If Spinner is disabled -> disable buttons\n upButton.setEnabled(false);\n downButton.setEnabled(false);\n }\n else\n {\n if (this.getWrap())\n {\n // If wraped -> always enable buttons\n upButton.setEnabled(true);\n downButton.setEnabled(true);\n }\n else\n {\n // check max value\n if (value !== null && value < this.getMaximum()) {\n upButton.setEnabled(true);\n } else {\n upButton.setEnabled(false);\n }\n\n // check min value\n if (value !== null && value > this.getMinimum()) {\n downButton.setEnabled(true);\n } else {\n downButton.setEnabled(false);\n }\n }\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n KEY EVENT-HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * Callback for \"keyDown\" event.
\n * Controls the interval mode (\"single\" or \"page\")\n * and the interval increase by detecting \"Up\"/\"Down\"\n * and \"PageUp\"/\"PageDown\" keys.
\n * The corresponding button will be pressed.\n *\n * @param e {qx.event.type.KeySequence} keyDown event\n */\n _onKeyDown: function(e)\n {\n switch(e.getKeyIdentifier())\n {\n case \"PageUp\":\n // mark that the spinner is in page mode and process further\n this.__pageUpMode = true;\n\n case \"Up\":\n this.getChildControl(\"upbutton\").press();\n break;\n\n case \"PageDown\":\n // mark that the spinner is in page mode and process further\n this.__pageDownMode = true;\n\n case \"Down\":\n this.getChildControl(\"downbutton\").press();\n break;\n\n default:\n // Do not stop unused events\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n },\n\n\n /**\n * Callback for \"keyUp\" event.
\n * Detecting \"Up\"/\"Down\" and \"PageUp\"/\"PageDown\" keys.
\n * Releases the button and disabled the page mode, if necessary.\n *\n * @param e {qx.event.type.KeySequence} keyUp event\n */\n _onKeyUp: function(e)\n {\n switch(e.getKeyIdentifier())\n {\n case \"PageUp\":\n this.getChildControl(\"upbutton\").release();\n this.__pageUpMode = false;\n break;\n\n case \"Up\":\n this.getChildControl(\"upbutton\").release();\n break;\n\n case \"PageDown\":\n this.getChildControl(\"downbutton\").release();\n this.__pageDownMode = false;\n break;\n\n case \"Down\":\n this.getChildControl(\"downbutton\").release();\n break;\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n OTHER EVENT HANDLERS\n ---------------------------------------------------------------------------\n */\n\n /**\n * Callback method for the \"roll\" event.
\n * Increments or decrements the value of the spinner.\n *\n * @param e {qx.event.type.Roll} roll event\n */\n _onRoll: function(e)\n {\n // only wheel\n if (e.getPointerType() != \"wheel\") {\n return;\n }\n var delta = e.getDelta().y;\n if (delta < 0) {\n this._countUp();\n } else if (delta > 0) {\n this._countDown();\n }\n\n e.stop();\n },\n\n\n /**\n * Callback method for the \"change\" event of the textfield.\n *\n * @param e {qx.event.type.Event} text change event or blur event\n */\n _onTextChange : function(e)\n {\n var textField = this.getChildControl(\"textfield\");\n var value;\n\n // if a number format is set\n if (this.getNumberFormat())\n {\n // try to parse the current number using the number format\n try {\n value = this.getNumberFormat().parse(textField.getValue());\n } catch(ex) {\n // otherwise, process further\n }\n }\n\n if (value === undefined)\n {\n // try to parse the number as a float\n value = parseFloat(textField.getValue());\n }\n\n // if the result is a number\n if (!isNaN(value))\n {\n // Fix value if invalid\n if (value > this.getMaximum()) {\n value = this.getMaximum();\n } else if (value < this.getMinimum()) {\n value = this.getMinimum();\n }\n\n // If value is the same than before, call directly _applyValue()\n if (value === this.__lastValidValue) {\n this._applyValue(this.__lastValidValue);\n } else {\n this.setValue(value);\n }\n }\n else\n {\n // otherwise, reset the last valid value\n this._applyValue(this.__lastValidValue, undefined);\n }\n },\n\n\n /**\n * Callback method for the locale Manager's \"changeLocale\" event.\n *\n * @param ev {qx.event.type.Event} locale change event\n */\n\n _onChangeLocale : function(ev)\n {\n if (this.getNumberFormat() !== null) {\n this.setNumberFormat(this.getNumberFormat());\n var textfield = this.getChildControl(\"textfield\");\n textfield.setFilter(this._getFilterRegExp());\n textfield.setValue(this.getNumberFormat().format(this.getValue()));\n }\n },\n\n\n /**\n * Callback method for the number format's \"changeNumberFormat\" event.\n *\n * @param ev {qx.event.type.Event} number format change event\n */\n _onChangeNumberFormat : function(ev) {\n var textfield = this.getChildControl(\"textfield\");\n textfield.setFilter(this._getFilterRegExp());\n textfield.setValue(this.getNumberFormat().format(this.getValue()));\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n INTERVAL HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * Checks if the spinner is in page mode and counts either the single\n * or page Step up.\n *\n */\n _countUp: function()\n {\n if (this.__pageUpMode) {\n var newValue = this.getValue() + this.getPageStep();\n } else {\n var newValue = this.getValue() + this.getSingleStep();\n }\n\n // handle the case where wrapping is enabled\n if (this.getWrap())\n {\n if (newValue > this.getMaximum())\n {\n var diff = this.getMaximum() - newValue;\n newValue = this.getMinimum() - diff - 1;\n }\n }\n\n this.gotoValue(newValue);\n },\n\n\n /**\n * Checks if the spinner is in page mode and counts either the single\n * or page Step down.\n *\n */\n _countDown: function()\n {\n if (this.__pageDownMode) {\n var newValue = this.getValue() - this.getPageStep();\n } else {\n var newValue = this.getValue() - this.getSingleStep();\n }\n\n // handle the case where wrapping is enabled\n if (this.getWrap())\n {\n if (newValue < this.getMinimum())\n {\n var diff = this.getMinimum() + newValue;\n newValue = this.getMaximum() + diff + 1;\n }\n }\n\n this.gotoValue(newValue);\n },\n\n\n /**\n * Normalizes the incoming value to be in the valid range and\n * applies it to the {@link #value} afterwards.\n *\n * @param value {Number} Any number\n * @return {Number} The normalized number\n */\n gotoValue : function(value) {\n return this.setValue(Math.min(this.getMaximum(), Math.max(this.getMinimum(), value)));\n },\n\n // overridden\n focus : function()\n {\n this.base(arguments);\n this.getChildControl(\"textfield\").getFocusElement().focus();\n }\n },\n\n\n destruct : function()\n {\n var nf = this.getNumberFormat();\n if (nf) {\n nf.removeListener(\"changeNumberFormat\", this._onChangeNumberFormat, this);\n }\n\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().removeListener(\"changeLocale\", this._onChangeLocale, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.ServiceOptionsView\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function(node) {\n this.base();\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n if (node) {\n this.setNode(node);\n }\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false,\n apply: \"_applyNode\"\n }\n },\n\n /**\n * @abstract\n */\n members: {\n _applyNode: function(node) {\n if (node.isComputational()) {\n node.getStatus().bind(\"running\", this, \"enabled\", {\n converter: () => !osparc.data.model.NodeStatus.isComputationalRunning(node)\n });\n }\n\n if (node.isDynamic()) {\n node.getStatus().bind(\"interactive\", this, \"enabled\", {\n converter: state => state === \"idle\"\n });\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.TierSelectionView\", {\n extend: osparc.node.ServiceOptionsView,\n\n events: {\n \"tierChanged\": \"qx.event.type.Event\"\n },\n\n members: {\n _applyNode: function(node) {\n this.__populateLayout();\n\n this.base(arguments, node);\n },\n\n __populateLayout: function() {\n this._removeAll();\n\n this._add(new qx.ui.basic.Label(this.tr(\"Tiers\")).set({\n font: \"text-14\"\n }));\n\n const tiersLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(tiersLayout);\n\n const tierBox = new qx.ui.form.SelectBox().set({\n allowGrowX: false,\n allowGrowY: false\n });\n tiersLayout.add(tierBox);\n\n const node = this.getNode();\n osparc.store.Pricing.getInstance().fetchPricingPlansService(node.getKey(), node.getVersion())\n .then(pricingPlans => {\n if (pricingPlans && \"pricingUnits\" in pricingPlans && pricingPlans[\"pricingUnits\"].length) {\n const pricingUnits = pricingPlans[\"pricingUnits\"].map(pricingUnitData => {\n const pricingUnit = new osparc.data.model.PricingUnit(pricingUnitData);\n return pricingUnit;\n });\n pricingUnits.forEach(pricingUnit => {\n const tItem = new qx.ui.form.ListItem(pricingUnit.getName(), null, pricingUnit.getPricingUnitId());\n tierBox.add(tItem);\n });\n const studyId = node.getStudy().getUuid();\n const nodeId = node.getNodeId();\n const unitParams = {\n url: {\n studyId,\n nodeId\n }\n };\n osparc.data.Resources.fetch(\"studies\", \"getPricingUnit\", unitParams)\n .then(preselectedPricingUnit => {\n if (preselectedPricingUnit && preselectedPricingUnit[\"pricingUnitId\"]) {\n const tierFound = tierBox.getSelectables().find(t => t.getModel() === preselectedPricingUnit[\"pricingUnitId\"]);\n if (tierFound) {\n tierBox.setSelection([tierFound]);\n } else {\n console.error(\"Tier not found\");\n }\n }\n })\n .finally(() => {\n const pUnitUIs = [];\n pricingUnits.forEach(pricingUnit => {\n const pUnitUI = new osparc.study.PricingUnitTier(pricingUnit).set({\n showEditButton: false,\n });\n pUnitUI.getChildControl(\"name\").exclude();\n pUnitUI.exclude();\n tiersLayout.add(pUnitUI);\n pUnitUIs.push(pUnitUI);\n });\n const showSelectedTier = pricingUnitId => {\n pUnitUIs.forEach(pUnitUI => pUnitUI.exclude());\n if (pricingUnitId) {\n const pUnitFound = pUnitUIs.find(pUnitUI => pUnitUI.getUnitData().getPricingUnitId() === pricingUnitId)\n if (pUnitFound) {\n pUnitFound.show();\n }\n }\n }\n showSelectedTier(tierBox.getSelection() && tierBox.getSelection()[0].getModel());\n tierBox.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n tierBox.setEnabled(false);\n const selectedUnitId = selection[0].getModel();\n osparc.study.NodePricingUnits.patchPricingUnitSelection(studyId, nodeId, pricingPlans[\"pricingPlanId\"], selectedUnitId)\n .finally(() => {\n tierBox.setEnabled(true);\n showSelectedTier(selectedUnitId);\n });\n }\n }, this);\n });\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.LifeCycleView\", {\n extend: osparc.node.ServiceOptionsView,\n\n members: {\n _applyNode: function(node) {\n if (node.isUpdatable() || node.isDeprecated() || node.isRetired()) {\n this.__populateLayout();\n }\n\n this.base(arguments, node);\n },\n\n __populateLayout: function() {\n this._removeAll();\n\n this.__addTitle();\n this.__addChip();\n this.__addDeprecationDate();\n\n if (this.getNode().isUpdatable()) {\n this.__addAutoUpdatableSection();\n } else {\n this.__addNonAutoUpdatableSection();\n }\n },\n\n __addTitle: function() {\n this._add(new qx.ui.basic.Label(this.tr(\"Update Service\")).set({\n font: \"text-14\"\n }));\n },\n\n __addChip: function() {\n const node = this.getNode();\n\n let chip = null;\n if (node.isRetired()) {\n chip = osparc.service.StatusUI.createServiceRetiredChip();\n } else if (node.isDeprecated()) {\n chip = osparc.service.StatusUI.createServiceDeprecatedChip();\n }\n if (chip) {\n this._add(chip);\n }\n },\n\n __addDeprecationDate: function() {\n const node = this.getNode();\n\n if (node.isDeprecated()) {\n const deprecateDateLabel = new qx.ui.basic.Label(osparc.service.Utils.getDeprecationDateText(node.getMetaData())).set({\n rich: true\n });\n this._add(deprecateDateLabel);\n }\n },\n\n __addAutoUpdatableSection: function() {\n this.__addAutoUpdatableInstructions();\n this.__addAutoUpdateButtonsSection();\n },\n\n __addAutoUpdatableInstructions: function() {\n const node = this.getNode();\n\n let instructionsMsg = null;\n if (node.isRetired()) {\n instructionsMsg = osparc.service.Utils.RETIRED_AUTOUPDATABLE_INSTRUCTIONS;\n } else if (node.isUpdatable() || node.isDeprecated()) {\n instructionsMsg = osparc.service.Utils.DEPRECATED_AUTOUPDATABLE_INSTRUCTIONS;\n }\n if (instructionsMsg) {\n const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({\n rich: true\n });\n this._add(instructionsLabel);\n }\n },\n\n __addAutoUpdateButtonsSection: function() {\n const node = this.getNode();\n\n const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n\n const updateButton = new osparc.ui.form.FetchButton().set({\n label: this.tr(\"Update\"),\n icon: \"@MaterialIcons/update/14\",\n backgroundColor: \"strong-main\"\n });\n const isUpdatable = this.getNode().isUpdatable();\n node.getStatus().bind(\"interactive\", updateButton, \"enabled\", {\n converter: state => [\"idle\", \"failed\", \"deprecated\", \"retired\"].includes(state) && isUpdatable\n });\n updateButton.addListener(\"execute\", () => {\n updateButton.setFetching(true);\n const latestCompatible = osparc.service.Utils.getLatestCompatible(node.getKey(), node.getVersion());\n if (node.getKey() !== latestCompatible[\"key\"]) {\n node.setKey(latestCompatible[\"key\"]);\n }\n if (node.getVersion() !== latestCompatible[\"version\"]) {\n node.setVersion(latestCompatible[\"version\"]);\n }\n node.fireEvent(\"updateStudyDocument\");\n setTimeout(() => {\n updateButton.setFetching(false);\n node.requestStartNode();\n }, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);\n });\n\n buttonsLayout.add(updateButton);\n\n this._add(buttonsLayout);\n },\n\n __addNonAutoUpdatableSection: function() {\n const node = this.getNode();\n\n let instructionsMsg = null;\n if (node.isRetired()) {\n instructionsMsg = osparc.service.Utils.RETIRED_DYNAMIC_INSTRUCTIONS;\n } else if (node.isUpdatable() || node.isDeprecated()) {\n instructionsMsg = osparc.service.Utils.DEPRECATED_DYNAMIC_INSTRUCTIONS;\n }\n if (instructionsMsg) {\n const instructionsLabel = new qx.ui.basic.Label(instructionsMsg).set({\n rich: true\n });\n this._add(instructionsLabel);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.BootOptionsView\", {\n extend: osparc.node.ServiceOptionsView,\n\n members: {\n _applyNode: function(node) {\n if (node.hasBootModes()) {\n this.__populateLayout();\n }\n\n this.base(arguments, node);\n },\n\n __populateLayout: function() {\n this._removeAll();\n\n this._add(new qx.ui.basic.Label(this.tr(\"Boot Options\")).set({\n font: \"text-14\"\n }));\n\n const node = this.getNode();\n\n const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n\n const nodeMetadata = node.getMetaData();\n const workbenchData = node.getWorkbench().serialize();\n const nodeId = node.getNodeId();\n const bootModeSB = osparc.data.model.Node.getBootModesSelectBox(nodeMetadata, workbenchData, nodeId);\n node.getStatus().bind(\"interactive\", bootModeSB, \"enabled\", {\n converter: interactive => interactive === \"idle\"\n });\n bootModeSB.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n buttonsLayout.setEnabled(false);\n const newBootModeId = selection[0].bootModeId;\n node.setBootOptions({\n \"boot_mode\": newBootModeId\n });\n node.fireEvent(\"updateStudyDocument\");\n setTimeout(() => {\n buttonsLayout.setEnabled(true);\n node.requestStartNode();\n }, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);\n }\n }, this);\n buttonsLayout.add(bootModeSB);\n\n this._add(buttonsLayout);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.UpdateResourceLimitsView\", {\n extend: osparc.node.ServiceOptionsView,\n\n members: {\n __resourceFields: null,\n __saveBtn: null,\n\n _applyNode: function(node) {\n this.__populateLayout();\n\n this.base(arguments, node);\n },\n\n __populateLayout: function() {\n this.__resourceFields = [];\n this._removeAll();\n\n this._add(new qx.ui.basic.Label(this.tr(\"Resource Limits\")).set({\n font: \"text-14\"\n }));\n\n const resourcesLayout = osparc.info.ServiceUtils.createResourcesInfo();\n const title = resourcesLayout.getChildren()[0];\n title.exclude();\n resourcesLayout.exclude();\n this._add(resourcesLayout);\n\n const node = this.getNode();\n const params = {\n url: {\n studyId: node.getStudy().getUuid(),\n nodeId: node.getNodeId()\n }\n };\n osparc.data.Resources.get(\"nodesInStudyResources\", params)\n .then(serviceResources => {\n resourcesLayout.show();\n const gridLayout = resourcesLayout.getChildren()[1];\n let row = 1;\n Object.entries(serviceResources).forEach(([imageName, imageInfo]) => {\n gridLayout.add(new qx.ui.basic.Label(imageName).set({\n font: \"text-13\"\n }), {\n row,\n column: 0\n });\n if (\"resources\" in imageInfo) {\n const resourcesInfo = imageInfo[\"resources\"];\n Object.keys(resourcesInfo).forEach(resourceKey => {\n if (resourceKey === \"VRAM\") {\n return;\n }\n let column = 1;\n const resourceInfo = resourcesInfo[resourceKey];\n let label = resourceKey;\n if (resourceKey === \"RAM\") {\n label += \" (GiB)\";\n }\n const resourceKeyTitle = new qx.ui.basic.Label(label).set({\n font: \"text-13\"\n });\n gridLayout.add(resourceKeyTitle, {\n row,\n column\n });\n column++;\n Object.keys(osparc.info.ServiceUtils.RESOURCES_INFO).forEach(resourceInfoKey => {\n if (resourceInfoKey in resourceInfo) {\n let value = resourceInfo[resourceInfoKey];\n if (resourceKey === \"RAM\") {\n value = osparc.utils.Utils.bytesToGiB(value);\n }\n const spinner = new qx.ui.form.Spinner(0, value, 512).set({\n singleStep: 1.0\n });\n const nf = new qx.util.format.NumberFormat();\n nf.setMinimumFractionDigits(2);\n nf.setMaximumFractionDigits(2);\n spinner.setNumberFormat(nf);\n\n spinner.imageName = imageName;\n spinner.resourceKey = resourceKey;\n this.__resourceFields.push(spinner);\n gridLayout.add(spinner, {\n row,\n column\n });\n column++;\n }\n });\n row++;\n });\n }\n });\n\n const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._add(buttonsLayout);\n\n const resetBtn = new qx.ui.form.Button(this.tr(\"Reset\"));\n resetBtn.addListener(\"execute\", () => this.__populateLayout(), this);\n buttonsLayout.add(resetBtn);\n\n const saveBtn = this.__saveBtn = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n center: true,\n appearance: \"strong-button\"\n });\n saveBtn.addListener(\"execute\", () => this.__saveValues(serviceResources), this);\n buttonsLayout.add(saveBtn);\n })\n .catch(err => console.error(err));\n\n return resourcesLayout;\n },\n\n __saveValues: function(serviceResources) {\n this.__saveBtn.setFetching(true);\n const updatedResources = osparc.utils.Utils.deepCloneObject(serviceResources);\n this.__resourceFields.forEach(resourceField => {\n if (\n resourceField.imageName in updatedResources &&\n resourceField.resourceKey in updatedResources[resourceField.imageName].resources\n ) {\n let value = resourceField.getValue();\n if (resourceField.resourceKey === \"RAM\") {\n value = osparc.utils.Utils.giBToBytes(value);\n }\n updatedResources[resourceField.imageName].resources[resourceField.resourceKey][\"limit\"] = value;\n }\n });\n const node = this.getNode();\n const params = {\n url: {\n studyId: node.getStudy().getUuid(),\n nodeId: node.getNodeId()\n },\n data: updatedResources\n };\n osparc.data.Resources.fetch(\"nodesInStudyResources\", \"put\", params)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Limits successfully updated\"));\n })\n .catch(err => {\n console.error(err);\n const msg = err.message || this.tr(\"Something went wrong updating the limits\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n })\n .finally(() => {\n this.__saveBtn.setFetching(false);\n this.__populateLayout();\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.node.StartStopButton\", {\n extend: qx.ui.core.Widget,\n\n construct: function(node) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(5));\n\n if (node) {\n this.setNode(node);\n }\n },\n\n properties: {\n node: {\n check: \"osparc.data.model.Node\",\n init: null,\n nullable: false,\n event: \"changeNode\",\n apply: \"__applyNode\"\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"start-button\":\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/14\",\n allowGrowX: false,\n enabled: false\n });\n control.addListener(\"execute\", () => this.fireEvent(\"startPressed\"));\n this._add(control);\n break;\n case \"stop-button\":\n control = new qx.ui.form.Button().set({\n label: this.tr(\"Stop\"),\n icon: \"@FontAwesome5Solid/stop/14\",\n allowGrowX: false,\n enabled: false\n });\n control.addListener(\"execute\", () => this.fireEvent(\"stopPressed\"));\n this._add(control);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n __applyNode: function(node) {\n if (node && node.isDynamic()) {\n const startButton = this.getChildControl(\"start-button\");\n node.attachHandlersToStartButton(startButton);\n\n const stopButton = this.getChildControl(\"stop-button\");\n node.attachHandlersToStopButton(stopButton);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.navigation.BreadcrumbNavigation\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(0).set({\n alignY: \"middle\"\n }));\n },\n\n members: {\n /**\n * @abstract\n */\n populateButtons: function(nodesIds = []) {\n throw new Error(\"Abstract method called!\");\n },\n\n /**\n * @abstract\n */\n _createBtns: function(nodeId) {\n throw new Error(\"Abstract method called!\");\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.navigation.BreadcrumbsSlideshow\", {\n extend: osparc.navigation.BreadcrumbNavigation,\n\n events: {\n \"nodeSelectionRequested\": \"qx.event.type.Data\"\n },\n\n members: {\n populateButtons: function(nodesIds = []) {\n const btns = [];\n const study = osparc.store.Store.getInstance().getCurrentStudy();\n const slideshow = study.getUi().getSlideshow();\n if (nodesIds.length) {\n nodesIds.forEach(nodeId => {\n if (slideshow.getPosition(nodeId) === -1) {\n return;\n }\n const btn = this.__createBtn(nodeId);\n btns.push(btn);\n });\n this.__buttonsToBreadcrumb(btns, \"separator\");\n } else {\n this._removeAll();\n const label = new qx.ui.basic.Label();\n if (study.isPipelineEmpty()) {\n label.setValue(this.tr(\"Pipeline is empty\"));\n } else {\n label.setValue(this.tr(\"There are no visible nodes, enable some by editing the App Mode\"));\n }\n this._add(label);\n }\n },\n\n __buttonsToBreadcrumb: function(btns, shape = \"separator\") {\n this._removeAll();\n for (let i=0; i {\n if (shape === \"separator\" && (!leftBtn || !rightBtn)) {\n return;\n }\n breadcrumbSplitter.setLeftWidget(leftBtn);\n if (rightBtn) {\n breadcrumbSplitter.setRightWidget(rightBtn);\n }\n };\n if (breadcrumbSplitter.getReady()) {\n addLeftRightWidgets(thisBtn, nextBtn);\n } else {\n breadcrumbSplitter.addListenerOnce(\"SvgWidgetReady\", () => {\n addLeftRightWidgets(thisBtn, nextBtn);\n }, this);\n }\n this._add(breadcrumbSplitter);\n }\n },\n\n __createBtn: function(nodeId) {\n const btn = this.__createNodeBtn(nodeId);\n const study = osparc.store.Store.getInstance().getCurrentStudy();\n const slideshow = study.getUi().getSlideshow().getData();\n const node = study.getWorkbench().getNode(nodeId);\n if (node && nodeId in slideshow) {\n const pos = slideshow[nodeId].position;\n osparc.utils.Utils.setIdToWidget(btn, \"AppMode_StepBtn_\"+(pos+1));\n node.bind(\"label\", btn, \"label\", {\n converter: val => `${pos+1}: ${val}`\n });\n\n const statusIcon = new qx.ui.basic.Image();\n if (node.isFilePicker()) {\n osparc.service.StatusUI.setupFilePickerIcon(node, statusIcon);\n } else {\n const check = node.isDynamic() ? \"interactive\" : \"output\";\n node.getStatus().bind(check, statusIcon, \"source\", {\n converter: output => osparc.service.StatusUI.getIconSource(output),\n onUpdate: (_, target) => osparc.service.StatusUI.updateCircleAnimation(target)\n });\n node.getStatus().bind(check, statusIcon, \"textColor\", {\n converter: output => osparc.service.StatusUI.getColor(output)\n }, this);\n }\n // eslint-disable-next-line no-underscore-dangle\n btn._addAt(statusIcon, 0);\n\n const statusUI = new osparc.ui.basic.NodeStatusUI(node);\n const statusLabel = statusUI.getChildControl(\"label\");\n statusLabel.bind(\"value\", btn, \"toolTipText\", {\n converter: status => `${node.getLabel()} - ${status}`\n });\n }\n return btn;\n },\n\n __createNodeBtn: function(nodeId) {\n const btn = new qx.ui.form.Button().set({\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,\n maxWidth: 200\n });\n osparc.utils.Utils.setIdToWidget(btn, \"appModeButton_\"+nodeId);\n btn.addListener(\"execute\", () => this.fireDataEvent(\"nodeSelectionRequested\", nodeId));\n btn.setAppearance(\"fab-button\");\n const updateCurrentNodeId = currentNodeId => {\n if (nodeId === currentNodeId) {\n btn.setAppearance(\"form-button\");\n } else {\n btn.setAppearance(\"fab-button\");\n }\n btn.setFont(\"text-14\");\n };\n const study = osparc.store.Store.getInstance().getCurrentStudy();\n updateCurrentNodeId(study.getUi().getCurrentNodeId());\n study.getUi().addListener(\"changeCurrentNodeId\", e => updateCurrentNodeId(e.getData()));\n\n return btn;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.navigation.BreadcrumbsSlideshowEdit\", {\n extend: osparc.navigation.BreadcrumbNavigation,\n\n events: {\n \"addServiceBetween\": \"qx.event.type.Data\",\n \"removeNode\": \"qx.event.type.Data\",\n \"showNode\": \"qx.event.type.Data\",\n \"hideNode\": \"qx.event.type.Data\"\n },\n\n members: {\n populateButtons: function(study) {\n this._removeAll();\n\n // for now, only linear pipelines\n if (!study.getWorkbench().isPipelineLinear()) {\n return;\n }\n const nodeIds = study.getWorkbench().getPipelineLinearSorted();\n if (nodeIds === null) {\n return;\n }\n\n let newServiceBtn = this.__createNewServiceBtn();\n newServiceBtn.leftNodeId = null;\n this._add(newServiceBtn);\n\n const slideshow = study.getUi().getSlideshow();\n let currentPos = 0;\n nodeIds.forEach((nodeId, i) => {\n if (slideshow.getPosition(nodeId) === -1) {\n return;\n }\n newServiceBtn.rightNodeId = nodeId;\n if (!study.getWorkbench().getNode(nodeId).hasInputs()) {\n newServiceBtn.exclude();\n }\n\n const btn = new qx.ui.toolbar.MenuButton().set({\n paddingLeft: 5,\n paddingRight: 5,\n marginLeft: 1,\n marginRight: 1\n });\n this._add(btn);\n\n const node = study.getWorkbench().getNode(nodeId);\n const nodeLabel = node.getLabel();\n const skipNode = slideshow.getPosition(nodeId) === -1;\n if (skipNode) {\n btn.set({\n label: nodeLabel,\n icon: \"@FontAwesome5Solid/eye-slash/14\"\n });\n } else {\n btn.set({\n label: currentPos+1 + \": \" + nodeLabel\n });\n }\n btn.nodeId = nodeId;\n btn.skipNode = skipNode;\n this.__addEditNodeMenu(btn, currentPos);\n\n newServiceBtn = this.__createNewServiceBtn();\n newServiceBtn.leftNodeId = nodeId;\n newServiceBtn.rightNodeId = null;\n // for now, plus buttons only at the beginning and end\n if ((i === nodeIds.length-1) && study.getWorkbench().getNode(nodeId).hasOutputs()) {\n this._add(newServiceBtn);\n }\n\n if (!skipNode) {\n currentPos++;\n }\n });\n },\n\n __createNewServiceBtn: function() {\n const newServiceBtn = new qx.ui.form.Button().set({\n ...osparc.navigation.NavigationBar.BUTTON_OPTIONS,\n icon: \"@FontAwesome5Solid/plus-circle/24\",\n backgroundColor: \"background-main-4\",\n textColor: \"ready-green\"\n });\n newServiceBtn.getContentElement()\n .setStyles({\n \"border-radius\": \"24px\"\n });\n newServiceBtn.addListener(\"execute\", () => {\n this.fireDataEvent(\"addServiceBetween\", {\n leftNodeId: newServiceBtn.leftNodeId,\n rightNodeId: newServiceBtn.rightNodeId\n });\n });\n return newServiceBtn;\n },\n\n __addEditNodeMenu: function(btn, currentPos) {\n const menu = new qx.ui.menu.Menu();\n\n if (btn.skipNode) {\n const showButton = new qx.ui.menu.Button(\"Show\", \"@FontAwesome5Solid/eye/14\");\n showButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"showNode\", {\n nodeId: btn.nodeId,\n desiredPos: currentPos\n });\n });\n menu.add(showButton);\n } else {\n const hideButton = new qx.ui.menu.Button(\"Hide\", \"@FontAwesome5Solid/eye-slash/14\");\n hideButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"hideNode\", btn.nodeId);\n });\n menu.add(hideButton);\n }\n\n const deleteButton = new qx.ui.menu.Button(\"Delete\", \"@FontAwesome5Solid/trash/14\").set({\n appearance: \"danger-button\"\n });\n deleteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"removeNode\", btn.nodeId);\n });\n menu.add(deleteButton);\n\n btn.setMenu(menu);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Julian Querido (jsaq007)\n\n************************************************************************ */\n\n/**\n * The progress sequence of a dynamic service is as follows:\n *\n * [CLUSTER_UP_SCALING]\n * [SIDECARS_PULLING]\n * [SERVICE_OUTPUTS_PULLING, SERVICE_STATE_PULLING, SERVICE_IMAGES_PULLING] (notice the parallelism here)\n * [SERVICE_CONTAINERS_STARTING]\n * [SERVICE_INPUTS_PULLING] (when this happens, the frontend has already loaded the service and is displaying it to the user) I would still keep it as is, when we decide to make inputs pulling part of the boot sequence this will be helpful.\n *\n * This class provides different widgets that render the progress status\n *\n */\n\n\nqx.Class.define(\"osparc.data.model.NodeProgressSequence\", {\n extend: qx.core.Object,\n\n construct: function() {\n this.base(arguments);\n\n this.__initLayout();\n },\n\n properties: {\n overallProgress: {\n check: \"Number\",\n init: 0,\n nullable: false,\n apply: \"__applyOverallProgress\"\n },\n\n clusterUpScaling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyClusterUpScaling\"\n },\n\n sidecarPulling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applySidecarPulling\"\n },\n\n outputsPulling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyOutputsPulling\"\n },\n\n statePulling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyStatePulling\"\n },\n\n imagesPulling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyImagesPulling\"\n },\n\n startingSoftware: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyStartingSoftware\"\n },\n\n inputsPulling: {\n check: \"Object\",\n init: {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n },\n nullable: false,\n apply: \"__applyInputsPulling\"\n }\n },\n\n statics: {\n DISCLAIMER_TIME: 50000,\n\n createDisclaimerText: function() {\n const disclaimerText = new qx.ui.basic.Atom().set({\n label: qx.locale.Manager.tr(\"Please be patient, this process can take a few minutes ...\"),\n padding: [20, 10],\n gap: 15,\n icon: \"@FontAwesome5Solid/exclamation-triangle/16\",\n backgroundColor: \"disclaimer-bg\",\n textColor: \"info\",\n alignX: \"center\"\n });\n disclaimerText.getChildControl(\"icon\").set({\n textColor: \"info\"\n });\n return disclaimerText;\n },\n },\n\n members: {\n __mainLoadingPage: null,\n __overallProgressBar: null,\n __clusterUpScalingLayout: null,\n __pullingSidecarLayout: null,\n __pullingOutputsLayout: null,\n __pullingStateLayout: null,\n __pullingImagesLayout: null,\n __startingSoftwareLayout: null,\n __pullingInputsLayout: null,\n __disclaimerTimer: null,\n __disclaimerText: null,\n\n getDefaultStartValues: function() {\n return {\n progressLabel: qx.locale.Manager.tr(\"Waiting ...\"),\n value: 0\n }\n },\n\n getDefaultEndValues: function() {\n return {\n progressLabel: \"100%\",\n value: 1\n }\n },\n\n getWidgetForLoadingPage: function() {\n return this.__mainLoadingPage;\n },\n\n resetSequence: function() {\n if (this.__disclaimerTimer) {\n clearTimeout(this.__disclaimerTimer);\n }\n const defaultVals = this.getDefaultStartValues();\n this.setOverallProgress(0);\n this.setClusterUpScaling(defaultVals);\n this.setSidecarPulling(defaultVals);\n this.setOutputsPulling(defaultVals);\n this.setStatePulling(defaultVals);\n this.setImagesPulling(defaultVals);\n this.setStartingSoftware(defaultVals);\n this.setInputsPulling(defaultVals);\n },\n\n getProgress: function(report) {\n if (report.unit) {\n const attempt = (\"attempt\" in report && report[\"attempt\"] > 1) ? `(attempt ${report[\"attempt\"]}) ` : \"\";\n const current_value = osparc.utils.Utils.bytesToSize(report[\"actual_value\"], 1, false);\n const total_value = osparc.utils.Utils.bytesToSize(report[\"total\"], 1, false)\n return {\n progressLabel: `${attempt}${current_value} / ${total_value}`,\n value: report[\"actual_value\"] / report[\"total\"]\n }\n }\n const percentage = parseFloat((report[\"actual_value\"] / report[\"total\"] * 100).toFixed(2))\n return {\n progressLabel: `${percentage}%`,\n value: report[\"actual_value\"] / report[\"total\"]\n }\n },\n\n addProgressMessage: function(progressType, progressReport) {\n const progress = this.getProgress(progressReport);\n switch (progressType) {\n case \"CLUSTER_UP_SCALING\":\n this.setClusterUpScaling(progress);\n break;\n case \"SIDECARS_PULLING\":\n this.setSidecarPulling(progress);\n break;\n case \"SERVICE_OUTPUTS_PULLING\":\n this.setOutputsPulling(progress);\n break;\n case \"SERVICE_STATE_PULLING\":\n this.setStatePulling(progress);\n break;\n case \"SERVICE_IMAGES_PULLING\":\n this.setImagesPulling(progress);\n break;\n case \"SERVICE_CONTAINERS_STARTING\":\n this.setStartingSoftware(progress);\n break;\n case \"SERVICE_INPUTS_PULLING\":\n this.setInputsPulling(progress);\n break;\n }\n },\n\n __initLayout: function() {\n this.__mainLoadingPage = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));\n\n const sequenceLoadingPage = new osparc.widget.ProgressSequence(qx.locale.Manager.tr(\"LOADING ...\"));\n const nTasks = 7;\n this.__overallProgressBar = sequenceLoadingPage.addOverallProgressBar(nTasks);\n this.__clusterUpScalingLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Provisioning resources ...\"));\n this.__pullingSidecarLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Setting up system software ...\"));\n this.__pullingOutputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Retrieving your output data ...\"));\n this.__pullingStateLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Retrieving your work ...\"));\n this.__pullingImagesLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Installing services ...\"));\n this.__startingSoftwareLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Starting services ...\"));\n this.__pullingInputsLayout = sequenceLoadingPage.addNewTask(qx.locale.Manager.tr(\"Retrieving your input data ...\"));\n this.__mainLoadingPage.addAt(sequenceLoadingPage, 0, {\n flex: 1\n });\n\n const disclaimerText = this.__disclaimerText = this.self().createDisclaimerText();\n disclaimerText.exclude();\n this.__mainLoadingPage.addAt(this.__disclaimerText, 1, {\n flex: 1\n });\n },\n\n __computeOverallProgress: function() {\n const overallProgress = this.getClusterUpScaling().value +\n this.getSidecarPulling().value +\n this.getOutputsPulling().value +\n this.getStatePulling().value +\n this.getImagesPulling().value +\n this.getInputsPulling().value;\n this.setOverallProgress(overallProgress)\n },\n\n __applyOverallProgress: function(value) {\n if (value > 0 && value < 6) {\n this.__disclaimerTimer = setTimeout(() => this.__disclaimerText.show(), this.self().DISCLAIMER_TIME);\n } else {\n this.__disclaimerText.exclude();\n }\n\n osparc.widget.ProgressSequence.progressUpdate(this.__overallProgressBar, value);\n },\n\n __applyClusterUpScaling: function(value) {\n osparc.widget.ProgressSequence.updateTaskProgress(this.__clusterUpScalingLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applySidecarPulling: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setClusterUpScaling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingSidecarLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applyOutputsPulling: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setSidecarPulling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingOutputsLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applyStatePulling: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setSidecarPulling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingStateLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applyImagesPulling: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setSidecarPulling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingImagesLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applyStartingSoftware: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setSidecarPulling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__startingSoftwareLayout, value);\n\n this.__computeOverallProgress();\n },\n\n __applyInputsPulling: function(value) {\n if (value.value > 0) {\n const defaultEndVals = this.getDefaultEndValues();\n this.setSidecarPulling(defaultEndVals);\n }\n osparc.widget.ProgressSequence.updateTaskProgress(this.__pullingInputsLayout, value);\n\n this.__computeOverallProgress();\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2019 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\nqx.Class.define(\"osparc.ui.basic.NodeStatusUI\", {\n extend: qx.ui.basic.Atom,\n\n construct: function(node) {\n this.base(arguments, this.tr(\"Idle\"), \"@FontAwesome5Solid/clock/12\");\n\n this.exclude();\n if (node) {\n this.setNode(node);\n }\n },\n\n properties: {\n appearance: {\n init: \"chip\",\n refine: true\n },\n\n node: {\n check: \"osparc.data.model.Node\",\n apply: \"__applyNode\",\n nullable: false,\n init: null\n }\n },\n\n members: {\n __applyNode: function(node) {\n this.show();\n if (node.isFilePicker()) {\n this.__setupFilePicker();\n } else if (node.isComputational()) {\n this.__setupComputational();\n } else if (node.isDynamic()) {\n this.__setupInteractive();\n } else {\n this.exclude();\n }\n node.bind(\"errors\", this, \"toolTipText\", {\n converter: errors => {\n let errorsText = \"\";\n if (errors) {\n errors.forEach(error => errorsText += error[\"msg\"] + \"
\");\n }\n return errorsText;\n }\n });\n },\n\n __setupComputational: function() {\n this.getNode().getStatus().bind(\"running\", this.getChildControl(\"label\"), \"value\", {\n converter: state => {\n if (state) {\n this.show();\n const labelValue = osparc.service.StatusUI.getLabelValue(state);\n return qx.lang.String.firstUp(labelValue.toLowerCase());\n }\n this.exclude();\n return null;\n },\n onUpdate: (source, target) => {\n const state = source.getRunning();\n target.setTextColor(osparc.service.StatusUI.getColor(state));\n }\n });\n\n this.getNode().getStatus().bind(\"running\", this.getChildControl(\"icon\"), \"source\", {\n converter: state => osparc.service.StatusUI.getIconSource(state),\n onUpdate: (source, target) => {\n target.show();\n const state = source.getRunning();\n switch (state) {\n case \"SUCCESS\":\n case \"FAILED\":\n case \"ABORTED\":\n osparc.utils.Utils.removeClass(this.getChildControl(\"icon\").getContentElement(), \"rotate\");\n target.setTextColor(osparc.service.StatusUI.getColor(state));\n return;\n case \"PUBLISHED\":\n case \"PENDING\":\n case \"WAITING_FOR_RESOURCES\":\n case \"WAITING_FOR_CLUSTER\":\n case \"STARTED\":\n case \"RETRY\":\n osparc.utils.Utils.addClass(this.getChildControl(\"icon\").getContentElement(), \"rotate\");\n target.setTextColor(osparc.service.StatusUI.getColor(state));\n return;\n case \"UNKNOWN\":\n case \"NOT_STARTED\":\n default:\n target.exclude();\n return;\n }\n }\n });\n },\n\n __setupInteractive: function() {\n this.getNode().getStatus().bind(\"interactive\", this.getChildControl(\"label\"), \"value\", {\n converter: state => osparc.service.StatusUI.getLabelValue(state),\n onUpdate: (source, target) => {\n const state = source.getInteractive();\n target.setTextColor(osparc.service.StatusUI.getColor(state));\n }\n });\n\n this.getNode().getStatus().bind(\"interactive\", this.getChildControl(\"icon\"), \"source\", {\n converter: state => osparc.service.StatusUI.getIconSource(state),\n onUpdate: (source, target) => {\n osparc.service.StatusUI.updateCircleAnimation(this.getChildControl(\"icon\"));\n const props = qx.util.PropertyUtil.getProperties(osparc.data.model.NodeStatus);\n const state = source.getInteractive();\n if (props[\"interactive\"][\"check\"].includes(state)) {\n target.setTextColor(osparc.service.StatusUI.getColor(state));\n } else {\n target.resetTextColor();\n }\n }\n });\n },\n\n __setupFilePicker: function() {\n osparc.service.StatusUI.setupFilePickerIcon(this.getNode(), this.getChildControl(\"icon\"));\n\n this.getNode().bind(\"outputs\", this.getChildControl(\"label\"), \"value\", {\n converter: outputs => {\n if (osparc.file.FilePicker.getOutput(outputs)) {\n let outputLabel = osparc.file.FilePicker.getOutputLabel(outputs);\n if (outputLabel === \"\" && osparc.file.FilePicker.isOutputDownloadLink(outputs)) {\n outputLabel = osparc.file.FilePicker.extractLabelFromLink(outputs);\n }\n return outputLabel;\n }\n return this.tr(\"Select a file\");\n }\n });\n\n this.getNode().getStatus().addListener(\"changeProgress\", e => {\n const progress = e.getData();\n if (progress > 0 && progress < 100) {\n this.getChildControl(\"label\").setValue(this.tr(\"Uploading...\"));\n }\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.widget.PreparingInputs\", {\n extend: qx.ui.core.Widget,\n\n construct: function(study) {\n this.base(arguments);\n\n osparc.utils.Utils.setIdToWidget(this, \"preparingInputsView\");\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n const text = this.tr(\"In order to move to this step, we need to prepare some inputs for you.
Here you can check the logs of the progress:\");\n const title = new qx.ui.basic.Label(text).set({\n font: \"text-14\",\n rich: true\n });\n this._add(title);\n\n const startStopButtons = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({\n marginLeft: 50\n });\n const runAllButton = this.__getRunAllButton();\n startStopButtons.add(runAllButton);\n const stopButton = this.__getStopButton();\n startStopButtons.add(stopButton);\n this._add(startStopButtons);\n\n const list = this.__monitoredNodesList = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(list);\n this.setMonitoredNodes([]);\n\n const loggerLayout = this.__loggerLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox());\n this._add(loggerLayout, {\n flex: 1\n });\n\n study.addListener(\"changePipelineRunning\", () => this.__updateRunButtonsStatus(study));\n this.__updateRunButtonsStatus(study);\n },\n\n properties: {\n monitoredNodes: {\n check: \"Array\",\n init: null,\n apply: \"__applyMonitoredNodes\",\n event: \"changeMonitoredNodes\"\n }\n },\n\n events: {\n \"changePreparingNodes\": \"qx.event.type.Data\",\n \"startPartialPipeline\": \"qx.event.type.Data\",\n \"stopPipeline\": \"qx.event.type.Event\"\n },\n\n members: {\n __monitoredNodesList: null,\n __runAllButton: null,\n __stopButton: null,\n\n __getRunAllButton: function() {\n const runAllButton = this.__runAllButton = new osparc.ui.form.FetchButton(this.tr(\"Run all\")).set({\n minWidth: 80,\n maxWidth: 80,\n alignX: \"center\"\n });\n runAllButton.addListener(\"execute\", () => {\n const monitoredNodes = this.getMonitoredNodes();\n if (monitoredNodes && monitoredNodes.length) {\n const moniteoredNodesIds = monitoredNodes.map(monitoredNode => monitoredNode.getNodeId());\n this.fireDataEvent(\"startPartialPipeline\", moniteoredNodesIds);\n }\n });\n return runAllButton;\n },\n\n __getStopButton: function() {\n const stopButton = this.__stopButton = new osparc.ui.form.FetchButton(this.tr(\"Stop\")).set({\n minWidth: 80,\n maxWidth: 80,\n alignX: \"center\"\n });\n stopButton.addListener(\"execute\", () => this.fireEvent(\"stopPipeline\"), this);\n return stopButton;\n },\n\n __updateRunButtonsStatus: function(study) {\n const isPipelineRunning = study.isPipelineRunning();\n this.__runAllButton.setFetching(isPipelineRunning);\n this.__stopButton.setEnabled(isPipelineRunning);\n },\n\n __applyMonitoredNodes: function(monitoredNodes) {\n monitoredNodes.forEach(monitoredNode => {\n [\n \"changeRunning\",\n \"changeOutput\"\n ].forEach(changeEvent => {\n monitoredNode.getStatus().addListener(changeEvent, () => this.__updatePreparingNodes());\n });\n });\n this.__updateMonitoredNodesList();\n this.__updatePreparingNodes();\n },\n\n __updateMonitoredNodesList: function() {\n this.__monitoredNodesList.removeAll();\n const monitoredNodes = this.getMonitoredNodes();\n if (monitoredNodes && monitoredNodes.length) {\n const group = new qx.ui.form.RadioGroup();\n group.addListener(\"changeSelection\", e => {\n const selectedButton = e.getData()[0];\n this.__loggerLayout.removeAll();\n const nodeLogger = selectedButton.node.getLogger();\n nodeLogger.getChildControl(\"pin-node\").exclude();\n this.__loggerLayout.add(nodeLogger);\n }, this);\n monitoredNodes.forEach(node => {\n const nodeLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n\n const showLoggerBtn = new qx.ui.form.ToggleButton(this.tr(\"Logs\"));\n showLoggerBtn.node = node;\n nodeLayout.add(showLoggerBtn);\n group.add(showLoggerBtn);\n if (group.getSelection().length === 0) {\n group.setSelection([showLoggerBtn]);\n }\n\n const rerunBtn = new osparc.ui.form.FetchButton(this.tr(\"Re-run\")).set({\n minWidth: 80,\n maxWidth: 80,\n alignX: \"center\"\n });\n rerunBtn.addListener(\"execute\", () => this.fireDataEvent(\"startPartialPipeline\", [node.getNodeId()]), this);\n nodeLayout.add(rerunBtn);\n\n const checkRerunStatus = () => {\n const nodeRunningStatus = node.getStatus().getRunning();\n const fetching = [\n \"PUBLISHED\",\n \"PENDING\",\n \"WAITING_FOR_RESOURCES\",\n \"WAITING_FOR_CLUSTER\",\n \"STARTED\"\n ].includes(nodeRunningStatus);\n rerunBtn.setFetching(fetching);\n const rerunnable = [\n \"FAILED\",\n \"ABORTED\",\n \"SUCCESS\"\n ].includes(nodeRunningStatus);\n const isPipelineRunning = node.getStudy().isPipelineRunning();\n rerunBtn.setEnabled(rerunnable && !(isPipelineRunning === true));\n };\n node.getStatus().addListener(\"changeRunning\", () => checkRerunStatus());\n node.getStudy().addListener(\"changePipelineRunning\", () => checkRerunStatus());\n checkRerunStatus();\n\n const statusUI = new osparc.ui.basic.NodeStatusUI(node);\n nodeLayout.add(statusUI);\n nodeLayout.add(new qx.ui.basic.Label(node.getLabel()), {\n flex: 1\n });\n this.__monitoredNodesList.add(nodeLayout);\n });\n }\n },\n\n getPreparingNodes: function() {\n const preparingNodes = [];\n const monitoredNodes = this.getMonitoredNodes();\n monitoredNodes.forEach(monitoredNode => {\n if (!osparc.data.model.NodeStatus.isCompNodeReady(monitoredNode)) {\n preparingNodes.push(monitoredNode);\n }\n });\n return preparingNodes;\n },\n\n __updatePreparingNodes: function() {\n this.fireDataEvent(\"changePreparingNodes\", this.getPreparingNodes().length);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Widget that contains the service filters.\n */\nqx.Class.define(\"osparc.filter.group.ServiceFilterGroup\", {\n extend: qx.ui.core.Widget,\n\n /**\n * Constructor takes the desired filterGroupId for the filters group.\n * @param {String} filterGroupId Group id of the filter\n */\n construct: function(filterGroupId) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.HBox(10));\n this.__filterGroupId = filterGroupId;\n const textFilter = this.__textFilter = new osparc.filter.TextFilter(\"text\", filterGroupId);\n osparc.utils.Utils.setIdToWidget(textFilter, \"serviceFiltersTextFld\");\n const tagsFilter = this.__tagsFilter = new osparc.filter.NodeTypeFilter(\"tags\", filterGroupId);\n this._add(textFilter);\n this._add(tagsFilter);\n },\n\n members: {\n __textFilter: null,\n __tagsFilter: null,\n __filterGroupId: null,\n\n /**\n * Resets the text and active tags.\n */\n reset: function() {\n this.__textFilter.reset();\n this.__tagsFilter.reset();\n },\n\n /**\n * Programmatically triggers filtering again.\n */\n dispatch: function() {\n osparc.filter.UIFilterController.dispatch(this.__filterGroupId);\n },\n\n /**\n * Returns the text filter widget.\n */\n getTextFilter: function() {\n return this.__textFilter;\n },\n\n getTagsFilter: function() {\n return this.__tagsFilter;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * This is a view to display the available services in a flowing fashion. Creates a ServiceButtonGrid button\n * for every service in the model and subscribes it to the filter group.\n */\nqx.Class.define(\"osparc.service.ServiceList\", {\n extend: qx.ui.core.Widget,\n\n /**\n * If the optional parameter is given, the elements will be subscribed to the filter group of the given id.\n *\n * @param {String} [filterGroupId] Id of the filter group the ServiceButtonGrid buttons will be subscribed to.\n */\n construct: function(filterGroupId) {\n this.base(arguments);\n this._setLayout(new qx.ui.layout.VBox(5));\n if (filterGroupId) {\n this.__filterGroup = filterGroupId;\n }\n },\n\n events: {\n \"changeSelected\": \"qx.event.type.Data\",\n \"serviceAdd\": \"qx.event.type.Data\"\n },\n\n properties: {\n appearance: {\n refine: true,\n init: \"service-browser\"\n },\n model: {\n nullable: true,\n check: \"qx.data.Array\",\n apply: \"_applyModel\"\n }\n },\n\n members: {\n __filterGroup: null,\n\n _applyModel: function(model) {\n this._removeAll();\n\n this.__serviceListItem = [];\n model.toArray().forEach(service => {\n const item = new osparc.service.ServiceListItem(service);\n if (this.__filterGroup !== null) {\n item.subscribeToFilterGroup(this.__filterGroup);\n }\n this._add(item);\n item.addListener(\"tap\", () => this.__setSelected(item));\n item.addListener(\"dbltap\", () => this.fireDataEvent(\"serviceAdd\", item.getService()), this);\n item.addListener(\"keypress\", e => {\n if (e.getKeyIdentifier() === \"Enter\") {\n this.fireDataEvent(\"serviceAdd\", item.getService());\n }\n }, this);\n });\n },\n\n /**\n * Public function to get the currently selected service.\n *\n * @return Returns the model of the selected service or null if selection is empty.\n */\n getSelected: function() {\n const items = this._getChildren();\n for (let i=0; i item.setSelected(item === selectedItem));\n this.fireDataEvent(\"changeSelected\", selectedItem);\n },\n\n /**\n * Function checking if the selection is empty or not\n *\n * @return True if no item is selected, false if there one or more item selected.\n */\n isSelectionEmpty: function() {\n const selecetedItems = this._getChildren().filter(item => item.getSelected());\n selecetedItems.length === 0;\n },\n\n /**\n * Function that selects the first visible button.\n */\n selectFirstVisible: function() {\n const items = this._getChildren();\n for (let i=0; i\n * let svgWidget = new osparc.workbench.SvgWidget(\"SvgWidget_(Purpose)\");\n * this.getRoot().add(svgWidget);\n * \n */\n\nqx.Class.define(\"osparc.workbench.SvgWidget\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base();\n this.addListenerOnce(\"appear\", () => {\n const el = this.getContentElement().getDomElement();\n const svgWrapper = osparc.wrapper.Svg.getInstance();\n svgWrapper.init()\n .then(() => {\n if (this.__canvas === null) {\n this.__canvas = svgWrapper.createEmptyCanvas(el);\n this.setReady(true);\n this.fireDataEvent(\"SvgWidgetReady\", true);\n }\n }, this);\n });\n },\n\n properties: {\n ready: {\n check: \"Boolean\",\n init: false\n }\n },\n\n events: {\n \"SvgWidgetReady\": \"qx.event.type.Data\"\n },\n\n statics: {\n getCurveControls: function(x1, y1, x2, y2, offset = 100) {\n return [{\n x: x1,\n y: y1\n }, {\n x: x1+offset,\n y: y1\n }, {\n x: x2-offset,\n y: y2\n }, {\n x: x2,\n y: y2\n }];\n },\n\n updateCurve: function(curve, x1, y1, x2, y2) {\n const controls = osparc.workbench.SvgWidget.getCurveControls(x1, y1, x2, y2);\n osparc.wrapper.Svg.updateCurve(curve, controls);\n }\n },\n\n members: {\n __canvas: null,\n\n drawCurve: function(x1, y1, x2, y2, dashed = false) {\n const controls = this.self().getCurveControls(x1, y1, x2, y2);\n return osparc.wrapper.Svg.drawCurve(this.__canvas, controls, dashed);\n },\n\n drawAnnotationText: function(x, y, label, color, fontSize) {\n return osparc.wrapper.Svg.drawAnnotationText(this.__canvas, x, y, label, color, fontSize);\n },\n\n drawAnnotationNote: function(x, y, recipientName = \"\", text = \"\") {\n return osparc.wrapper.Svg.drawAnnotationNote(this.__canvas, x, y, recipientName, text);\n },\n\n drawAnnotationRect: function(width, height, x, y, color) {\n return osparc.wrapper.Svg.drawAnnotationRect(this.__canvas, width, height, x, y, color);\n },\n\n drawDashedRect: function(width, height, x = 0, y = 0) {\n return osparc.wrapper.Svg.drawDashedRect(this.__canvas, width, height, x, y);\n },\n\n drawFilledRect: function(width, height, x = 0, y = 0) {\n return osparc.wrapper.Svg.drawFilledRect(this.__canvas, width, height, x, y);\n },\n\n drawNodeUI: function(width = osparc.workbench.NodeUI.NODE_WIDTH, height = osparc.workbench.NodeUI.NODE_HEIGHT, radius = 4, x = 0, y = 0) {\n return osparc.wrapper.Svg.drawNodeUI(this.__canvas, width, height, radius, x, y);\n },\n\n drawBoundingBox: function(annotation) {\n const offset = 10;\n const bBox = annotation.getRepresentation().bbox();\n const width = bBox.width + 2*offset;\n const height = bBox.height + 2*offset;\n const x = bBox.x - offset;\n const y = bBox.y - offset;\n return osparc.wrapper.Svg.drawDashedRect(this.__canvas, width, height, x, y);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.AnnotationEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(annotation) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__form = new qx.ui.form.Form();\n this.getChildControl(\"form-renderer\");\n\n if (annotation) {\n this.setAnnotation(annotation);\n }\n },\n\n events: {\n \"addAnnotation\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\",\n \"deleteAnnotation\": \"qx.event.type.Event\",\n },\n\n properties: {\n annotation: {\n check: \"osparc.workbench.Annotation\",\n init: null,\n nullable: true,\n apply: \"__applyAnnotation\"\n },\n\n marker: {\n check: \"Object\",\n init: null,\n nullable: true,\n apply: \"__applyMarker\"\n }\n },\n\n members: {\n __form: null,\n\n getForm: function() {\n return this.__form;\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"form-renderer\":\n control = new qx.ui.form.renderer.Single(this.__form);\n this._add(control);\n break;\n case \"text-field\":\n control = new qx.ui.form.TextField();\n this.__form.add(control, \"Text\", null, \"text\");\n break;\n case \"text-area\":\n control = new qx.ui.form.TextArea().set({\n autoSize: true,\n minHeight: 70,\n maxHeight: 140\n });\n this.__form.add(control, \"Note\", null, \"note\");\n break;\n case \"color-picker\":\n control = new osparc.form.ColorPicker();\n this.__form.add(control, \"Color\", null, \"color\");\n break;\n case \"font-size\":\n control = new qx.ui.form.Spinner();\n this.__form.add(control, \"Size\", null, \"size\");\n break;\n case \"buttons-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"right\"\n }));\n this._add(control);\n break;\n case \"cancel-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n buttons.add(control);\n break;\n }\n case \"add-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Add\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"addAnnotation\"), this);\n buttons.add(control);\n break;\n }\n case \"delete-btn\": {\n const buttons = this.getChildControl(\"buttons-layout\");\n control = new qx.ui.form.Button(this.tr(\"Delete\")).set({\n appearance: \"danger-button\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"deleteAnnotation\"), this);\n buttons.add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __applyAnnotation: function(annotation) {\n if (annotation === null) {\n return;\n }\n\n const attrs = annotation.getAttributes();\n if (annotation.getType() === \"text\") {\n const textField = this.getChildControl(\"text-field\").set({\n value: attrs.text\n });\n textField.addListener(\"changeValue\", e => annotation.setText(e.getData()));\n } else if (annotation.getType() === \"note\") {\n const textArea = this.getChildControl(\"text-area\").set({\n value: attrs.text\n });\n textArea.addListener(\"changeValue\", e => annotation.setText(e.getData()));\n }\n\n if ([\"text\", \"rect\"].includes(annotation.getType())) {\n const colorPicker = this.getChildControl(\"color-picker\");\n annotation.bind(\"color\", colorPicker, \"value\");\n colorPicker.bind(\"value\", annotation, \"color\");\n }\n\n if (annotation.getType() === \"text\") {\n const fontSizeField = this.getChildControl(\"font-size\").set({\n value: attrs.fontSize\n })\n fontSizeField.addListener(\"changeValue\", e => annotation.setFontSize(e.getData()));\n }\n },\n\n __applyMarker: function(marker) {\n if (marker === null) {\n return;\n }\n\n const colorPicker = this.getChildControl(\"color-picker\");\n marker.bind(\"color\", colorPicker, \"color\");\n colorPicker.bind(\"color\", marker, \"color\");\n },\n\n addDeleteButton: function() {\n this.getChildControl(\"delete-btn\");\n },\n\n addAddButtons: function() {\n this.getChildControl(\"cancel-btn\");\n this.getChildControl(\"add-btn\");\n\n // Listen to \"Enter\" key\n this.addListener(\"keypress\", keyEvent => {\n if (keyEvent.getKeyIdentifier() === \"Enter\") {\n this.fireEvent(\"addAnnotation\");\n }\n }, this);\n },\n\n makeItModal: function() {\n this.set({\n padding: 10\n });\n\n this.show();\n\n const showEditor = () => this.show();\n const hideEditor = () => this.exclude();\n const tapListener = event => {\n if (osparc.utils.Utils.isMouseOnElement(this, event)) {\n return;\n }\n hideEditor();\n this.set({\n annotation: null,\n marker: null\n });\n document.removeEventListener(\"mousedown\", tapListener);\n };\n showEditor();\n document.addEventListener(\"mousedown\", tapListener);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Object that owns the Edge data model and it's representation\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let edge = new osparc.data.model.Edge(edgeId, node1, node2);\n * let edgeRepresentation = svgWidget.drawCurve(x1, y1, x2, y2);\n * let edgeUI = new osparc.workbench.EdgeUI(edge, edgeRepresentation);\n *
\n */\n\nqx.Class.define(\"osparc.workbench.EdgeUI\", {\n extend: qx.core.Object,\n include: osparc.filter.MFilterable,\n implement: osparc.filter.IFilterable,\n\n /**\n * @param edge {osparc.data.model.Edge} Edge owning the object\n * @param representation {SVG Object} UI representation of the edge\n */\n construct: function(edge, representation) {\n this.base();\n\n this.setEdge(edge);\n this.setRepresentation(representation);\n\n const hint = new osparc.ui.hint.Hint(null, \"\");\n representation.hint = hint;\n\n if (edge.getInputNode()) {\n edge.getInputNode().getStatus().addListener(\"changeModified\", () => this.__updateEdgeState());\n }\n edge.addListener(\"changePortConnected\", () => this.__updateEdgeState());\n\n this.__updateEdgeState();\n\n this.subscribeToFilterGroup(\"workbench\");\n },\n\n properties: {\n edge: {\n check: \"osparc.data.model.Edge\",\n nullable: false\n },\n\n representation: {\n init: null\n }\n },\n\n statics: {\n getEdgeColor: function(modified) {\n let newColor = null;\n if (modified === null) {\n newColor = qx.theme.manager.Color.getInstance().resolve(\"workbench-edge-comp-active\");\n } else {\n newColor = osparc.service.StatusUI.getColor(modified ? \"failed\" : \"ready\");\n }\n const colorHex = qx.theme.manager.Color.getInstance().resolve(newColor);\n return colorHex;\n },\n\n noPortsConnectedText: function(edge) {\n return `Connection candidate.
Check the ${edge.getOutputNode().getLabel()} inputs`;\n }\n },\n\n members: {\n __updateEdgeState: function() {\n const inputNode = this.getEdge().getInputNode();\n const portConnected = this.getEdge().isPortConnected();\n const modified = inputNode ? inputNode.getStatus().getModified() : false;\n\n // color\n const colorHex = this.self().getEdgeColor(modified);\n osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), colorHex);\n\n // shape\n osparc.wrapper.Svg.updateCurveDashes(this.getRepresentation(), !portConnected);\n\n // tooltip\n const hint = this.getHint();\n if (this.getEdge().isPortConnected() === false) {\n hint.setText(this.self().noPortsConnectedText(this.getEdge()));\n } else if (modified) {\n hint.setText(\"Out-of-date\");\n } else {\n hint.setText(null);\n }\n },\n\n getHint: function() {\n return this.getRepresentation().hint;\n },\n\n setSelected: function(selected) {\n if (selected) {\n const selectedColor = qx.theme.manager.Color.getInstance().resolve(\"workbench-edge-selected\");\n osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), selectedColor);\n } else {\n this.__updateEdgeState();\n }\n },\n\n setHighlighted: function(highlight) {\n if (highlight) {\n const strongColor = qx.theme.manager.Color.getInstance().resolve(\"strong-main\");\n osparc.wrapper.Svg.updateCurveColor(this.getRepresentation(), strongColor);\n } else {\n this.__updateEdgeState();\n }\n },\n\n getEdgeId: function() {\n return this.getEdge().getEdgeId();\n },\n\n _filter: function() {\n this.getRepresentation().node.style.opacity = 0.15;\n },\n\n _unfilter: function() {\n this.getRepresentation().node.style.opacity = 1;\n },\n\n _shouldApplyFilter: function(data) {\n return data.text && data.text.length > 1 ||\n data.tags && data.tags.length;\n },\n\n _shouldReactToFilter: function(data) {\n return true;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.workbench.Annotation\", {\n extend: qx.core.Object,\n\n /**\n * @param svgLayer {Object} SVG canvas\n * @param data {Object} data containing type, color, attributes and (optional) id\n * @param id {String} data\n */\n construct: function(svgLayer, data, id) {\n this.base();\n\n if (svgLayer) {\n this.__svgLayer = svgLayer;\n }\n\n if (id === undefined) {\n id = osparc.utils.Utils.uuidV4();\n }\n let color = \"color\" in data ? data.color : this.getColor();\n if (color && color[0] !== \"#\") {\n color = osparc.utils.Utils.namedColorToHex(color);\n }\n this.set({\n id,\n type: data.type,\n color,\n attributes: data.attributes\n });\n },\n\n statics: {\n DEFAULT_COLOR: \"#FFFF01\"\n },\n\n properties: {\n id: {\n check: \"String\",\n nullable: false\n },\n\n type: {\n check: [\"note\", \"rect\", \"text\"],\n nullable: false\n },\n\n color: {\n check: \"Color\",\n event: \"changeColor\",\n init: \"#FFFF01\",\n apply: \"__applyColor\"\n },\n\n attributes: {\n check: \"Object\",\n nullable: false,\n apply: \"__drawAnnotation\"\n },\n\n representation: {\n init: null\n }\n },\n\n events: {\n \"annotationClicked\": \"qx.event.type.Data\",\n \"annotationStartedMoving\": \"qx.event.type.Event\",\n \"annotationMoving\": \"qx.event.type.Event\",\n \"annotationStoppedMoving\": \"qx.event.type.Event\"\n },\n\n members: {\n __svgLayer: null,\n\n __drawAnnotation: async function(attrs) {\n if (this.__svgLayer === null) {\n return;\n }\n\n let representation = null;\n switch (this.getType()) {\n case \"note\": {\n const user = osparc.store.Groups.getInstance().getUserByGroupId(attrs.recipientGid);\n representation = this.__svgLayer.drawAnnotationNote(attrs.x, attrs.y, user ? user.getLabel() : \"\", attrs.text);\n break;\n }\n case \"rect\":\n representation = this.__svgLayer.drawAnnotationRect(attrs.width, attrs.height, attrs.x, attrs.y, this.getColor());\n break;\n case \"text\":\n representation = this.__svgLayer.drawAnnotationText(attrs.x, attrs.y, attrs.text, this.getColor(), attrs.fontSize);\n break;\n }\n if (representation) {\n osparc.wrapper.Svg.makeDraggable(representation);\n representation.node.addEventListener(\"click\", e => {\n this.fireDataEvent(\"annotationClicked\", e.ctrlKey);\n e.stopPropagation();\n }, this);\n representation.on(\"dragstart\", () => this.fireEvent(\"annotationStartedMoving\"));\n representation.on(\"dragmove\", () => this.fireEvent(\"annotationMoving\"));\n representation.on(\"dragend\", () => this.fireEvent(\"annotationStoppedMoving\"));\n this.setRepresentation(representation);\n }\n },\n\n __applyColor: function(color) {\n const representation = this.getRepresentation();\n if (representation) {\n switch (this.getType()) {\n case \"rect\":\n osparc.wrapper.Svg.updateItemColor(representation, color);\n break;\n case \"text\":\n osparc.wrapper.Svg.updateTextColor(representation, color);\n break;\n }\n }\n },\n\n getRepresentationPosition: function() {\n const representation = this.getRepresentation();\n if (representation) {\n const attrs = osparc.wrapper.Svg.getRectAttributes(representation);\n return {\n x: parseInt(attrs.x),\n y: parseInt(attrs.y)\n };\n }\n return null;\n },\n\n getPosition: function() {\n const attrs = this.getAttributes();\n if (attrs) {\n return {\n x: parseInt(attrs.x),\n y: parseInt(attrs.y)\n };\n }\n return null;\n },\n\n setPosition: function(x, y) {\n const representation = this.getRepresentation();\n if (representation) {\n x = parseInt(x) < 0 ? 0 : parseInt(x);\n y = parseInt(y) < 0 ? 0 : parseInt(y);\n osparc.wrapper.Svg.updateItemPos(representation, x, y);\n this.getAttributes().x = x;\n this.getAttributes().y = y;\n }\n },\n\n setText: function(newText) {\n this.getAttributes().text = newText;\n const representation = this.getRepresentation();\n if (representation) {\n osparc.wrapper.Svg.updateText(representation, newText);\n }\n },\n\n setFontSize: function(fontSize) {\n this.getAttributes().fontSize = fontSize;\n const representation = this.getRepresentation();\n if (representation) {\n osparc.wrapper.Svg.updateTextSize(representation, fontSize);\n }\n },\n\n setSelected: function(selected) {\n const representation = this.getRepresentation();\n if (representation) {\n switch (this.getType()) {\n case \"rect\":\n case \"text\": {\n if (selected) {\n if (!(\"bBox\" in representation.node)) {\n const bBox = this.__svgLayer.drawBoundingBox(this);\n representation.node[\"bBox\"] = bBox;\n }\n } else if (\"bBox\" in representation.node) {\n osparc.wrapper.Svg.removeItem(representation.node[\"bBox\"]);\n delete representation.node[\"bBox\"];\n }\n break;\n }\n }\n }\n },\n\n serialize: function() {\n return {\n type: this.getType(),\n attributes: this.getAttributes(),\n color: this.getColor()\n };\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.AnnotationNoteCreator\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.getChildControl(\"instructions\");\n this.getChildControl(\"select-recipient\");\n this.getChildControl(\"note\");\n this.getChildControl(\"add\");\n },\n\n properties: {\n recipientGid: {\n check: \"Integer\",\n init: null,\n nullable: true,\n event: \"changeRecipientGid\"\n },\n\n note: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeNote\"\n }\n },\n\n events: {\n \"addNote\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n statics: {\n popUpInWindow: function(noteEditor) {\n const title = qx.locale.Manager.tr(\"Add Note\");\n const win = osparc.ui.window.Window.popUpInWindow(noteEditor, title, 325, 256);\n win.center();\n win.open();\n return win;\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"instructions\":\n control = new qx.ui.basic.Label().set({\n value: this.tr(\"Add a recipient to be notified. Please make sure the user has access to the \") + osparc.product.Utils.getStudyAlias() + \".\",\n font: \"text-14\",\n rich: true,\n wrap: true\n });\n this._add(control);\n break;\n case \"recipient-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n alignY: \"middle\"\n });\n this._add(control);\n break;\n case \"select-recipient\":\n control = new qx.ui.form.Button(this.tr(\"Select recipient\")).set({\n allowGrowX: false\n });\n control.addListener(\"execute\", () => {\n const collaboratorsManager = new osparc.share.NewCollaboratorsManager(null, false);\n collaboratorsManager.setCaption(\"Recipient\");\n collaboratorsManager.getActionButton().setLabel(this.tr(\"Add\"));\n collaboratorsManager.addListener(\"addCollaborators\", e => {\n const collabs = e.getData();\n if (collabs) {\n collaboratorsManager.close();\n this.__setRecipientGid(collabs[0]);\n }\n }, this);\n }, this);\n this.getChildControl(\"recipient-layout\").add(control);\n break;\n case \"selected-recipient\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\"\n });\n this.getChildControl(\"recipient-layout\").add(control, {\n flex: 1\n });\n break;\n case \"note\":\n control = new qx.ui.form.TextArea().set({\n font: \"text-14\",\n placeholder: this.tr(\"Note\"),\n autoSize: true,\n minHeight: 70,\n maxHeight: 140\n });\n this.bind(\"note\", control, \"value\");\n control.bind(\"value\", this, \"note\");\n this._add(control);\n break;\n case \"buttonsLayout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\"));\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n control.add(cancelButton);\n this._add(control);\n break;\n }\n case \"add\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new qx.ui.form.Button(this.tr(\"Add\"));\n control.addListener(\"execute\", () => this.fireEvent(\"addNote\"), this);\n buttons.addAt(control, 0);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __setRecipientGid: function(gid) {\n this.setRecipientGid(gid);\n // only users were proposed\n const user = osparc.store.Groups.getInstance().getUserByGroupId(gid);\n if (user) {\n this.getChildControl(\"selected-recipient\").setValue(user.getLabel());\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2007 OpenHex SPRL, http://www.openhex.org\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Gaetan de Menten (ged)\n\n************************************************************************ */\n\n/**\n * The string data cell renderer. All it does is escape the incoming String\n * values.\n */\nqx.Class.define(\"qx.ui.table.cellrenderer.String\",\n{\n extend : qx.ui.table.cellrenderer.Conditional,\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // overridden\n _getContentHtml : function(cellInfo) {\n return qx.bom.String.escape(cellInfo.value || \"\");\n },\n\n // overridden\n _getCellClass : function(cellInfo) {\n return \"qooxdoo-table-cell\";\n }\n }\n});\n","/* ************************************************************************\n\n OSparc Dark Theme for Qooxdoo\n\n Copyright:\n 2018 IT'IS Foundation\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tobias Oetiker (oetiker)\n\n Origin:\n This theme is based in large parts on the the Simple\n theme included with Qooxdoo.\n************************************************************************ */\n/* global osparc */\n/* eslint no-negated-condition: \"off\", no-nested-ternary: \"off\" */\n/* ************************************************************************\n\n\n************************************************************************* */\n\n/**\n * The simple qooxdoo appearance theme.\n *\n * @asset(qx/icon/Tango/16/apps/office-calendar.png)\n * @asset(qx/icon/Tango/16/places/folder-open.png)\n * @asset(qx/icon/Tango/16/places/folder.png)\n * @asset(qx/icon/Tango/16/mimetypes/text-plain.png)\n * @asset(qx/icon/Tango/16/actions/view-refresh.png)\n * @asset(qx/icon/Tango/16/actions/window-close.png)\n * @asset(qx/icon/Tango/16/actions/dialog-cancel.png)\n * @asset(qx/icon/Tango/16/actions/dialog-ok.png)\n */\nqx.Theme.define(\"osparc.theme.common.Appearance\", {\n appearances: {\n /*\n ---------------------------------------------------------------------------\n CORE\n ---------------------------------------------------------------------------\n */\n\n \"widget\": {},\n\n \"label\":\n {\n style: function(states) {\n return {textColor: states.disabled ? \"text-disabled\" : undefined};\n }\n },\n\n \"image\":\n {\n style: function(states) {\n return {opacity: !states.replacement && states.disabled ? 0.3 : undefined};\n }\n },\n\n \"atom\": {},\n \"atom/label\": \"label\",\n \"atom/icon\": \"image\",\n\n \"root\":\n {\n style: function(states) {\n return {\n backgroundColor: \"background-main\",\n textColor: \"text\",\n font: \"default\"\n };\n }\n },\n\n \"popup\":\n {\n style: function(states) {\n return {\n decorator: \"popup\",\n backgroundColor: \"background-pane\"\n };\n }\n },\n\n \"tooltip\":\n {\n include: \"popup\",\n\n style: function(states) {\n return {\n backgroundColor: \"tooltip\",\n textColor: \"tooltip-text\",\n decorator: \"tooltip\",\n padding: [1, 3, 2, 3],\n offset: [10, 5, 5, 5]\n };\n }\n },\n\n \"tooltip/atom\": \"atom\",\n\n \"tooltip-error\":\n {\n include: \"tooltip\",\n\n style: function(states) {\n return {\n textColor: \"text-selected\",\n showTimeout: 100,\n hideTimeout: 10000,\n decorator: \"tooltip-error\",\n font: \"bold\",\n backgroundColor: undefined\n };\n }\n },\n\n \"tooltip-error/atom\": \"atom\",\n\n \"iframe\":\n {\n style: function(states) {\n return {\n backgroundColor: \"white\",\n decorator: \"main-dark\"\n };\n }\n },\n\n \"move-frame\":\n {\n style: function(states) {\n return {decorator: \"main-dark\"};\n }\n },\n\n \"resize-frame\": \"move-frame\",\n\n \"dragdrop-cursor\": {\n style: function(states) {\n var icon = \"nodrop\";\n\n if (states.copy) {\n icon = \"copy\";\n }\n else if (states.move) {\n icon = \"move\";\n }\n else if (states.alias) {\n icon = \"alias\";\n }\n\n return {\n source: osparc.theme.common.Image.URLS[\"cursor-\" + icon],\n position: \"right-top\",\n offset: [2, 16, 2, 6]\n };\n }\n },\n /*\n ---------------------------------------------------------------------------\n BUTTON\n ---------------------------------------------------------------------------\n */\n\n \"button\": { /* qx.ui.form.Button */\n\n alias: \"material-button\",\n include: \"material-button\",\n style: function(states) {\n return {center: true};\n }\n },\n \"material-button\": {\n alias: \"atom\",\n\n style: function(states) {\n var decorator = \"material-button\";\n\n if (!states.disabled) {\n if (states.pressed || states.checked) {\n decorator += \"-pressed\";\n }\n else if (states.hovered || states.focused) {\n decorator += \"-hovered\";\n }\n }\n else {\n decorator += \"-disabled\";\n }\n\n if (states.invalid && !states.disabled) {\n decorator += \"-invalid\";\n }\n\n return {\n decorator: decorator,\n padding: [3, 8],\n cursor: states.disabled ? undefined : \"pointer\",\n minWidth: 5,\n minHeight: 5\n };\n }\n },\n \"material-button/label\": {\n alias: \"atom/label\",\n\n style: function(states) {\n return {\n textColor: states.disabled ?\n \"material-button-text-disabled\" : \"material-button-text\"\n };\n }\n },\n\n \"button-frame\": {\n alias: \"atom\",\n\n style: function(states) {\n var decorator = \"button-box\";\n\n if (!states.disabled) {\n if (states.hovered && !states.pressed && !states.checked) {\n decorator = \"button-box-hovered\";\n }\n else if (states.hovered && (states.pressed || states.checked)) {\n decorator = \"button-box-pressed-hovered\";\n }\n else if (states.pressed || states.checked) {\n decorator = \"button-box-pressed\";\n }\n }\n\n if (states.invalid && !states.disabled) {\n decorator += \"-invalid\";\n }\n else if (states.focused) {\n decorator += \"-focused\";\n }\n\n return {\n decorator: decorator,\n padding: [3, 8],\n cursor: states.disabled ? undefined : \"pointer\",\n minWidth: 5,\n minHeight: 5\n };\n }\n },\n\n \"button-frame/label\": {\n alias: \"atom/label\",\n\n style: function(states) {\n return {textColor: states.disabled ? \"text-disabled\" : undefined};\n }\n },\n\n\n\n \"hover-button\":\n {\n alias: \"button\",\n include: \"button\",\n\n style: function(states) {\n return {decorator: states.hovered ? \"button-hover\" : undefined};\n }\n },\n\n \"menubutton\": {\n include: \"button\",\n alias: \"button\",\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-down\"],\n iconPosition: \"right\"\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TEXT FIELD\n ---------------------------------------------------------------------------\n */\n\n \"material-textfield\": {\n style: function(states) {\n var textColor;\n\n if (states.disabled) {\n textColor = \"text-disabled\";\n }\n else if (states.showingPlaceholder) {\n textColor = \"text-placeholder\";\n }\n else {\n textColor = undefined;\n }\n\n var decorator;\n var padding;\n decorator = \"material-textfield\";\n padding = [3, 0, 4, 0];\n if (states.readonly) {\n decorator += \"-readonly\";\n padding = [3, 0, 5, 0];\n }\n else if (states.disabled) {\n decorator += \"-disabled\";\n }\n else if (states.focused) {\n decorator += \"-focused\";\n if (states.invalid) {\n decorator += \"-invalid\";\n }\n padding = [3, 0, 3, 0];\n }\n else if (states.invalid) {\n decorator += \"-invalid\";\n }\n\n return {\n decorator: decorator,\n padding: padding,\n textColor: textColor,\n backgroundColor: states.disabled ? \"background-disabled\" : \"background-main\"\n };\n }\n },\n\n \"textfield\": \"material-textfield\",\n \"textarea\": \"textfield\",\n\n \"framebox\":\n {\n style: function(states) {\n var textColor;\n if (states.disabled) {\n textColor = \"text-disabled\";\n }\n else if (states.showingPlaceholder) {\n textColor = \"text-placeholder\";\n }\n else {\n textColor = undefined;\n }\n\n var decorator;\n var padding;\n if (states.disabled) {\n decorator = \"border-disabled\";\n padding = [1, 2];\n }\n else if (states.invalid) {\n decorator = \"border-invalid\";\n padding = [1, 2];\n }\n else if (states.focused) {\n decorator = \"border-focused\";\n padding = [1, 2];\n }\n else {\n padding = [1, 2];\n decorator = \"border\";\n }\n\n return {\n decorator: decorator,\n padding: padding,\n textColor: textColor,\n backgroundColor: states.disabled ? \"background-disabled\" : \"background-main\"\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SPLIT BUTTON\n ---------------------------------------------------------------------------\n */\n \"splitbutton\": {},\n\n \"splitbutton/button\":\n {\n alias: \"material-button\",\n style: function(states) {\n var decorator = \"material-button\";\n\n if (!states.disabled) {\n if (states.pressed || states.checked) {\n decorator += \"-pressed\";\n }\n else if (states.hovered) {\n decorator += \"-hovered\";\n }\n else if (states.focused) {\n decorator += \"-focused\";\n }\n }\n else {\n decorator += \"-disabled\";\n }\n\n decorator += \"-left\";\n\n return {\n decorator: decorator,\n padding: [3, 8],\n cursor: states.disabled ? undefined : \"pointer\"\n };\n }\n },\n\n \"splitbutton/arrow\": {\n alias: \"material-button\",\n style: function(states) {\n var decorator = \"material-button\";\n\n if (!states.disabled) {\n if (states.pressed || states.checked) {\n decorator += \"-pressed\";\n }\n else if (states.focused) {\n decorator += \"-focused\";\n }\n else if (states.hovered) {\n decorator += \"-hovered\";\n }\n }\n else {\n decorator += \"-disabled\";\n }\n\n decorator += \"-right\";\n\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-down\"],\n decorator: decorator,\n cursor: states.disabled ? undefined : \"pointer\",\n padding: [3, 4]\n };\n }\n },\n /*\n ---------------------------------------------------------------------------\n SLIDEBAR\n ---------------------------------------------------------------------------\n */\n\n \"slidebar\": {},\n \"slidebar/scrollpane\": {},\n \"slidebar/content\": {},\n\n \"slidebar/button-forward\":\n {\n alias: \"button\",\n include: \"button\",\n\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"arrow-\" + (states.vertical ? \"down\" : \"right\")]};\n }\n },\n\n \"slidebar/button-backward\":\n {\n alias: \"button\",\n include: \"button\",\n\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"arrow-\" + (states.vertical ? \"up\" : \"left\")]};\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TABLE\n ---------------------------------------------------------------------------\n */\n\n \"table\": \"widget\",\n\n \"table/statusbar\":\n {\n style: function(states) {\n return {\n decorator: \"statusbar\",\n padding: [2, 5]\n };\n }\n },\n\n \"table/column-button\":\n {\n alias: \"button\",\n\n style: function(states) {\n return {\n decorator: \"table-header-column-button\",\n textColor: \"table-header-foreground\",\n backgroundColor: \"table-header\",\n padding: 3,\n icon: osparc.theme.common.Image.URLS[\"select-column-order\"]\n };\n }\n },\n\n \"table-column-reset-button\":\n {\n include: \"menu-button\",\n alias: \"menu-button\",\n style: function() {\n return {\n decorator: \"table-header-column-button\",\n icon: \"icon/16/actions/view-refresh.png\"\n };\n }\n },\n\n \"table-scroller/scrollbar-x\": \"scrollbar\",\n \"table-scroller/scrollbar-y\": \"scrollbar\",\n\n \"table-scroller\": \"widget\",\n\n \"table-scroller/header\": {\n style: function() {\n return {\n textColor: \"table-header-foreground\",\n backgroundColor: \"table-header\",\n decorator: \"table-header\"\n };\n }\n },\n\n \"table-scroller/pane\": {},\n\n \"table-scroller/focus-indicator\":\n {\n style: function(states) {\n return {decorator: \"main\"};\n }\n },\n\n \"table-scroller/resize-line\":\n {\n style: function(states) {\n return {\n backgroundColor: \"button-border\",\n width: 3\n };\n }\n },\n\n \"table-header-cell\":\n {\n alias: \"atom\",\n\n style: function(states) {\n return {\n decorator: states.first ? \"table-header-cell-first\" : \"table-header-cell\",\n minWidth: 13,\n font: \"bold\",\n paddingTop: 3,\n paddingLeft: 5,\n cursor: states.disabled ? undefined : \"pointer\",\n sortIcon: states.sorted ?\n (osparc.theme.common.Image.URLS[\"table-\" +\n (states.sortedAscending ? \"ascending\" : \"descending\")\n ]) : undefined\n };\n }\n },\n\n \"table-header-cell/icon\":\n {\n include: \"atom/icon\",\n\n style: function(states) {\n return {paddingRight: 5};\n }\n },\n\n \"table-header-cell/sort-icon\":\n {\n style: function(states) {\n return {\n alignY: \"middle\",\n alignX: \"right\",\n paddingRight: 5\n };\n }\n },\n\n \"table-editor-textfield\":\n {\n include: \"framebox\",\n\n style: function(states) {\n return {\n decorator: undefined,\n padding: [2, 2]\n };\n }\n },\n\n \"table-editor-selectbox\":\n {\n include: \"selectbox\",\n alias: \"selectbox\",\n\n style: function(states) {\n return {padding: [0, 2]};\n }\n },\n\n \"table-editor-combobox\":\n {\n include: \"combobox\",\n alias: \"combobox\",\n\n style: function(states) {\n return {decorator: undefined};\n }\n },\n\n \"progressive-table-header\": {\n style: function(states) {\n return {decorator: \"progressive-table-header\"};\n }\n },\n\n \"progressive-table-header-cell\": {\n style: function(states) {\n return {\n decorator: \"progressive-table-header-cell\",\n padding: [5, 6, 5, 6]\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TREEVIRTUAL\n ---------------------------------------------------------------------------\n */\n\n \"treevirtual\": {\n include: \"framebox\",\n alias: \"table\",\n style: function(states, superStyles) {\n return {padding: [superStyles.padding[0] + 2, superStyles.padding[1] + 1]};\n }\n },\n\n \"treevirtual-folder\":\n {\n style: function(states) {\n return {\n icon: (states.opened ?\n // the old treevirtual code can not use fonticons\n \"icon/16/places/folder-open.png\" : \"icon/16/places/folder.png\"),\n opacity: states.drag ? 0.5 : undefined\n };\n }\n },\n\n \"treevirtual-file\":\n {\n include: \"treevirtual-folder\",\n alias: \"treevirtual-folder\",\n\n style: function(states) {\n return {\n icon: \"icon/16/mimetypes/text-plain.png\",\n opacity: states.drag ? 0.5 : undefined\n };\n }\n },\n\n \"treevirtual-line\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-line\"]};\n }\n },\n\n \"treevirtual-contract\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"tree-minus\"]};\n }\n },\n\n \"treevirtual-expand\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"tree-plus\"]};\n }\n },\n\n \"treevirtual-only-contract\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-minus-only\"]};\n }\n },\n\n \"treevirtual-only-expand\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-plus-only\"]};\n }\n },\n\n \"treevirtual-start-contract\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-minus-start\"]};\n }\n },\n\n \"treevirtual-start-expand\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-plus-start\"]};\n }\n },\n\n \"treevirtual-end-contract\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-minus-end\"]};\n }\n },\n\n \"treevirtual-end-expand\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-plus-end\"]};\n }\n },\n\n \"treevirtual-cross-contract\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-minus-cross\"]};\n }\n },\n\n \"treevirtual-cross-expand\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-plus-cross\"]};\n }\n },\n\n\n \"treevirtual-end\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-end\"]};\n }\n },\n\n \"treevirtual-cross\":\n {\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"treevirtual-cross\"]};\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n RESIZER\n ---------------------------------------------------------------------------\n */\n\n \"resizer\":\n {\n style: function(states) {\n return {decorator: \"main-dark\"};\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SPLITPANE\n ---------------------------------------------------------------------------\n */\n\n \"splitpane\": {},\n\n \"splitpane/splitter\":\n {\n style: function(states) {\n return {backgroundColor: \"contrasted-background\"};\n }\n },\n\n \"splitpane/splitter/knob\":\n {\n style: function(states) {\n return {\n source: osparc.theme.common.Image.URLS[\n \"knob-\" + (states.horizontal ? \"horizontal\" : \"vertical\")\n ],\n padding: 0\n };\n }\n },\n\n \"splitpane/slider\":\n {\n style: function(states) {\n return {\n backgroundColor: \"material-button-background\",\n opacity: 0.3\n };\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n MENU\n ---------------------------------------------------------------------------\n */\n\n \"menu\":\n {\n style: function(states) {\n var result =\n {\n backgroundColor: \"background-main\",\n decorator: \"main\",\n spacingX: 6,\n spacingY: 1,\n iconColumnWidth: 16,\n arrowColumnWidth: 4,\n padding: 1,\n placementModeY: states.submenu || states.contextmenu ? \"best-fit\" : \"keep-align\"\n };\n\n if (states.submenu) {\n result.position = \"right-top\";\n result.offset = [-2, -3];\n }\n\n if (states.contextmenu) {\n result.offset = 4;\n }\n\n return result;\n }\n },\n\n \"menu/slidebar\": \"menu-slidebar\",\n\n \"menu-slidebar\": \"widget\",\n\n \"menu-slidebar-button\":\n {\n style: function(states) {\n return {\n backgroundColor: states.hovered ? \"background-selected\" : undefined,\n padding: 6,\n center: true\n };\n }\n },\n\n \"menu-slidebar/button-backward\":\n {\n include: \"menu-slidebar-button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\n \"arrow-up\" + (states.hovered ? \"-invert\" : \"\")\n ]\n };\n }\n },\n\n \"menu-slidebar/button-forward\":\n {\n include: \"menu-slidebar-button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\n \"arrow-down\" + (states.hovered ? \"-invert\" : \"\")\n ]\n };\n }\n },\n\n \"menu-separator\":\n {\n style: function(states) {\n return {\n height: 0,\n decorator: \"menu-separator\",\n marginTop: 4,\n marginBottom: 4,\n marginLeft: 2,\n marginRight: 2\n };\n }\n },\n\n \"menu-button\":\n {\n alias: \"atom\",\n\n style: function(states) {\n return {\n backgroundColor: states.selected ? \"background-selected\" : undefined,\n textColor: states.selected ? \"text-selected\" : \"text\",\n padding: [2, 6]\n };\n }\n },\n\n \"menu-button/icon\":\n {\n include: \"image\",\n\n style: function(states) {\n return {\n alignY: \"middle\",\n textColor: states.selected ? \"text-selected\" : \"text\"\n };\n }\n },\n\n \"menu-button/label\":\n {\n include: \"label\",\n\n style: function(states) {\n return {\n alignY: \"middle\",\n padding: 1\n };\n }\n },\n\n \"menu-button/shortcut\":\n {\n include: \"label\",\n\n style: function(states) {\n return {\n alignY: \"middle\",\n marginLeft: 14,\n padding: 1\n };\n }\n },\n\n \"menu-button/arrow\":\n {\n include: \"image\",\n\n style: function(states) {\n return {\n source: osparc.theme.common.Image.URLS[\n \"arrow-right\" + (states.selected ? \"-invert\" : \"\")\n ],\n alignY: \"middle\"\n };\n }\n },\n\n \"menu-checkbox\":\n {\n alias: \"menu-button\",\n include: \"menu-button\",\n\n style: function(states) {\n var icon = \"menu-checkbox\";\n if (states.checked) {\n icon += \"-checked\";\n }\n return {icon: osparc.theme.common.Image.URLS[icon]};\n }\n },\n\n \"menu-radiobutton\":\n {\n alias: \"menu-button\",\n include: \"menu-button\",\n\n style: function(states) {\n var icon = \"menu-radiobutton\";\n if (states.checked) {\n icon += \"-checked\";\n }\n return {icon: osparc.theme.common.Image.URLS[icon]};\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n MENU BAR\n ---------------------------------------------------------------------------\n */\n\n \"menubar\":\n {\n style: function(states) {\n return {\n backgroundColor: \"material-button-background\",\n padding: [4, 2]\n };\n }\n },\n\n \"menubar-button\":\n {\n style: function(states) {\n var decorator;\n var padding = [2, 6];\n if (!states.disabled) {\n if (states.pressed) {\n decorator = \"menubar-button-pressed\";\n }\n else if (states.hovered) {\n decorator = \"menubar-button-hovered\";\n }\n }\n\n return {\n padding: padding,\n cursor: states.disabled ? undefined : \"pointer\",\n textColor: \"material-button-text\",\n decorator: decorator\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n VIRTUAL WIDGETS\n ---------------------------------------------------------------------------\n */\n \"virtual-list\": \"list\",\n \"virtual-list/row-layer\": \"row-layer\",\n\n \"row-layer\": \"widget\",\n \"column-layer\": \"widget\",\n\n \"group-item\":\n {\n include: \"label\",\n alias: \"label\",\n\n style: function(states) {\n return {\n padding: 4,\n backgroundColor: \"#BABABA\",\n textColor: \"white\",\n font: \"bold\"\n };\n }\n },\n\n \"virtual-selectbox\": \"selectbox\",\n \"virtual-selectbox/dropdown\": \"popup\",\n \"virtual-selectbox/dropdown/list\": {alias: \"virtual-list\"},\n\n \"virtual-combobox\": \"combobox\",\n \"virtual-combobox/dropdown\": \"popup\",\n \"virtual-combobox/dropdown/list\": {alias: \"virtual-list\"},\n\n \"virtual-tree\":\n {\n include: \"tree\",\n alias: \"tree\",\n\n style: function(states) {\n return {itemHeight: 21};\n }\n },\n\n \"virtual-tree-folder\": \"tree-folder\",\n \"virtual-tree-file\": \"tree-file\",\n\n \"cell\":\n {\n style: function(states) {\n return {\n backgroundColor: states.selected ?\n \"table-row-background-selected\" :\n \"table-row-background-even\",\n textColor: states.selected ? \"text-selected\" : \"text\",\n padding: [3, 6]\n };\n }\n },\n\n \"cell-string\": \"cell\",\n \"cell-number\":\n {\n include: \"cell\",\n style: function(states) {\n return {textAlign: \"right\"};\n }\n },\n \"cell-image\": \"cell\",\n \"cell-boolean\": \"cell\",\n \"cell-atom\": \"cell\",\n \"cell-date\": \"cell\",\n \"cell-html\": \"cell\",\n\n\n /*\n ---------------------------------------------------------------------------\n SCROLLBAR\n ---------------------------------------------------------------------------\n */\n\n \"scrollbar\": {},\n \"scrollbar/slider\": {},\n\n \"scrollbar/slider/knob\":\n {\n style: function(states) {\n var decorator = \"scroll-knob\";\n\n if (!states.disabled) {\n if (states.hovered && !states.pressed && !states.checked) {\n decorator = \"scroll-knob-hovered\";\n }\n else if (states.hovered && (states.pressed || states.checked)) {\n decorator = \"scroll-knob-pressed-hovered\";\n }\n else if (states.pressed || states.checked) {\n decorator = \"scroll-knob-pressed\";\n }\n }\n\n return {\n height: 8,\n width: 8,\n marginLeft: 2,\n marginTop: 2,\n cursor: states.disabled ? undefined : \"pointer\",\n decorator: decorator,\n minHeight: states.horizontal ? undefined : 30,\n minWidth: states.horizontal ? 30 : undefined\n };\n }\n },\n\n\n \"scrollbar/button\":\n {\n style: function(states) {\n return {\n height: 0,\n width: 0,\n margin: [2, 2]\n };\n }\n },\n\n \"scrollbar/button-begin\": \"scrollbar/button\",\n \"scrollbar/button-end\": \"scrollbar/button\",\n\n\n /*\n ---------------------------------------------------------------------------\n SCROLLAREA\n ---------------------------------------------------------------------------\n */\n\n \"scrollarea/corner\":\n {\n style: function(states) {\n return {backgroundColor: \"background-main\"};\n }\n },\n\n \"scrollarea\": \"widget\",\n \"scrollarea/pane\": \"widget\",\n \"scrollarea/scrollbar-x\": \"scrollbar\",\n \"scrollarea/scrollbar-y\": \"scrollbar\",\n\n\n\n /*\n ---------------------------------------------------------------------------\n RADIO BUTTON\n ---------------------------------------------------------------------------\n */\n\n \"radiobutton\":\n {\n style: function(states) {\n var icon;\n\n if (states.checked) {\n icon = osparc.theme.common.Image.URLS[\"radiobutton-checked\"];\n // Checked\n }\n else {\n icon = osparc.theme.common.Image.URLS[\"radiobutton-unchecked\"];\n // Unchecked\n }\n\n var textColor = \"text\";\n if (states.disabled) {\n textColor = \"text-disabled\";\n }\n else if (states.invalid) {\n textColor = \"invalid\";\n }\n return {\n icon: icon,\n paddingTop: 2,\n textColor: textColor,\n gap: 6\n };\n }\n },\n \"radiobutton/icon\": {\n style: function(states) {\n return {\n decorator: \"radiobutton\",\n padding: [2,0,0,0]\n };\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n FORM\n ---------------------------------------------------------------------------\n */\n \"form-renderer-label\": {\n include: \"label\",\n style: function() {\n return {paddingTop: 3};\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n CHECK BOX\n ---------------------------------------------------------------------------\n */\n \"checkbox\":\n {\n alias: \"atom\",\n\n style: function(states) {\n // The \"disabled\" icon is set to an icon **without** the -disabled\n // suffix on purpose. This is because the Image widget handles this\n // already by replacing the current image with a disabled version\n // (if available). If no disabled image is found, the opacity style\n // is used.\n var icon;\n\n // Checked\n if (states.checked) {\n icon = osparc.theme.common.Image.URLS[\"checkbox-checked\"];\n // Undetermined\n }\n else if (states.undetermined) {\n icon = osparc.theme.common.Image.URLS[\"checkbox-undetermined\"];\n // Unchecked\n }\n else {\n // empty icon\n icon = osparc.theme.common.Image.URLS[\"checkbox-blank\"];\n }\n\n var textColor = \"text\";\n if (states.disabled) {\n textColor = \"text-disabled\";\n }\n else if (states.invalid) {\n textColor = \"invalid\";\n }\n return {\n icon: icon,\n textColor: textColor,\n gap: 6\n };\n }\n },\n\n\n \"checkbox/icon\": {\n style: function(states) {\n return {\n decorator: \"checkbox\",\n padding: 0\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SPINNER\n ---------------------------------------------------------------------------\n */\n\n \"spinner\":\n {\n style: function(states) {\n return {textColor: states.disabled ? \"text-disabled\" : undefined};\n }\n },\n\n \"spinner/textfield\": \"textfield\",\n\n \"spinner/upbutton\":\n {\n alias: \"combobox/button\",\n include: \"combobox/button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-up-small\"],\n decorator: undefined,\n width: 12,\n height: 6,\n padding: [-1, 0, 0, 0]\n };\n }\n },\n\n \"spinner/downbutton\":\n {\n alias: \"combobox/button\",\n include: \"combobox/button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-down-small\"],\n decorator: undefined,\n width: 12,\n height: 6,\n padding: [-1, 0, 0, 0]\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SELECTBOX\n ---------------------------------------------------------------------------\n */\n\n \"selectbox\": \"textfield\",\n\n \"selectbox/atom\": \"atom\",\n \"selectbox/popup\": \"popup\",\n \"selectbox/list\": {\n alias: \"list\",\n include: \"list\",\n\n style: function() {\n return {decorator: undefined};\n }\n },\n\n \"selectbox/arrow\":\n {\n include: \"image\",\n\n style: function(states) {\n return {\n source: osparc.theme.common.Image.URLS[\"arrow-down\"],\n paddingRight: 0,\n paddingLeft: 2,\n paddingTop: -3\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n COMBO BOX\n ---------------------------------------------------------------------------\n */\n\n \"combobox\": {},\n\n \"combobox/button\":\n {\n alias: \"button-frame\",\n include: \"button-frame\",\n\n style: function(states) {\n let decorator = \"material-textfield\";\n if (states.focused) {\n decorator += \"-focused\";\n if (states.invalid) {\n decorator += \"-invalid\";\n }\n }\n else if (states.invalid) {\n decorator += \"-invalid\";\n }\n else if (states.disabled) {\n decorator += \"-disabled\";\n }\n\n return {\n backgroundColor: undefined,\n icon: osparc.theme.common.Image.URLS[\"arrow-down\"],\n decorator: decorator,\n padding: [0, 0, 0, 0]\n };\n }\n },\n\n \"combobox/popup\": \"popup\",\n \"combobox/list\": {\n alias: \"list\",\n style: function(states) {\n return {paddingRight: 2};\n }\n },\n\n \"combobox/textfield\": \"textfield\",\n\n\n /*\n ---------------------------------------------------------------------------\n DATEFIELD\n ---------------------------------------------------------------------------\n */\n\n \"datefield\": \"textfield\",\n\n \"datefield/button\":\n {\n alias: \"combobox/button\",\n include: \"combobox/button\",\n\n style: function(states) {\n return {\n icon: \"@MaterialIcons/calendar_today/14\",\n padding: [0, 0, 0, 0],\n backgroundColor: undefined,\n decorator: undefined,\n width: 16\n };\n }\n },\n\n \"datefield/textfield\": {\n alias: \"textfield\",\n include: \"textfield\",\n\n style: function(states) {\n return {\n decorator: undefined,\n padding: 0\n };\n }\n },\n\n \"datefield/list\":\n {\n alias: \"datechooser\",\n include: \"datechooser\",\n\n style: function(states) {\n return {decorator: undefined};\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n LIST\n ---------------------------------------------------------------------------\n */\n\n \"list\":\n {\n alias: \"scrollarea\",\n include: \"framebox\"\n },\n\n \"listitem\":\n {\n alias: \"atom\",\n\n style: function(states) {\n var padding = [3, 5, 3, 5];\n if (states.lead) {\n padding = [2, 4, 2, 4];\n }\n if (states.dragover) {\n padding[2] -= 2;\n }\n\n var backgroundColor;\n if (states.selected) {\n backgroundColor = \"background-selected\";\n if (states.disabled) {\n backgroundColor += \"-disabled\";\n }\n }\n return {\n gap: 4,\n padding: padding,\n backgroundColor: backgroundColor,\n textColor: states.selected ? \"text-selected\" : undefined,\n decorator: states.lead ? \"lead-item\" : states.dragover ? \"dragover\" : undefined,\n opacity: states.drag ? 0.5 : undefined\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SLIDER\n ---------------------------------------------------------------------------\n */\n\n \"slider\":\n {\n style: function(states) {\n var decorator;\n var padding;\n if (states.disabled) {\n decorator = \"border-disabled\";\n padding = [1, 2];\n }\n else if (states.invalid) {\n decorator = \"border-invalid\";\n padding = [1, 2];\n }\n else if (states.focused) {\n decorator = \"border-focused\";\n padding = [1, 2];\n }\n else {\n padding = [1, 2];\n decorator = \"border\";\n }\n\n return {\n decorator: decorator,\n padding: padding\n };\n }\n },\n\n \"slider/knob\": \"scrollbar/slider/knob\",\n\n\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n GROUP BOX\n ---------------------------------------------------------------------------\n */\n\n \"groupbox\": {},\n\n \"groupbox/legend\":\n {\n alias: \"atom\",\n\n style: function(states) {\n return {\n textColor: states.invalid ? \"invalid\" : undefined,\n padding: 5,\n margin: 4,\n font: \"bold\"\n };\n }\n },\n\n \"groupbox/frame\":\n {\n style: function(states) {\n return {\n backgroundColor: \"background-main\",\n padding: [6, 9],\n margin: [18, 2, 2, 2],\n decorator: \"white-box\"\n };\n }\n },\n\n \"check-groupbox\": \"groupbox\",\n\n \"check-groupbox/legend\":\n {\n alias: \"checkbox\",\n include: \"checkbox\",\n\n style: function(states) {\n return {\n textColor: states.invalid ? \"invalid\" : undefined,\n padding: 5,\n margin: 4,\n font: \"bold\"\n };\n }\n },\n\n \"radio-groupbox\": \"groupbox\",\n\n \"radio-groupbox/legend\":\n {\n alias: \"radiobutton\",\n include: \"radiobutton\",\n\n style: function(states) {\n return {\n textColor: states.invalid ? \"invalid\" : undefined,\n padding: 5,\n margin: 4,\n font: \"bold\"\n };\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n TREE\n ---------------------------------------------------------------------------\n */\n\n \"tree-folder/open\":\n {\n include: \"image\",\n style: function(states) {\n return {\n source: states.opened ?\n osparc.theme.common.Image.URLS[\"tree-minus\"] :\n osparc.theme.common.Image.URLS[\"tree-plus\"],\n textColor: states.selected ? \"text-selected\" : \"text\"\n };\n }\n },\n\n\n \"tree-folder\":\n {\n style: function(states) {\n var backgroundColor;\n if (states.selected) {\n backgroundColor = \"background-selected\";\n if (states.disabled) {\n backgroundColor += \"-disabled\";\n }\n }\n return {\n padding: [2, 8, 2, 5],\n icon: states.opened ?\n osparc.theme.common.Image.URLS[\"folder-open\"] :\n osparc.theme.common.Image.URLS[\"folder\"],\n backgroundColor: backgroundColor,\n textColor: states.selected ? \"text-selected\" : \"text\",\n iconOpened: osparc.theme.common.Image.URLS[\"folder-open\"],\n opacity: states.drag ? 0.5 : undefined\n };\n }\n },\n\n \"tree-folder/icon\":\n {\n include: \"image\",\n style: function(states) {\n return {\n padding: [0, 4, 0, 0],\n textColor: states.selected ? \"text-selected\" : \"text\"\n };\n }\n },\n\n \"tree-folder/label\":\n {\n style: function(states) {\n return {\n padding: [1, 2],\n textColor: states.selected ? \"text-selected\" : \"text\"\n };\n }\n },\n\n \"tree-file\":\n {\n include: \"tree-folder\",\n alias: \"tree-folder\",\n\n style: function(states) {\n return {icon: osparc.theme.common.Image.URLS[\"file\"]};\n }\n },\n\n \"tree\":\n {\n include: \"list\",\n alias: \"list\",\n\n style: function(states) {\n return {\n contentPadding: [4, 1],\n padding: 1\n };\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n WINDOW\n ---------------------------------------------------------------------------\n */\n\n \"window\":\n {\n style: function(states) {\n return {\n contentPadding: [10, 10, 10, 10],\n backgroundColor: \"background-main\",\n decorator: states.maximized ? undefined : states.active ? \"window-active\" : \"window\"\n };\n }\n },\n\n \"window-resize-frame\": \"resize-frame\",\n\n \"window/pane\": {\n style: function(states) {\n return {padding: 10};\n }\n },\n\n \"window/captionbar\":\n {\n style: function(states) {\n return {\n backgroundColor: states.active ? \"window-caption-background-active\" : \"window-caption-background\",\n margin: 0,\n padding: 8,\n decorator: \"window-caption\"\n };\n }\n },\n\n \"window/icon\":\n {\n style: function(states) {\n return {\n marginRight: 4,\n marginTop: 2\n };\n }\n },\n\n \"window/title\":\n {\n style: function(states) {\n return {\n cursor: \"default\",\n font: states.active ? \"bold\" : \"default\",\n textColor: states.active ? \"window-caption-text-active\": \"window-caption-text\",\n marginRight: 20,\n marginLeft: 4,\n alignY: \"middle\"\n };\n }\n },\n\n \"window/minimize-button\":\n {\n alias: \"button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-minimize\"]+\"/18\",\n padding: 0,\n cursor: states.disabled ? undefined : \"pointer\"\n };\n }\n },\n\n \"window/restore-button\":\n {\n alias: \"button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-restore\"]+\"/18\",\n padding: 0,\n cursor: states.disabled ? undefined : \"pointer\"\n };\n }\n },\n\n \"window/maximize-button\":\n {\n alias: \"button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-maximize\"]+\"/18\",\n padding: 0,\n cursor: states.disabled ? undefined : \"pointer\"\n };\n }\n },\n\n \"window/close-button\":\n {\n alias: \"button\",\n\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-close\"]+\"/18\",\n padding: 0,\n cursor: states.disabled ? undefined : \"pointer\"\n };\n }\n },\n\n \"window/statusbar\":\n {\n style: function(states) {\n return {\n decorator: \"statusbar\",\n padding: [2, 6]\n };\n }\n },\n\n \"window/statusbar-text\": \"label\",\n\n /*\n ---------------------------------------------------------------------------\n DATE CHOOSER\n ---------------------------------------------------------------------------\n */\n \"datechooser\":\n {\n style: function(states) {\n return {\n decorator: \"main\",\n minWidth: 220\n };\n }\n },\n\n \"datechooser/navigation-bar\":\n {\n style: function(states) {\n return {\n backgroundColor: \"background-main\",\n textColor: states.disabled ? \"text-disabled\" : states.invalid ? \"invalid\" : undefined,\n padding: [2, 10]\n };\n }\n },\n\n \"datechooser/last-year-button-tooltip\": \"tooltip\",\n \"datechooser/last-month-button-tooltip\": \"tooltip\",\n \"datechooser/next-year-button-tooltip\": \"tooltip\",\n \"datechooser/next-month-button-tooltip\": \"tooltip\",\n\n \"datechooser/last-year-button\": \"datechooser/button\",\n \"datechooser/last-month-button\": \"datechooser/button\",\n \"datechooser/next-year-button\": \"datechooser/button\",\n \"datechooser/next-month-button\": \"datechooser/button\",\n \"datechooser/button/icon\": {},\n\n \"datechooser/button\":\n {\n style: function(states) {\n var result = {\n width: 17,\n show: \"icon\",\n cursor: states.disabled ? undefined : \"pointer\"\n };\n\n if (states.lastYear) {\n result.icon = osparc.theme.common.Image.URLS[\"arrow-rewind\"];\n }\n else if (states.lastMonth) {\n result.icon = osparc.theme.common.Image.URLS[\"arrow-left\"];\n }\n else if (states.nextYear) {\n result.icon = osparc.theme.common.Image.URLS[\"arrow-forward\"];\n }\n else if (states.nextMonth) {\n result.icon = osparc.theme.common.Image.URLS[\"arrow-right\"];\n }\n\n return result;\n }\n },\n\n \"datechooser/month-year-label\":\n {\n style: function(states) {\n return {\n font: \"bold\",\n textAlign: \"center\"\n };\n }\n },\n\n \"datechooser/date-pane\":\n {\n style: function(states) {\n return {\n decorator: \"datechooser-date-pane\",\n backgroundColor: \"background-main\"\n };\n }\n },\n\n \"datechooser/weekday\":\n {\n style: function(states) {\n return {\n decorator: \"datechooser-weekday\",\n font: \"bold\",\n textAlign: \"center\",\n textColor: states.disabled ? \"text-disabled\" : states.weekend ? \"background-selected-dark\" : \"background-main\",\n backgroundColor: states.weekend ? \"background-main\" : \"background-selected-dark\",\n paddingTop: 2\n };\n }\n },\n\n \"datechooser/day\":\n {\n style: function(states) {\n return {\n textAlign: \"center\",\n decorator: states.today ? \"main\" : undefined,\n textColor: states.disabled ? \"text-disabled\" : states.selected ? \"text-selected\" : states.otherMonth ? \"text-disabled\" : undefined,\n backgroundColor: states.disabled ? undefined : states.selected ? \"background-selected\" : undefined,\n padding: states.today ? [1, 3] : [2, 4]\n };\n }\n },\n\n \"datechooser/week\":\n {\n style: function(states) {\n return {\n textAlign: \"center\",\n textColor: \"background-selected-dark\",\n padding: [2, 4],\n decorator: states.header ? \"datechooser-week-header\" : \"datechooser-week\"\n };\n }\n },\n\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n PROGRESSBAR\n ---------------------------------------------------------------------------\n */\n \"progressbar\":\n {\n style: function(states) {\n return {\n decorator: \"progressbar\",\n padding: 1,\n backgroundColor: \"background-main\",\n width: 200,\n height: 20\n };\n }\n },\n\n \"progressbar/progress\":\n {\n style: function(states) {\n return {\n backgroundColor: states.disabled ?\n \"background-disabled-checked\" :\n \"background-selected\"\n };\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n TOOLBAR\n ---------------------------------------------------------------------------\n */\n\n \"toolbar\":\n {\n style: function(states) {\n return {\n backgroundColor: \"material-button-background\",\n padding: 0\n };\n }\n },\n\n \"toolbar/part\": {\n style: function(states) {\n return {margin: [0, 15]};\n }\n },\n\n \"toolbar/part/container\": {},\n \"toolbar/part/handle\": {},\n\n \"toolbar-separator\":\n {\n style: function(states) {\n return {\n decorator: undefined,\n margin: [7, 0],\n width: 4\n };\n }\n },\n\n \"toolbar-button\":\n {\n alias: \"atom\",\n\n style: function(states) {\n // set the margin\n var margin = [7, 10];\n if (states.left || states.middle || states.right) {\n margin = [7, 3];\n }\n var decorator = \"toolbar-button\";\n if (states.hovered || states.pressed || states.checked) {\n decorator += \"-hovered\";\n }\n\n return {\n cursor: states.disabled ? undefined : \"pointer\",\n decorator: decorator,\n textColor: \"material-button-text\",\n margin: margin,\n padding: [3, 5]\n };\n }\n },\n\n \"toolbar-menubutton\":\n {\n alias: \"toolbar-button\",\n include: \"toolbar-button\",\n\n style: function(states) {\n return {showArrow: true};\n }\n },\n\n \"toolbar-menubutton/arrow\":\n {\n alias: \"image\",\n include: \"image\",\n\n style: function(states) {\n return {\n source: osparc.theme.common.Image.URLS[\"arrow-down\"],\n cursor: states.disabled ? undefined : \"pointer\",\n padding: 0,\n textColor: \"material-button-text\",\n marginLeft: 2\n };\n }\n },\n\n \"toolbar-splitbutton\": {},\n\n \"toolbar-splitbutton/button\":\n {\n alias: \"toolbar-button\",\n include: \"toolbar-button\",\n\n style: function(states) {\n // set the margin\n var margin = [7, 0,7,10];\n if (states.left || states.middle || states.right) {\n margin = [7, 0,7,3];\n }\n var decorator = \"toolbar-button\";\n if (states.hovered || states.pressed || states.focused ||states.checked) {\n decorator += \"-hovered\";\n }\n decorator += \"-left\";\n\n return {\n decorator: decorator,\n margin: margin\n };\n }\n },\n\n\n \"toolbar-splitbutton/arrow\":\n {\n alias: \"toolbar-button\",\n include: \"toolbar-button\",\n\n style: function(states) {\n // set the margin\n var margin = [7, 10,7,0];\n if (states.left || states.middle || states.right) {\n margin = [7, 3,7,0];\n }\n var decorator = \"toolbar-button\";\n if (states.hovered || states.pressed || states.focused ||states.checked) {\n decorator += \"-hovered\";\n }\n decorator += \"-right\";\n\n\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-down\"],\n decorator: decorator,\n margin: margin\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TABVIEW\n ---------------------------------------------------------------------------\n */\n\n \"tabview\": {},\n\n \"tabview/bar\":\n {\n alias: \"slidebar\",\n\n style: function(states) {\n var marginTop = 0;\n var marginRight = 0;\n var marginBottom = 0;\n var marginLeft = 0;\n\n if (states.barTop) {\n marginBottom -= 1;\n }\n else if (states.barBottom) {\n marginTop -= 1;\n }\n else if (states.barRight) {\n marginLeft -= 1;\n }\n else {\n marginRight -= 1;\n }\n\n return {\n marginBottom: marginBottom,\n marginTop: marginTop,\n marginLeft: marginLeft,\n marginRight: marginRight\n };\n }\n },\n\n\n \"tabview/bar/button-forward\":\n {\n include: \"slidebar/button-forward\",\n alias: \"slidebar/button-forward\",\n\n style: function(states) {\n if (states.barTop) {\n return {\n marginTop: 4,\n marginBottom: 2,\n decorator: null\n };\n }\n else if (states.barBottom) {\n return {\n marginTop: 2,\n marginBottom: 4,\n decorator: null\n };\n }\n else if (states.barLeft) {\n return {\n marginLeft: 4,\n marginRight: 2,\n decorator: null\n };\n }\n return {\n marginLeft: 2,\n marginRight: 4,\n decorator: null\n };\n }\n },\n\n \"tabview/bar/button-backward\":\n {\n include: \"slidebar/button-backward\",\n alias: \"slidebar/button-backward\",\n\n style: function(states) {\n if (states.barTop) {\n return {\n marginTop: 4,\n marginBottom: 2,\n decorator: null\n };\n }\n else if (states.barBottom) {\n return {\n marginTop: 2,\n marginBottom: 4,\n decorator: null\n };\n }\n else if (states.barLeft) {\n return {\n marginLeft: 4,\n marginRight: 2,\n decorator: null\n };\n }\n return {\n marginLeft: 2,\n marginRight: 4,\n decorator: null\n };\n }\n },\n\n \"tabview/pane\":\n {\n style: function(states) {\n let marginTop =0;\n let marginBottom = 0;\n let marginLeft = 0;\n let marginRight = 0;\n let decorator;\n\n if (states.barTop) {\n marginTop = -1;\n decorator = \"main-top\";\n }\n else if (states.barBottom) {\n marginBottom = -1;\n decorator = \"main-bottom\";\n }\n else if (states.barLeft) {\n marginLeft = -1;\n decorator = \"main-left\";\n }\n else {\n marginRight = -1;\n decorator = \"main-right\";\n }\n return {\n marginLeft: marginLeft,\n marginRight: marginRight,\n marginTop: marginTop,\n marginBottom: marginBottom,\n padding: 10,\n decorator: decorator,\n backgroundColor: \"tabview-pane-background\"\n };\n }\n },\n\n \"tabview-page\": \"widget\",\n\n \"tabview-page/button\":\n {\n style: function(states) {\n var decorator;\n var padding;\n // default padding\n if (states.barTop || states.barBottom) {\n padding = [8, 16, 8, 13];\n }\n else if (states.barRight) {\n padding = [8, 8, 8, 12];\n }\n else if (states.barLeft) {\n padding = [8, 8, 8, 8];\n }\n\n // decorator\n if (states.checked) {\n if (states.barTop) {\n decorator = \"tabview-page-button-top\";\n padding[2] -= 2;\n }\n else if (states.barBottom) {\n decorator = \"tabview-page-button-bottom\";\n padding[0] -= 2;\n }\n else if (states.barRight) {\n decorator = \"tabview-page-button-right\";\n padding[3] -= 2;\n }\n else if (states.barLeft) {\n decorator = \"tabview-page-button-left\";\n padding[1] -= 2;\n }\n }\n\n return {\n zIndex: states.checked ? 10 : 5,\n decorator: decorator,\n textColor: states.disabled ? \"text-disabled\" : \"text\",\n font: states.checked ? \"bold\": undefined,\n padding: padding,\n cursor: \"pointer\"\n };\n }\n },\n\n \"tabview-page/button/label\":\n {\n alias: \"label\",\n\n style: function(states) {\n return {padding: [0, 1, 0, 1]};\n }\n },\n\n \"tabview-page/button/icon\": \"image\",\n \"tabview-page/button/close-button\":\n {\n alias: \"atom\",\n style: function(states) {\n return {\n cursor: states.disabled ? undefined : \"pointer\",\n icon: osparc.theme.common.Image.URLS[\"tabview-close\"]\n };\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n COLOR POPUP\n ---------------------------------------------------------------------------\n */\n\n\n \"colorpopup\":\n {\n alias: \"popup\",\n include: \"popup\",\n\n style: function(states) {\n return {padding: 5};\n }\n },\n\n \"colorpopup/field\":\n {\n style: function(states) {\n return {\n margin: 2,\n width: 14,\n height: 14,\n backgroundColor: \"background-main\",\n decorator: \"main-dark\"\n };\n }\n },\n\n \"colorpopup/selector-button\": \"button\",\n \"colorpopup/auto-button\": \"button\",\n\n \"colorpopup/preview-pane\": \"groupbox\",\n\n \"colorpopup/current-preview\":\n {\n style: function(state) {\n return {\n height: 20,\n padding: 4,\n marginLeft: 4,\n decorator: \"main-dark\",\n allowGrowX: true\n };\n }\n },\n\n \"colorpopup/selected-preview\":\n {\n style: function(state) {\n return {\n height: 20,\n padding: 4,\n marginRight: 4,\n decorator: \"main-dark\",\n allowGrowX: true\n };\n }\n },\n\n \"colorpopup/colorselector-okbutton\":\n {\n alias: \"button\",\n include: \"button\",\n\n style: function(states) {\n return {icon: \"icon/16/actions/dialog-ok.png\"};\n }\n },\n\n \"colorpopup/colorselector-cancelbutton\":\n {\n alias: \"button\",\n include: \"button\",\n\n style: function(states) {\n return {icon: \"icon/16/actions/dialog-cancel.png\"};\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n COLOR SELECTOR\n ---------------------------------------------------------------------------\n */\n\n \"colorselector\": \"widget\",\n \"colorselector/control-bar\": \"widget\",\n \"colorselector/visual-pane\": \"groupbox\",\n \"colorselector/control-pane\": \"widget\",\n \"colorselector/preset-grid\": \"widget\",\n\n \"colorselector/colorbucket\":\n {\n style: function(states) {\n return {\n decorator: \"main-dark\",\n width: 16,\n height: 16\n };\n }\n },\n\n \"colorselector/preset-field-set\": \"groupbox\",\n \"colorselector/input-field-set\": {\n include: \"groupbox\",\n alias: \"groupbox\",\n style: function() {\n return {paddingTop: 12};\n }\n },\n\n \"colorselector/preview-field-set\": {\n include: \"groupbox\",\n alias: \"groupbox\",\n style: function() {\n return {paddingTop: 12};\n }\n },\n\n \"colorselector/hex-field-composite\": \"widget\",\n \"colorselector/hex-field\": \"textfield\",\n\n \"colorselector/rgb-spinner-composite\": \"widget\",\n \"colorselector/rgb-spinner-red\": \"spinner\",\n \"colorselector/rgb-spinner-green\": \"spinner\",\n \"colorselector/rgb-spinner-blue\": \"spinner\",\n\n \"colorselector/hsb-spinner-composite\": \"widget\",\n \"colorselector/hsb-spinner-hue\": \"spinner\",\n \"colorselector/hsb-spinner-saturation\": \"spinner\",\n \"colorselector/hsb-spinner-brightness\": \"spinner\",\n\n \"colorselector/preview-content-old\":\n {\n style: function(states) {\n return {\n decorator: \"main-dark\",\n width: 50,\n height: 25\n };\n }\n },\n\n \"colorselector/preview-content-new\":\n {\n style: function(states) {\n return {\n decorator: \"main-dark\",\n backgroundColor: \"white\",\n width: 50,\n height: 25\n };\n }\n },\n\n \"colorselector/hue-saturation-field\":\n {\n style: function(states) {\n return {\n decorator: \"main-dark\",\n margin: 5\n };\n }\n },\n\n \"colorselector/brightness-field\":\n {\n style: function(states) {\n return {\n decorator: \"main-dark\",\n margin: [5, 7]\n };\n }\n },\n\n \"colorselector/hue-saturation-pane\": \"widget\",\n \"colorselector/hue-saturation-handle\": \"widget\",\n \"colorselector/brightness-pane\": \"widget\",\n \"colorselector/brightness-handle\": \"widget\",\n\n\n\n /*\n ---------------------------------------------------------------------------\n APPLICATION\n ---------------------------------------------------------------------------\n */\n\n \"app-header\":\n {\n style: function(states) {\n return {\n font: \"headline\",\n textColor: \"text-selected\",\n backgroundColor: \"background-selected-dark\",\n padding: [8, 12]\n };\n }\n },\n\n \"app-header-label\":\n {\n style: function(states) {\n return {paddingTop: 5};\n }\n },\n\n\n \"app-splitpane\": {\n alias: \"splitpane\",\n style: function(states) {\n return {\n padding: [0, 10, 10, 10],\n backgroundColor: \"contrasted-background\"\n };\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Tobias Oetiker (oetiker)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.Appearance\", {\n extend: osparc.theme.common.Appearance,\n\n appearances: {\n \"strong-ui\": {\n style: () => {\n return {\n textColor: \"white\",\n backgroundColor: \"product-color\",\n };\n }\n },\n\n \"dragdrop-no-cursor\": {\n style: () => {\n return {\n source: \"\",\n }\n }\n },\n\n \"dragdrop-own-cursor\": {\n style: states => {\n let icon = \"\";\n if (states.move) {\n icon = \"@FontAwesome5Solid/check/14\";\n } else {\n icon = \"@FontAwesome5Solid/times/14\";\n }\n return {\n source: icon,\n position: \"right-top\",\n offset: [12, 0, 0, 12],\n }\n }\n },\n\n \"material-button-invalid\": {},\n \"pb-list\": {\n include: \"list\",\n alias: \"list\",\n style: function(states) {\n return {\n decorator: null,\n padding: 0\n };\n }\n },\n\n \"pb-listitem\": {\n alias: \"material-button\",\n include: \"material-button\",\n style: function(states) {\n const style = {\n decorator: \"pb-listitem\",\n padding: 5,\n backgroundColor: \"pb-study\",\n opacity: 1\n };\n if (states.hovered) {\n style.opacity = 0.5;\n }\n if (states.selected || states.checked) {\n style.opacity = 1;\n style.backgroundColor = \"success\";\n }\n return style;\n }\n },\n\n \"pb-new\": {\n include: \"pb-listitem\",\n style: function(states) {\n const style = {\n backgroundColor: \"pb-new\"\n };\n if (states.focused || states.selected || states.checked) {\n style.backgroundColor = \"default-button-active-background\";\n }\n if (states.locked || states.disabled) {\n style.cursor = \"not-allowed\";\n style.backgroundColor = \"pb-locked\";\n }\n return style;\n }\n },\n\n \"pb-study\": {\n include: \"pb-listitem\",\n style: function(states) {\n const style = {\n backgroundColor: \"pb-study\"\n };\n if (states.focused || states.selected || states.checked) {\n style.backgroundColor = \"success\";\n }\n return style;\n }\n },\n\n \"pb-template\": {\n include: \"pb-listitem\",\n style: function(states) {\n const style = {\n backgroundColor: \"pb-template\"\n };\n return style;\n }\n },\n\n \"pb-dynamic\": {\n include: \"pb-listitem\",\n style: function(states) {\n const style = {\n backgroundColor: \"pb-dynamic\"\n };\n return style;\n }\n },\n\n \"pb-computational\": {\n include: \"pb-listitem\",\n style: function(states) {\n const style = {\n backgroundColor: \"pb-computational\"\n };\n return style;\n }\n },\n\n \"widget/selected-file-layout/download-button/icon\": {},\n \"widget/selected-file-layout/delete-button/icon\": {},\n \"pb-dynamic/menu-button/icon\": {},\n \"pb-template/menu-button/icon\": {},\n \"pb-study/menu-button/icon\": {},\n \"pb-computational/menu-button/icon\": {\n alias: \"image\"\n },\n\n \"pb-study/lock-status\": {\n style: function() {\n return {\n decorator: \"pb-locked\",\n cursor: \"disabled\"\n };\n }\n },\n\n \"pb-template/lock-status\": {\n style: function() {\n return {\n decorator: \"pb-locked\",\n cursor: \"disabled\"\n };\n }\n },\n\n \"pb-computational/lock-status\": {\n style: function() {\n return {\n decorator: \"pb-locked\",\n cursor: \"disabled\"\n };\n }\n },\n\n \"pb-dynamic/lock-status\": {\n style: function() {\n return {\n decorator: \"pb-locked\",\n cursor: \"disabled\"\n };\n }\n },\n\n \"selectable\": {\n include: \"material-button\",\n style: function(states) {\n const style = {\n decorator: \"no-radius-button\",\n padding: 5,\n backgroundColor: \"transparent\"\n };\n if (states.hovered) {\n style.backgroundColor = \"background-main-2\";\n }\n if (states.selected || states.checked) {\n style.backgroundColor = \"background-selected\";\n }\n return style;\n }\n },\n\n \"none\": {},\n\n \"floating-menu\": {\n style: function() {\n return {\n backgroundColor: \"background-main\",\n padding: 4,\n decorator: \"border-simple\"\n }\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n WINDOW-SMALL-CAP CHOOSER\n ---------------------------------------------------------------------------\n */\n \"node-ui-cap\": {\n include: \"window\", // get all the settings from window\n alias: \"window\", // redirect kids to window/kid\n style: function(states) {\n return {\n backgroundColor: states.selected ? \"node-selected-background\" : \"node-background\",\n textColor: states.selected ? \"text-selected\" : \"text\",\n decorator: states.maximized ? \"node-ui-cap-maximized\" : \"node-ui-cap\"\n };\n }\n },\n\n \"node-ui-cap/captionbar\": {\n include: \"window/captionbar\", // load defaults from window captionbar\n alias: \"window/captionbar\", // redirect kids\n style: function(states) {\n return {\n padding: [0, 3, 0, 3],\n minHeight: 20,\n backgroundColor: \"transparent\",\n decorator: \"workbench-small-cap-captionbar\"\n };\n }\n },\n\n \"node-ui-cap/title\": {\n include: \"window/title\",\n style: function(states) {\n return {\n marginLeft: 2,\n font: \"text-12\",\n textColor: states.selected ? \"text-selected\" : \"text\"// Dark theme text color\n };\n }\n },\n\n \"node-ui-cap/minimize-button\": {\n alias: \"window/minimize-button\",\n include: \"window/minimize-button\",\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-minimize\"]+\"/14\"\n };\n }\n },\n\n \"node-ui-cap/restore-button\": {\n alias: \"window/restore-button\",\n include: \"window/restore-button\",\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-restore\"]+\"/14\"\n };\n }\n },\n\n \"node-ui-cap/maximize-button\": {\n alias: \"window/maximize-button\",\n include: \"window/maximize-button\",\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-maximize\"]+\"/14\"\n };\n }\n },\n\n \"node-ui-cap/close-button\": {\n alias: \"window/close-button\",\n include: \"window/close-button\",\n style: function(states) {\n return {\n icon: osparc.theme.common.Image.URLS[\"window-close\"]+\"/14\"\n };\n }\n },\n\n \"node-ui-cap/progress\": \"progressbar\",\n\n \"service-window\": {\n include: \"window\",\n alias: \"window\",\n style: state => ({\n decorator: state.maximized ? \"service-window-maximized\" : \"service-window\"\n })\n },\n \"service-window/captionbar\": {\n include: \"window/captionbar\",\n style: state => ({\n backgroundColor: \"transparent\",\n decorator: \"workbench-small-cap-captionbar\"\n })\n },\n \"info-service-window\": {\n include: \"service-window\",\n alias: \"service-window\",\n style: state => ({\n maxHeight: state.maximized ? null : 500\n })\n },\n\n \"dialog-window-content\": {\n style: () => ({\n backgroundColor: \"transparent_overlay\"\n })\n },\n /*\n ---------------------------------------------------------------------------\n PanelView\n ---------------------------------------------------------------------------\n */\n \"panelview\": {\n style: state => ({\n decorator: \"panelview\"\n })\n },\n \"panelview/title\": {\n style: state => ({\n font: \"title-14\",\n cursor: \"pointer\"\n })\n },\n \"panelview/caret\": {\n style: state => ({\n cursor: \"pointer\"\n })\n },\n \"panelview-titlebar\": {\n style: state => ({\n height: 24,\n padding: [0, 5],\n alignY: \"middle\"\n })\n },\n \"panelview-content\": {\n style: state => ({\n decorator: \"panelview-content\",\n margin: [0, 4, 4, 4]\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Toolbar\n ---------------------------------------------------------------------------\n */\n \"toolbar-textfield\": {\n include: \"form-input\",\n style: state => ({\n backgroundColor: \"transparent\",\n marginTop: 8\n })\n },\n \"toolbar-label\": {\n style: state => ({\n marginTop: 11,\n marginRight: 3\n })\n },\n \"textfilter\": {},\n \"textfilter/textfield\": \"toolbar-textfield\",\n\n \"autocompletefilter\": {},\n \"autocompletefilter/autocompletefield/textfield\": {\n include: \"toolbar-textfield\",\n style: state => ({\n paddingRight: 15\n })\n },\n \"autocompletefilter/autocompletefield/button\": {},\n\n \"toolbar-selectbox\": {\n include: \"textfield\",\n alias: \"selectbox\",\n style: () => ({\n margin: [7, 10],\n paddingLeft: 5\n })\n },\n \"toolbar-selectbox/arrow\": {\n include: \"selectbox/arrow\",\n style: style => ({\n cursor: style.disabled ? \"auto\" : \"pointer\"\n })\n },\n \"toolbar-selectbox/list\": {\n include: \"selectbox/list\",\n style: () => ({\n padding: 0\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n PROGRESSBAR\n ---------------------------------------------------------------------------\n */\n\n \"progressbar\": {\n style: function(states) {\n return {\n decorator: \"progressbar\",\n padding: 1,\n backgroundColor: \"progressbar-runner\",\n margin: [7, 10],\n width: 200,\n height: 20\n };\n }\n },\n\n \"progressbar/progress\": {\n style: function(states) {\n return {\n backgroundColor: states.disabled ? \"progressbar-disabled\" : \"progressbar\"\n };\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n Splitpane\n ---------------------------------------------------------------------------\n */\n \"splitpane/splitter\": {\n style: state => ({\n visible: false\n })\n },\n\n \"splitpane/collapsible-view-left/collapse-button\": {},\n \"splitpane/collapsible-view-right/collapse-button\": {},\n\n /*\n ---------------------------------------------------------------------------\n NodePorts\n ---------------------------------------------------------------------------\n */\n \"node-ports\": {\n style: state => ({\n backgroundColor: \"background-main-2\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n ServiceBrowser\n ---------------------------------------------------------------------------\n */\n \"service-browser\": {\n style: state => ({\n padding: 8,\n decorator: \"service-browser\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Input Fields\n ---------------------------------------------------------------------------\n */\n\n \"form-input\": {\n style: function(states) {\n const style = {\n decorator: \"form-input\",\n padding: 5,\n backgroundColor: \"input_background\"\n };\n if (states.hovered) {\n style.backgroundColor = \"info\";\n }\n if (states.focused) {\n style.decorator = \"form-input-focused\";\n }\n if (states.disabled) {\n style.decorator = \"form-input-disabled\";\n style.backgroundColor = \"default-button-disabled-background\";\n }\n return style;\n }\n },\n\n \"form-password\": {\n include: \"form-input\",\n style: function(states) {\n const style = {\n decorator: \"form-input\",\n padding: 5,\n backgroundColor: \"input_background\"\n };\n if (states.focused) {\n style.decorator = \"form-input-focused\";\n }\n return style;\n }\n },\n\n \"material-textfield\": {\n style: function(states) {\n var textColor;\n\n if (states.disabled) {\n textColor = \"text-disabled\";\n } else if (states.showingPlaceholder) {\n textColor = \"text-placeholder\";\n } else {\n textColor = undefined;\n }\n\n var decorator;\n var padding;\n decorator = \"form-input\";\n padding = [3, 5, 4, 5];\n if (states.readonly) {\n decorator += \"-disabled\";\n padding = [3, 5, 5, 5];\n } else if (states.disabled) {\n decorator += \"-disabled\";\n } else if (states.focused) {\n decorator += \"-focused\";\n if (states.invalid) {\n decorator += \"-invalid\";\n }\n padding = [3, 5, 4, 5];\n } else if (states.invalid) {\n decorator += \"-invalid\";\n }\n\n return {\n decorator: decorator,\n padding: padding,\n textColor: textColor,\n backgroundColor: states.disabled ? \"input_background_disable\" : \"input_background\"\n };\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n Buttons\n ---------------------------------------------------------------------------\n */\n \"widget/reset-button\": {},\n\n \"form-button\": {\n include: \"strong-ui\",\n style: function(states) {\n const style = {\n decorator: \"form-button\",\n cursor: \"pointer\",\n padding: 5,\n };\n if (states.hovered) {\n style.decorator = \"form-button-hovered\";\n style.textColor = \"default-button-text-action\";\n style.backgroundColor = \"default-button-hover-background\";\n }\n if (states.focused) {\n style.decorator = \"form-button-focused\";\n style.backgroundColor = \"default-button-focus-background\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.decorator = \"form-button-disabled\";\n style.textColor = \"default-button-disabled\";\n style.backgroundColor = \"default-button-disabled-background\";\n }\n if (states.checked || states.selected) {\n style.decorator = \"form-button-checked\";\n }\n return style;\n }\n },\n\n \"form-button-outlined\": {\n include: \"form-button\",\n style: function(states) {\n const style = {\n decorator: \"form-button-outlined\",\n cursor: \"pointer\",\n padding: 5,\n textColor: \"default-button-text-outline\",\n backgroundColor: \"default-button-background\"\n };\n if (states.hovered) {\n style.decorator = \"form-button-hovered\";\n style.textColor = \"default-button-text-action\";\n style.backgroundColor = \"default-button-hover-background\";\n }\n if (states.focused || states.active) {\n style.decorator = \"form-button-focused\";\n style.backgroundColor = \"default-button-focus-background\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.decorator = \"form-button-disabled\";\n style.textColor = \"default-button-disabled\";\n style.backgroundColor = \"default-button-disabled-background\";\n }\n if (states.checked || states.selected) {\n style.decorator = \"form-button-checked\";\n }\n return style;\n }\n },\n\n \"fab-button\": {\n include: \"form-button\",\n style: function(states) {\n const style = {\n decorator: \"fab-button\",\n cursor: \"pointer\",\n padding: 5,\n textColor: \"fab_text\",\n backgroundColor: \"fab-background\",\n center: true\n };\n if (states.hovered) {\n style.decorator = \"form-button-hovered\";\n }\n if (states.focused) {\n style.decorator = \"form-button-focused\";\n }\n if (states.active) {\n style.decorator = \"form-button-active\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.decorator = \"form-button-disabled\";\n }\n if (states.checked || states.selected) {\n style.decorator = \"form-button-checked\";\n }\n return style;\n }\n },\n\n \"thumbnail\": {\n include: \"form-button\",\n style: function(states) {\n const style = {\n decorator: \"thumbnail\",\n cursor: \"pointer\",\n padding: 5,\n textColor: \"fab_text\",\n backgroundColor: \"fab-background\",\n center: true\n };\n if (states.hovered) {\n style.decorator = \"form-button-hovered\";\n }\n if (states.focused) {\n style.decorator = \"form-button-focused\";\n }\n if (states.active) {\n style.decorator = \"form-button-active\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.decorator = \"form-button-disabled\";\n }\n if (states.checked || states.selected) {\n style.decorator = \"form-button-checked\";\n }\n return style;\n }\n },\n\n \"form-button-text\": {\n style: function(states) {\n const style = {\n decorator: \"form-button-text\",\n center: true,\n cursor: \"pointer\",\n textColor: \"link\",\n padding: 5,\n alignY: \"middle\",\n alignX: \"center\",\n backgroundColor: \"transparent\"\n };\n if (states.hovered) {\n style.textColor = \"contrasted-text-dark\";\n }\n if (states.focused) {\n style.textColor = \"default-button-focus\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.textColor = \"default-button-disabled\";\n }\n return style;\n }\n },\n\n \"menu-wider\": {\n include: \"menu\",\n style: () => {\n return {\n decorator: \"border-simple\",\n font: \"text-14\",\n padding: 4,\n };\n }\n },\n\n \"menu-button\": {\n alias: \"atom\",\n\n style: states => {\n return {\n decorator: \"rounded\",\n cursor: states.disabled ? \"not-allowed\" : \"pointer\",\n backgroundColor: states.selected || states.hovered ? \"pb-new\" : undefined,\n textColor: \"text\",\n padding: [4, 8]\n }\n }\n },\n\n \"link-button\": {\n include: \"material-button\",\n style: state => ({\n backgroundColor: \"transparent\",\n textColor: state.hovered ? \"text\" : \"text-darker\"\n })\n },\n\n \"xl-button\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 50,\n center: true\n })\n },\n\n \"xl-button/label\": {\n include: \"material-button/label\",\n style: state => ({\n font: \"title-16\"\n })\n },\n\n \"lg-button\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 35,\n center: true\n })\n },\n\n \"lg-button/label\": {\n include: \"material-button/label\",\n style: state => ({\n font: \"text-16\"\n })\n },\n\n \"md-button\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 25,\n center: true\n })\n },\n\n \"md-button/label\": {\n include: \"material-button/label\",\n style: state => ({\n font: \"text-14\"\n })\n },\n\n \"toolbar-button\": {\n alias: \"atom\",\n style: function(states) {\n // set the margin\n let textColor = \"default-button-text-outline\";\n let decorator = \"form-button-outlined\";\n let backgroundColor = \"default-button-background\";\n let cursor = \"pointer\";\n let margin = [7, 0, 7, 10];\n if (states.left || states.middle || states.right) {\n margin = [7, 0, 7, 3];\n }\n if (states.hovered) {\n textColor = \"default-button-text-action\";\n decorator = \"form-button-hovered\";\n backgroundColor = \"default-button-hover-background\";\n }\n if (states.pressed) {\n textColor = \"default-button-text-action\";\n decorator = \"form-button-active\";\n backgroundColor = \"default-button-active-background\";\n }\n if (states.focused) {\n textColor = \"default-button-focus\";\n decorator = \"form-button-focused\";\n backgroundColor = \"default-button-focus-background\";\n }\n if (states.selected || states.checked) {\n textColor = \"default-button-disabled\";\n cursor = \"default\";\n decorator = \"form-button-checked\";\n backgroundColor = \"default-button-disabled-background\";\n }\n\n decorator;\n\n return {\n textColor: textColor,\n cursor: cursor,\n decorator: decorator,\n margin: margin,\n padding: 5,\n backgroundColor: backgroundColor\n };\n }\n },\n\n \"toolbar-splitbutton/button\": {\n alias: \"toolbar-button\",\n include: \"toolbar-button\",\n style: function(states) {\n // set the margin\n var margin = [7, 0, 7, 10];\n if (states.left || states.middle || states.right) {\n margin = [7, 0, 7, 3];\n }\n var decorator = \"form-button-outlined\";\n if (states.hovered || states.pressed || states.focused || states.checked) {\n decorator += \"-hovered\";\n }\n decorator += \"-left\";\n\n return {\n decorator: decorator,\n margin: margin\n };\n }\n },\n\n \"toolbar-splitbutton/arrow\": {\n alias: \"image\",\n include: \"toolbar-button\",\n style: function(states) {\n // set the margin\n var margin = [7, 10, 7, 0];\n if (states.left || states.middle || states.right) {\n margin = [7, 3, 7, 0];\n }\n let decorator = \"form-button-outlined\";\n if (states.hovered || states.pressed || states.focused) {\n decorator += \"-hovered\";\n }\n\n if (states.checked || states.selected) {\n decorator += \"-checked\";\n }\n\n decorator += \"-right\";\n\n return {\n icon: osparc.theme.common.Image.URLS[\"arrow-down\"],\n decorator: decorator,\n margin: margin\n };\n }\n },\n\n \"toolbar-xl-button\": {\n include: \"toolbar-button\",\n alias: \"toolbar-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 50,\n center: true\n })\n },\n\n \"toolbar-xl-button/label\": {\n include: \"toolbar-button/label\",\n style: state => ({\n font: \"title-16\"\n })\n },\n\n \"toolbar-lg-button\": {\n include: \"toolbar-button\",\n alias: \"toolbar-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 35,\n center: true\n })\n },\n\n \"toolbar-lg-button/label\": {\n include: \"toolbar-button/label\",\n style: state => ({\n font: \"text-16\"\n })\n },\n\n \"toolbar-md-button\": {\n include: \"toolbar-button\",\n alias: \"toolbar-button\",\n style: state => ({\n allowStretchY: false,\n allowStretchX: false,\n minHeight: 25,\n center: true\n })\n },\n\n \"toolbar-md-button/label\": {\n include: \"toolbar-button/label\",\n style: state => ({\n font: \"text-14\"\n })\n },\n\n \"no-shadow-button\": {\n alias: \"atom\",\n style: function(states) {\n var decorator = \"toolbar-button\";\n if (states.hovered || states.pressed || states.checked) {\n decorator += \"-hovered\";\n }\n return {\n cursor: states.disabled ? undefined : \"pointer\",\n decorator: decorator,\n textColor: \"material-button-text\",\n padding: [3, 5]\n };\n }\n },\n\n \"strong-button\": {\n include: \"form-button\"\n },\n\n \"warning-button\": {\n include: \"form-button\",\n style: state => ({\n decorator: state.hovered || state.focused ? \"form-button-warning-hover\" : \"form-button-warning\",\n backgroundColor: state.hovered || state.focused ? \"default-button-hover-background\" : \"warning\",\n textColor: \"black\",\n })\n },\n\n \"danger-button\": {\n include: \"form-button\",\n style: state => ({\n decorator: state.hovered || state.focused ? \"form-button-danger-hover\" : \"form-button-danger\",\n backgroundColor: state.hovered || state.focused ? \"default-button-hover-background\" : \"error\",\n textColor: \"black\",\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n TabButtons\n ---------------------------------------------------------------------------\n */\n\n \"tab-button\": {\n include: \"form-button\",\n style: function(states) {\n const style = {\n decorator: \"tab-button\",\n cursor: \"pointer\",\n padding: 5,\n textColor: \"white\",\n backgroundColor: \"default-button-background\"\n };\n if (states.hovered) {\n style.decorator = \"form-button-hovered\";\n }\n if (states.focused) {\n style.decorator = \"form-button-focused\";\n }\n if (states.active) {\n style.decorator = \"tab-button-selected\";\n }\n if (states.disabled) {\n style.cursor = \"not-allowed\";\n style.decorator = \"form-button-disabled\";\n style.textColor = \"default-button-disabled\";\n }\n if (states.checked || states.selected) {\n style.decorator = \"tab-button-selected\";\n }\n return style;\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n FlashMessage\n ---------------------------------------------------------------------------\n */\n \"flash\": {\n style: () => ({\n padding: 12,\n backgroundColor: \"background-main-3\",\n decorator: \"flash\"\n })\n },\n \"flash/badge\": {\n style: () => ({\n decorator: \"flash-badge\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n GroupBox\n ---------------------------------------------------------------------------\n */\n \"settings-groupbox\": \"groupbox\",\n \"settings-groupbox/frame\": {\n include: \"groupbox/frame\",\n style: state => ({\n decorator: \"no-border\"\n })\n },\n \"settings-groupbox/legend\": {\n include: \"groupbox/legend\",\n style: state => ({\n font: \"title-16\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Hints\n ---------------------------------------------------------------------------\n */\n \"hint\": {\n style: state => ({\n backgroundColor: \"hint-background\",\n decorator: \"hint\",\n padding: 5\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Chip\n ---------------------------------------------------------------------------\n */\n \"chip\": {\n include: \"atom\",\n alias: \"atom\",\n style: state => ({\n decorator: \"chip\",\n backgroundColor: \"background-main-1\",\n padding: [3, 5]\n })\n },\n\n \"chip/label\": {\n include: \"atom/label\",\n style: state => ({\n font: \"text-10\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Dashboard\n ---------------------------------------------------------------------------\n */\n \"dashboard\": {\n include: \"tabview\",\n alias: \"tabview\"\n },\n\n \"dashboard/pane\": {\n style: state => ({\n padding: [0, 0, 0, 15]\n })\n },\n\n \"dashboard/bar/content\": {\n style: state => ({\n width: 120,\n paddingTop: 15\n })\n },\n\n \"dashboard-page\": {\n include: \"tabview-page\",\n alias: \"tabview-page\"\n },\n\n \"dashboard-page/button\": {\n include: \"tabview-page/button\",\n alias: \"tabview-page/button\",\n style: state => ({\n font: state.checked ? \"title-16\" : \"text-16\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n EditLabel\n ---------------------------------------------------------------------------\n */\n \"editlabel-label\": {\n include: \"label\",\n style: state => ({\n decorator: state.hovered && state.editable ? \"border-editable\" : \"rounded\",\n marginLeft: state.hovered && state.editable ? 0 : 1,\n padding: 5,\n cursor: state.editable ? \"text\" : \"auto\",\n backgroundColor: \"input_background\"\n })\n },\n\n \"editlabel-input\": {\n include: \"textfield\",\n style: () => ({\n padding: 5,\n minWidth: 120,\n backgroundColor: \"transparent\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Tooltip\n ---------------------------------------------------------------------------\n */\n \"tooltip\": {\n style: state => ({\n decorator: \"tooltip\",\n padding: [5, 10],\n // showTimeout is themeable so it can be tuned\n // it was defaulted to 700 which was too short\n showTimeout: 2000,\n hideTimeout: 6000,\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Tag\n ---------------------------------------------------------------------------\n */\n \"tag\": {\n include: \"atom/label\",\n style: state => ({\n decorator: \"tag\",\n padding: [1, 5]\n })\n },\n \"tagitem\": {\n style: () => ({\n decorator: \"tagitem\",\n padding: 5\n })\n },\n \"tagitem/colorbutton\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: () => ({\n decorator: \"tagitem-colorbutton\"\n })\n },\n \"tagbutton\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: () => ({\n decorator: \"tagbutton\"\n })\n },\n\n \"margined-layout\": {\n style: () => ({\n margin: [7, 10]\n })\n },\n\n \"chip-button\": {\n include: \"material-button\",\n style: () => ({\n iconPosition: \"right\",\n textColor: \"text\",\n alignY: \"middle\",\n paddingRight: 6,\n paddingLeft: 6,\n maxHeight: 26,\n maxWidth: 260,\n decorator: \"chip-button\"\n })\n },\n\n \"filter-toggle-button\": {\n include: \"material-button\",\n alias: \"material-button\",\n style: states => ({\n font: \"text-13\",\n textColor: \"text\",\n padding: 6,\n gap: 8,\n decorator: (states.hovered || states.pressed || states.checked) ? \"filter-toggle-button-selected\" : \"filter-toggle-button\"\n })\n },\n\n \"filter-toggle-button/label\": {\n include: \"material-button/label\",\n style: () => ({\n textColor: \"text\"\n })\n },\n\n \"filter-toggle-button/icon\": {\n include: \"material-button/icon\",\n style: () => ({\n width: 25,\n scale: true\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n virtual overrides\n ---------------------------------------------------------------------------\n */\n\n \"virtual-tree\": {\n include: \"tree\",\n alias: \"tree\",\n style: function(states) {\n return {\n itemHeight: 30\n };\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n jsonforms\n ---------------------------------------------------------------------------\n */\n \"form-array-container\": {\n style: () => ({\n padding: 10,\n decorator: \"border-editable\"\n })\n },\n\n /*\n ---------------------------------------------------------------------------\n Appmotion\n ---------------------------------------------------------------------------\n */\n \"appmotion-button\": {\n include: \"lg-button\",\n alias: \"lg-button\",\n style: state => {\n const style = {\n padding: [10, 25]\n };\n if (state.disabled) {\n style.backgroundColor = \"default-button-disabled-background\";\n }\n return style;\n }\n },\n\n \"appmotion-button-action\": {\n include: \"appmotion-button\",\n alias: \"appmotion-button\",\n style: state => {\n const style = {\n backgroundColor: \"strong-main\"\n };\n if (state.disabled) {\n style.backgroundColor = \"default-button-disabled-background\";\n }\n return style;\n }\n },\n\n \"appmotion-button/label\": {\n include: \"lg-button/label\",\n style: state => ({\n font: \"title-16\"\n })\n },\n\n \"appmotion-buy-credits-input\": {\n include: \"textfield\",\n style: state => ({\n backgroundColor: state.disabled ? \"transparent\" : \"background-main-1\",\n padding: [10, 15],\n font: \"text-18\",\n decorator: \"appmotion-buy-credits-input\"\n })\n },\n\n \"appmotion-buy-credits-select\": {\n include: \"selectbox\",\n alias: \"selectbox\",\n style: state => ({\n backgroundColor: state.disabled ? \"transparent\" : \"background-main-1\",\n padding: [10, 15],\n font: \"text-14\",\n decorator: \"appmotion-buy-credits-input\"\n })\n },\n\n \"appmotion-buy-credits-select/list\": {\n include: \"selectbox/list\",\n alias: \"selectbox/list\",\n style: state => ({\n backgroundColor: \"background-main-1\"\n })\n },\n\n \"appmotion-buy-credits-spinner\": {\n include: \"spinner\",\n alias: \"spinner\"\n },\n\n \"appmotion-buy-credits-spinner/textfield\": {\n include: \"appmotion-buy-credits-input\",\n alias: \"appmotion-buy-credits-input\",\n style: state => ({\n font: \"text-14\"\n })\n },\n\n \"appmotion-buy-credits-checkbox\": {\n include: \"checkbox\",\n alias: \"checkbox\",\n style: state => ({\n icon: state.checked ? \"@MaterialIcons/check_box/20\" : \"@MaterialIcons/check_box_outline_blank/20\"\n })\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Martin Wittemann (martinwittemann)\n * Sebastian Werner (wpbasti)\n * Jonathan Weiß (jonathan_rass)\n\n************************************************************************ */\n\n/**\n * Basically a text fields which allows a selection from a list of\n * preconfigured options. Allows custom user input. Public API is value\n * oriented.\n *\n * To work with selections without custom input the ideal candidates are\n * the {@link SelectBox} or the {@link RadioGroup}.\n *\n * @childControl textfield {qx.ui.form.TextField} textfield component of the combobox\n * @childControl button {qx.ui.form.Button} button to open the list popup\n * @childControl list {qx.ui.form.List} list inside the popup\n */\nqx.Class.define(\"qx.ui.form.ComboBox\",\n{\n extend : qx.ui.form.AbstractSelectBox,\n implement : [qx.ui.form.IStringForm],\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function()\n {\n this.base(arguments);\n\n var textField = this._createChildControl(\"textfield\");\n this._createChildControl(\"button\");\n\n this.addListener(\"tap\", this._onTap);\n\n // forward the focusin and focusout events to the textfield. The textfield\n // is not focusable so the events need to be forwarded manually.\n this.addListener(\"focusin\", function(e) {\n textField.fireNonBubblingEvent(\"focusin\", qx.event.type.Focus);\n }, this);\n\n this.addListener(\"focusout\", function(e) {\n textField.fireNonBubblingEvent(\"focusout\", qx.event.type.Focus);\n }, this);\n },\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"combobox\"\n },\n\n\n /**\n * String value which will be shown as a hint if the field is all of:\n * unset, unfocused and enabled. Set to null to not show a placeholder\n * text.\n */\n placeholder :\n {\n check : \"String\",\n nullable : true,\n apply : \"_applyPlaceholder\"\n }\n },\n\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events :\n {\n /** Whenever the value is changed this event is fired\n *\n * Event data: The new text value of the field.\n */\n \"changeValue\" : \"qx.event.type.Data\"\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __preSelectedItem : null,\n __onInputId : null,\n\n\n // property apply\n _applyPlaceholder : function(value, old) {\n this.getChildControl(\"textfield\").setPlaceholder(value);\n },\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"textfield\":\n control = new qx.ui.form.TextField();\n control.setFocusable(false);\n control.addState(\"inner\");\n control.addListener(\"changeValue\", this._onTextFieldChangeValue, this);\n control.addListener(\"blur\", this.close, this);\n this._add(control, {flex: 1});\n break;\n\n case \"button\":\n control = new qx.ui.form.Button();\n control.setFocusable(false);\n control.setKeepActive(true);\n control.addState(\"inner\");\n control.addListener(\"execute\", this.toggle, this);\n this._add(control);\n break;\n\n case \"list\":\n // Get the list from the AbstractSelectBox\n control = this.base(arguments, id);\n\n // Change selection mode\n control.setSelectionMode(\"single\");\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates : {\n focused : true,\n invalid : true\n },\n\n\n // overridden\n tabFocus : function()\n {\n var field = this.getChildControl(\"textfield\");\n\n field.getFocusElement().focus();\n field.selectAllText();\n },\n\n\n // overridden\n focus : function()\n {\n this.base(arguments);\n this.getChildControl(\"textfield\").getFocusElement().focus();\n },\n\n\n // interface implementation\n setValue : function(value)\n {\n var textfield = this.getChildControl(\"textfield\");\n if (textfield.getValue() == value) {\n return;\n }\n\n // Apply to text field\n textfield.setValue(value);\n },\n\n\n // interface implementation\n getValue : function() {\n return this.getChildControl(\"textfield\").getValue();\n },\n\n\n // interface implementation\n resetValue : function() {\n this.getChildControl(\"textfield\").setValue(null);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT LISTENERS\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _onKeyPress : function(e)\n {\n var popup = this.getChildControl(\"popup\");\n var iden = e.getKeyIdentifier();\n\n if (iden == \"Down\" && e.isAltPressed())\n {\n this.getChildControl(\"button\").addState(\"selected\");\n this.toggle();\n e.stopPropagation();\n }\n else if (iden == \"Enter\")\n {\n if (popup.isVisible())\n {\n this._setPreselectedItem();\n this.resetAllTextSelection();\n this.close();\n e.stop();\n }\n }\n else if (popup.isVisible())\n {\n this.base(arguments, e);\n }\n },\n\n\n /**\n * Toggles the popup's visibility.\n *\n * @param e {qx.event.type.Pointer} Pointer tap event\n */\n _onTap : function(e) {\n this.close();\n },\n\n\n // overridden\n _onListPointerDown : function(e) {\n this._setPreselectedItem();\n },\n\n\n /**\n * Apply pre-selected item\n */\n _setPreselectedItem: function() {\n if (this.__preSelectedItem)\n {\n var label = this.__preSelectedItem.getLabel();\n\n if (this.getFormat()!= null) {\n label = this.getFormat().call(this, this.__preSelectedItem);\n }\n\n // check for translation\n if (label && label.translate) {\n label = label.translate();\n }\n this.setValue(label);\n this.__preSelectedItem = null;\n }\n },\n\n\n // overridden\n _onListChangeSelection : function(e)\n {\n var current = e.getData();\n if (current.length > 0)\n {\n // Ignore quick context (e.g. pointerover)\n // and configure the new value when closing the popup afterwards\n var list = this.getChildControl(\"list\");\n var ctx = list.getSelectionContext();\n if (ctx == \"quick\" || ctx == \"key\" )\n {\n this.__preSelectedItem = current[0];\n }\n else\n {\n var label = current[0].getLabel();\n\n if (this.getFormat()!= null) {\n label = this.getFormat().call(this, current[0]);\n }\n\n // check for translation\n if (label && label.translate) {\n label = label.translate();\n }\n this.setValue(label);\n this.__preSelectedItem = null;\n }\n }\n },\n\n\n // overridden\n _onPopupChangeVisibility : function(e)\n {\n this.base(arguments, e);\n\n // Synchronize the list with the current value on every\n // opening of the popup. This is useful because through\n // the quick selection mode, the list may keep an invalid\n // selection on close or the user may enter text while\n // the combobox is closed and reopen it afterwards.\n var popup = this.getChildControl(\"popup\");\n if (popup.isVisible())\n {\n var list = this.getChildControl(\"list\");\n var value = this.getValue();\n var item = null;\n\n if (value) {\n item = list.findItem(value);\n }\n\n if (item) {\n list.setSelection([item]);\n } else {\n list.resetSelection();\n }\n }\n else\n {\n // When closing the popup text should selected and field should\n // have the focus. Identical to when reaching the field using the TAB key.\n //\n // Only focus if popup was visible before. Fixes [BUG #4453].\n if (e.getOldData() == \"visible\") {\n this.tabFocus();\n }\n }\n\n // In all cases: Remove focused state from button\n this.getChildControl(\"button\").removeState(\"selected\");\n },\n\n\n /**\n * Reacts on value changes of the text field and syncs the\n * value to the combobox.\n *\n * @param e {qx.event.type.Data} Change event\n */\n _onTextFieldChangeValue : function(e)\n {\n var value = e.getData();\n\n var list = this.getChildControl(\"list\");\n if (value != null) {\n // Select item when possible\n var item = list.findItem(value, false);\n if (item) {\n list.setSelection([item]);\n } else {\n list.resetSelection();\n }\n } else {\n list.resetSelection();\n }\n\n // Fire event\n this.fireDataEvent(\"changeValue\", value, e.getOldData());\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TEXTFIELD SELECTION API\n ---------------------------------------------------------------------------\n */\n\n /**\n * Returns the current selection.\n * This method only works if the widget is already created and\n * added to the document.\n *\n * @return {String|null}\n */\n getTextSelection : function() {\n return this.getChildControl(\"textfield\").getTextSelection();\n },\n\n\n /**\n * Returns the current selection length.\n * This method only works if the widget is already created and\n * added to the document.\n *\n * @return {Integer|null}\n */\n getTextSelectionLength : function() {\n return this.getChildControl(\"textfield\").getTextSelectionLength();\n },\n\n\n /**\n * Set the selection to the given start and end (zero-based).\n * If no end value is given the selection will extend to the\n * end of the textfield's content.\n * This method only works if the widget is already created and\n * added to the document.\n *\n * @param start {Integer} start of the selection (zero-based)\n * @param end {Integer} end of the selection\n */\n setTextSelection : function(start, end) {\n this.getChildControl(\"textfield\").setTextSelection(start, end);\n },\n\n\n /**\n * Clears the current selection.\n * This method only works if the widget is already created and\n * added to the document.\n *\n */\n clearTextSelection : function() {\n this.getChildControl(\"textfield\").clearTextSelection();\n },\n\n\n /**\n * Selects the whole content\n *\n */\n selectAllText : function() {\n this.getChildControl(\"textfield\").selectAllText();\n },\n\n\n /**\n * Clear any text selection, then select all text\n *\n */\n resetAllTextSelection: function() {\n this.clearTextSelection();\n this.selectAllText();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.form.ContentSchemaHelper\", {\n type: \"static\",\n\n statics: {\n __getDomainText: function(s) {\n let rangeText = null;\n if (\"minimum\" in s && \"maximum\" in s) {\n rangeText = `∈ [${s.minimum}, ${s.maximum}] `;\n } else if (\"minimum\" in s) {\n rangeText = `∈ [${s.minimum}, ∞] `;\n } else if (\"maximum\" in s) {\n rangeText = `∈ [-∞, ${s.maximum}] `;\n }\n if (rangeText && \"x_unit\" in s) {\n const {\n unitPrefix,\n unit\n } = osparc.utils.Units.decomposeXUnit(s[\"x_unit\"]);\n const labels = osparc.utils.Units.getLabels(unit, unitPrefix);\n if (labels !== null) {\n rangeText += labels.unitShort;\n }\n }\n return rangeText;\n },\n\n __getArrayDomainText: function(s) {\n const sMerged = osparc.utils.Utils.deepCloneObject(s);\n if (\"items\" in sMerged) {\n Object.keys(sMerged.items).forEach(item => {\n sMerged[item] = sMerged.items[item];\n });\n }\n let rangeText = this.__getDomainText(sMerged);\n if (rangeText === null) {\n rangeText = \"\";\n }\n if (\"minItems\" in s) {\n rangeText += \"
\";\n rangeText += qx.locale.Manager.tr(\"Minimum items: \") + s.minItems;\n }\n if (\"maxItems\" in s) {\n rangeText += \"
\";\n rangeText += qx.locale.Manager.tr(\"Maximum items: \") + s.maxItems;\n }\n return rangeText;\n },\n\n getDomainText: function(s) {\n if (s.type === \"array\") {\n return this.__getArrayDomainText(s);\n }\n return this.__getDomainText(s);\n },\n\n createValidator: function(control, s) {\n const manager = new qx.ui.form.validation.Manager();\n manager.add(control, (value, item) => {\n let multiplier = 1;\n let invalidMessage = qx.locale.Manager.tr(\"Out of range\");\n if (\"x_unit\" in s) {\n const {\n unitPrefix\n } = osparc.utils.Units.decomposeXUnit(s[\"x_unit\"]);\n multiplier = osparc.utils.Units.getMultiplier(unitPrefix, control.unitPrefix);\n }\n let valid = true;\n if (\"minimum\" in s && value < multiplier*(s.minimum)) {\n valid = false;\n invalidMessage += \"
\";\n invalidMessage += qx.locale.Manager.tr(\"Minimum value: \") + multiplier*(s.minimum);\n }\n if (\"maximum\" in s && value > multiplier*(s.maximum)) {\n valid = false;\n invalidMessage += \"
\";\n invalidMessage += qx.locale.Manager.tr(\"Maximum value: \") + multiplier*(s.maximum);\n }\n if (!valid) {\n item.setInvalidMessage(invalidMessage);\n }\n return Boolean(valid);\n });\n return manager;\n },\n\n createArrayValidator: function(control, s) {\n const manager = new qx.ui.form.validation.Manager();\n manager.add(control, (valuesInString, item) => {\n const values = JSON.parse(valuesInString);\n if (\"minItems\" in s && (values.length < s.minItems)) {\n let oorInvalidMessage = qx.locale.Manager.tr(\"Minimum items: \") + s.minItems;\n item.setInvalidMessage(oorInvalidMessage);\n return false;\n }\n if (\"maxItems\" in s && (values.length > s.maxItems)) {\n let oorInvalidMessage = qx.locale.Manager.tr(\"Maximum items: \") + s.maxItems;\n item.setInvalidMessage(oorInvalidMessage);\n return false;\n }\n let multiplier = 1;\n let oorInvalidMessage = qx.locale.Manager.tr(\"Out of range\");\n if (\"x_unit\" in s) {\n const {\n unitPrefix\n } = osparc.utils.Units.decomposeXUnit(s[\"x_unit\"]);\n multiplier = osparc.utils.Units.getMultiplier(unitPrefix, control.unitPrefix);\n }\n let valid = true;\n if (\"items\" in s) {\n if (\"minimum\" in s[\"items\"] && values.some(v => v < multiplier*(s[\"items\"].minimum))) {\n valid = false;\n oorInvalidMessage += \"
\";\n oorInvalidMessage += qx.locale.Manager.tr(\"Minimum value: \") + multiplier*(s[\"items\"].minimum);\n }\n if (\"maximum\" in s[\"items\"] && values.some(v => v > multiplier*(s[\"items\"].maximum))) {\n valid = false;\n oorInvalidMessage += \"
\";\n oorInvalidMessage += qx.locale.Manager.tr(\"Maximum value: \") + multiplier*(s[\"items\"].maximum);\n }\n }\n if (!valid) {\n item.setInvalidMessage(oorInvalidMessage);\n }\n return Boolean(valid);\n });\n return manager;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.file.FolderContent\", {\n extend: qx.ui.container.Stack,\n\n construct: function() {\n this.base(arguments);\n\n this.getChildControl(\"icons-layout\");\n this.getChildControl(\"table\");\n },\n\n properties: {\n folder: {\n check: \"qx.core.Object\",\n init: null,\n nullable: true,\n event: \"changeFolder\",\n apply: \"__applyFolder\"\n },\n\n mode: {\n check: [\"list\", \"icons\"],\n init: \"list\",\n nullable: false,\n event: \"changeMode\",\n apply: \"__reloadFolderContent\"\n },\n\n multiSelect: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeMultiSelect\",\n apply: \"__changeMultiSelect\"\n },\n },\n\n events: {\n \"selectionChanged\": \"qx.event.type.Data\", // tap\n \"multiSelectionChanged\": \"qx.event.type.Data\", // tap\n \"openItemSelected\": \"qx.event.type.Data\", // dbltap\n \"requestDatasetFiles\": \"qx.event.type.Data\",\n },\n\n statics: {\n getItemButton: function() {\n const item = new qx.ui.form.ToggleButton().set({\n iconPosition: \"top\",\n width: 100,\n height: 80,\n padding: 2\n });\n item.getChildControl(\"label\").set({\n font: \"text-12\",\n rich: true,\n textAlign: \"center\",\n maxWidth: 100,\n maxHeight: 33 // two lines\n });\n osparc.utils.Utils.setIdToWidget(item, \"FolderViewerItem\");\n return item;\n },\n\n T_POS: {\n TYPE: 0,\n NAME: 1,\n MODIFIED_DATE: 2,\n SIZE: 3,\n ID: 4\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"table\": {\n const tableModel = new qx.ui.table.model.Simple();\n tableModel.setColumns([\n \"\",\n this.tr(\"Name\"),\n this.tr(\"Date Modified\"),\n this.tr(\"Size\"),\n this.tr(\"Id\")\n ]);\n control = new osparc.ui.table.Table(tableModel, {\n // tableColumnModel: obj => new qx.ui.table.columnmodel.Resize(obj),\n initiallyHiddenColumns: [this.self().T_POS.ID]\n });\n control.getTableColumnModel().setDataCellRenderer(this.self().T_POS.TYPE, new qx.ui.table.cellrenderer.Image());\n control.setColumnWidth(this.self().T_POS.TYPE, 30);\n control.setColumnWidth(this.self().T_POS.NAME, 250);\n control.setColumnWidth(this.self().T_POS.MODIFIED_DATE, 125);\n control.setColumnWidth(this.self().T_POS.SIZE, 80);\n this.bind(\"mode\", control, \"visibility\", {\n converter: mode => mode === \"list\" ? \"visible\" : \"excluded\"\n });\n const scroll = new qx.ui.container.Scroll();\n scroll.add(control);\n this.add(scroll);\n break;\n }\n case \"icons-layout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.Flow(5, 5));\n osparc.utils.Utils.setIdToWidget(control, \"FolderViewerIconsContent\");\n this.bind(\"mode\", control, \"visibility\", {\n converter: mode => mode === \"icons\" ? \"visible\" : \"excluded\"\n });\n const scroll = new qx.ui.container.Scroll();\n scroll.add(control);\n this.add(scroll);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __convertEntries: function(content) {\n const datas = [];\n content.forEach(entry => {\n const data = {\n icon: entry.getIcon ? entry.getIcon() : this.__getIcon(entry),\n label: entry.getLabel(),\n lastModified: entry.getLastModified ? osparc.utils.Utils.formatDateAndTime(new Date(entry.getLastModified())) : \"\",\n size: entry.getSize ? osparc.utils.Utils.bytesToSize(entry.getSize()) : \"\",\n itemId: entry.getItemId ? entry.getItemId() : null,\n entry: entry,\n };\n datas.push(data);\n });\n // folders first\n datas.sort((a, b) => osparc.file.FilesTree.isFile(a.entry) - osparc.file.FilesTree.isFile(b.entry));\n const items = [];\n if (this.getMode() === \"list\") {\n datas.forEach(data => {\n const row = [];\n row.push(data[\"icon\"]);\n row.push(data[\"label\"]);\n row.push(data[\"lastModified\"]);\n row.push(data[\"size\"]);\n if (data[\"itemId\"]) {\n row.push(data[\"itemId\"]);\n }\n row.entry = data[\"entry\"];\n items.push(row);\n });\n } else if (this.getMode() === \"icons\") {\n datas.forEach(data => {\n let toolTip = data[\"label\"];\n if (data[\"size\"]) {\n toolTip += \"
\" + data[\"size\"];\n }\n if (data[\"lastModified\"]) {\n toolTip += \"
\" + data[\"lastModified\"];\n }\n const gridItem = this.self().getItemButton().set({\n label: data[\"label\"],\n icon: data[\"icon\"],\n toolTipText: toolTip\n });\n const icon = gridItem.getChildControl(\"icon\", true);\n if (icon.getSource() === \"@FontAwesome5Solid/circle-notch/12\") {\n icon.setPadding(0);\n icon.setMarginRight(4);\n icon.getContentElement().addClass(\"rotate\");\n }\n if (data[\"itemId\"]) {\n gridItem.itemId = data[\"itemId\"];\n }\n gridItem.entry = data[\"entry\"];\n this.__attachListenersToGridItem(gridItem);\n items.push(gridItem);\n });\n }\n return items;\n },\n\n __getIcon: function(entry) {\n return osparc.file.FilesTree.isDir(entry) ? \"@MaterialIcons/folder\" : \"@MaterialIcons/insert_drive_file\";\n },\n\n __getEntries: function() {\n if (this.getFolder()) {\n const children = this.getFolder().getChildren().toArray();\n return this.__convertEntries(children);\n }\n return [];\n },\n\n __applyFolder: function(folder) {\n if (folder) {\n if (folder.getLoaded && !folder.getLoaded()) {\n this.fireDataEvent(\"requestDatasetFiles\", {\n locationId: folder.getLocation(),\n datasetId: folder.getPath()\n });\n }\n\n folder.getChildren().addListener(\"change\", () => {\n this.__reloadFolderContent();\n }, this);\n }\n\n this.__reloadFolderContent();\n },\n\n __reloadFolderContent: function() {\n const entries = this.__getEntries();\n if (this.getMode() === \"list\") {\n const table = this.getChildControl(\"table\");\n table.setData(entries);\n this.__attachListenersToTableItem(table);\n } else if (this.getMode() === \"icons\") {\n const iconsLayout = this.getChildControl(\"icons-layout\");\n iconsLayout.removeAll();\n entries.forEach(entry => {\n iconsLayout.add(entry);\n });\n }\n this.setSelection([this.getSelectables()[this.getMode() === \"icons\" ? 0 : 1]]);\n },\n\n __changeMultiSelect: function() {\n if (this.getMode() === \"icons\" && this.getMultiSelect() === false) {\n const iconsLayout = this.getChildControl(\"icons-layout\");\n const selectedButtons = iconsLayout.getChildren().filter(btn => btn.getValue());\n if (selectedButtons.length > 1) {\n // reset selection\n selectedButtons.forEach(btn => btn.setValue(false));\n }\n } else if (this.getMode() === \"list\") {\n const selectionModel = this.getChildControl(\"table\").getSelectionModel();\n let selection = null;\n if (selectionModel.getSelectedCount() === 1) {\n // keep selection\n selection = selectionModel.getSelectedRanges()[0];\n }\n selectionModel.setSelectionMode(this.isMultiSelect() ?\n qx.ui.table.selection.Model.MULTIPLE_INTERVAL_SELECTION_TOGGLE :\n qx.ui.table.selection.Model.SINGLE_SELECTION\n );\n if (selection) {\n selectionModel.setSelectionInterval(selection.minIndex, selection.maxIndex);\n }\n }\n },\n\n __selectionChanged: function(selection) {\n if (this.isMultiSelect()) {\n this.fireDataEvent(\"multiSelectionChanged\", selection);\n } else {\n this.fireDataEvent(\"selectionChanged\", (selection && selection.length) ? selection[0] : null);\n }\n },\n\n __itemDblTapped: function(entry) {\n this.fireDataEvent(\"openItemSelected\", entry);\n },\n\n __attachListenersToGridItem: function(gridItem) {\n gridItem.addListener(\"tap\", e => {\n if (e.getNativeEvent().ctrlKey) {\n this.setMultiSelect(true);\n }\n if (this.isMultiSelect()) {\n // pass all buttons that are selected\n const selectedItems = [];\n const iconsLayout = this.getChildControl(\"icons-layout\");\n iconsLayout.getChildren().forEach(btn => {\n if (btn.getValue() && \"entry\" in btn) {\n selectedItems.push(btn.entry);\n }\n });\n this.__selectionChanged(selectedItems);\n } else {\n // unselect the other items\n const iconsLayout = this.getChildControl(\"icons-layout\");\n iconsLayout.getChildren().forEach(btn => {\n btn.setValue(btn === gridItem);\n });\n this.__selectionChanged(gridItem.getValue() ? [gridItem.entry] : null);\n }\n // folders can't be selected\n if (osparc.file.FilesTree.isDir(gridItem.entry)) {\n gridItem.setValue(false);\n }\n }, this);\n gridItem.addListener(\"dbltap\", () => {\n this.__itemDblTapped(gridItem.entry);\n }, this);\n },\n\n __attachListenersToTableItem: function(table) {\n table.addListener(\"cellTap\", e => {\n if (e.getNativeEvent().ctrlKey) {\n this.setMultiSelect(true);\n }\n const selectedItems = [];\n const selectionRanges = table.getSelectionModel().getSelectedRanges();\n selectionRanges.forEach(range => {\n for (let i=range.minIndex; i<=range.maxIndex; i++) {\n const row = table.getTableModel().getRowData(i);\n if (row && \"entry\" in row) {\n selectedItems.push(row.entry);\n }\n }\n });\n this.__selectionChanged(selectedItems);\n }, this);\n table.addListener(\"cellDbltap\", e => {\n const selectedRow = e.getRow();\n const row = table.getTableModel().getRowData(selectedRow);\n if (row && \"entry\" in row) {\n this.__itemDblTapped(row.entry);\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * A HBox containing a text field, download button and delete button.\n *\n * It is used together with a virtual tree of files where the selection is displayed\n * in the text field and the download and delete are related to that selection.\n * Download and deleted methods are also provided.\n * If a file is deleted it fires \"fileDeleted\" data event\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let hBox = new osparc.file.FileLabelWithActions();\n * this.getRoot().add(hBox);\n *
\n */\n\nqx.Class.define(\"osparc.file.FileLabelWithActions\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(10));\n\n this.getChildControl(\"spacer\");\n this.getChildControl(\"selected-label\");\n\n const downloadBtn = this.getChildControl(\"download-button\");\n downloadBtn.addListener(\"execute\", () => this.__retrieveURLAndDownloadSelected(), this);\n\n const deleteBtn = this.getChildControl(\"delete-button\");\n deleteBtn.addListener(\"execute\", () => this.__deleteSelected(), this);\n\n this.__selection = [];\n },\n\n events: {\n \"fileDeleted\": \"qx.event.type.Data\"\n },\n\n properties: {\n multiSelect: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeMultiSelect\",\n apply: \"__changeMultiSelection\",\n },\n },\n\n members: {\n __selection: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"spacer\":\n control = new qx.ui.core.Spacer();\n this._add(control, {\n flex: 1\n });\n break;\n case \"selected-label\":\n control = new qx.ui.basic.Label().set({\n alignY: \"middle\"\n });\n this._add(control);\n break;\n case \"download-button\":\n control = new qx.ui.form.Button(this.tr(\"Download\"), \"@FontAwesome5Solid/cloud-download-alt/16\");\n osparc.utils.Utils.setIdToWidget(control, \"filesTreeDownloadBtn\");\n this._add(control);\n break;\n case \"delete-button\":\n control = new qx.ui.form.Button(this.tr(\"Delete\"), \"@FontAwesome5Solid/trash/16\").set({\n appearance: \"danger-button\"\n });\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __changeMultiSelection: function() {\n if (this.__selection.length > 1) {\n this.resetSelection();\n }\n },\n\n setItemSelected: function(selectedItem) {\n if (selectedItem) {\n this.__selection = [selectedItem];\n const isFile = osparc.file.FilesTree.isFile(selectedItem);\n this.getChildControl(\"download-button\").setEnabled(isFile);\n this.getChildControl(\"delete-button\").setEnabled(true); // folders can also be deleted\n this.getChildControl(\"selected-label\").setValue(selectedItem.getLabel());\n } else {\n this.resetSelection();\n }\n },\n\n setMultiItemSelected: function(multiSelectionData) {\n this.__selection = multiSelectionData;\n if (multiSelectionData && multiSelectionData.length) {\n if (multiSelectionData.length === 1) {\n this.setItemSelected(multiSelectionData[0]);\n } else {\n const selectedLabel = this.getChildControl(\"selected-label\");\n selectedLabel.set({\n value: multiSelectionData.length + \" items\"\n });\n }\n } else {\n this.resetSelection();\n }\n },\n\n resetSelection: function() {\n this.__selection = [];\n this.getChildControl(\"download-button\").setEnabled(false);\n this.getChildControl(\"delete-button\").setEnabled(false);\n this.getChildControl(\"selected-label\").resetValue();\n },\n\n __retrieveURLAndDownloadSelected: function() {\n if (this.isMultiSelect()) {\n this.__selection.forEach(selection => {\n if (selection && osparc.file.FilesTree.isFile(selection)) {\n this.__retrieveURLAndDownloadFile(selection);\n }\n });\n } else if (this.__selection.length) {\n const selection = this.__selection[0];\n if (selection && osparc.file.FilesTree.isFile(selection)) {\n this.__retrieveURLAndDownloadFile(selection);\n }\n }\n },\n\n __retrieveURLAndDownloadFile: function(file) {\n const fileId = file.getFileId();\n const locationId = file.getLocation();\n osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)\n .then(data => {\n if (data) {\n osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);\n }\n });\n },\n\n __deleteSelected: function() {\n const toBeDeleted = [];\n let isFolderSelected = false;\n if (this.isMultiSelect()) {\n this.__selection.forEach(selection => {\n if (selection) {\n toBeDeleted.push(selection);\n if (osparc.file.FilesTree.isDir(selection)) {\n isFolderSelected = true;\n }\n }\n });\n } else if (this.__selection.length) {\n const selection = this.__selection[0];\n if (selection) {\n if (osparc.file.FilesTree.isDir(selection)) {\n isFolderSelected = true;\n }\n }\n }\n\n let msg = this.tr(\"This operation cannot be undone.\");\n msg += isFolderSelected ? (\"
\"+this.tr(\"All the content of the folders will be deleted.\")) : \"\";\n msg += \"
\" + this.tr(\"Do you want to proceed?\");\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Delete\"),\n confirmText: this.tr(\"Delete\"),\n confirmAction: \"delete\"\n });\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__doDeleteSelected(toBeDeleted);\n }\n }, this);\n },\n\n __doDeleteSelected: function(toBeDeleted) {\n const requests = [];\n toBeDeleted.forEach(selection => {\n if (selection) {\n let request = null;\n if (osparc.file.FilesTree.isFile(selection)) {\n request = this.__deleteItem(selection.getFileId(), selection.getLocation());\n } else {\n request = this.__deleteItem(selection.getPath(), selection.getLocation());\n }\n if (request) {\n requests.push(request);\n }\n }\n });\n Promise.all(requests)\n .then(datas => {\n if (datas.length) {\n this.fireDataEvent(\"fileDeleted\", datas[0]);\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Items successfully deleted\"), \"INFO\");\n }\n });\n },\n\n __deleteItem: function(itemId, locationId) {\n if (locationId !== 0 && locationId !== \"0\") {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Only items in simcore.s3 can be deleted\"));\n return null;\n }\n const dataStore = osparc.store.Data.getInstance();\n return dataStore.deleteFile(locationId, itemId);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores PricingPlan data.\n */\n\nqx.Class.define(\"osparc.data.model.PricingPlan\", {\n extend: qx.core.Object,\n\n /**\n * @param pricingPlanData {Object} Object containing the serialized PricingPlan Data\n */\n construct: function(pricingPlanData) {\n this.base(arguments);\n\n this.set({\n pricingPlanId: pricingPlanData.pricingPlanId,\n pricingPlanKey: pricingPlanData.pricingPlanKey,\n classification: pricingPlanData.classification,\n name: pricingPlanData.displayName,\n description: pricingPlanData.description,\n isActive: pricingPlanData.isActive,\n pricingUnits: [],\n });\n\n if (pricingPlanData.pricingUnits) {\n pricingPlanData.pricingUnits.forEach(pricingUnitData => {\n const pricingUnit = new osparc.data.model.PricingUnit(pricingUnitData);\n this.getPricingUnits().push(pricingUnit);\n });\n }\n },\n\n properties: {\n pricingPlanId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changePricingPlanId\"\n },\n\n pricingPlanKey: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changePricingPlanKey\"\n },\n\n pricingUnits: {\n check: \"Array\",\n nullable: true,\n init: [],\n event: \"changePricingUnits\"\n },\n\n classification: {\n check: [\"TIER\", \"LICENSE\"],\n nullable: false,\n init: null,\n event: \"changeClassification\"\n },\n\n name: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeName\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDescription\"\n },\n\n isActive: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n event: \"changeIsActive\"\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Class that stores PricingUnit data.\n */\n\nqx.Class.define(\"osparc.data.model.PricingUnit\", {\n extend: qx.core.Object,\n\n /**\n * @param pricingUnitData {Object} Object containing the serialized PricingUnit Data\n */\n construct: function(pricingUnitData) {\n this.base(arguments);\n\n this.set({\n pricingUnitId: pricingUnitData.pricingUnitId,\n name: pricingUnitData.unitName,\n cost: parseFloat(pricingUnitData.currentCostPerUnit),\n isDefault: pricingUnitData.default,\n extraInfo: pricingUnitData.unitExtraInfo,\n specificInfo: pricingUnitData.specificInfo || null,\n });\n },\n\n properties: {\n pricingUnitId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changePricingUnitId\"\n },\n\n classification: {\n check: [\"TIER\", \"LICENSE\"],\n nullable: false,\n init: null,\n event: \"changeClassification\"\n },\n\n name: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeName\"\n },\n\n cost: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeCost\"\n },\n\n isDefault: {\n check: \"Boolean\",\n nullable: false,\n init: false,\n event: \"changeIsDefault\",\n },\n\n extraInfo: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeExtraInfo\",\n },\n\n specificInfo: {\n check: \"Object\",\n nullable: true,\n init: null,\n event: \"changeSpecificInfo\",\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.PricingUnit\", {\n extend: qx.ui.core.Widget,\n type: \"abstract\",\n\n construct: function(pricingUnit) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.set({\n padding: 10,\n decorator: \"rounded\",\n minWidth: 100,\n allowGrowX: false,\n allowGrowY: false,\n });\n\n this.setUnitData(pricingUnit);\n\n osparc.utils.Utils.addBorder(this);\n },\n\n events: {\n \"editPricingUnit\": \"qx.event.type.Event\",\n },\n\n properties: {\n selected: {\n check: \"Boolean\",\n init: false,\n nullable: false,\n event: \"changeSelected\",\n apply: \"__applySelected\",\n },\n\n unitData: {\n check: \"osparc.data.model.PricingUnit\",\n nullable: false,\n init: null,\n apply: \"_buildLayout\"\n },\n\n showEditButton: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeShowEditButton\"\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"name\":\n control = new qx.ui.basic.Label().set({\n font: \"text-16\"\n });\n this._add(control);\n break;\n case \"price\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this._add(control);\n break;\n case \"edit-button\":\n control = new qx.ui.form.Button(qx.locale.Manager.tr(\"Edit\"));\n this.bind(\"showEditButton\", control, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"editPricingUnit\"));\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function(pricingUnit) {\n this._removeAll();\n\n const name = this.getChildControl(\"name\");\n pricingUnit.bind(\"name\", name, \"value\");\n },\n\n __applySelected: function(selected) {\n const strong = qx.theme.manager.Color.getInstance().resolve(\"strong-main\");\n osparc.utils.Utils.updateBorderColor(this, selected ? strong : \"transparent\");\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.PricingUnitTier\", {\n extend: osparc.study.PricingUnit,\n\n events: {\n \"selectPricingUnit\": \"qx.event.type.Event\",\n },\n\n properties: {\n showAwsSpecificInfo: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeShowAwsSpecificInfo\"\n },\n\n showUnitExtraInfo: {\n check: \"Boolean\",\n init: true,\n nullable: true,\n event: \"changeShowUnitExtraInfo\"\n },\n\n showSelectButton: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeShowSelectButton\"\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"awsSpecificInfo\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this.bind(\"showAwsSpecificInfo\", control, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n })\n this._add(control);\n break;\n case \"unitExtraInfo\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\",\n rich: true,\n });\n this.bind(\"showUnitExtraInfo\", control, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n });\n this._add(control);\n break;\n case \"select-button\":\n control = new qx.ui.form.Button().set({\n appearance: \"strong-button\",\n center: true,\n });\n this.bind(\"selected\", control, \"label\", {\n converter: selected => selected ? \"Selected\" : \"Select\"\n });\n this.bind(\"selected\", control, \"enabled\", {\n converter: selected => !selected\n });\n this.bind(\"showSelectButton\", control, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"selectPricingUnit\"));\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n // override\n _buildLayout: function(pricingUnit) {\n this.base(arguments, pricingUnit);\n\n // add price info\n const price = this.getChildControl(\"price\");\n pricingUnit.bind(\"cost\", price, \"value\", {\n converter: v => qx.locale.Manager.tr(\"Credits/h\") + \": \" + v\n });\n\n // add aws specific info\n if (\"specificInfo\" in pricingUnit) {\n const specificInfo = this.getChildControl(\"awsSpecificInfo\");\n pricingUnit.bind(\"awsSpecificInfo\", specificInfo, \"value\", {\n converter: v => qx.locale.Manager.tr(\"EC2\") + \": \" + v,\n });\n }\n\n // add pricing unit extra info\n const unitExtraInfo = this.getChildControl(\"unitExtraInfo\");\n let text = \"\";\n Object.entries(pricingUnit.getExtraInfo()).forEach(([key, value]) => {\n text += `${key}: ${value}
`;\n });\n unitExtraInfo.setValue(text);\n\n // add select button\n this.getChildControl(\"select-button\");\n\n // add edit button\n this.getChildControl(\"edit-button\");\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A tree that makes its items selectable with a checkbox.\n */\nqx.Class.define(\"osparc.ui.tree.CheckboxTree\", {\n extend: qx.ui.tree.VirtualTree,\n\n construct: function(data) {\n this.base(arguments, this.__createModel(data), \"label\", \"children\", \"open\");\n const tree = this;\n this.set({\n delegate: {\n createItem: function() {\n return new osparc.ui.tree.CheckboxTreeItem();\n },\n bindItem: function(controller, item, id) {\n controller.bindDefaultProperties(item, id);\n controller.bindProperty(\"checked\", \"checked\", null, item, id);\n controller.bindPropertyReverse(\"checked\", \"checked\", null, item, id);\n controller.bindProperty(\"description\", \"description\", null, item, id);\n controller.bindProperty(\"url\", \"url\", null, item, id);\n },\n configureItem: function(item) {\n item.addListener(\"checkboxClicked\", () => tree.fireDataEvent(\"checkedChanged\", tree.getChecked()));\n item.setSelectable(false);\n }\n },\n hideRoot: true,\n decorator: \"no-border\",\n selectionMode: \"multi\"\n });\n },\n events: {\n checkedChanged: \"qx.event.type.Data\"\n },\n members: {\n __createModel: function(data) {\n this.__extendData(data);\n const model = qx.data.marshal.Json.createModel(data, true);\n const enableTriState = node => {\n node.getChildren().forEach(child => {\n enableTriState(child);\n // Binding parent -> child\n node.bind(\"checked\", child, \"checked\", {\n converter: function(value) {\n if (value === null) {\n // If parent gets null (half-checked), children preserve their values\n return child.getChecked();\n }\n return value;\n }\n });\n // Binding child -> parent\n child.bind(\"checked\", node, \"checked\", {\n converter: function() {\n const children = node.getChildren().toArray();\n const areAllChecked = children.every(item => item.getChecked());\n const isOneChecked = children.some(item => item.getChecked() || item.getChecked() === null);\n if (isOneChecked) {\n // Null means half-checked\n return areAllChecked ? true : null;\n }\n return false;\n }\n });\n });\n };\n enableTriState(model);\n return model;\n },\n __extendData: function(data) {\n data.open = data.open || true;\n data.checked = data.checked || false;\n data.children = data.children || [];\n data.children.forEach(child => this.__extendData(child));\n },\n /**\n * Method returning an array of checked elements (model elements).\n * @param {Array?} model Tree model to check. Used for recursion, the method should be called without any parameters.\n */\n getChecked: function(model) {\n const nodes = model == null ? this.getModel().getChildren().toArray() : model.getChildren().toArray();\n let checked = [];\n nodes.forEach(node => {\n if (node.getChecked()) {\n checked.push(qx.util.Serializer.toNativeObject(node));\n }\n checked = [...checked, ...this.getChecked(node)];\n });\n return checked;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Mixin.define(\"osparc.ui.tree.MHintInTree\", {\n properties: {\n description: {\n check: \"String\",\n init: null,\n event: \"changeDescription\",\n apply: \"__populateInfoButton\",\n nullable: true\n },\n\n url: {\n check: \"String\",\n init: null,\n event: \"changeUrl\",\n apply: \"__populateInfoButton\",\n nullable: true\n }\n },\n\n members: {\n addHint: function() {\n this.__infoButton = new osparc.ui.hint.InfoHint();\n this._add(this.__infoButton);\n\n return this.__infoButton;\n },\n\n __populateInfoButton: function() {\n const texts = [];\n [\n this.getDescription()\n ].forEach(text => {\n if (text && text !== \"\") {\n texts.push(text);\n }\n });\n const url = this.getUrl();\n if (url && url !== \"\") {\n const link = \"More...\";\n const linkWithRightColor = link.replace(/^ {\n this.__populateInfoButton();\n }, this);\n }\n const hint = texts.join(\"
\");\n this.__infoButton.setHintText(hint);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.tree.ClassifiersTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n include: osparc.ui.tree.MHintInTree,\n\n members: {\n _addWidgets: function() {\n this.addSpacer();\n this.addOpenButton();\n this.addLabel();\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n this.addHint();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.FolderWithSharedIcon\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.Canvas());\n\n this.getChildControl(\"folder-icon\");\n this.getChildControl(\"shared-icon\");\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon-container\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({\n alignY: \"middle\"\n }));\n this._add(control, {\n height: \"100%\"\n });\n break;\n case \"folder-icon\":\n control = new qx.ui.basic.Image().set({\n source: \"@FontAwesome5Solid/folder/26\"\n });\n this.getChildControl(\"icon-container\").add(control);\n break;\n case \"shared-icon\":\n control = new qx.ui.basic.Image().set({\n textColor: \"strong-main\",\n padding: 0\n });\n this._add(control, {\n bottom: 7,\n left: 2\n });\n break;\n }\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.dashboard.WorkspacesAndFoldersTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n\n construct: function() {\n this.base(arguments);\n\n this.set({\n indent: 12, // defaults to 19,\n decorator: \"rounded\",\n padding: 2,\n maxWidth: osparc.dashboard.ResourceBrowserBase.SIDE_SPACER_WIDTH - 12,\n });\n\n this.setNotHoveredStyle();\n this.__attachEventHandlers();\n\n this.__attachDragHandlers();\n this.__attachDropHandlers();\n },\n\n events: {\n \"studyToFolderRequested\": \"qx.event.type.Data\",\n \"folderToFolderRequested\": \"qx.event.type.Data\",\n },\n\n members: {\n __attachEventHandlers: function() {\n this.addListener(\"mouseover\", () => {\n this.setHoveredStyle();\n });\n this.addListener(\"mouseout\", () => {\n this.setNotHoveredStyle();\n });\n },\n\n setHoveredStyle: function() {\n osparc.utils.Utils.addBorder(this, 1, qx.theme.manager.Color.getInstance().resolve(\"text\"));\n },\n\n setNotHoveredStyle: function() {\n osparc.utils.Utils.hideBorder(this);\n },\n\n __getFolder: function() {\n const folderId = this.getModel().getFolderId();\n if (folderId === null) {\n return null;\n }\n return osparc.store.Folders.getInstance().getFolder(folderId);\n },\n\n __attachDragHandlers: function() {\n this.setDraggable(true);\n\n this.addListener(\"dragstart\", e => {\n const folderOrigin = this.__getFolder();\n // only folders can be dragged\n if (folderOrigin == null) {\n e.preventDefault();\n return;\n }\n osparc.dashboard.DragDropHelpers.moveFolder.dragStart(e, this, folderOrigin);\n });\n\n this.addListener(\"dragend\", () => {\n osparc.dashboard.DragDropHelpers.dragEnd(this);\n });\n },\n\n __attachDropHandlers: function() {\n this.setDroppable(true);\n\n let draggingOver = false;\n this.addListener(\"dragover\", e => {\n const workspaceDestId = this.getModel().getWorkspaceId();\n const folderDestId = this.getModel().getFolderId();\n if (e.supportsType(\"osparc-moveStudy\")) {\n osparc.dashboard.DragDropHelpers.moveStudy.dragOver(e, this, workspaceDestId, folderDestId);\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n osparc.dashboard.DragDropHelpers.moveFolder.dragOver(e, this, workspaceDestId, folderDestId);\n }\n\n draggingOver = true;\n setTimeout(() => {\n if (draggingOver) {\n this.setOpen(true);\n draggingOver = false;\n }\n }, 1000);\n });\n\n this.addListener(\"dragleave\", () => {\n osparc.dashboard.DragDropHelpers.dragLeave(this);\n draggingOver = false;\n });\n this.addListener(\"dragend\", () => {\n osparc.dashboard.DragDropHelpers.dragLeave(this);\n draggingOver = false;\n });\n\n this.addListener(\"drop\", e => {\n const workspaceDestId = this.getModel().getWorkspaceId();\n const folderDestId = this.getModel().getFolderId();\n if (e.supportsType(\"osparc-moveStudy\")) {\n const studyToFolderData = osparc.dashboard.DragDropHelpers.moveStudy.drop(e, this, workspaceDestId, folderDestId);\n this.fireDataEvent(\"studyToFolderRequested\", studyToFolderData);\n } else if (e.supportsType(\"osparc-moveFolder\")) {\n const folderToFolderData = osparc.dashboard.DragDropHelpers.moveFolder.drop(e, this, workspaceDestId, folderDestId);\n this.fireDataEvent(\"folderToFolderRequested\", folderToFolderData);\n }\n draggingOver = false;\n });\n },\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.OrganizationEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(organization) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(8));\n\n const manager = this.__validator = new qx.ui.form.validation.Manager();\n const title = this.getChildControl(\"title\");\n title.setRequired(true);\n manager.add(title);\n this.getChildControl(\"description\");\n this.getChildControl(\"thumbnail\");\n organization ? this.getChildControl(\"save\") : this.getChildControl(\"create\");\n\n if (organization) {\n organization.bind(\"groupId\", this, \"gid\");\n organization.bind(\"label\", this, \"label\");\n organization.bind(\"description\", this, \"description\");\n organization.bind(\"thumbnail\", this, \"thumbnail\", {\n converter: val => val ? val : \"\"\n });\n } else {\n const groupsStore = osparc.store.Groups.getInstance();\n const orgs = groupsStore.getOrganizations();\n const existingNames = Object.values(orgs).map(org => org.getLabel());\n const defaultName = osparc.utils.Utils.getUniqueName(\"New Organization\", existingNames)\n title.setValue(defaultName);\n }\n\n this.addListener(\"appear\", () => {\n title.focus();\n title.activate();\n });\n },\n\n properties: {\n gid: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeGid\"\n },\n\n label: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeLabel\"\n },\n\n description: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeDescription\"\n },\n\n thumbnail: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeThumbnail\"\n }\n },\n\n events: {\n \"createOrg\": \"qx.event.type.Event\",\n \"updateOrg\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"title\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n backgroundColor: \"background-main\",\n placeholder: this.tr(\"Title\"),\n height: 30,\n });\n this.bind(\"label\", control, \"value\");\n control.bind(\"value\", this, \"label\");\n this._add(control);\n break;\n }\n case \"description\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Description\"),\n height: 30,\n });\n this.bind(\"description\", control, \"value\");\n control.bind(\"value\", this, \"description\");\n this._add(control);\n break;\n }\n case \"thumbnail\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Thumbnail\"),\n height: 30,\n });\n this.bind(\"thumbnail\", control, \"value\");\n control.bind(\"value\", this, \"thumbnail\");\n this._add(control);\n break;\n }\n case \"create\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Create\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.fireEvent(\"createOrg\");\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n case \"save\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.fireEvent(\"updateOrg\");\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n case \"buttonsLayout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n control.addAt(cancelButton, 0);\n this._add(control);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.list.OrganizationListItem\", {\n extend: osparc.ui.list.ListItemWithMenu,\n\n properties: {\n showDeleteButton: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changeShowDeleteButton\"\n },\n\n groupMembers: {\n check: \"Object\",\n nullable: true,\n init: null,\n event: \"changeGroupMembers\",\n apply: \"updateNMembers\",\n },\n },\n\n events: {\n \"openEditOrganization\": \"qx.event.type.Data\",\n \"deleteOrganization\": \"qx.event.type.Data\"\n },\n\n members: {\n // overridden\n _setRole: function() {\n // Role field was already filled up with the nMembers\n return;\n },\n\n updateNMembers: function() {\n const roleText = this.getGroupMembers() ? Object.keys(this.getGroupMembers()).length + this.tr(\" members\") : \"-\";\n this.setRole(roleText);\n },\n\n // overridden\n _getOptionsMenu: function() {\n let menu = null;\n const accessRights = this.getAccessRights();\n if (accessRights[\"write\"]) {\n const optionsMenu = this.getChildControl(\"options\");\n optionsMenu.show();\n\n menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n if (accessRights[\"write\"]) {\n const editOrgButton = new qx.ui.menu.Button(this.tr(\"Edit details...\"));\n editOrgButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"openEditOrganization\", this.getKey());\n });\n menu.add(editOrgButton);\n }\n\n if (accessRights[\"delete\"]) {\n const deleteOrgButton = new qx.ui.menu.Button(this.tr(\"Delete\"));\n this.bind(\"showDeleteButton\", deleteOrgButton, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n });\n deleteOrgButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"deleteOrganization\", this.getKey());\n });\n menu.add(deleteOrgButton);\n }\n optionsMenu.setMenu(menu);\n }\n return menu;\n },\n\n // overridden\n _applyThumbnail: function(value) {\n const thumbnail = this.getChildControl(\"thumbnail\");\n if (value) {\n thumbnail.setSource(value);\n } else {\n thumbnail.setSource(osparc.utils.Icons.organization(osparc.ui.list.ListItemWithMenu.ICON_SIZE));\n }\n if (this.isPropertyInitialized(\"key\")) {\n const groupsStore = osparc.store.Groups.getInstance();\n const groupProductEveryone = groupsStore.getEveryoneProductGroup();\n if (groupProductEveryone && parseInt(this.getKey()) === groupProductEveryone.getGroupId()) {\n thumbnail.setSource(osparc.utils.Icons.everyone(osparc.ui.list.ListItemWithMenu.ICON_SIZE));\n }\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.MembersList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__createNewMemberLayout();\n this.__createMembersList();\n },\n\n statics: {\n getNoReadAccess: function() {\n return {\n \"read\": false,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getReadAccess: function() {\n return {\n \"read\": true,\n \"write\": false,\n \"delete\": false\n };\n },\n\n getWriteAccess: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": false\n };\n },\n\n getDeleteAccess: function() {\n return {\n \"read\": true,\n \"write\": true,\n \"delete\": true\n };\n },\n\n sortOrgMembers: function(a, b) {\n const sorted = osparc.share.Collaborators.sortByAccessRights(a[\"accessRights\"], b[\"accessRights\"]);\n if (sorted !== 0) {\n return sorted;\n }\n if ((\"label\" in a) && (\"label\" in b)) {\n return a[\"label\"].localeCompare(b[\"label\"]);\n }\n return 0;\n }\n },\n\n members: {\n __currentOrg: null,\n __introLabel: null,\n __addMembersButton: null,\n __membersModel: null,\n\n setCurrentOrg: function(orgModel) {\n if (orgModel === null) {\n return;\n }\n this.__currentOrg = orgModel;\n this.__reloadOrgMembers();\n },\n\n __createNewMemberLayout: function() {\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n vBox.add(this.__createAddMembersText());\n vBox.add(this.__getMemberInvitation());\n this._add(vBox);\n },\n\n __createMembersList: function() {\n const vBox = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n const rolesLayout = this.__getRolesToolbar();\n const membersFilter = this.__getMembersFilter();\n membersFilter.setPaddingRight(10);\n osparc.data.Roles.replaceSpacerWithWidget(rolesLayout, membersFilter);\n vBox.add(rolesLayout);\n vBox.add(this.__getMembersList(), {\n flex: 1\n });\n this._add(vBox, {\n flex: 1\n });\n },\n\n __createAddMembersText: function() {\n const intro = this.__introLabel = new qx.ui.basic.Label().set({\n alignX: \"left\",\n rich: true,\n font: \"text-13\"\n });\n return intro;\n },\n\n __getMemberInvitation: function() {\n const addBtn = this.__addMembersButton = new qx.ui.form.Button().set({\n appearance: \"strong-button\",\n label: this.tr(\"Add Members...\"),\n allowGrowX: false,\n });\n addBtn.addListener(\"execute\", function() {\n const serializedData = this.__currentOrg.serialize();\n serializedData[\"resourceType\"] = \"organization\";\n const showOrganizations = false;\n const collaboratorsManager = new osparc.share.NewCollaboratorsManager(serializedData, showOrganizations);\n collaboratorsManager.setCaption(\"Add Members\");\n collaboratorsManager.getActionButton().setLabel(this.tr(\"Add\"));\n collaboratorsManager.addListener(\"addCollaborators\", e => {\n const selectedMembers = e.getData();\n if (selectedMembers.length) {\n const promises = [];\n const usersStore = osparc.store.Users.getInstance();\n selectedMembers.forEach(selectedMemberGId => promises.push(usersStore.getUser(selectedMemberGId)));\n Promise.all(promises)\n .then(values => {\n values.forEach(user => {\n if (user) {\n this.__addMember(user.getUsername());\n }\n });\n })\n .catch(console.error)\n .finally(collaboratorsManager.close());\n } else {\n collaboratorsManager.close();\n }\n }, this);\n }, this);\n\n return addBtn;\n },\n\n __getRolesToolbar: function() {\n return osparc.data.Roles.createRolesOrgInfo();\n },\n\n __getMembersFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"organizationMembersList\");\n filter.setCompact(true);\n return filter;\n },\n\n __getMembersList: function() {\n const membersUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3,\n width: 150\n });\n\n const membersModel = this.__membersModel = new qx.data.Array();\n const membersCtrl = new qx.data.controller.List(membersModel, membersUIList, \"name\");\n membersCtrl.setDelegate({\n createItem: () => new osparc.ui.list.MemberListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"userId\", \"model\", null, item, id);\n ctrl.bindProperty(\"userId\", \"key\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"label\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitleMD\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", null, item, id);\n ctrl.bindProperty(\"options\", \"options\", null, item, id);\n ctrl.bindProperty(\"showOptions\", \"showOptions\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"organizationMembersList\");\n item.getChildControl(\"thumbnail\").getContentElement()\n .setStyles({\n \"border-radius\": \"16px\"\n });\n item.addListener(\"promoteToMember\", e => {\n const listedMember = e.getData();\n this.__promoteToUser(listedMember);\n });\n item.addListener(\"promoteToManager\", e => {\n const listedMember = e.getData();\n this.__promoteToManager(listedMember);\n });\n item.addListener(\"promoteToAdministrator\", e => {\n const listedMember = e.getData();\n this.__promoteToAdministrator(listedMember);\n });\n item.addListener(\"demoteToUser\", e => {\n const listedMember = e.getData();\n this.__demoteToRestrictedUser(listedMember);\n });\n item.addListener(\"demoteToMember\", e => {\n const listedMember = e.getData();\n this.__demoteToMember(listedMember);\n });\n item.addListener(\"demoteToManager\", e => {\n const listedMember = e.getData();\n this.__demoteToManager(listedMember);\n });\n item.addListener(\"removeMember\", e => {\n const listedMember = e.getData();\n this.__deleteMember(listedMember);\n });\n item.addListener(\"leaveResource\", e => {\n const listedMember = e.getData();\n this.__deleteMyself(listedMember);\n });\n }\n });\n\n return membersUIList;\n },\n\n __reloadOrgMembers: function() {\n const membersModel = this.__membersModel;\n membersModel.removeAll();\n\n const organization = this.__currentOrg;\n if (organization === null) {\n return;\n }\n\n const canIWrite = organization.getAccessRights()[\"write\"];\n const canIDelete = organization.getAccessRights()[\"delete\"];\n\n const introText = canIWrite ?\n this.tr(\"You can add new members and change their roles.\") :\n this.tr(\"You can't add new members to this Organization. Please contact an Administrator or Manager.\");\n this.__introLabel.setValue(introText);\n\n this.__addMembersButton.set({\n enabled: canIWrite\n });\n\n const myGroupId = osparc.auth.Data.getInstance().getGroupId();\n const membersList = [];\n const groupMembers = organization.getGroupMembers();\n Object.values(groupMembers).forEach(groupMember => {\n const gid = parseInt(groupMember.getGroupId());\n const member = {};\n member[\"userId\"] = gid === myGroupId ? osparc.auth.Data.getInstance().getUserId() : groupMember.getUserId();\n member[\"groupId\"] = gid;\n member[\"thumbnail\"] = groupMember.getThumbnail();\n member[\"label\"] = groupMember.getLabel();\n member[\"description\"] = gid === myGroupId ? osparc.auth.Data.getInstance().getEmail() : groupMember.getDescription();\n member[\"accessRights\"] = groupMember.getAccessRights();\n let options = [];\n if (canIDelete) {\n // admin...\n if (groupMember.getAccessRights()[\"delete\"]) {\n // ...on admin\n options = [];\n } else if (groupMember.getAccessRights()[\"write\"]) {\n // ...on manager\n options = [\n \"promoteToAdministrator\",\n \"demoteToMember\",\n \"removeMember\"\n ];\n } else if (groupMember.getAccessRights()[\"read\"]) {\n // ...on member\n options = [\n \"promoteToManager\",\n \"demoteToUser\",\n \"removeMember\"\n ];\n } else if (!groupMember.getAccessRights()[\"read\"]) {\n // ...on user\n options = [\n \"promoteToMember\",\n \"removeMember\"\n ];\n }\n } else if (canIWrite) {\n // manager...\n if (groupMember.getAccessRights()[\"delete\"]) {\n // ...on admin\n options = [];\n } else if (groupMember.getAccessRights()[\"write\"]) {\n // ...on manager\n options = [];\n } else if (groupMember.getAccessRights()[\"read\"]) {\n // ...on member\n options = [\n \"promoteToManager\",\n \"demoteToUser\",\n \"removeMember\"\n ];\n } else if (!groupMember.getAccessRights()[\"read\"]) {\n // ...on user\n options = [\n \"promoteToMember\",\n \"removeMember\"\n ];\n }\n }\n // Let me go?\n const openStudy = osparc.store.Store.getInstance().getCurrentStudy();\n if (\n openStudy === null &&\n canIWrite &&\n groupMembers.length > 1 && groupMember.getGroupId() === myGroupId\n ) {\n options.push(\"leave\");\n }\n member[\"options\"] = options;\n member[\"showOptions\"] = Boolean(options.length);\n membersList.push(member);\n });\n membersList.sort(this.self().sortOrgMembers);\n membersList.forEach(member => membersModel.append(qx.data.marshal.Json.createModel(member)));\n },\n\n __addMember: async function(newMemberIdentifier) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const groupsStore = osparc.store.Groups.getInstance();\n const isEmail = osparc.utils.Utils.isEmail(newMemberIdentifier);\n const request = isEmail ? groupsStore.addMember(orgId, null, newMemberIdentifier) : groupsStore.addMember(orgId, newMemberIdentifier);\n request\n .then(newMember => {\n const text = newMemberIdentifier + this.tr(\" successfully added\");\n osparc.FlashMessenger.getInstance().logAs(text);\n this.__reloadOrgMembers();\n\n // push 'NEW_ORGANIZATION' notification\n osparc.notification.Notifications.postNewOrganization(newMember.getUserId(), orgId);\n })\n .catch(err => {\n const errorMessage = err[\"message\"] || this.tr(\"Something went wrong adding the user\");\n osparc.FlashMessenger.getInstance().logAs(errorMessage, \"ERROR\");\n console.error(err);\n });\n },\n\n __promoteToUser: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const newAccessRights = this.self().getReadAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchMember(this.__currentOrg.getGroupId(), listedMember[\"id\"], newAccessRights)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(`Successfully promoted to ${osparc.data.Roles.ORG[1].label}`));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong promoting to \") + osparc.data.Roles.ORG[1].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __demoteToRestrictedUser: function(listedMember, msg) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const userId = \"id\" in listedMember ? listedMember[\"id\"] : listedMember[\"key\"]\n const newAccessRights = this.self().getNoReadAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchAccessRights(orgId, userId, newAccessRights)\n .then(() => {\n if (msg === undefined) {\n msg = this.tr(`Successfully demoted to ${osparc.data.Roles.ORG[0].label}`);\n }\n osparc.FlashMessenger.getInstance().logAs(msg);\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong demoting to \") + osparc.data.Roles.ORG[0].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __promoteToManager: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const userId = listedMember[\"id\"];\n const newAccessRights = this.self().getWriteAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchAccessRights(orgId, userId, newAccessRights)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(`Successfully promoted to ${osparc.data.Roles.ORG[2].label}`));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong promoting to \") + osparc.data.Roles.ORG[2].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __promoteToAdministrator: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const userId = listedMember[\"id\"];\n const newAccessRights = this.self().getDeleteAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchAccessRights(orgId, userId, newAccessRights)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(`Successfully promoted to ${osparc.data.Roles.ORG[3].label}`));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong promoting to \") + osparc.data.Roles.ORG[3].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __demoteToMember: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const userId = listedMember[\"id\"];\n const newAccessRights = this.self().getReadAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchAccessRights(orgId, userId, newAccessRights)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(`Successfully demoted to ${osparc.data.Roles.ORG[1].label}`));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong demoting to \") + osparc.data.Roles.ORG[1].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __demoteToManager: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const orgId = this.__currentOrg.getGroupId();\n const userId = listedMember[\"id\"];\n const newAccessRights = this.self().getWriteAccess();\n const groupsStore = osparc.store.Groups.getInstance();\n groupsStore.patchAccessRights(orgId, userId, newAccessRights)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(`Successfully demoted to ${osparc.data.Roles.ORG[3].label}`));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong demoting to \") + osparc.data.Roles.ORG[3].label, \"ERROR\");\n console.error(err);\n });\n },\n\n __doDeleteMember: function(listedMember) {\n const groupsStore = osparc.store.Groups.getInstance();\n return groupsStore.removeMember(this.__currentOrg.getGroupId(), listedMember[\"id\"])\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(listedMember[\"name\"] + this.tr(\" successfully removed\"));\n this.__reloadOrgMembers();\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong removing \") + listedMember[\"name\"], \"ERROR\");\n console.error(err);\n });\n },\n\n __deleteMember: function(listedMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n this.__doDeleteMember(listedMember)\n .then(() => this.__reloadOrgMembers());\n },\n\n __deleteMyself: function(orgMember) {\n if (this.__currentOrg === null) {\n return;\n }\n\n const members = this.__currentOrg.getGroupMembers()\n const isThereAnyAdmin = members.some(member => member.getAccessRights()[\"delete\"]);\n const isThereAnyManager = members.some(member => member.getAccessRights()[\"write\"]);\n let rUSure = this.tr(\"Are you sure you want to leave?\");\n if (isThereAnyAdmin) {\n rUSure += `
There is no ${osparc.data.Roles.ORG[2].label} in this Organization.`;\n } else if (isThereAnyManager) {\n rUSure += `
There is no ${osparc.data.Roles.ORG[3].label} in this Organization.`;\n }\n rUSure += \"
\" + this.tr(\"If you Leave, the page will be reloaded.\");\n const confirmationWin = new osparc.ui.window.Confirmation(rUSure).set({\n caption: this.tr(\"Leave Organization\"),\n confirmText: this.tr(\"Leave\"),\n confirmAction: \"delete\"\n });\n confirmationWin.center();\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.__doDeleteMember(orgMember)\n .then(() => window.location.reload());\n }\n }, this);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.TemplatesList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this._add(this.__createIntroText());\n this._add(this.__getTemplatesFilter());\n this._add(this.__getTemplatesList(), {\n flex: 1\n });\n },\n\n members: {\n __currentOrg: null,\n __templatesModel: null,\n\n setCurrentOrg: function(orgModel) {\n if (orgModel === null) {\n return;\n }\n this.__currentOrg = orgModel;\n this.__reloadOrgTemplates();\n },\n\n __createIntroText: function() {\n const msg = this.tr(\"This is the list of \") + osparc.product.Utils.getTemplateAlias({plural: true}) + this.tr(\" shared with this Organization\");\n const intro = new qx.ui.basic.Label().set({\n value: msg,\n alignX: \"left\",\n rich: true,\n font: \"text-13\"\n });\n return intro;\n },\n\n __getTemplatesFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"organizationTemplatesList\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n return filter;\n },\n\n __getTemplatesList: function() {\n const templatesUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3\n });\n\n const templatesModel = this.__templatesModel = new qx.data.Array();\n const templatesCtrl = new qx.data.controller.List(templatesModel, templatesUIList, \"name\");\n templatesCtrl.setDelegate({\n createItem: () => new osparc.desktop.organizations.SharedResourceListItem(\"template\"),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"uuid\", \"model\", null, item, id);\n ctrl.bindProperty(\"uuid\", \"key\", null, item, id);\n ctrl.bindProperty(\"orgId\", \"orgId\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"name\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitleMD\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", {\n converter: data => data.get(item.getOrgId())\n }, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"organizationTemplatesList\");\n item.addListener(\"openMoreInfo\", e => {\n const templateId = e.getData()[\"key\"];\n osparc.data.Resources.get(\"templates\")\n .then(templates => {\n const templateData = templates.find(t => t.uuid === templateId);\n if (templateData) {\n templateData[\"resourceType\"] = \"template\";\n const resourceDetails = new osparc.dashboard.ResourceDetails(templateData).set({\n showOpenButton: false\n });\n osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n }\n });\n });\n }\n });\n\n return templatesUIList;\n },\n\n __reloadOrgTemplates: function() {\n const templatesModel = this.__templatesModel;\n templatesModel.removeAll();\n\n const orgModel = this.__currentOrg;\n if (orgModel === null) {\n return;\n }\n\n const groupId = orgModel.getGroupId();\n osparc.data.Resources.getInstance().getAllPages(\"templates\")\n .then(templates => {\n const orgTemplates = templates.filter(template => groupId in template[\"accessRights\"]);\n orgTemplates.forEach(orgTemplate => {\n const orgTemplateCopy = osparc.utils.Utils.deepCloneObject(orgTemplate);\n orgTemplateCopy[\"orgId\"] = groupId;\n templatesModel.append(qx.data.marshal.Json.createModel(orgTemplateCopy));\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.ServicesList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this._add(this.__createIntroText());\n this._add(this.__getServicesFilter());\n this._add(this.__getServicesList(), {\n flex: 1\n });\n },\n\n members: {\n __currentOrg: null,\n __servicesModel: null,\n\n setCurrentOrg: function(orgModel) {\n if (orgModel === null) {\n return;\n }\n this.__currentOrg = orgModel;\n this.__reloadOrgServices();\n },\n\n __createIntroText: function() {\n const msg = this.tr(\"This is the list of services shared with this Organization\");\n const intro = new qx.ui.basic.Label().set({\n value: msg,\n alignX: \"left\",\n rich: true,\n font: \"text-13\"\n });\n return intro;\n },\n\n __getServicesFilter: function() {\n const filter = new osparc.filter.TextFilter(\"text\", \"organizationServicesList\").set({\n allowStretchX: true,\n margin: [0, 10, 5, 10]\n });\n return filter;\n },\n\n __getServicesList: function() {\n const servicesUIList = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3\n });\n\n const servicesModel = this.__servicesModel = new qx.data.Array();\n const servicesCtrl = new qx.data.controller.List(servicesModel, servicesUIList, \"name\");\n servicesCtrl.setDelegate({\n createItem: () => new osparc.desktop.organizations.SharedResourceListItem(\"service\"),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"key\", \"model\", null, item, id);\n ctrl.bindProperty(\"key\", \"key\", null, item, id);\n ctrl.bindProperty(\"version\", \"version\", null, item, id);\n ctrl.bindProperty(\"orgId\", \"orgId\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"name\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"subtitleMD\", null, item, id);\n ctrl.bindProperty(\"accessRights\", \"accessRights\", {\n converter: data => data.get(item.getOrgId())\n }, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"organizationTemplatesList\");\n item.addListener(\"openMoreInfo\", e => {\n const serviceKey = e.getData()[\"key\"];\n const serviceVersion = e.getData()[\"version\"];\n osparc.store.Services.getService(serviceKey, serviceVersion)\n .then(serviceData => {\n if (serviceData) {\n serviceData[\"resourceType\"] = \"service\";\n const resourceDetails = new osparc.dashboard.ResourceDetails(serviceData).set({\n showOpenButton: false\n });\n osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);\n }\n });\n });\n }\n });\n\n return servicesUIList;\n },\n\n __reloadOrgServices: function() {\n const servicesModel = this.__servicesModel;\n servicesModel.removeAll();\n\n const orgModel = this.__currentOrg;\n if (orgModel === null) {\n return;\n }\n\n const groupId = orgModel.getGroupId();\n osparc.store.Services.getServicesLatest()\n .then(servicesLatest => {\n const orgServices = [];\n Object.keys(servicesLatest).forEach(key => {\n const serviceLatest = servicesLatest[key];\n if (groupId in serviceLatest[\"accessRights\"]) {\n orgServices.push(serviceLatest);\n }\n });\n orgServices.forEach(orgService => {\n const orgServiceCopy = osparc.utils.Utils.deepCloneObject(orgService);\n orgServiceCopy[\"orgId\"] = groupId;\n if (orgServiceCopy[\"thumbnail\"] === null) {\n orgServiceCopy[\"thumbnail\"] = osparc.dashboard.CardBase.PRODUCT_THUMBNAIL;\n }\n servicesModel.append(qx.data.marshal.Json.createModel(orgServiceCopy));\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.CreditsServiceListItem\", {\n extend: osparc.ui.list.ListItem,\n\n construct: function(serviceKey, credits, hours, percentage) {\n this.base(arguments);\n\n const layout = this._getLayout();\n layout.setSpacingX(12);\n layout.setSpacingY(4);\n layout.setColumnFlex(this.self().GRID.ICON.column, 0);\n layout.setColumnFlex(this.self().GRID.NAME.column, 1);\n layout.setColumnFlex(this.self().GRID.TIME.column, 0);\n layout.setColumnFlex(this.self().GRID.CREDITS.column, 0);\n\n const icon = this.getChildControl(\"icon\");\n const name = this.getChildControl(\"title\");\n const serviceMetadata = osparc.service.Utils.getLatest(serviceKey);\n if (serviceMetadata) {\n const source = osparc.utils.Utils.getIconFromResource(serviceMetadata);\n icon.setSource(source);\n name.setValue(serviceMetadata[\"name\"]);\n } else {\n icon.setSource(osparc.dashboard.CardBase.PRODUCT_THUMBNAIL);\n const serviceName = serviceKey.split(\"/\").pop();\n name.setValue(serviceName);\n }\n this.getChildControl(\"percentage\").set({\n maximum: 100,\n value: percentage\n });\n this.getChildControl(\"time\").setValue(hours + \" h\");\n this.getChildControl(\"credits\").setValue(credits + \" used\");\n },\n\n statics: {\n GRID: {\n ICON: {\n column: 0,\n row: 0,\n rowSpan: 2\n },\n NAME: {\n column: 1,\n row: 0\n },\n PERCENTAGE: {\n column: 1,\n row: 1\n },\n TIME: {\n column: 2,\n row: 0,\n rowSpan: 2\n },\n CREDITS: {\n column: 3,\n row: 0,\n rowSpan: 2\n }\n }\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"icon\": {\n control = new osparc.ui.basic.Thumbnail(null, 32, 32).set({\n minHeight: 32,\n minWidth: 32\n });\n control.getChildControl(\"image\").set({\n decorator: \"rounded\",\n });\n this._add(control, this.self().GRID.ICON);\n break;\n }\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-12\",\n alignY: \"middle\",\n maxWidth: 200,\n allowGrowX: true,\n rich: true,\n });\n this._add(control, this.self().GRID.NAME);\n break;\n case \"percentage\":\n control = new qx.ui.indicator.ProgressBar().set({\n backgroundColor: \"transparent\",\n maxHeight: 8,\n margin: 0,\n padding: 0\n });\n control.getChildControl(\"progress\").set({\n backgroundColor: \"strong-main\"\n });\n control.getContentElement().setStyles({\n \"border-radius\": \"2px\"\n });\n this._add(control, this.self().GRID.PERCENTAGE);\n break;\n case \"time\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\"\n });\n this._add(control, this.self().GRID.TIME);\n break;\n case \"credits\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\"\n });\n this._add(control, this.self().GRID.CREDITS);\n break;\n }\n\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n osparc - the simcore frontend\n https://osparc.io\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n License:\n MIT: https://opensource.org/licenses/MIT\n Authors:\n * Odei Maiz (odeimaiz)\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.desktop.preferences.window.APIKeyBase\", {\n extend: osparc.ui.window.Window,\n type: \"abstract\",\n\n construct: function(caption, infoText) {\n this.base(arguments, caption);\n\n this.set({\n layout: new qx.ui.layout.VBox(10),\n autoDestroy: true,\n modal: true,\n showMaximize: false,\n showMinimize: false,\n width: 350,\n clickAwayClose: true\n });\n\n this.__addInfoText(infoText);\n\n this.center();\n },\n\n members: {\n __addInfoText: function(infoText) {\n const introLabel = new qx.ui.basic.Label(infoText).set({\n paddingLeft: 5,\n paddingRight: 5,\n rich: true\n });\n this.add(introLabel);\n }\n }\n});\n","/* ************************************************************************\n osparc - the simcore frontend\n https://osparc.io\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n License:\n MIT: https://opensource.org/licenses/MIT\n Authors:\n * Odei Maiz (odeimaiz)\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.desktop.preferences.window.CreateAPIKey\", {\n extend: osparc.desktop.preferences.window.APIKeyBase,\n\n construct: function() {\n const caption = this.tr(\"Create API Key\");\n const infoText = this.tr(\"Key names must be unique.\");\n this.base(arguments, caption, infoText);\n\n this.__populateWindow();\n },\n\n events: {\n \"finished\": \"qx.event.type.Data\"\n },\n\n members: {\n __form: null,\n\n __populateWindow: function() {\n const form = this.__form = new qx.ui.form.Form();\n\n const keyName = new qx.ui.form.TextField().set({\n required: true\n });\n form.add(keyName, this.tr(\"Key Name\"), null, \"name\");\n this.addListener(\"appear\", () => keyName.focus());\n\n const dateFormat = new qx.util.format.DateFormat(\"dd/MM/yyyy-HH:mm:ss\");\n const expirationDate = new qx.ui.form.DateField();\n form.add(expirationDate, this.tr(\"Expiration Date\"), null, \"expiration\");\n expirationDate.addListener(\"changeValue\", e => {\n const date = e.getData();\n if (date) {\n // allow only future dates\n if (new Date() > new Date(date)) {\n const msg = this.tr(\"Choose a future date\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n expirationDate.resetValue();\n } else {\n expirationDate.setDateFormat(dateFormat);\n }\n }\n });\n\n const formRenderer = new qx.ui.form.renderer.Single(form);\n this.add(formRenderer);\n\n const hBox2 = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n hBox2.add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n const confirmBtn = new qx.ui.form.Button(this.tr(\"Confirm\"));\n confirmBtn.addListener(\"execute\", () => {\n this.fireDataEvent(\"finished\", {\n name: form.getItem(\"name\").getValue(),\n expiration: form.getItem(\"expiration\").getValue()\n });\n }, this);\n hBox2.add(confirmBtn);\n\n this.add(hBox2);\n }\n }\n});\n","/* ************************************************************************\n osparc - the simcore frontend\n https://osparc.io\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n License:\n MIT: https://opensource.org/licenses/MIT\n Authors:\n * Odei Maiz (odeimaiz)\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.desktop.preferences.window.ShowAPIKey\", {\n extend: osparc.desktop.preferences.window.APIKeyBase,\n\n construct: function(key, secret, baseUrl) {\n const caption = this.tr(\"API Key\");\n const infoText = this.tr(\"For your protection, store your access keys securely and do not share them. You will not be able to access the key again once this window is closed.\");\n this.base(arguments, caption, infoText);\n\n this.set({\n clickAwayClose: false\n });\n\n this.__populateTokens(key, secret, baseUrl);\n },\n\n members: {\n __populateTokens: function(key, secret, baseUrl) {\n const hBox1 = this.__createStarredEntry(this.tr(\"Key:\"), key);\n this._add(hBox1);\n\n const hBox2 = this.__createStarredEntry(this.tr(\"Secret:\"), secret);\n this._add(hBox2);\n\n const hBox3 = this.__createEntry(this.tr(\"Base url:\"), baseUrl);\n this._add(hBox3);\n\n const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n appearance: \"margined-layout\"\n });\n const copyAPIKeyBtn = new qx.ui.form.Button(this.tr(\"API Key\"), \"@FontAwesome5Solid/copy/12\");\n copyAPIKeyBtn.addListener(\"execute\", e => {\n if (osparc.utils.Utils.copyTextToClipboard(key)) {\n copyAPIKeyBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n buttonsLayout.add(copyAPIKeyBtn, {\n flex: 1\n });\n const copyAPISecretBtn = new qx.ui.form.Button(this.tr(\"API Secret\"), \"@FontAwesome5Solid/copy/12\");\n copyAPISecretBtn.addListener(\"execute\", e => {\n if (osparc.utils.Utils.copyTextToClipboard(secret)) {\n copyAPISecretBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n buttonsLayout.add(copyAPISecretBtn, {\n flex: 1\n });\n const copyBaseUrlBtn = new qx.ui.form.Button(this.tr(\"Base URL\"), \"@FontAwesome5Solid/copy/12\");\n copyBaseUrlBtn.addListener(\"execute\", e => {\n if (osparc.utils.Utils.copyTextToClipboard(baseUrl)) {\n copyBaseUrlBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n buttonsLayout.add(copyBaseUrlBtn, {\n flex: 1\n });\n this._add(buttonsLayout);\n },\n\n __createStarredEntry: function(title, label) {\n const hBox = this.__createEntry(title);\n if (label) {\n // partially hide the key and secret\n hBox.getChildren()[1].setValue(label.substring(1, 8) + \"****\")\n }\n return hBox;\n },\n\n __createEntry: function(title, label) {\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n padding: 5\n });\n const sTitle = new qx.ui.basic.Label(title).set({\n rich: true,\n width: 60\n });\n hBox.add(sTitle);\n const sLabel = new qx.ui.basic.Label();\n if (label) {\n // partially hide the key and secret\n sLabel.setValue(label);\n }\n hBox.add(sLabel);\n return hBox;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.admin.AdminCenter\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function() {\n this.base(arguments);\n\n const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({\n paddingRight: 10\n });\n this.addWidgetToTabs(miniProfile);\n\n this.__addPricingPlansPage();\n this.__addMaintenancePage();\n this.__addAnnouncementsPage();\n },\n\n members: {\n __addPricingPlansPage: function() {\n const title = this.tr(\"Pricing Plans\");\n const iconSrc = \"@FontAwesome5Solid/dollar-sign/22\";\n const pricingPlans = new osparc.pricing.PlanManager();\n this.addTab(title, iconSrc, pricingPlans);\n },\n\n __addMaintenancePage: function() {\n const title = this.tr(\"Maintenance\");\n const iconSrc = \"@FontAwesome5Solid/wrench/22\";\n const maintenance = new osparc.admin.Maintenance();\n this.addTab(title, iconSrc, maintenance);\n },\n\n __addAnnouncementsPage: function() {\n const title = this.tr(\"Announcements\");\n const iconSrc = \"@FontAwesome5Solid/bullhorn/22\";\n const announcements = new osparc.admin.Announcements();\n this.addTab(title, iconSrc, announcements);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.POCenter\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function() {\n this.base(arguments);\n\n const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({\n paddingRight: 10\n });\n this.addWidgetToTabs(miniProfile);\n\n this.__addUsersPage();\n this.__addPreRegistrationPage();\n this.__addInvitationsPage();\n this.__addProductPage();\n this.__addMsgTemplatesPage();\n },\n\n members: {\n __addUsersPage: function() {\n const title = this.tr(\"Users\");\n const iconSrc = \"@FontAwesome5Solid/user/22\";\n const users = new osparc.po.Users();\n this.addTab(title, iconSrc, users);\n },\n\n __addPreRegistrationPage: function() {\n const title = this.tr(\"PreRegistration\");\n const iconSrc = \"@FontAwesome5Solid/address-card/22\";\n const preRegistration = new osparc.po.PreRegistration();\n this.addTab(title, iconSrc, preRegistration);\n },\n\n __addInvitationsPage: function() {\n const title = this.tr(\"Invitations\");\n const iconSrc = \"@FontAwesome5Solid/envelope/22\";\n const invitations = new osparc.po.Invitations();\n this.addTab(title, iconSrc, invitations);\n },\n\n __addProductPage: function() {\n const title = this.tr(\"Product Info\");\n const iconSrc = \"@FontAwesome5Solid/info/22\";\n const productInfo = new osparc.po.ProductInfo();\n this.addTab(title, iconSrc, productInfo);\n },\n\n __addMsgTemplatesPage: function() {\n const title = this.tr(\"Message Templates\");\n const iconSrc = \"@FontAwesome5Solid/envelope-open/22\";\n const productInfo = new osparc.po.MessageTemplates();\n this.addTab(title, iconSrc, productInfo);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tester.TesterCenter\", {\n extend: osparc.ui.window.TabbedView,\n\n construct: function() {\n this.base(arguments);\n\n const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({\n paddingRight: 10\n });\n this.addWidgetToTabs(miniProfile);\n\n this.__addSocketMessagesPage();\n this.__addConsoleErrorsPage();\n this.__addStaticsPage();\n },\n\n members: {\n __addSocketMessagesPage: function() {\n const title = this.tr(\"Socket Messages\");\n const iconSrc = \"@FontAwesome5Solid/exchange-alt/22\";\n const webSocketMessages = new osparc.tester.WebSocketMessages();\n this.addTab(title, iconSrc, webSocketMessages);\n },\n\n __addConsoleErrorsPage: function() {\n const title = this.tr(\"Console Errors\");\n const iconSrc = \"@FontAwesome5Solid/times/22\";\n const consoleErrors = new osparc.tester.ConsoleErrors();\n this.addTab(title, iconSrc, consoleErrors);\n },\n\n __addStaticsPage: function() {\n const title = this.tr(\"Statics\");\n const iconSrc = \"@FontAwesome5Solid/wrench/22\";\n const maintenance = new osparc.tester.Statics();\n this.addTab(title, iconSrc, maintenance);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n * Ignacio Pascual\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.credits.AutoRecharge\", {\n extend: qx.ui.container.Stack,\n\n construct: function(walletId) {\n this.base(arguments);\n\n const store = osparc.store.Store.getInstance();\n const wallet = store.getWallets().find(w => w.getWalletId() == walletId);\n\n this.__buildLayout();\n this.setWallet(wallet);\n },\n\n properties: {\n wallet: {\n check: \"osparc.data.model.Wallet\",\n init: null,\n nullable: true,\n event: \"changeWallet\",\n apply: \"__applyWallet\"\n }\n },\n\n events: {\n \"addNewPaymentMethod\": \"qx.event.type.Event\",\n \"close\": \"qx.event.type.Event\"\n },\n\n members: {\n __topUpAmountField: null,\n __monthlyLimitField: null,\n __paymentMethodField: null,\n\n __buildLayout: function() {\n this.removeAll();\n\n const titleText = this.tr(\"Auto-recharge\");\n const introText = this.tr(\"Keep your balance running smoothly by automatically setting your credits to be recharged when it runs low.\");\n\n this.__mainContent = new qx.ui.container.Composite(new qx.ui.layout.VBox(15).set({\n alignX: \"center\"\n }))\n const title = new qx.ui.basic.Label(titleText).set({\n marginTop: 25,\n font: \"title-18\"\n });\n const subtitle = new qx.ui.basic.Label(introText).set({\n rich: true,\n font: \"text-14\",\n textAlign: \"center\"\n });\n this.__mainContent.add(title);\n this.__mainContent.add(subtitle);\n this.__mainContent.add(this.__getAutoRechargeForm())\n this.__mainContent.add(this.__getButtons())\n this.add(this.__mainContent)\n\n this.__noPaymentMethodsContent = new qx.ui.container.Composite(new qx.ui.layout.VBox(15).set({\n alignX: \"center\"\n }))\n this.__noPaymentMethodsContent.add(new qx.ui.basic.Label(titleText).set({\n marginTop: 25,\n font: \"title-18\"\n }))\n this.__noPaymentMethodsContent.add(new qx.ui.basic.Label(introText).set({\n rich: true,\n font: \"text-14\",\n textAlign: \"center\"\n }))\n this.__noPaymentMethodsContent.add(new qx.ui.basic.Label(this.tr(\"Before the auto-recharge function can be activated you need to add your first payment method\")).set({\n rich: true,\n font: \"text-14\",\n textAlign: \"center\"\n }))\n const addNewPaymentMethod = new qx.ui.basic.Label(this.tr(\"Add Payment Method\")).set({\n cursor: \"pointer\",\n font: \"link-label-14\",\n textAlign: \"center\"\n });\n addNewPaymentMethod.addListener(\"tap\", () => this.fireEvent(\"addNewPaymentMethod\"));\n this.__noPaymentMethodsContent.add(addNewPaymentMethod)\n this.add(this.__noPaymentMethodsContent)\n\n this.__fetchingView = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignX: \"center\",\n alignY: \"middle\"\n }))\n const image = new qx.ui.basic.Image(\"@FontAwesome5Solid/circle-notch/26\")\n image.getContentElement().addClass(\"rotate\")\n this.__fetchingView.add(image)\n this.add(this.__fetchingView)\n\n this.setSelection([this.__fetchingView])\n },\n\n __applyWallet: function(wallet) {\n let myAccessRights = null;\n if (wallet) {\n myAccessRights = wallet.getMyAccessRights();\n if (myAccessRights[\"write\"]) {\n this.__requestData();\n }\n }\n this.setEnabled(Boolean(myAccessRights && myAccessRights[\"write\"]));\n },\n\n __requestData: async function() {\n const wallet = this.getWallet();\n const paymentMethodSB = this.__paymentMethodField;\n await osparc.desktop.credits.Utils.populatePaymentMethodSelector(wallet, paymentMethodSB);\n if (paymentMethodSB.getChildren().length) {\n this.setSelection([this.__fetchingView])\n // Get auto-recharge data\n const params = {\n url: {\n walletId: wallet.getWalletId()\n }\n };\n osparc.data.Resources.fetch(\"autoRecharge\", \"get\", params)\n .then(arData => this.__populateForm(arData))\n .catch(err => console.error(err.message));\n } else {\n // Wallet has no payment methods\n this.setSelection([this.__noPaymentMethodsContent])\n }\n },\n\n __populateForm: function(arData) {\n this.__enabledField.setValue(arData.enabled);\n this.__topUpAmountField.setValue(arData[\"topUpAmountInUsd\"]);\n if (arData[\"monthlyLimitInUsd\"]) {\n this.__monthlyLimitField.setValue(arData[\"monthlyLimitInUsd\"] > 0 ? arData[\"monthlyLimitInUsd\"] : 0);\n } else {\n this.__monthlyLimitField.setValue(arData[\"topUpCountdown\"] > 0 ? arData[\"topUpCountdown\"]*arData[\"topUpAmountInUsd\"] : 0);\n }\n const paymentMethodSB = this.__paymentMethodField;\n const paymentMethodFound = paymentMethodSB.getSelectables().find(selectable => selectable.getModel() === arData[\"paymentMethodId\"]);\n if (paymentMethodFound) {\n paymentMethodSB.setSelection([paymentMethodFound]);\n }\n this.setSelection([this.__mainContent])\n },\n\n __getAutoRechargeForm: function() {\n const autoRechargeLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(10).set({\n alignX: \"center\"\n })).set({\n marginTop: 20\n });\n\n const enabledLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n allowStretchX: false,\n width: 274\n });\n const enabledTitle = new qx.ui.basic.Label(this.tr(\"Enabled\")).set({\n marginLeft: 2\n })\n const enabledCheckbox = this.__enabledField = new qx.ui.form.CheckBox().set({\n appearance: \"appmotion-buy-credits-checkbox\"\n });\n enabledLayout.add(enabledTitle);\n enabledLayout.add(enabledCheckbox);\n autoRechargeLayout.add(enabledLayout);\n\n const topUpAmountLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n allowStretchX: false,\n marginTop: 15\n });\n const topUpAmountTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const topUpAmountTitle = new qx.ui.basic.Label(this.tr(\"Recharging amount (USD)\")).set({\n marginLeft: 15\n });\n topUpAmountTitleLayout.add(topUpAmountTitle);\n const topUpAmountInfo = new osparc.ui.hint.InfoHint(\"Amount in USD payed when auto-recharge condition is satisfied.\");\n topUpAmountTitleLayout.add(topUpAmountInfo);\n topUpAmountLayout.add(topUpAmountTitleLayout);\n const topUpAmountField = this.__topUpAmountField = new qx.ui.form.Spinner().set({\n maximum: 10000,\n width: 300,\n appearance: \"appmotion-buy-credits-spinner\"\n });\n osparc.store.Store.getInstance().getMinimumAmount()\n .then(minimum => {\n topUpAmountInfo.setHintText(topUpAmountInfo.getText() + `. A minimum amount of ${minimum} USD is required.`);\n topUpAmountField.set({\n minimum\n });\n });\n topUpAmountLayout.add(topUpAmountField);\n autoRechargeLayout.add(topUpAmountLayout);\n\n const monthlyLimitLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n allowStretchX: false\n });\n const monthlyLimitTitleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n const monthlyLimitTitle = new qx.ui.basic.Label(this.tr(\"Monthly limit (USD)\")).set({\n marginLeft: 15\n });\n monthlyLimitTitleLayout.add(monthlyLimitTitle);\n const monthlyLimitTitleInfo = new osparc.ui.hint.InfoHint(this.tr(\"Maximum amount in USD charged within a natural month.\"));\n monthlyLimitTitleLayout.add(monthlyLimitTitleInfo);\n monthlyLimitLayout.add(monthlyLimitTitleLayout);\n const monthlyLimitField = this.__monthlyLimitField = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 100000,\n width: 300,\n appearance: \"appmotion-buy-credits-spinner\"\n });\n monthlyLimitLayout.add(monthlyLimitField);\n const monthlyLimitHelper = new qx.ui.basic.Label(this.tr(\"To disable spending limit, clear input field\")).set({\n font: \"text-12\",\n marginLeft: 15,\n rich: true\n });\n monthlyLimitLayout.add(monthlyLimitHelper);\n autoRechargeLayout.add(monthlyLimitLayout);\n\n const paymentMethodLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({\n allowStretchX: false\n });\n const paymentMethodTitle = new qx.ui.basic.Label(this.tr(\"Pay with\")).set({\n marginLeft: 15\n });\n paymentMethodLayout.add(paymentMethodTitle);\n const paymentMethodField = this.__paymentMethodField = new qx.ui.form.SelectBox().set({\n width: 300,\n appearance: \"appmotion-buy-credits-select\"\n });\n paymentMethodLayout.add(paymentMethodField);\n const addNewPaymentMethod = new qx.ui.basic.Label(this.tr(\"Add Payment Method\")).set({\n marginLeft: 15,\n cursor: \"pointer\",\n font: \"link-label-12\"\n });\n addNewPaymentMethod.addListener(\"tap\", () => this.fireEvent(\"addNewPaymentMethod\"));\n paymentMethodLayout.add(addNewPaymentMethod);\n autoRechargeLayout.add(paymentMethodLayout);\n\n enabledCheckbox.bind(\"value\", monthlyLimitField, \"enabled\")\n enabledCheckbox.bind(\"value\", paymentMethodField, \"enabled\")\n enabledCheckbox.bind(\"value\", topUpAmountField, \"enabled\")\n enabledCheckbox.bind(\"value\", monthlyLimitHelper, \"visibility\", {\n converter: value => value ? \"visible\" : \"hidden\"\n })\n enabledCheckbox.bind(\"value\", addNewPaymentMethod, \"visibility\", {\n converter: value => value ? \"visible\" : \"hidden\"\n })\n\n return autoRechargeLayout;\n },\n\n __getFieldsData: function() {\n return {\n topUpAmountInUsd: this.__topUpAmountField.getValue(),\n monthlyLimitInUsd: this.__monthlyLimitField.getValue(),\n paymentMethodId: this.__paymentMethodField.getSelection()[0].getModel(),\n enabled: this.__enabledField.getValue()\n };\n },\n\n __updateAutoRecharge: function(enabled, fetchButton, successfulMsg) {\n const wallet = this.getWallet();\n fetchButton.setFetching(true);\n const params = {\n url: {\n walletId: wallet.getWalletId()\n },\n data: this.__getFieldsData()\n };\n params.data.enabled = enabled;\n osparc.data.Resources.fetch(\"autoRecharge\", \"put\", params)\n .then(arData => {\n this.__populateForm(arData);\n wallet.setAutoRecharge(arData);\n osparc.FlashMessenger.getInstance().logAs(successfulMsg, \"INFO\");\n this.fireEvent(\"close\");\n })\n .finally(() => fetchButton.setFetching(false));\n },\n\n __getButtons: function() {\n const btnContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n })).set({\n marginTop: 30,\n marginBottom: 15\n });\n const saveAutoRechargeBtn = new osparc.ui.form.FetchButton(this.tr(\"Save and close\")).set({\n appearance: \"appmotion-button-action\"\n });\n const successfulMsg = this.tr(\"Changes on the Auto recharge were successfully saved\");\n saveAutoRechargeBtn.addListener(\"execute\", () => this.__updateAutoRecharge(this.__enabledField.getValue(), saveAutoRechargeBtn, successfulMsg));\n btnContainer.addAt(saveAutoRechargeBtn, 1)\n const cancelBtn = new qx.ui.form.Button(\"Cancel\").set({\n appearance: \"appmotion-button\"\n });\n cancelBtn.addListener(\"execute\", () => this.fireEvent(\"close\"))\n btnContainer.addAt(cancelBtn, 0)\n return btnContainer;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.wallets.MemberListItem\", {\n extend: osparc.ui.list.ListItemWithMenu,\n\n properties: {\n gid: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changeGid\"\n }\n },\n\n events: {\n \"promoteToAccountant\": \"qx.event.type.Data\",\n \"demoteToMember\": \"qx.event.type.Data\",\n \"removeMember\": \"qx.event.type.Data\"\n },\n\n members: {\n // overridden\n _applySubtitleMD: function(value) {\n this.base(arguments, value);\n\n // highlight me\n const email = osparc.auth.Data.getInstance().getEmail();\n if (value && value.includes(email)) {\n this.addState(\"selected\");\n }\n },\n\n // overridden\n _setRole: function() {\n const accessRights = this.getAccessRights();\n const role = this.getChildControl(\"role\");\n if (\"getWrite\" in accessRights && accessRights.getWrite()) {\n role.setValue(osparc.data.Roles.WALLET[2].label);\n } else if (\"getRead\" in accessRights && accessRights.getRead()) {\n role.setValue(osparc.data.Roles.WALLET[1].label);\n }\n },\n\n // overridden\n _getOptionsMenu: function() {\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n const options = this.getOptions();\n if (options === null) {\n return menu;\n }\n\n if (options.includes(\"promoteToAccountant\")) {\n const promoteButton = new qx.ui.menu.Button(this.tr(\"Promote to \") + osparc.data.Roles.WALLET[2].label);\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToAccountant\", {\n gid: this.getGid(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n }\n if (options.includes(\"demoteToMember\")) {\n const demoteButton = new qx.ui.menu.Button(this.tr(\"Demote to \") + osparc.data.Roles.WALLET[1].label);\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToMember\", {\n gid: this.getGid(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n }\n\n if (menu.getChildren().length) {\n menu.addSeparator();\n }\n\n if (options.includes(\"removeMember\")) {\n const accessRights = this.getAccessRights();\n let currentRole = osparc.data.Roles.WALLET[1];\n if (accessRights.getWrite()) {\n currentRole = osparc.data.Roles.WALLET[2];\n }\n const removeButton = new qx.ui.menu.Button(this.tr(\"Remove \") + currentRole.label).set({\n textColor: \"danger-red\"\n });\n removeButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"removeMember\", {\n gid: this.getGid(),\n name: this.getTitle()\n });\n });\n menu.add(removeButton);\n }\n\n return menu;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2006 STZ-IDA, Germany, http://www.stz-ida.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Til Schneider (til132)\n * Martin Wittemann (martinwittemann)\n\n************************************************************************ */\n\n/**\n * A *date chooser* is a small calendar including a navigation bar to switch the shown\n * month. It includes a column for the calendar week and shows one month. Selecting\n * a date is as easy as tapping on it.\n *\n * To be conform with all form widgets, the {@link qx.ui.form.IForm} interface\n * is implemented.\n *\n * The following example creates and adds a date chooser to the root element.\n * A listener alerts the user if a new date is selected.\n *\n * \n * var chooser = new qx.ui.control.DateChooser();\n * this.getRoot().add(chooser, { left : 20, top: 20});\n *\n * chooser.addListener(\"changeValue\", function(e) {\n * alert(e.getData());\n * });\n * \n *\n * Additionally to a selection event an execute event is available which is\n * fired by doubletap or tapping the space / enter key. With this event you\n * can for example save the selection and close the date chooser.\n *\n * @childControl navigation-bar {qx.ui.container.Composite} container for the navigation bar controls\n * @childControl last-year-button-tooltip {qx.ui.tooltip.ToolTip} tooltip for the last year button\n * @childControl last-year-button {qx.ui.form.Button} button to jump to the last year\n * @childControl last-month-button-tooltip {qx.ui.tooltip.ToolTip} tooltip for the last month button\n * @childControl last-month-button {qx.ui.form.Button} button to jump to the last month\n * @childControl next-month-button-tooltip {qx.ui.tooltip.ToolTip} tooltip for the next month button\n * @childControl next-month-button {qx.ui.form.Button} button to jump to the next month\n * @childControl next-year-button-tooltip {qx.ui.tooltip.ToolTip} tooltip for the next year button\n * @childControl next-year-button {qx.ui.form.Button} button to jump to the next year\n * @childControl month-year-label {qx.ui.basic.Label} shows the current month and year\n * @childControl week {qx.ui.basic.Label} week label (used multiple times)\n * @childControl weekday {qx.ui.basic.Label} weekday label (used multiple times)\n * @childControl day {qx.ui.basic.Label} day label (used multiple times)\n * @childControl date-pane {qx.ui.container.Composite} the pane used to position the week, weekday and day labels\n *\n */\nqx.Class.define(\"qx.ui.control.DateChooser\",\n{\n extend : qx.ui.core.Widget,\n include : [\n qx.ui.core.MExecutable,\n qx.ui.form.MForm\n ],\n implement : [\n qx.ui.form.IExecutable,\n qx.ui.form.IForm,\n qx.ui.form.IDateForm\n ],\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * @param date {Date ? null} The initial date to show. If null\n * the current day (today) is shown.\n */\n construct : function(date)\n {\n this.base(arguments);\n\n // set the layout\n var layout = new qx.ui.layout.VBox();\n this._setLayout(layout);\n\n // create the child controls\n this._createChildControl(\"navigation-bar\");\n this._createChildControl(\"date-pane\");\n\n // Support for key events\n this.addListener(\"keypress\", this._onKeyPress);\n\n // initialize format - moved from statics{} to constructor due to [BUG #7149]\n var DateChooser = qx.ui.control.DateChooser;\n if (!DateChooser.MONTH_YEAR_FORMAT) {\n DateChooser.MONTH_YEAR_FORMAT = qx.locale.Date.getDateTimeFormat(\"yyyyMMMM\", \"MMMM yyyy\");\n }\n\n // Show the right date\n var shownDate = (date != null) ? date : new Date();\n this.showMonth(shownDate.getMonth(), shownDate.getFullYear());\n\n // listen for locale changes\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().addListener(\"changeLocale\", this._updateDatePane, this);\n }\n\n // register pointer up and down handler\n this.addListener(\"pointerdown\", this._onPointerUpDown, this);\n this.addListener(\"pointerup\", this._onPointerUpDown, this);\n },\n\n\n\n /*\n *****************************************************************************\n STATICS\n *****************************************************************************\n */\n\n statics :\n {\n /**\n * @type {string} The format for the date year label at the top center.\n */\n MONTH_YEAR_FORMAT : null,\n\n /**\n * @type {string} The format for the weekday labels (the headers of the date table).\n */\n WEEKDAY_FORMAT : \"EE\",\n\n /**\n * @type {string} The format for the week numbers (the labels of the left column).\n */\n WEEK_FORMAT : \"ww\"\n },\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"datechooser\"\n },\n\n // overridden\n width :\n {\n refine : true,\n init : 200\n },\n\n // overridden\n height :\n {\n refine : true,\n init : 150\n },\n\n /** The currently shown month. 0 = january, 1 = february, and so on. */\n shownMonth :\n {\n check : \"Integer\",\n init : null,\n nullable : true,\n event : \"changeShownMonth\"\n },\n\n /** The currently shown year. */\n shownYear :\n {\n check : \"Integer\",\n init : null,\n nullable : true,\n event : \"changeShownYear\"\n },\n\n /** The date value of the widget. */\n value :\n {\n check : \"Date\",\n init : null,\n nullable : true,\n event : \"changeValue\",\n apply : \"_applyValue\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n __weekdayLabelArr : null,\n __dayLabelArr : null,\n __weekLabelArr : null,\n\n\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates :\n {\n invalid : true\n },\n\n\n /*\n ---------------------------------------------------------------------------\n WIDGET INTERNALS\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n // NAVIGATION BAR STUFF\n case \"navigation-bar\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox());\n\n // Add the navigation bar elements\n control.add(this.getChildControl(\"last-year-button\"));\n control.add(this.getChildControl(\"last-month-button\"));\n control.add(this.getChildControl(\"month-year-label\"), {flex: 1});\n control.add(this.getChildControl(\"next-month-button\"));\n control.add(this.getChildControl(\"next-year-button\"));\n\n this._add(control);\n break;\n\n case \"last-year-button-tooltip\":\n control = new qx.ui.tooltip.ToolTip(this.tr(\"Last year\"));\n break;\n\n case \"last-year-button\":\n control = new qx.ui.toolbar.Button();\n control.addState(\"lastYear\");\n control.setFocusable(false);\n control.setToolTip(this.getChildControl(\"last-year-button-tooltip\"));\n control.addListener(\"tap\", this._onNavButtonTap, this);\n break;\n\n case \"last-month-button-tooltip\":\n control = new qx.ui.tooltip.ToolTip(this.tr(\"Last month\"));\n break;\n\n case \"last-month-button\":\n control = new qx.ui.toolbar.Button();\n control.addState(\"lastMonth\");\n control.setFocusable(false);\n control.setToolTip(this.getChildControl(\"last-month-button-tooltip\"));\n control.addListener(\"tap\", this._onNavButtonTap, this);\n break;\n\n case \"next-month-button-tooltip\":\n control = new qx.ui.tooltip.ToolTip(this.tr(\"Next month\"));\n break;\n\n case \"next-month-button\":\n control = new qx.ui.toolbar.Button();\n control.addState(\"nextMonth\");\n control.setFocusable(false);\n control.setToolTip(this.getChildControl(\"next-month-button-tooltip\"));\n control.addListener(\"tap\", this._onNavButtonTap, this);\n break;\n\n case \"next-year-button-tooltip\":\n control = new qx.ui.tooltip.ToolTip(this.tr(\"Next year\"));\n break;\n\n case \"next-year-button\":\n control = new qx.ui.toolbar.Button();\n control.addState(\"nextYear\");\n control.setFocusable(false);\n control.setToolTip(this.getChildControl(\"next-year-button-tooltip\"));\n control.addListener(\"tap\", this._onNavButtonTap, this);\n break;\n\n case \"month-year-label\":\n control = new qx.ui.basic.Label();\n control.setAllowGrowX(true);\n control.setAnonymous(true);\n break;\n\n case \"week\":\n control = new qx.ui.basic.Label();\n control.setAllowGrowX(true);\n control.setAllowGrowY(true);\n control.setSelectable(false);\n control.setAnonymous(true);\n control.setCursor(\"default\");\n break;\n\n case \"weekday\":\n control = new qx.ui.basic.Label();\n control.setAllowGrowX(true);\n control.setAllowGrowY(true);\n control.setSelectable(false);\n control.setAnonymous(true);\n control.setCursor(\"default\");\n break;\n\n case \"day\":\n control = new qx.ui.basic.Label();\n control.setAllowGrowX(true);\n control.setAllowGrowY(true);\n control.setCursor(\"default\");\n control.addListener(\"pointerdown\", this._onDayTap, this);\n control.addListener(\"dbltap\", this._onDayDblTap, this);\n break;\n\n case \"date-pane\":\n var controlLayout = new qx.ui.layout.Grid();\n control = new qx.ui.container.Composite(controlLayout);\n\n for (var i = 0; i < 8; i++) {\n controlLayout.setColumnFlex(i, 1);\n }\n\n for (var i = 0; i < 7; i++) {\n controlLayout.setRowFlex(i, 1);\n }\n\n // Create the weekdays\n // Add an empty label as spacer for the week numbers\n var label = this.getChildControl(\"week#0\");\n label.addState(\"header\");\n control.add(label, {column: 0, row: 0});\n\n this.__weekdayLabelArr = [];\n for (var i=0; i<7; i++)\n {\n label = this.getChildControl(\"weekday#\" + i);\n control.add(label, {column: i + 1, row: 0});\n this.__weekdayLabelArr.push(label);\n }\n\n // Add the days\n this.__dayLabelArr = [];\n this.__weekLabelArr = [];\n\n for (var y = 0; y < 6; y++)\n {\n // Add the week label\n var label = this.getChildControl(\"week#\" + (y+1));\n control.add(label, {column: 0, row: y + 1});\n this.__weekLabelArr.push(label);\n\n // Add the day labels\n for (var x = 0; x < 7; x++)\n {\n var label = this.getChildControl(\"day#\" + ((y*7)+x));\n control.add(label, {column:x + 1, row:y + 1});\n this.__dayLabelArr.push(label);\n }\n }\n\n this._add(control);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n // apply methods\n _applyValue : function(value, old)\n {\n if ((value != null) && (this.getShownMonth() != value.getMonth() || this.getShownYear() != value.getFullYear()))\n {\n // The new date is in another month -> Show that month\n this.showMonth(value.getMonth(), value.getFullYear());\n }\n else\n {\n // The new date is in the current month -> Just change the states\n var newDay = (value == null) ? -1 : value.getDate();\n\n for (var i=0; i<6*7; i++)\n {\n var dayLabel = this.__dayLabelArr[i];\n\n if (dayLabel.hasState(\"otherMonth\"))\n {\n if (dayLabel.hasState(\"selected\")) {\n dayLabel.removeState(\"selected\");\n }\n }\n else\n {\n var day = parseInt(dayLabel.getValue(), 10);\n\n if (day == newDay) {\n dayLabel.addState(\"selected\");\n } else if (dayLabel.hasState(\"selected\")) {\n dayLabel.removeState(\"selected\");\n }\n }\n }\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n EVENT HANDLER\n ---------------------------------------------------------------------------\n */\n\n /**\n * Handler which stops the propagation of the tap event if\n * the navigation bar or calendar headers will be tapped.\n *\n * @param e {qx.event.type.Pointer} The pointer up / down event\n */\n _onPointerUpDown : function(e) {\n var target = e.getTarget();\n\n if (target == this.getChildControl(\"navigation-bar\") ||\n target == this.getChildControl(\"date-pane\")) {\n e.stopPropagation();\n return;\n }\n },\n\n\n /**\n * Event handler. Called when a navigation button has been tapped.\n *\n * @param evt {qx.event.type.Data} The data event.\n */\n _onNavButtonTap : function(evt)\n {\n var year = this.getShownYear();\n var month = this.getShownMonth();\n\n switch(evt.getCurrentTarget())\n {\n case this.getChildControl(\"last-year-button\"):\n year--;\n break;\n\n case this.getChildControl(\"last-month-button\"):\n month--;\n\n if (month < 0)\n {\n month = 11;\n year--;\n }\n\n break;\n\n case this.getChildControl(\"next-month-button\"):\n month++;\n\n if (month >= 12)\n {\n month = 0;\n year++;\n }\n\n break;\n\n case this.getChildControl(\"next-year-button\"):\n year++;\n break;\n }\n\n this.showMonth(month, year);\n },\n\n\n /**\n * Event handler. Called when a day has been tapped.\n *\n * @param evt {qx.event.type.Data} The event.\n */\n _onDayTap : function(evt)\n {\n var time = evt.getCurrentTarget().dateTime;\n this.setValue(new Date(time));\n },\n\n\n /**\n * Event handler. Called when a day has been double-tapped.\n */\n _onDayDblTap : function() {\n this.execute();\n },\n\n\n /**\n * Event handler. Called when a key was pressed.\n *\n * @param evt {qx.event.type.Data} The event.\n */\n _onKeyPress : function(evt)\n {\n var dayIncrement = null;\n var monthIncrement = null;\n var yearIncrement = null;\n\n if (evt.getModifiers() == 0)\n {\n switch(evt.getKeyIdentifier())\n {\n case \"Left\":\n dayIncrement = -1;\n break;\n\n case \"Right\":\n dayIncrement = 1;\n break;\n\n case \"Up\":\n dayIncrement = -7;\n break;\n\n case \"Down\":\n dayIncrement = 7;\n break;\n\n case \"PageUp\":\n monthIncrement = -1;\n break;\n\n case \"PageDown\":\n monthIncrement = 1;\n break;\n\n case \"Escape\":\n if (this.getValue() != null)\n {\n this.setValue(null);\n return;\n }\n\n break;\n\n case \"Enter\":\n case \"Space\":\n if (this.getValue() != null) {\n this.execute();\n }\n\n return;\n }\n }\n else if (evt.isShiftPressed())\n {\n switch(evt.getKeyIdentifier())\n {\n case \"PageUp\":\n yearIncrement = -1;\n break;\n\n case \"PageDown\":\n yearIncrement = 1;\n break;\n }\n }\n\n if (dayIncrement != null || monthIncrement != null || yearIncrement != null)\n {\n var date = this.getValue();\n\n if (date != null) {\n date = new Date(date.getTime());\n }\n\n if (date == null) {\n date = new Date();\n }\n else\n {\n if (dayIncrement != null){date.setDate(date.getDate() + dayIncrement);}\n if (monthIncrement != null){date.setMonth(date.getMonth() + monthIncrement);}\n if (yearIncrement != null){date.setFullYear(date.getFullYear() + yearIncrement);}\n }\n\n this.setValue(date);\n }\n },\n\n\n /**\n * Shows a certain month.\n *\n * @param month {Integer ? null} the month to show (0 = january). If not set\n * the month will remain the same.\n * @param year {Integer ? null} the year to show. If not set the year will\n * remain the same.\n */\n showMonth : function(month, year)\n {\n if ((month != null && month != this.getShownMonth()) || (year != null && year != this.getShownYear()))\n {\n if (month != null) {\n this.setShownMonth(month);\n }\n\n if (year != null) {\n this.setShownYear(year);\n }\n\n this._updateDatePane();\n }\n },\n\n\n /**\n * Event handler. Used to handle the key events.\n *\n * @param e {qx.event.type.Data} The event.\n */\n handleKeyPress : function(e) {\n this._onKeyPress(e);\n },\n\n\n /**\n * Updates the date pane.\n */\n _updateDatePane : function()\n {\n var DateChooser = qx.ui.control.DateChooser;\n\n var today = new Date();\n var todayYear = today.getFullYear();\n var todayMonth = today.getMonth();\n var todayDayOfMonth = today.getDate();\n\n var selDate = this.getValue();\n var selYear = (selDate == null) ? -1 : selDate.getFullYear();\n var selMonth = (selDate == null) ? -1 : selDate.getMonth();\n var selDayOfMonth = (selDate == null) ? -1 : selDate.getDate();\n\n var shownMonth = this.getShownMonth();\n var shownYear = this.getShownYear();\n\n var startOfWeek = qx.locale.Date.getWeekStart();\n\n // Create a help date that points to the first of the current month\n var helpDate = new Date(this.getShownYear(), this.getShownMonth(), 1);\n\n var monthYearFormat = new qx.util.format.DateFormat(DateChooser.MONTH_YEAR_FORMAT);\n this.getChildControl(\"month-year-label\").setValue(monthYearFormat.format(helpDate));\n\n // Show the day names\n var firstDayOfWeek = helpDate.getDay();\n var firstSundayInMonth = 1 + ((7 - firstDayOfWeek) % 7);\n var weekDayFormat = new qx.util.format.DateFormat(DateChooser.WEEKDAY_FORMAT);\n\n for (var i=0; i<7; i++)\n {\n var day = (i + startOfWeek) % 7;\n\n var dayLabel = this.__weekdayLabelArr[i];\n\n helpDate.setDate(firstSundayInMonth + day);\n dayLabel.setValue(weekDayFormat.format(helpDate));\n\n if (qx.locale.Date.isWeekend(day)) {\n dayLabel.addState(\"weekend\");\n } else {\n dayLabel.removeState(\"weekend\");\n }\n }\n\n // Show the days\n helpDate = new Date(shownYear, shownMonth, 1, 12, 0, 0);\n var nrDaysOfLastMonth = (7 + firstDayOfWeek - startOfWeek) % 7;\n helpDate.setDate(helpDate.getDate() - nrDaysOfLastMonth);\n\n var weekFormat = new qx.util.format.DateFormat(DateChooser.WEEK_FORMAT);\n\n for (var week=0; week<6; week++)\n {\n this.__weekLabelArr[week].setValue(weekFormat.format(helpDate));\n\n for (var i=0; i<7; i++)\n {\n var dayLabel = this.__dayLabelArr[week * 7 + i];\n\n var year = helpDate.getFullYear();\n var month = helpDate.getMonth();\n var dayOfMonth = helpDate.getDate();\n\n var isSelectedDate = (selYear == year && selMonth == month && selDayOfMonth == dayOfMonth);\n\n if (isSelectedDate) {\n dayLabel.addState(\"selected\");\n } else {\n dayLabel.removeState(\"selected\");\n }\n\n if (month != shownMonth) {\n dayLabel.addState(\"otherMonth\");\n } else {\n dayLabel.removeState(\"otherMonth\");\n }\n\n var isToday = (year == todayYear && month == todayMonth && dayOfMonth == todayDayOfMonth);\n\n if (isToday) {\n dayLabel.addState(\"today\");\n } else {\n dayLabel.removeState(\"today\");\n }\n\n dayLabel.setValue(\"\" + dayOfMonth);\n dayLabel.dateTime = helpDate.getTime();\n\n // Go to the next day\n helpDate.setDate(helpDate.getDate() + 1);\n }\n }\n\n monthYearFormat.dispose();\n weekDayFormat.dispose();\n weekFormat.dispose();\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n DESTRUCTOR\n *****************************************************************************\n */\n\n destruct : function()\n {\n if (qx.core.Environment.get(\"qx.dynlocale\")) {\n qx.locale.Manager.getInstance().removeListener(\"changeLocale\", this._updateDatePane, this);\n }\n\n this.__weekdayLabelArr = this.__dayLabelArr = this.__weekLabelArr = null;\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.store.LicensedItems\", {\n extend: qx.core.Object,\n type: \"singleton\",\n\n construct: function() {\n this.base(arguments);\n\n this.__licensedItems = {};\n },\n\n statics: {\n getLowerLicensedItems: function(licensedItems, key, version) {\n const lowerLicensedItems = [];\n licensedItems.forEach(licensedItem => {\n if (licensedItem[\"key\"] === key && licensedItem[\"version\"] < version) {\n lowerLicensedItems.push(licensedItem);\n }\n });\n return lowerLicensedItems;\n },\n\n seatsToNSeats: function(seats) {\n let nSeats = 0;\n seats.forEach(seat => {\n if (\"numOfSeats\" in seat) {\n nSeats += seat[\"numOfSeats\"];\n } else if (\"getNumOfSeats\" in seat) {\n nSeats += seat.getNumOfSeats();\n }\n });\n return nSeats;\n },\n },\n\n members: {\n __licensedItems: null,\n\n getLicensedItems: function() {\n if (Object.keys(this.__licensedItems).length) {\n return new Promise(resolve => resolve(this.__licensedItems));\n }\n\n return osparc.data.Resources.getInstance().getAllPages(\"licensedItems\")\n .then(licensedItemsData => {\n licensedItemsData.forEach(licensedItemData => this.__addLicensedItemsToCache(licensedItemData));\n return this.__licensedItems;\n });\n },\n\n __addLicensedItemsToCache: function(licensedItemData) {\n const licensedItem = new osparc.data.model.LicensedItem(licensedItemData);\n this.__licensedItems[licensedItem.getLicensedItemId()] = licensedItem;\n },\n\n getPurchasedLicensedItems: function(walletId, urlParams, options = {}) {\n let purchasesParams = {\n url: {\n walletId,\n offset: 0,\n limit: 49,\n }\n };\n if (urlParams) {\n purchasesParams.url = Object.assign(purchasesParams.url, urlParams);\n }\n return osparc.data.Resources.fetch(\"licensedItems\", \"purchases\", purchasesParams, options);\n },\n\n purchaseLicensedItem: function(licensedItemId, walletId, pricingPlanId, pricingUnitId, numOfSeats) {\n const params = {\n url: {\n licensedItemId\n },\n data: {\n \"wallet_id\": walletId,\n \"pricing_plan_id\": pricingPlanId,\n \"pricing_unit_id\": pricingUnitId,\n \"num_of_seats\": numOfSeats, // this should go away\n },\n }\n return osparc.data.Resources.fetch(\"licensedItems\", \"purchase\", params);\n },\n\n getCheckedOutLicensedItems: function(walletId, urlParams, options = {}) {\n let purchasesParams = {\n url: {\n walletId,\n offset: 0,\n limit: 49,\n }\n };\n if (urlParams) {\n purchasesParams.url = Object.assign(purchasesParams.url, urlParams);\n }\n return osparc.data.Resources.fetch(\"licensedItems\", \"checkouts\", purchasesParams, options);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.data.model.LicensedItem\", {\n extend: qx.core.Object,\n\n /**\n * @param licensedItemData {Object} Object containing the serialized LicensedItem Data\n */\n construct: function(licensedItemData) {\n this.base(arguments);\n\n let thumbnail = \"\";\n let date = null;\n let licensedResources = [];\n if (licensedItemData[\"licensedResources\"]) {\n if (licensedItemData[\"licensedResources\"].length) {\n const firstItem = licensedItemData[\"licensedResources\"][0][\"source\"];\n if (firstItem[\"thumbnail\"]) {\n thumbnail = firstItem[\"thumbnail\"];\n }\n if (firstItem[\"features\"] && firstItem[\"features\"][\"date\"]) {\n date = firstItem[\"features\"][\"date\"];\n }\n }\n licensedItemData[\"licensedResources\"].forEach(licensedRsrc => {\n const licensedItemResource = new osparc.data.model.LicensedItemResource(licensedRsrc[\"source\"]);\n if (licensedItemData[\"termsOfUseUrl\"]) {\n licensedItemResource.set({\n termsOfUseUrl: licensedItemData[\"termsOfUseUrl\"],\n })\n }\n licensedResources.push(licensedItemResource);\n });\n }\n let categoryIcon = \"@FontAwesome5Solid/shopping-bag/20\";\n if (licensedItemData.categoryIcon) {\n categoryIcon = licensedItemData.categoryIcon;\n } else if (qx.util.ResourceManager.getInstance().has(`osparc/market/${licensedItemData.categoryId}.svg`)) {\n categoryIcon = `osparc/market/${licensedItemData.categoryId}.svg`;\n }\n\n this.set({\n licensedItemId: licensedItemData.licensedItemId,\n categoryId: licensedItemData.categoryId,\n categoryDisplay: licensedItemData.categoryDisplay,\n categoryIcon: categoryIcon,\n pricingPlanId: licensedItemData.pricingPlanId,\n key: licensedItemData.key,\n version: licensedItemData.version,\n thumbnail: thumbnail,\n displayName: licensedItemData.displayName,\n date: new Date(date),\n licensedResources: licensedResources,\n seats: licensedItemData.seats || [],\n });\n },\n\n properties: {\n licensedItemId: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeLicensedItemId\",\n },\n\n categoryId: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeCategoryId\",\n },\n\n categoryDisplay: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeCategoryDisplay\",\n },\n\n categoryIcon: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeCategoryIcon\",\n },\n\n pricingPlanId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changePricingPlanId\",\n },\n\n key: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeKey\",\n },\n\n version: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeVersion\",\n },\n\n thumbnail: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeThumbnail\",\n },\n\n displayName: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeDisplayName\",\n },\n\n date: {\n check: \"Date\",\n nullable: false,\n init: null,\n event: \"changeDate\",\n },\n\n licensedResources: {\n check: \"Array\",\n nullable: false,\n init: [],\n event: \"changeLicensedResources\",\n },\n\n seats: {\n check: \"Array\",\n nullable: false,\n init: [],\n event: \"changeSeats\",\n },\n },\n\n statics: {\n addSeatsFromPurchases: function(licensedItems, purchases) {\n // reset seats\n Object.values(licensedItems).forEach(licensedItem => licensedItem.setSeats([]));\n // populate seats\n purchases.forEach(purchase => {\n const {\n key,\n version,\n } = purchase;\n Object.values(licensedItems).forEach(licensedItem => {\n if (licensedItem.getKey() === key && licensedItem.getVersion() <= version) {\n licensedItem.getSeats().push({\n licensedItemId: purchase[\"licensedItemId\"],\n licensedItemPurchaseId: purchase[\"licensedItemPurchaseId\"],\n numOfSeats: purchase[\"numOfSeats\"],\n expireAt: new Date(purchase[\"expireAt\"]),\n });\n }\n });\n })\n },\n },\n\n members: {\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.VipMarket\", {\n extend: qx.ui.splitpane.Pane,\n\n construct: function(licensedItems) {\n this.base(arguments, \"horizontal\");\n\n this.setOffset(5);\n this.getChildControl(\"splitter\").set({\n width: 1,\n backgroundColor: \"text\",\n opacity: 0.3,\n });\n this.getChildControl(\"slider\").set({\n width: 2,\n backgroundColor: \"text\",\n opacity: 1,\n });\n\n this.__buildLayout();\n\n if (licensedItems) {\n this.setLicensedItems(licensedItems);\n }\n },\n\n events: {\n \"modelPurchased\": \"qx.event.type.Event\",\n \"importMessageSent\": \"qx.event.type.Event\",\n },\n\n properties: {\n openBy: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeOpenBy\",\n },\n\n category: {\n check: \"String\",\n init: null,\n nullable: true,\n },\n },\n\n members: {\n __anatomicalBundles: null,\n __anatomicalBundlesModel: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"left-side\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({\n alignY: \"middle\",\n paddingRight: 5,\n });\n this.add(control, 0); // flex: 0\n break;\n case \"right-side\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({\n alignY: \"middle\",\n paddingLeft: 5,\n });\n this.add(control, 1); // flex: 1\n break;\n case \"toolbar-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({\n alignY: \"middle\",\n });\n this.getChildControl(\"left-side\").add(control);\n break;\n case \"sort-button\":\n control = new osparc.vipMarket.SortModelsButtons().set({\n alignY: \"bottom\",\n maxHeight: 27,\n });\n this.getChildControl(\"toolbar-layout\").add(control);\n break;\n case \"filter-text\":\n control = new osparc.filter.TextFilter(\"text\", \"vipModels\").set({\n alignY: \"middle\",\n allowGrowY: false,\n allowGrowX: true,\n marginRight: 5,\n });\n control.getChildControl(\"textfield\").set({\n backgroundColor: \"transparent\",\n allowGrowX: true,\n });\n this.addListener(\"appear\", () => control.getChildControl(\"textfield\").focus());\n this.getChildControl(\"toolbar-layout\").add(control, {\n flex: 1\n });\n break;\n case \"models-list\":\n control = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 5,\n width: 250,\n backgroundColor: \"transparent\",\n });\n this.getChildControl(\"left-side\").add(control, {\n flex: 1\n });\n break;\n case \"models-details\": {\n control = new osparc.vipMarket.LicensedItemDetails().set({\n padding: 5,\n });\n const scrollView = new qx.ui.container.Scroll();\n scrollView.add(control);\n this.bind(\"openBy\", control, \"openBy\");\n this.getChildControl(\"right-side\").add(scrollView, {\n flex: 1\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"sort-button\");\n this.getChildControl(\"filter-text\");\n const modelsUIList = this.getChildControl(\"models-list\");\n\n const anatomicalModelsModel = this.__anatomicalBundlesModel = new qx.data.Array();\n const membersCtrl = new qx.data.controller.List(anatomicalModelsModel, modelsUIList, \"displayName\");\n membersCtrl.setDelegate({\n createItem: () => new osparc.vipMarket.LicensedItemListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"key\", \"key\", null, item, id);\n ctrl.bindProperty(\"version\", \"version\", null, item, id);\n ctrl.bindProperty(\"thumbnail\", \"thumbnail\", null, item, id);\n ctrl.bindProperty(\"displayName\", \"displayName\", null, item, id);\n ctrl.bindProperty(\"date\", \"date\", null, item, id);\n ctrl.bindProperty(\"licensedItemId\", \"licensedItemId\", null, item, id);\n ctrl.bindProperty(\"pricingPlanId\", \"pricingPlanId\", null, item, id);\n ctrl.bindProperty(\"seats\", \"seats\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"vipModels\");\n },\n });\n\n const loadingModel = {\n id: 0,\n thumbnail: \"@FontAwesome5Solid/spinner/32\",\n name: this.tr(\"Loading\"),\n };\n this.__anatomicalBundlesModel.append(qx.data.marshal.Json.createModel(loadingModel));\n\n const anatomicModelDetails = this.getChildControl(\"models-details\");\n\n modelsUIList.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const licensedItemId = selection[0].getLicensedItemId();\n const licensedItemBundle = this.__anatomicalBundles.find(anatomicalBundle => anatomicalBundle.getLicensedItemId() === licensedItemId);\n if (licensedItemBundle) {\n anatomicModelDetails.setAnatomicalModelsData(licensedItemBundle);\n return;\n }\n }\n anatomicModelDetails.setAnatomicalModelsData(null);\n }, this);\n },\n\n setLicensedItems: function(licensedBundles) {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (!contextWallet) {\n return;\n }\n\n this.__anatomicalBundles = licensedBundles;\n\n this.__populateModels();\n\n const anatomicModelDetails = this.getChildControl(\"models-details\");\n if (!anatomicModelDetails.hasListener(\"modelPurchaseRequested\")) {\n anatomicModelDetails.addListener(\"modelPurchaseRequested\", e => {\n const {\n licensedItemId,\n pricingPlanId,\n pricingUnitId,\n } = e.getData();\n this.__modelPurchaseRequested(licensedItemId, pricingPlanId, pricingUnitId);\n }, this);\n }\n if (!anatomicModelDetails.hasListener(\"modelImportRequested\")) {\n anatomicModelDetails.addListener(\"modelImportRequested\", e => {\n const {\n modelId,\n categoryId,\n } = e.getData();\n this.__sendImportModelMessage(modelId, categoryId);\n }, this);\n }\n },\n\n __populateModels: function(selectLicensedItemId) {\n const models = this.__anatomicalBundles;\n\n this.__anatomicalBundlesModel.removeAll();\n const sortModel = sortBy => {\n models.sort((a, b) => {\n // first criteria\n const nASeats = osparc.store.LicensedItems.seatsToNSeats(a.getSeats());\n const nBSeats = osparc.store.LicensedItems.seatsToNSeats(b.getSeats());\n if (nBSeats !== nASeats) {\n // nSeats first\n return nBSeats - nASeats;\n }\n // second criteria\n if (sortBy) {\n if (sortBy[\"sort\"] === \"name\") {\n if (sortBy[\"order\"] === \"down\") {\n // A -> Z\n return a.getDisplayName().localeCompare(b.getDisplayName());\n }\n return b.getDisplayName().localeCompare(a.getDisplayName());\n } else if (sortBy[\"sort\"] === \"date\") {\n if (sortBy[\"order\"] === \"down\") {\n // Now -> Yesterday\n return b.getDate() - a.getDate();\n }\n return a.getDate() - b.getDate();\n }\n }\n // default criteria\n // A -> Z\n return a.getDisplayName().localeCompare(b.getDisplayName());\n });\n };\n sortModel();\n models.forEach(model => this.__anatomicalBundlesModel.append(qx.data.marshal.Json.createModel(model)));\n\n this.getChildControl(\"sort-button\").addListener(\"sortBy\", e => {\n this.__anatomicalBundlesModel.removeAll();\n const sortBy = e.getData();\n sortModel(sortBy);\n models.forEach(model => this.__anatomicalBundlesModel.append(qx.data.marshal.Json.createModel(model)));\n }, this);\n\n // select model after timeout, there is something that changes the selection to empty after populating the list\n setTimeout(() => {\n const modelsUIList = this.getChildControl(\"models-list\");\n if (selectLicensedItemId) {\n const entryFound = modelsUIList.getSelectables().find(entry => \"getLicensedItemId\" in entry && entry.getLicensedItemId() === selectLicensedItemId);\n modelsUIList.setSelection([entryFound]);\n } else if (modelsUIList.getSelectables().length) {\n // select first\n modelsUIList.setSelection([modelsUIList.getSelectables()[0]]);\n }\n }, 100);\n },\n\n __modelPurchaseRequested: function(licensedItemId, pricingPlanId, pricingUnitId) {\n const store = osparc.store.Store.getInstance();\n const contextWallet = store.getContextWallet();\n if (!contextWallet) {\n return;\n }\n const walletId = contextWallet.getWalletId();\n let numOfSeats = null;\n const pricingUnit = osparc.store.Pricing.getInstance().getPricingUnit(pricingPlanId, pricingUnitId);\n if (pricingUnit) {\n numOfSeats = parseInt(pricingUnit.getExtraInfo()[\"num_of_seats\"]);\n }\n const licensedItemsStore = osparc.store.LicensedItems.getInstance();\n licensedItemsStore.purchaseLicensedItem(licensedItemId, walletId, pricingPlanId, pricingUnitId, numOfSeats)\n .then(purchaseData => {\n const nSeats = purchaseData[\"numOfSeats\"];\n let msg = nSeats;\n msg += \" seat\" + (nSeats > 1 ? \"s\" : \"\");\n msg += \" rented until \" + osparc.utils.Utils.formatDate(new Date(purchaseData[\"expireAt\"]));\n osparc.FlashMessenger.getInstance().logAs(msg, \"INFO\");\n\n const found = this.__anatomicalBundles.find(model => model.getLicensedItemId() === licensedItemId);\n if (found) {\n found.getSeats().push({\n licensedItemId: purchaseData[\"licensedItemId\"],\n licensedItemPurchaseId: purchaseData[\"licensedItemPurchaseId\"],\n numOfSeats: purchaseData[\"numOfSeats\"],\n expireAt: new Date(purchaseData[\"expireAt\"]),\n });\n this.__populateModels(licensedItemId);\n const anatomicModelDetails = this.getChildControl(\"models-details\");\n anatomicModelDetails.setAnatomicalModelsData(found);\n }\n this.fireEvent(\"modelPurchased\");\n })\n .catch(err => {\n const msg = err.message || this.tr(\"Cannot purchase model\");\n osparc.FlashMessenger.getInstance().logAs(msg, \"ERROR\");\n });\n },\n\n __sendImportModelMessage: function(modelId, categoryId) {\n const store = osparc.store.Store.getInstance();\n const currentStudy = store.getCurrentStudy();\n const nodeId = this.getOpenBy();\n if (currentStudy && nodeId) {\n const msg = {\n \"type\": \"importModel\",\n \"message\": {\n \"modelId\": modelId,\n \"categoryId\": categoryId,\n },\n };\n if (currentStudy.sendMessageToIframe(nodeId, msg)) {\n this.fireEvent(\"importMessageSent\");\n }\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows the run and stop study button.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let startStopButtons = new osparc.desktop.StartStopButtons();\n * this.getRoot().add(startStopButtons);\n *
\n */\n\nqx.Class.define(\"osparc.desktop.StartStopButtons\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox());\n\n this.__buildLayout();\n\n this.__attachEventHandlers();\n\n this.__nodeSelectionChanged([]);\n },\n\n properties: {\n study: {\n check: \"osparc.data.model.Study\",\n apply: \"__applyStudy\",\n init: null,\n nullable: false\n }\n },\n\n events: {\n \"startPipeline\": \"qx.event.type.Event\",\n \"startPartialPipeline\": \"qx.event.type.Event\",\n \"stopPipeline\": \"qx.event.type.Event\"\n },\n\n members: {\n __runSelectionButton: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"dynamics-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n this._add(control);\n break;\n case \"start-service-button\":\n control = new qx.ui.toolbar.Button().set({\n label: this.tr(\"Start\"),\n icon: \"@FontAwesome5Solid/play/14\"\n });\n this.getChildControl(\"dynamics-layout\").add(control);\n break;\n case \"stop-service-button\":\n control = new qx.ui.toolbar.Button().set({\n label: this.tr(\"Stop\"),\n icon: \"@FontAwesome5Solid/stop/14\"\n });\n this.getChildControl(\"dynamics-layout\").add(control);\n break;\n case \"computationals-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({\n alignY: \"middle\"\n }));\n this._add(control);\n break;\n case \"run-button\":\n control = new osparc.ui.toolbar.FetchButton(this.tr(\"Run\"), \"@FontAwesome5Solid/play/14\");\n osparc.utils.Utils.setIdToWidget(control, \"runStudyBtn\");\n control.addListener(\"execute\", () => this.fireEvent(\"startPipeline\"), this);\n this.getChildControl(\"computationals-layout\").add(control);\n break;\n case \"run-all-button\": {\n control = new osparc.ui.menu.FetchButton(this.tr(\"Run All\"));\n control.addListener(\"execute\", () => this.fireEvent(\"startPipeline\"), this);\n const splitButtonMenu = new qx.ui.menu.Menu();\n splitButtonMenu.add(control);\n this.__runSelectionButton.setMenu(splitButtonMenu);\n break;\n }\n case \"stop-button\":\n control = new osparc.ui.toolbar.FetchButton(this.tr(\"Stop\"), \"@FontAwesome5Solid/stop/14\");\n osparc.utils.Utils.setIdToWidget(control, \"stopStudyBtn\");\n control.addListener(\"execute\", () => this.fireEvent(\"stopPipeline\"), this);\n this.getChildControl(\"computationals-layout\").add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __buildLayout: function() {\n this.getChildControl(\"start-service-button\");\n this.getChildControl(\"stop-service-button\");\n\n this.getChildControl(\"run-button\");\n const runSelectionButton = this.__runSelectionButton = new osparc.ui.toolbar.FetchSplitButton(this.tr(\"Run Selection\"), \"@FontAwesome5Solid/play/14\");\n runSelectionButton.addListener(\"execute\", () => this.fireEvent(\"startPartialPipeline\"), this);\n this.getChildControl(\"computationals-layout\").add(runSelectionButton);\n this.getChildControl(\"run-all-button\");\n this.getChildControl(\"stop-button\");\n },\n\n __attachEventHandlers: function() {\n qx.event.message.Bus.subscribe(\"changeNodeSelection\", e => {\n const selectedNodes = e.getData();\n this.__nodeSelectionChanged(selectedNodes);\n }, this);\n },\n\n __nodeSelectionChanged: function(selectedNodes) {\n const dynamicsLayout = this.getChildControl(\"dynamics-layout\");\n const computationalsLayout = this.getChildControl(\"computationals-layout\");\n if (selectedNodes.length === 1 && selectedNodes[0].isDynamic()) {\n // dynamic\n dynamicsLayout.show();\n computationalsLayout.exclude();\n\n const node = selectedNodes[0];\n\n const startButton = this.getChildControl(\"start-service-button\");\n startButton.removeAllBindings();\n if (\"executeListenerId\" in startButton) {\n startButton.removeListenerById(startButton.executeListenerId);\n }\n node.attachHandlersToStartButton(startButton);\n\n const stopButton = this.getChildControl(\"stop-service-button\");\n stopButton.removeAllBindings();\n if (\"executeListenerId\" in stopButton) {\n stopButton.removeListenerById(stopButton.executeListenerId);\n }\n node.attachHandlersToStopButton(stopButton);\n } else {\n // computationals and default\n dynamicsLayout.exclude();\n computationalsLayout.show();\n\n const isSelectionRunnable = selectedNodes.length && selectedNodes.some(node => node && (node.isComputational() || node.isIterator()));\n this.getChildControl(\"run-button\").setVisibility(isSelectionRunnable ? \"excluded\" : \"visible\");\n this.__runSelectionButton.setVisibility(isSelectionRunnable ? \"visible\" : \"excluded\");\n this.getChildControl(\"run-all-button\").setVisibility(isSelectionRunnable ? \"visible\" : \"excluded\");\n }\n },\n\n __setRunning: function(running) {\n this.__getRunButtons().forEach(runBtn => runBtn.setFetching(running));\n this.getChildControl(\"stop-button\").setEnabled(running);\n },\n\n __getRunButtons: function() {\n return [\n this.getChildControl(\"run-button\"),\n this.__runSelectionButton.getChildControl(\"button\"),\n this.getChildControl(\"run-all-button\")\n ];\n },\n\n __applyStudy: async function(study) {\n study.getWorkbench().addListener(\"pipelineChanged\", this.__checkButtonsVisible, this);\n study.addListener(\"changePipelineRunning\", this.__updateRunButtonsStatus, this);\n this.__checkButtonsVisible();\n this.__updateRunButtonsStatus();\n },\n\n __checkButtonsVisible: function() {\n const allNodes = this.getStudy().getWorkbench().getNodes();\n const isRunnable = Object.values(allNodes).some(node => (node.isComputational() || node.isIterator()));\n this.__getRunButtons().forEach(runBtn => {\n if (!runBtn.isFetching()) {\n runBtn.setEnabled(isRunnable);\n }\n }, this);\n\n const isReadOnly = this.getStudy().isReadOnly();\n this.setVisibility(isReadOnly ? \"excluded\" : \"visible\");\n },\n\n __updateRunButtonsStatus: function() {\n const study = this.getStudy();\n if (study) {\n this.__setRunning(study.isPipelineRunning());\n }\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2021 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n * Widget that shows the zoom button.\n *\n * *Example*\n *\n * Here is a little example of how to use the widget.\n *\n * \n * let zoomButtons = new osparc.desktop.ZoomButtons();\n * this.getRoot().add(zoomButtons);\n *
\n */\n\nconst ZOOM_BUTTON_SIZE = 32;\n\nqx.Class.define(\"osparc.desktop.ZoomButtons\", {\n extend: qx.ui.toolbar.ToolBar,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.HBox(0));\n\n this.set({\n spacing: 0,\n backgroundColor: \"transparent\"\n });\n\n this.__buildLayout();\n },\n\n events: {\n \"zoomIn\": \"qx.event.type.Event\",\n \"zoomOut\": \"qx.event.type.Event\",\n \"zoomReset\": \"qx.event.type.Event\"\n },\n\n members: {\n __buildLayout: function() {\n this.add(this.__getZoomOutButton());\n this.add(this.__getZoomResetButton());\n this.add(this.__getZoomInButton());\n },\n\n __getZoomBtn: function(icon, tooltip) {\n const btn = new qx.ui.toolbar.Button(null, icon+\"/20\").set({\n appearance: \"form-button-outlined\",\n padding: [5, 5],\n marginLeft: 10,\n width: ZOOM_BUTTON_SIZE,\n height: ZOOM_BUTTON_SIZE,\n maxHeight: ZOOM_BUTTON_SIZE\n });\n if (tooltip) {\n btn.setToolTipText(tooltip);\n }\n return btn;\n },\n\n __getZoomInButton: function() {\n const btn = this.__getZoomBtn(\"@MaterialIcons/zoom_in\", this.tr(\"Zoom In\"));\n btn.addListener(\"execute\", () => this.fireEvent(\"zoomIn\"), this);\n return btn;\n },\n\n __getZoomOutButton: function() {\n const btn = this.__getZoomBtn(\"@MaterialIcons/zoom_out\", this.tr(\"Zoom Out\"));\n btn.addListener(\"execute\", () => this.fireEvent(\"zoomOut\"), this);\n return btn;\n },\n\n __getZoomResetButton: function() {\n const btn = this.__getZoomBtn(\"@MaterialIcons/find_replace\", this.tr(\"Reset Zoom\"));\n btn.addListener(\"execute\", () => this.fireEvent(\"zoomReset\"), this);\n return btn;\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2010 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Christian Hagendorn (chris_schmidt)\n\n************************************************************************ */\n\n/**\n * Cell renderer can be used for Widget rendering. The Widget creation can be configured with the\n * {@link #delegate} property:\n *\n * \n * widgetCell.setDelegate(\n * {\n * createWidget : function() {\n * return new qx.ui.form.ListItem();\n * }\n * });\n * \n *\n * When the {@link #delegate} property is not used {@link qx.ui.core.Widget} instances are created as\n * fallback.\n *\n * The {@link #updateData} method can be used to update any Widget property. Just use a Map\n * with property name as key:\n *\n * \n * // widget is a qx.ui.form.ListItem instance\n * widgetCell.updateData(widget,\n * {\n * label: \"my label value\",\n * icon: \"qx/icon/22/emotes/face-angel.png\"\n * });\n * \n */\nqx.Class.define(\"qx.ui.virtual.cell.WidgetCell\",\n{\n extend : qx.ui.virtual.cell.AbstractWidget,\n\n properties :\n {\n /**\n * Delegation object, which can have one or more functions defined by the\n * {@link qx.ui.virtual.cell.IWidgetCellDelegate} interface.\n */\n delegate :\n {\n apply: \"_applyDelegate\",\n init: null,\n nullable: true\n }\n },\n\n members :\n {\n // apply method\n _applyDelegate : function(value, old) {\n this._cleanupPool();\n },\n\n // overridden\n _createWidget : function() {\n var delegate = this.getDelegate();\n\n if (delegate != null && delegate.createWidget != null) {\n return delegate.createWidget();\n } else {\n return new qx.ui.core.Widget();\n }\n },\n\n // overridden\n updateData : function(widget, data) {\n for (var key in data)\n {\n if (qx.Class.hasProperty(widget.constructor, key)) {\n qx.util.PropertyUtil.setUserValue(widget, key, data[key]);\n } else {\n throw new Error(\"Can't update data! The key '\" + key + \"' is not a Property!\");\n }\n }\n }\n }\n});","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\n/**\n *\n */\n\nqx.Class.define(\"osparc.navigation.BreadcrumbSplitter\", {\n extend: qx.ui.core.Widget,\n\n construct: function(w, h) {\n this.base(arguments);\n\n this.set({\n width: w,\n height: h\n });\n\n this.addListenerOnce(\"appear\", () => {\n const el = this.getContentElement().getDomElement();\n const svgWrapper = osparc.wrapper.Svg.getInstance();\n svgWrapper.init()\n .then(() => {\n if (this.__canvas === null) {\n this.__canvas = svgWrapper.createEmptyCanvas(el);\n this.setReady(true);\n this.fireDataEvent(\"SvgWidgetReady\", true);\n }\n }, this);\n });\n },\n\n properties: {\n ready: {\n check: \"Boolean\",\n init: false\n },\n\n shape: {\n check: [\"slash\", \"arrow\", \"separator\", \"plusBtn\"],\n nullable: true,\n init: \"slash\"\n },\n\n leftWidget: {\n check: \"qx.ui.core.Widget\",\n nullable: true,\n apply: \"_applyLeftWidget\"\n },\n\n rightWidget: {\n check: \"qx.ui.core.Widget\",\n nullable: true,\n apply: \"_applyRightWidget\"\n }\n },\n\n events: {\n \"SvgWidgetReady\": \"qx.event.type.Data\"\n },\n\n statics: {\n getTriangleControlsLeft: function(w = 16, h = 32) {\n return [\n [0, 0],\n [0, h],\n [w, 0]\n ];\n },\n\n getTriangleControlsRight: function(w = 16, h = 32) {\n return [\n [0, h],\n [w, 0],\n [w, h]\n ];\n },\n\n getSlashControls: function(w = 16, h = 32) {\n const offsetH = 4;\n const offsetW = Math.round(offsetH*w/h);\n return [\n [w-offsetW, offsetH],\n [offsetW, h-offsetH]\n ];\n },\n\n getArrowControlsLeft: function(w = 16, h = 32) {\n return [\n [0, 0],\n [w, h/2],\n [0, h]\n ];\n },\n\n getArrowControlsRight: function(w = 16, h = 32) {\n return [\n [w, 0],\n [0, 0],\n [w, h/2],\n [0, h],\n [w, h]\n ];\n },\n\n getArrowControls: function(w = 16, h = 32) {\n return [\n [0, 0],\n [w, h/2],\n [0, h]\n ];\n },\n\n getSeparatorControls: function(w = 16, h = 32) {\n return [w/2, 0, w/2, h];\n },\n\n getPlusBtnControlsLeft: function(w = 16, h = 32) {\n // return `M0 0 M0 0 L${w/2} 0 L${w/2} ${h/4} A${w/2} ${h/4} 0 1 0 ${w/2} ${h*3/4} L${w/2} ${h} L0 ${h} L0 0`;\n return `M0 0 M0 0 L8 0 L8 8 A8 8 0 1 0 8 24 L8 32 L0 32 L0 0`;\n },\n\n getPlusBtnControlsRight: function(w = 16, h = 32) {\n // return `M0 0 M${w/2} 0 L${w} 0 L${w} ${h} L0 ${h} L0 ${h*3/4} A${w/2} ${h/4} 0 1 0 0 ${h/4} L0 0`;\n return `M0 0 M8 0 L16 0 L16 32 L8 32 L8 24 A8 8 0 1 0 8 8 L8 0`;\n }\n },\n\n members: {\n __canvas: null,\n __leftPart: null,\n __rightPart: null,\n\n __getBGColor: function(decoratorName) {\n const decorator = qx.theme.manager.Decoration.getInstance().resolve(decoratorName);\n if (decorator) {\n const decoratorBG = decorator.getBackgroundColor();\n return qx.theme.manager.Color.getInstance().resolve(decoratorBG);\n }\n return null;\n },\n\n _applyLeftWidget: function(leftWidget) {\n const bounds = leftWidget.getBounds();\n this.set({\n zIndex: leftWidget.getZIndex()+1,\n marginTop: bounds.top\n });\n\n let controls;\n switch (this.getShape()) {\n case \"slash\":\n controls = this.self().getTriangleControlsLeft(16, bounds.height);\n break;\n case \"arrow\":\n controls = this.self().getArrowControlsLeft(16, bounds.height);\n break;\n case \"separator\":\n controls = this.self().getSeparatorControls(16, bounds.height);\n break;\n case \"plusBtn\":\n controls = this.self().getPlusBtnControlsLeft(16, bounds.height);\n break;\n }\n if (controls) {\n switch (this.getShape()) {\n case \"slash\":\n case \"arrow\":\n this.__leftPart = osparc.wrapper.Svg.drawPolygon(this.__canvas, controls);\n break;\n case \"separator\":\n this.__leftPart = osparc.wrapper.Svg.drawLine(this.__canvas, controls)\n .move(16 / 2, 0);\n break;\n case \"plusBtn\":\n this.__leftPart = osparc.wrapper.Svg.drawPath(this.__canvas, controls);\n break;\n }\n\n const color = this.__getBGColor(leftWidget.getDecorator());\n if (color) {\n osparc.wrapper.Svg.updatePolygonColor(this.__leftPart, color);\n }\n leftWidget.addListener(\"changeDecorator\", e => {\n const newColor = this.__getBGColor(leftWidget.getDecorator());\n if (newColor) {\n osparc.wrapper.Svg.updatePolygonColor(this.__leftPart, newColor);\n }\n }, this);\n }\n },\n\n _applyRightWidget: function(rightWidget) {\n const bounds = rightWidget.getBounds();\n this.set({\n zIndex: rightWidget.getZIndex()+1,\n marginTop: bounds.top\n });\n\n let controls;\n switch (this.getShape()) {\n case \"slash\":\n controls = this.self().getTriangleControlsRight(16, bounds.height);\n break;\n case \"arrow\":\n controls = this.self().getArrowControlsRight(16, bounds.height);\n break;\n case \"separator\":\n controls = this.self().getSeparatorControls(16, bounds.height);\n break;\n case \"plusBtn\":\n controls = this.self().getPlusBtnControlsRight(16, bounds.height);\n break;\n }\n if (controls) {\n switch (this.getShape()) {\n case \"slash\":\n case \"arrow\": {\n this.__rightPart = osparc.wrapper.Svg.drawPolygon(this.__canvas, controls);\n const color = this.__getBGColor(rightWidget.getDecorator());\n if (color) {\n osparc.wrapper.Svg.updatePolygonColor(this.__rightPart, color);\n }\n rightWidget.addListener(\"changeDecorator\", e => {\n const newColor = this.__getBGColor(rightWidget.getDecorator());\n if (newColor) {\n osparc.wrapper.Svg.updatePolygonColor(this.__rightPart, newColor);\n }\n }, this);\n break;\n }\n case \"separator\":\n this.__rightPart = osparc.wrapper.Svg.drawLine(this.__canvas, controls)\n .move(16 / 2, 0);\n break;\n case \"plusBtn\":\n this.__rightPart = osparc.wrapper.Svg.drawPath(this.__canvas, controls);\n break;\n }\n }\n\n let polylineControls;\n let lineControls;\n switch (this.getShape()) {\n case \"slash\":\n polylineControls = this.self().getSlashControls(16, bounds.height);\n break;\n case \"arrow\":\n polylineControls = this.self().getArrowControls(16, bounds.height);\n break;\n case \"sepatator\":\n lineControls = this.self().getSeparatorControls(16, bounds.height);\n break;\n }\n if (polylineControls || lineControls) {\n let stroke = null;\n if (polylineControls) {\n stroke = osparc.wrapper.Svg.drawPolyline(this.__canvas, polylineControls);\n } else if (lineControls) {\n stroke = osparc.wrapper.Svg.drawLine(this.__canvas, lineControls);\n }\n const color = qx.theme.manager.Color.getInstance().resolve(\"text\");\n osparc.wrapper.Svg.updateItemColor(stroke, color);\n rightWidget.addListener(\"changeDecorator\", e => {\n const newColor = qx.theme.manager.Color.getInstance().resolve(\"text\");\n osparc.wrapper.Svg.updateItemColor(stroke, newColor);\n }, this);\n }\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n\n************************************************************************ */\n\n/**\n * The button to fill the menubar\n *\n * @childControl arrow {qx.ui.basic.Image} arrow widget to show a submenu is available\n */\nqx.Class.define(\"qx.ui.toolbar.MenuButton\",\n{\n extend : qx.ui.menubar.Button,\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n /** Appearance of the widget */\n appearance :\n {\n refine : true,\n init : \"toolbar-menubutton\"\n },\n\n /** Whether the button should show an arrow to indicate the menu behind it */\n showArrow :\n {\n check : \"Boolean\",\n init : false,\n themeable : true,\n apply : \"_applyShowArrow\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // overridden\n _applyVisibility : function(value, old) {\n this.base(arguments, value, old);\n\n // hide the menu too\n var menu = this.getMenu();\n if (value != \"visible\" && menu) {\n menu.hide();\n }\n\n // trigger a appearance recalculation of the parent\n var parent = this.getLayoutParent();\n if (parent && parent instanceof qx.ui.toolbar.PartContainer) {\n qx.ui.core.queue.Appearance.add(parent);\n }\n },\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"arrow\":\n control = new qx.ui.basic.Image();\n control.setAnonymous(true);\n this._addAt(control, 10);\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n // property apply routine\n _applyShowArrow : function(value, old)\n {\n if (value) {\n this._showChildControl(\"arrow\");\n } else {\n this._excludeChildControl(\"arrow\");\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Dropdown menu for tag filtering\n */\nqx.Class.define(\"osparc.filter.TagsFilter\", {\n extend: osparc.filter.UIFilter,\n\n /**\n * Constructor for TagsFilter creates a TagsFilter.\n *\n * @extends osparc.filter.UIFilter\n */\n construct: function(label, filterId, filterGroupId) {\n this.base(arguments, filterId, filterGroupId);\n this._setLayout(new qx.ui.layout.HBox());\n\n this.__dropdown = new qx.ui.toolbar.MenuButton(label).set({\n marginLeft: 0\n });\n this._add(this.__dropdown);\n\n this.__activeTags = [];\n this.__tagButtons = {};\n },\n\n properties: {\n printTags: {\n init: true,\n check: \"Boolean\",\n nullable: false\n }\n },\n\n statics: {\n ActiveTagIcon: \"@FontAwesome5Solid/check/12\"\n },\n\n members: {\n __dropdown: null,\n __activeTags: null,\n __tagButtons: null,\n __menu: null,\n\n /**\n * Implementing IFilter: Function in charge of resetting the filter.\n */\n reset: function() {\n // Remove ticks from menu\n const menuButtons = this._getMenuButtons();\n menuButtons.forEach(button => button.resetIcon());\n // Remove active tags\n if (this.__activeTags.length) {\n this.__activeTags.length = 0;\n }\n // Remove tag buttons\n for (let tagName in this.__tagButtons) {\n this._remove(this.__tagButtons[tagName]);\n delete this.__tagButtons[tagName];\n }\n this.__dispatch();\n },\n\n __dispatch: function() {\n this._filterChange(this.__activeTags);\n },\n\n getActiveTags: function() {\n return this.__activeTags;\n },\n\n _addTag: function(tagName, menuButton) {\n // Check if added\n if (this.__activeTags.includes(tagName)) {\n this.removeTag(tagName, menuButton);\n } else {\n // Save previous icon\n menuButton.prevIcon = menuButton.getIcon();\n // Add tick\n menuButton.setIcon(this.self().ActiveTagIcon);\n // Update state\n this.__activeTags.push(tagName);\n if (this.isPrintTags()) {\n // Add tag\n const tagButton = new qx.ui.toolbar.Button(tagName, \"@MaterialIcons/close/12\");\n this._add(tagButton);\n tagButton.addListener(\"execute\", () => this.removeTag(tagName, menuButton));\n this.__tagButtons[tagName] = tagButton;\n }\n }\n this.__dispatch();\n },\n\n removeTag: function(tagName, menuButton) {\n if (menuButton === undefined) {\n menuButton = this._getMenuButtons().find(btn => btn.getLabel() === tagName);\n }\n // Restore icon\n menuButton.setIcon(menuButton.prevIcon);\n // Update state\n this.__activeTags.splice(this.__activeTags.indexOf(tagName), 1);\n if (tagName in this.__tagButtons) {\n this._remove(this.__tagButtons[tagName]);\n delete this.__tagButtons[tagName];\n }\n this.__dispatch();\n },\n\n _getMenuButtons: function() {\n const menu = this.__dropdown.getMenu();\n if (menu) {\n return menu.getChildren().filter(child => child instanceof qx.ui.menu.Button);\n }\n return [];\n },\n\n _getActiveMenuButtons: function() {\n const menuButtons = this._getMenuButtons();\n return menuButtons.filter(menuButton => menuButton.getIcon() === this.self().ActiveTagIcon);\n },\n\n _addOption: function(tagName) {\n if (this.__menu === null) {\n this.__menu = new qx.ui.menu.Menu();\n this.__dropdown.setMenu(this.__menu);\n }\n const existing = this.__menu.getChildren().find(button => button.getLabel && button.getLabel() === tagName);\n if (existing) {\n // Don't add repeated options\n return existing;\n }\n const button = new qx.ui.menu.Button(tagName);\n button.addListener(\"execute\", e => this._addTag(tagName, e.getTarget()));\n this.__menu.add(button);\n return button;\n },\n\n _removeAllOptions: function() {\n if (this.__menu) {\n this.__menu.removeAll();\n }\n },\n\n _addSeparator: function() {\n if (this.__menu === null) {\n this.__menu = new qx.ui.menu.Menu();\n this.__dropdown.setMenu(this.__menu);\n }\n this.__menu.addSeparator();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2019 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Ignacio Pascual (ignapas)\n\n************************************************************************ */\n\n/**\n * Filter for node types.\n */\nqx.Class.define(\"osparc.filter.NodeTypeFilter\", {\n extend: osparc.filter.TagsFilter,\n\n /**\n * Constructor for NodeTypeFilter creates the filter and builds its menu.\n *\n * @extends osparc.filter.TagsFilter\n */\n construct: function(filterId, filterGroupId) {\n this.base(arguments, this.tr(\"Type\"), filterId, filterGroupId);\n this._setLayout(new qx.ui.layout.HBox());\n\n this.__buildMenu();\n },\n\n members: {\n /**\n * Function that uses the information in {osparc.service.Utils} statics to build the menu for the filter.\n */\n __buildMenu: function() {\n osparc.service.Utils.getTypes().forEach(serviceType => this._addOption(osparc.utils.Utils.capitalize(serviceType)));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.service.ServiceListItem\", {\n extend: osparc.dashboard.ListButtonBase,\n\n construct: function(service) {\n this.base(arguments);\n\n this.set({\n width: this.self().ITEM_WIDTH,\n height: this.self().ITEM_HEIGHT,\n paddingTop: 0,\n paddingBottom: 0,\n allowGrowX: true,\n focusable: true,\n });\n\n this.setResourceType(\"service\");\n if (service) {\n this.setService(service);\n }\n\n this.subscribeToFilterGroup(\"serviceCatalog\");\n\n this.bind(\"selected\", this, \"backgroundColor\", {\n converter: selected => selected ? \"strong-main\" : \"info\"\n });\n },\n\n properties: {\n service: {\n check: \"qx.core.Object\",\n nullable: false,\n apply: \"__applyService\"\n }\n },\n\n statics: {\n LATEST: \"latest\",\n ITEM_WIDTH: 550,\n ITEM_HEIGHT: 35,\n SERVICE_THUMBNAIL: osparc.product.Utils.getThumbnailUrl()\n },\n\n members: {\n __versionsBox: null,\n __infoBtn: null,\n\n __applyService: function(service) {\n // BASE\n if (service.getThumbnail()) {\n this.getChildControl(\"icon\").setSource(service.getThumbnail());\n } else {\n this.getChildControl(\"icon\").setSource(this.self().SERVICE_THUMBNAIL);\n }\n service.bind(\"name\", this.getChildControl(\"title\"), \"value\");\n\n // ITEM\n this.__applyVersion(service);\n this.__applyHitsOnItem(service);\n },\n\n __applyVersion: function(service) {\n const text = service.getVersionDisplay() ? service.getVersionDisplay() : \"v\" + service.getVersion();\n const label = new qx.ui.basic.Label(text).set({\n alignY: \"middle\"\n });\n this._add(label, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.LAST_CHANGE\n });\n },\n\n __applyHitsOnItem: function(service) {\n const hitsLabel = new qx.ui.basic.Label(this.tr(\"Hits: \") + String(service.getHits())).set({\n alignY: \"middle\",\n toolTipText: this.tr(\"Number of times you instantiated it\")\n });\n this._add(hitsLabel, {\n row: 0,\n column: osparc.dashboard.ListButtonBase.POS.HITS\n });\n },\n\n _filterText: function(text) {\n const checks = [\n this.getService().getName(),\n this.getService().getDescription(),\n this.getService().getContact()\n ];\n return osparc.dashboard.CardBase.filterText(checks, text);\n },\n\n _filterTags: function(tags) {\n if (tags && tags.length) {\n // xtype is a tuned type by the frontend\n const type = this.getService().getXType() || \"\";\n if (!tags.includes(osparc.utils.Utils.capitalize(type.trim()))) {\n return true;\n }\n }\n return false;\n },\n\n _filterClassifiers: function(classifiers) {\n const checks = this.getService().getClassifiers();\n return osparc.dashboard.CardBase.filterText(checks, classifiers);\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2022 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.form.ColorPicker\", {\n extend: qx.ui.core.Widget,\n include : [\n qx.ui.form.MForm\n ],\n implement : [\n qx.ui.form.IStringForm,\n qx.ui.form.IForm\n ],\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.HBox();\n this._setLayout(layout);\n\n this.getChildControl(\"random-button\");\n this.getChildControl(\"selector-button\");\n this.getChildControl(\"color-input\");\n },\n\n properties: {\n value: {\n check: \"Color\",\n event: \"changeValue\",\n init: \"#303030\"\n }\n },\n\n // eslint-disable-next-line qx-rules/no-refs-in-members\n members: {\n _forwardStates: {\n focused : true,\n invalid : true\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"random-button\":\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/sync-alt/12\");\n control.addListener(\"execute\", () => this.setValue(osparc.utils.Utils.getRandomColor()), this);\n this.bind(\"value\", control, \"backgroundColor\");\n this.bind(\"value\", control, \"textColor\", {\n converter: value => qx.theme.manager.Color.getInstance().resolve(osparc.utils.Utils.getContrastedTextColor(value))\n });\n this._add(control);\n break;\n case \"selector-button\":\n control = new qx.ui.form.Button(null, \"@FontAwesome5Solid/eye-dropper/12\");\n control.addListener(\"execute\", () => this.__openColorSelector(), this);\n this.bind(\"value\", control, \"backgroundColor\");\n this.bind(\"value\", control, \"textColor\", {\n converter: value => qx.theme.manager.Color.getInstance().resolve(osparc.utils.Utils.getContrastedTextColor(value))\n });\n this._add(control);\n break;\n case \"color-input\":\n control = new qx.ui.form.TextField().set({\n width: 80,\n required: true\n });\n this._add(control, {\n flex: 1\n });\n this.bind(\"value\", control, \"value\");\n control.addListener(\"changeValue\", e => {\n const newColor = e.getData();\n if (osparc.utils.Validators.hexColor(newColor, control)) {\n this.setValue(newColor);\n }\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __openColorSelector: function() {\n const colorSelector = new qx.ui.control.ColorSelector();\n const rgb = qx.util.ColorUtil.hexStringToRgb(this.getValue());\n colorSelector.setRed(rgb[0]);\n colorSelector.setGreen(rgb[1]);\n colorSelector.setBlue(rgb[2]);\n osparc.ui.window.Window.popUpInWindow(colorSelector, this.tr(\"Pick a color\"), 590, 380);\n colorSelector.addListener(\"changeValue\", e => this.setValue(e.getData()));\n },\n\n // overridden\n resetValue: function() {\n this.getChildControl(\"color-input\").resetValue();\n },\n\n // overridden\n focus: function() {\n this.base(arguments);\n this.getChildControl(\"color-input\").getFocusElement().focus();\n },\n\n // overridden\n tabFocus: function() {\n const field = this.getChildControl(\"color-input\");\n field.getFocusElement().focus();\n field.selectAllText();\n },\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n * Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.ui.tree.CheckboxTreeItem\", {\n extend: qx.ui.tree.VirtualTreeItem,\n include: osparc.ui.tree.MHintInTree,\n\n properties: {\n checked: {\n check: \"Boolean\",\n init: false,\n event: \"changeChecked\",\n nullable: true\n }\n },\n\n events: {\n checkboxClicked: \"qx.event.type.Event\"\n },\n\n members: {\n _addWidgets: function() {\n this.addSpacer();\n this.addOpenButton();\n this._add(this.getChildControl(\"checkbox\"));\n const label = this.getChildControl(\"label\");\n this._add(label, {\n flex: 1\n });\n this._add(new qx.ui.core.Spacer(), {\n flex: 1\n });\n this.addHint();\n\n this.setMaxWidth(240);\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"checkbox\":\n control = new qx.ui.form.CheckBox();\n control.setTriState(true);\n control.bind(\"value\", this, \"checked\");\n this.bind(\"checked\", control, \"value\");\n control.addListener(\"tap\", () => this.fireEvent(\"checkboxClicked\"));\n break;\n }\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2022 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.utils.Icons\", {\n type: \"static\",\n\n statics: {\n user: function(iconSize) {\n if (iconSize) {\n return \"@FontAwesome5Solid/user/\" + iconSize;\n }\n return \"@FontAwesome5Solid/user/14\";\n },\n\n organization: function(iconSize) {\n if (iconSize) {\n return \"@FontAwesome5Solid/users/\" + iconSize;\n }\n return \"@FontAwesome5Solid/users/14\";\n },\n\n everyone: function(iconSize) {\n if (iconSize) {\n return \"@FontAwesome5Solid/globe/\" + iconSize;\n }\n return \"@FontAwesome5Solid/globe/14\";\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.ui.list.MemberListItem\", {\n extend: osparc.ui.list.ListItemWithMenu,\n\n events: {\n \"promoteToMember\": \"qx.event.type.Data\",\n \"promoteToManager\": \"qx.event.type.Data\",\n \"promoteToAdministrator\": \"qx.event.type.Data\",\n \"demoteToUser\": \"qx.event.type.Data\",\n \"demoteToMember\": \"qx.event.type.Data\",\n \"demoteToManager\": \"qx.event.type.Data\",\n \"removeMember\": \"qx.event.type.Data\",\n \"leaveResource\": \"qx.event.type.Data\"\n },\n\n members: {\n // overridden\n _applySubtitleMD: function(value) {\n this.base(arguments, value);\n\n // highlight me\n const email = osparc.auth.Data.getInstance().getEmail();\n if (value && value.includes(email)) {\n this.addState(\"selected\");\n }\n },\n\n // overridden\n _getOptionsMenu: function() {\n const menu = new qx.ui.menu.Menu().set({\n position: \"bottom-right\"\n });\n\n const options = this.getOptions();\n if (options === null) {\n return menu;\n }\n\n if (options.includes(\"promoteToMember\")) {\n const promoteButton = new qx.ui.menu.Button(this.tr(\"Promote to \") + osparc.data.Roles.ORG[1].label);\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToMember\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n }\n if (options.includes(\"promoteToManager\")) {\n const promoteButton = new qx.ui.menu.Button(this.tr(\"Promote to \") + osparc.data.Roles.ORG[2].label);\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToManager\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n }\n if (options.includes(\"promoteToAdministrator\")) {\n const promoteButton = new qx.ui.menu.Button(this.tr(\"Promote to \") + osparc.data.Roles.ORG[3].label);\n promoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"promoteToAdministrator\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(promoteButton);\n }\n if (options.includes(\"demoteToUser\")) {\n const demoteButton = new qx.ui.menu.Button(this.tr(\"Demote to \") + osparc.data.Roles.ORG[0].label);\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToUser\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n }\n if (options.includes(\"demoteToMember\")) {\n const demoteButton = new qx.ui.menu.Button(this.tr(\"Demote to \") + osparc.data.Roles.ORG[1].label);\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToMember\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n }\n if (options.includes(\"demoteToManager\")) {\n const demoteButton = new qx.ui.menu.Button(this.tr(\"Demote to \") + osparc.data.Roles.ORG[2].label);\n demoteButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"demoteToManager\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(demoteButton);\n }\n\n if (menu.getChildren().length) {\n menu.addSeparator();\n }\n\n if (options.includes(\"removeMember\")) {\n const accessRights = this.getAccessRights();\n let currentRole = osparc.data.Roles.ORG[0];\n if (accessRights.getDelete()) {\n currentRole = osparc.data.Roles.ORG[3];\n } else if (accessRights.getWrite()) {\n currentRole = osparc.data.Roles.ORG[2];\n } else if (accessRights.getRead()) {\n currentRole = osparc.data.Roles.ORG[1];\n }\n const removeButton = new qx.ui.menu.Button(this.tr(\"Remove \") + currentRole.label).set({\n textColor: \"danger-red\"\n });\n removeButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"removeMember\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(removeButton);\n }\n\n if (options.includes(\"leave\")) {\n if (menu.getChildren().length) {\n menu.addSeparator();\n }\n const removeButton = new qx.ui.menu.Button(this.tr(\"Leave\")).set({\n textColor: \"danger-red\"\n });\n removeButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"leaveResource\", {\n id: this.getKey(),\n name: this.getTitle()\n });\n });\n menu.add(removeButton);\n }\n\n return menu;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.desktop.organizations.SharedResourceListItem\", {\n extend: osparc.ui.list.ListItemWithMenu,\n\n construct: function(resourceType) {\n this.__resourceType = resourceType;\n\n this.base(arguments);\n },\n\n properties: {\n orgId: {\n check: \"Integer\",\n init: true,\n nullable: false,\n event: \"changeOrgId\"\n },\n\n version: {\n check: \"String\",\n init: true,\n nullable: true,\n event: \"changeVersion\"\n }\n },\n\n events: {\n \"openMoreInfo\": \"qx.event.type.Data\"\n },\n\n statics: {\n canDelete: function(accessRights) {\n const canDelete = accessRights.getDelete ? accessRights.getDelete() : false;\n return canDelete;\n },\n\n canWrite: function(accessRights) {\n let canWrite = accessRights.getWrite ? accessRights.getWrite() : false;\n canWrite = canWrite || (accessRights.getWriteAccess ? accessRights.getWriteAccess() : false);\n return canWrite;\n },\n\n canRead: function(accessRights) {\n let canRead = accessRights.getRead ? accessRights.getRead() : false;\n canRead = canRead || (accessRights.getExecuteAccess ? accessRights.getExecuteAccess() : false);\n return canRead;\n }\n },\n\n members: {\n __resourceType: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"info-button\": {\n control = new qx.ui.form.Button().set({\n maxWidth: 28,\n maxHeight: 28,\n alignX: \"center\",\n alignY: \"middle\",\n icon: \"@MaterialIcons/info_outline/14\",\n focusable: false\n });\n this._add(control, {\n row: 0,\n column: 4,\n rowSpan: 2\n });\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __getRoleInfo: function(i) {\n if (this.__resourceType === \"service\") {\n return osparc.data.Roles.SERVICES[i];\n }\n return osparc.data.Roles.STUDY[i];\n },\n\n // overridden\n _setRole: function() {\n const accessRights = this.getAccessRights();\n const role = this.getChildControl(\"role\");\n if (this.self().canDelete(accessRights)) {\n role.setValue(this.__getRoleInfo(3).label);\n } else if (this.self().canWrite(accessRights)) {\n role.setValue(this.__getRoleInfo(2).label);\n } else {\n role.setValue(this.__getRoleInfo(1).label);\n }\n },\n\n // overridden\n _getInfoButton: function() {\n const accessRights = this.getAccessRights();\n if (\n (\"getRead\" in accessRights && accessRights.getRead()) ||\n (\"getExecute\" in accessRights && accessRights.getExecute())\n ) {\n const button = this.getChildControl(\"info-button\");\n button.addListener(\"execute\", () => this.fireDataEvent(\"openMoreInfo\", {\n key: this.getKey(),\n version: this.getVersion()\n }));\n return button;\n }\n return null;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.BaseView\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this._buildLayout();\n },\n\n statics: {\n createGroupBox: function(title) {\n const box = new qx.ui.groupbox.GroupBox(title).set({\n layout: new qx.ui.layout.VBox(5)\n });\n box.getChildControl(\"legend\").set({\n font: \"text-14\"\n });\n box.getChildControl(\"frame\").set({\n backgroundColor: \"transparent\",\n marginTop: 15,\n padding: 2\n });\n return box;\n },\n\n createHelpLabel: function(text) {\n const label = new qx.ui.basic.Label(text).set({\n font: \"text-13\"\n });\n return label;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.PlanManager\", {\n extend: osparc.po.BaseView,\n\n members: {\n _buildLayout: function() {\n const stack = new qx.ui.container.Stack();\n this._add(stack, {\n flex: 1\n });\n\n const pricingPlans = new osparc.pricing.Plans();\n stack.add(pricingPlans);\n\n const pricingPlanDetails = new osparc.pricing.PlanDetails();\n stack.add(pricingPlanDetails);\n\n stack.setSelection([pricingPlans]);\n pricingPlans.addListener(\"pricingPlanSelected\", e => {\n const pricingPlanModel = e.getData();\n if (pricingPlanModel) {\n stack.setSelection([pricingPlanDetails]);\n pricingPlanDetails.setCurrentPricingPlan(pricingPlanModel);\n }\n });\n\n pricingPlanDetails.addListener(\"backToPricingPlans\", () => {\n stack.setSelection([pricingPlans]);\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.admin.Maintenance\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"maintenance-container\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(control, {\n flex: 1\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n osparc.data.Resources.get(\"maintenance\")\n .then(scheduledMaintenance => {\n if (scheduledMaintenance) {\n this.__populateMaintenanceLayout(JSON.parse(scheduledMaintenance))\n } else {\n this.__populateMaintenanceLayout(null)\n }\n })\n .catch(err => console.error(err));\n },\n\n __populateMaintenanceLayout: function(data) {\n const vBox = this.getChildControl(\"maintenance-container\");\n vBox.removeAll();\n\n if (data) {\n const respLabel = new qx.ui.basic.Label(this.tr(\"Start and End dates go in UTC time zone\"));\n vBox.add(respLabel);\n\n const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(data, \"maintenance-data\");\n const container = new qx.ui.container.Scroll();\n container.add(invitationRespViewer);\n vBox.add(container, {\n flex: 1\n });\n } else {\n const label = new qx.ui.basic.Label().set({\n value: this.tr(\"No Maintenance scheduled\")\n });\n vBox.add(label);\n }\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.admin.Announcements\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"create-announcement\":\n control = this.__createAnnouncements();\n this._add(control);\n break;\n case \"announcement-container\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(control, {\n flex: 1\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.getChildControl(\"create-announcement\");\n this.getChildControl(\"announcement-container\");\n },\n\n __createAnnouncements: function() {\n const announcementGroupBox = osparc.po.BaseView.createGroupBox(this.tr(\"Create announcement\"));\n\n const announcementForm = this.__createAnnouncementForm();\n const form = new qx.ui.form.renderer.Single(announcementForm);\n announcementGroupBox.add(form);\n\n return announcementGroupBox;\n },\n\n __createAnnouncementForm: function() {\n const form = new qx.ui.form.Form();\n\n const title = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"title\")\n });\n form.add(title, this.tr(\"Title\"));\n\n const description = new qx.ui.form.TextArea().set({\n placeholder: this.tr(\"description\"),\n maxHeight: 60\n });\n form.add(description, this.tr(\"Description\"));\n\n const link = new qx.ui.form.TextField().set({\n placeholder: this.tr(\"link\")\n });\n form.add(link, this.tr(\"Link\"));\n\n const widgetLogin = new qx.ui.form.CheckBox().set({\n value: false\n });\n form.add(widgetLogin, this.tr(\"Login\"));\n\n const widgetRibbon = new qx.ui.form.CheckBox().set({\n value: false\n });\n form.add(widgetRibbon, this.tr(\"Ribbon\"));\n\n const widgetUserMenu = new qx.ui.form.CheckBox().set({\n value: false\n });\n form.add(widgetUserMenu, this.tr(\"User Menu\"));\n\n const dateFormat = new qx.util.format.DateFormat(\"dd/MM/yyyy\");\n const now = new Date();\n\n const start = new qx.ui.form.DateField();\n start.setDateFormat(dateFormat);\n start.setValue(now);\n form.add(start, this.tr(\"Start\"));\n\n const end = new qx.ui.form.DateField();\n end.setDateFormat(dateFormat);\n end.setValue(now);\n form.add(end, this.tr(\"End\"));\n\n const generateAnnouncementBtn = new osparc.ui.form.FetchButton(this.tr(\"Generate\"));\n generateAnnouncementBtn.set({appearance: \"form-button\"});\n generateAnnouncementBtn.addListener(\"execute\", () => {\n const products = [osparc.product.Utils.getProductName()];\n const widgets = [];\n if (widgetLogin.getValue()) {\n widgets.push(\"login\");\n }\n if (widgetRibbon.getValue()) {\n widgets.push(\"ribbon\");\n }\n if (widgetUserMenu.getValue()) {\n widgets.push(\"user-menu\");\n }\n if (widgets.length === 0) {\n const msg = \"Select at least one widget\";\n osparc.FlashMessenger.getInstance().logAs(msg, \"WARNING\");\n }\n const announcementData = {\n \"id\": osparc.utils.Utils.uuidV4(),\n \"products\": products,\n \"title\": title.getValue() ? title.getValue() : \"\",\n \"description\": description.getValue() ? description.getValue() : \"\",\n \"link\": link.getValue() ? link.getValue() : \"\",\n \"widgets\": widgets,\n \"start\": start.getValue(),\n \"end\": end.getValue(),\n };\n this.__populateAnnouncementLayout(announcementData);\n }, this);\n form.addButton(generateAnnouncementBtn);\n\n return form;\n },\n\n __populateAnnouncementLayout: function(announcementData) {\n const vBox = this.getChildControl(\"announcement-container\");\n vBox.removeAll();\n\n const announcementField = new qx.ui.form.TextArea(JSON.stringify(announcementData)).set({\n readOnly: true\n });\n vBox.add(announcementField);\n\n const copyAnnouncementBtn = new qx.ui.form.Button(this.tr(\"Copy announcement\")).set({\n alignX: \"left\",\n allowGrowX: false,\n });\n copyAnnouncementBtn.set({appearance: \"form-button\"});\n copyAnnouncementBtn.addListener(\"execute\", () => {\n if (osparc.utils.Utils.copyTextToClipboard(JSON.stringify(announcementData))) {\n copyAnnouncementBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n vBox.add(copyAnnouncementBtn);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo-Valero (pcrespov)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.Users\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"search-users\":\n control = this.__searchUsers();\n this._add(control);\n break;\n case \"finding-status\":\n control = new qx.ui.basic.Label();\n this._add(control);\n break;\n case \"found-users-container\":\n control = new qx.ui.container.Scroll();\n this._add(control, {\n flex: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.getChildControl(\"search-users\");\n this.getChildControl(\"finding-status\");\n this.getChildControl(\"found-users-container\");\n },\n\n __searchUsers: function() {\n const usersGroupBox = osparc.po.BaseView.createGroupBox(this.tr(\"Search\"));\n\n const searchUsersForm = this.__searchUsersForm();\n const form = new qx.ui.form.renderer.Single(searchUsersForm);\n usersGroupBox.add(form);\n\n return usersGroupBox;\n },\n\n __searchUsersForm: function() {\n const form = new qx.ui.form.Form();\n\n const userEmail = new qx.ui.form.TextField().set({\n required: true,\n placeholder: this.tr(\"user@email.address or user@*\")\n });\n form.add(userEmail, this.tr(\"Email\"));\n\n const searchBtn = new osparc.ui.form.FetchButton(this.tr(\"Search\"));\n searchBtn.set({\n appearance: \"form-button\"\n });\n searchBtn.addListener(\"execute\", () => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.users.search\", true)) {\n return;\n }\n if (form.validate()) {\n searchBtn.setFetching(true);\n const findingStatus = this.getChildControl(\"finding-status\");\n findingStatus.setValue(this.tr(\"Searching users...\"));\n const params = {\n url: {\n email: userEmail.getValue()\n }\n };\n osparc.data.Resources.fetch(\"poUsers\", \"search\", params)\n .then(data => {\n findingStatus.setValue(data.length + this.tr(\" user(s) found\"));\n this.__populateFoundUsersLayout(data);\n })\n .catch(err => {\n findingStatus.setValue(this.tr(\"Error searching users\"));\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => searchBtn.setFetching(false));\n }\n }, this);\n form.addButton(searchBtn);\n\n return form;\n },\n\n __populateFoundUsersLayout: function(respData) {\n const foundUsersContainer = this.getChildControl(\"found-users-container\");\n osparc.utils.Utils.removeAllChildren(foundUsersContainer);\n const usersRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, \"users-data\");\n foundUsersContainer.add(usersRespViewer);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Pedro Crespo-Valero (pcrespov)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.PreRegistration\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"search-preregistration\":\n control = this.__searchPreRegistration();\n this._add(control);\n break;\n case \"finding-status\":\n control = new qx.ui.basic.Label().set({\n rich: true\n });\n this._add(control);\n break;\n case \"pre-registration-container\":\n control = new qx.ui.container.Scroll();\n this._add(control, {\n flex: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.getChildControl(\"search-preregistration\");\n this.getChildControl(\"finding-status\");\n this.getChildControl(\"pre-registration-container\");\n },\n\n __searchPreRegistration: function() {\n const groupBox = osparc.po.BaseView.createGroupBox(this.tr(\"Pre-Registration\"));\n const form = this.__preRegistrationForm();\n const formRenderer = new qx.ui.form.renderer.Single(form);\n groupBox.add(formRenderer);\n\n return groupBox;\n },\n\n __preRegistrationForm: function() {\n const form = new qx.ui.form.Form();\n const requestAccountData = new qx.ui.form.TextArea().set({\n required: true,\n minHeight: 200,\n placeholder: this.tr(\"Copy&Paste the Request Account Form in JSON format here ...\")\n });\n form.add(requestAccountData, this.tr(\"Request Form\"));\n\n const submitBtn = new osparc.ui.form.FetchButton(this.tr(\"Submit\"));\n submitBtn.set({\n appearance: \"form-button\"\n });\n\n submitBtn.addListener(\"execute\", () => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.users.pre-register\", true)) {\n return;\n }\n if (form.validate()) {\n submitBtn.setFetching(true);\n\n const flashErrorMsg = this.tr(\"Pre-Registration Failed. See details below\");\n const findingStatus = this.getChildControl(\"finding-status\");\n findingStatus.setValue(this.tr(\"Searching Pre-Registered users...\"));\n\n let params;\n try {\n params = {\n data: JSON.parse(requestAccountData.getValue())\n };\n } catch (err) {\n console.error(err);\n\n const detailErrorMsg = `Error parsing Request Form JSON. ${err}`;\n findingStatus.setValue(detailErrorMsg);\n\n osparc.FlashMessenger.logAs(flashErrorMsg, \"ERROR\");\n submitBtn.setFetching(false);\n return\n }\n\n osparc.data.Resources.fetch(\"poUsers\", \"preRegister\", params)\n .then(data => {\n if (data.length) {\n findingStatus.setValue(this.tr(\"Pre-Registered as:\"));\n } else {\n findingStatus.setValue(this.tr(\"No Pre-Registered user found\"));\n }\n this.__populatePreRegistrationLayout(data);\n })\n .catch(err => {\n const detailErrorMsg = this.tr(`Error during Pre-Registeristration: ${err.message}`)\n findingStatus.setValue(detailErrorMsg);\n console.error(err);\n osparc.FlashMessenger.logAs(flashErrorMsg, \"ERROR\");\n })\n .finally(() => submitBtn.setFetching(false));\n }\n }, this);\n form.addButton(submitBtn);\n\n return form;\n },\n\n __populatePreRegistrationLayout: function(respData) {\n const preRegistrationContainer = this.getChildControl(\"pre-registration-container\");\n const preregistrationRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, \"preregistration-data\");\n preRegistrationContainer.add(preregistrationRespViewer);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.Invitations\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"create-invitation\":\n control = this.__createInvitations();\n this._add(control);\n break;\n case \"invitation-container\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));\n this._add(control, {\n flex: 1\n });\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.getChildControl(\"create-invitation\");\n this.getChildControl(\"invitation-container\");\n },\n\n __createInvitations: function() {\n const invitationGroupBox = osparc.po.BaseView.createGroupBox(this.tr(\"Create invitation\"));\n\n const disclaimer = osparc.po.BaseView.createHelpLabel(this.tr(\"There is no invitation required in this product/deployment.\"));\n disclaimer.exclude();\n const config = osparc.store.Store.getInstance().get(\"config\");\n if (\"invitation_required\" in config && config[\"invitation_required\"] === false) {\n disclaimer.show();\n }\n invitationGroupBox.add(disclaimer);\n\n const newTokenForm = this.__createInvitationForm();\n const form = new qx.ui.form.renderer.Single(newTokenForm);\n invitationGroupBox.add(form);\n\n return invitationGroupBox;\n },\n\n __createInvitationForm: function() {\n const form = new qx.ui.form.Form();\n\n const userEmail = new qx.ui.form.TextField().set({\n required: true,\n placeholder: this.tr(\"new.user@email.address\")\n });\n form.add(userEmail, this.tr(\"User Email\"));\n\n const extraCreditsInUsd = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 1000,\n value: 100\n });\n form.add(extraCreditsInUsd, this.tr(\"Welcome Credits (USD)\"));\n\n const withExpiration = new qx.ui.form.CheckBox().set({\n value: false\n });\n form.add(withExpiration, this.tr(\"With expiration\"));\n\n const trialDays = new qx.ui.form.Spinner().set({\n minimum: 1,\n maximum: 1000,\n value: 1\n });\n withExpiration.bind(\"value\", trialDays, \"visibility\", {\n converter: val => val ? \"visible\" : \"excluded\"\n });\n form.add(trialDays, this.tr(\"Trial Days\"));\n\n const generateInvitationBtn = new osparc.ui.form.FetchButton(this.tr(\"Generate\"));\n generateInvitationBtn.set({\n appearance: \"form-button\"\n });\n generateInvitationBtn.addListener(\"execute\", () => {\n if (!osparc.data.Permissions.getInstance().canDo(\"user.invitation.generate\", true)) {\n return;\n }\n if (form.validate()) {\n generateInvitationBtn.setFetching(true);\n const params = {\n data: {\n \"guest\": userEmail.getValue()\n }\n };\n if (extraCreditsInUsd.getValue() > 0) {\n params.data[\"extraCreditsInUsd\"] = extraCreditsInUsd.getValue();\n }\n if (withExpiration.getValue()) {\n params.data[\"trialAccountDays\"] = trialDays.getValue();\n }\n osparc.data.Resources.fetch(\"invitations\", \"post\", params)\n .then(data => {\n this.__populateInvitationLayout(data);\n })\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => generateInvitationBtn.setFetching(false));\n }\n }, this);\n form.addButton(generateInvitationBtn);\n\n return form;\n },\n\n __populateInvitationLayout: function(respData) {\n const vBox = this.getChildControl(\"invitation-container\");\n vBox.removeAll();\n\n const label = new qx.ui.basic.Label().set({\n value: this.tr(\"Remember that this is a one time use link\")\n });\n vBox.add(label);\n\n const hBox = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignY: \"middle\"\n }));\n vBox.add(hBox);\n\n const invitationField = new qx.ui.form.TextField(respData[\"invitation_link\"]).set({\n readOnly: true\n });\n hBox.add(invitationField, {\n flex: 1\n });\n\n const copyInvitationBtn = new qx.ui.form.Button(this.tr(\"Copy invitation link\"));\n copyInvitationBtn.set({appearance: \"form-button-outlined\"});\n copyInvitationBtn.addListener(\"execute\", () => {\n if (osparc.utils.Utils.copyTextToClipboard(respData[\"invitation_link\"])) {\n copyInvitationBtn.setIcon(\"@FontAwesome5Solid/check/12\");\n }\n });\n hBox.add(copyInvitationBtn);\n\n const respLabel = new qx.ui.basic.Label(this.tr(\"Data encrypted in the invitation\"));\n vBox.add(respLabel);\n\n const printData = osparc.utils.Utils.deepCloneObject(respData);\n delete printData[\"invitation_link\"];\n const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, \"invitation-data\");\n const container = new qx.ui.container.Scroll();\n container.add(invitationRespViewer);\n vBox.add(container, {\n flex: 1\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.ProductInfo\", {\n extend: osparc.po.BaseView,\n\n members: {\n _buildLayout: function() {\n const params = {\n url: {\n productName: osparc.product.Utils.getProductName()\n }\n };\n osparc.data.Resources.fetch(\"productMetadata\", \"get\", params)\n .then(respData => {\n // \"templates\" has its own section\n delete respData[\"templates\"];\n const invitationRespViewer = new osparc.ui.basic.JsonTreeWidget(respData, \"product-metadata\");\n const container = new qx.ui.container.Scroll();\n container.add(invitationRespViewer);\n this._add(container, {\n flex: 1\n });\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.po.MessageTemplates\", {\n extend: osparc.po.BaseView,\n\n members: {\n __messageTemplates: null,\n\n _buildLayout: function() {\n const params = {\n url: {\n productName: osparc.product.Utils.getProductName()\n }\n };\n osparc.data.Resources.fetch(\"productMetadata\", \"get\", params)\n .then(respData => {\n this.__messageTemplates = respData[\"templates\"];\n this.__buildLayout();\n });\n },\n\n __buildLayout: function() {\n this._removeAll();\n\n const templatesSB = new qx.ui.form.SelectBox().set({\n allowGrowX: false\n });\n this._add(templatesSB);\n\n const htmlViewer = this.__htmlViewer = new osparc.editor.HtmlEditor().set({\n minHeight: 400\n });\n htmlViewer.getChildControl(\"cancel-button\").exclude();\n const container = new qx.ui.container.Scroll();\n container.add(htmlViewer, {\n flex: 1\n });\n this._add(container, {\n flex: 1\n });\n\n templatesSB.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const templateId = selection[0].getModel();\n this.__populateMessage(templateId);\n }\n }, this);\n this.__messageTemplates.forEach(template => {\n const lItem = new qx.ui.form.ListItem(template.id, null, template.id);\n templatesSB.add(lItem);\n });\n htmlViewer.addListener(\"textChanged\", e => {\n const newTemplate = e.getData();\n const templateId = templatesSB.getSelection()[0].getModel();\n this.__saveTemplate(templateId, newTemplate);\n });\n },\n\n __populateMessage: function(templateId) {\n const found = this.__messageTemplates.find(template => template.id === templateId);\n if (found) {\n this.__htmlViewer.setText(found.content);\n }\n },\n\n __saveTemplate: function(templateId, newTemplate) {\n const productName = osparc.product.Utils.getProductName();\n const params = {\n url: {\n productName,\n templateId\n },\n data: {\n content: newTemplate\n }\n };\n osparc.data.Resources.fetch(\"productMetadata\", \"updateEmailTemplate\", params)\n .then(() => osparc.FlashMessenger.logAs(this.tr(\"Template updated\"), \"INFO\"))\n .catch(err => {\n console.error(err);\n osparc.FlashMessenger.logAs(err.message, \"ERROR\");\n })\n .finally(() => this._buildLayout());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tester.WebSocketMessages\", {\n extend: osparc.po.BaseView,\n construct: function() {\n this.base(arguments);\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"filter-message\": {\n control = new qx.ui.form.TextField().set({\n liveUpdate : true,\n placeholder: this.tr(\"Search in Message\"),\n });\n this._add(control);\n break;\n }\n case \"messages-table\": {\n const tableModel = new qx.ui.table.model.Filtered();\n tableModel.setColumns([\n this.tr(\"Date\"),\n this.tr(\"Channel\"),\n this.tr(\"Message\"),\n ]);\n const custom = {\n tableColumnModel: function(obj) {\n return new qx.ui.table.columnmodel.Resize(obj);\n }\n };\n control = new qx.ui.table.Table(tableModel, custom).set({\n selectable: true,\n statusBarVisible: false,\n showCellFocusIndicator: false,\n forceLineHeight: false\n });\n control.getTableColumnModel().setDataCellRenderer(\n 1,\n new qx.ui.table.cellrenderer.String().set({\n defaultCellStyle: \"user-select: text\"\n })\n );\n control.getTableColumnModel().setDataCellRenderer(\n 0,\n new qx.ui.table.cellrenderer.String().set({\n defaultCellStyle: \"user-select: text\"\n })\n );\n control.getTableColumnModel().setDataCellRenderer(\n 2,\n new osparc.ui.table.cellrenderer.Html().set({\n defaultCellStyle: \"user-select: text; text-wrap: wrap\"\n })\n );\n control.setColumnWidth(0, 80);\n control.setColumnWidth(1, 150);\n\n control.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(control));\n this._add(control, {\n flex: 1\n });\n break;\n }\n case \"json-viewer\":\n control = new osparc.ui.basic.JsonTreeWidget();\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n const filterMessage = this.getChildControl(\"filter-message\");\n const table = this.getChildControl(\"messages-table\");\n const jsonViewer = this.getChildControl(\"json-viewer\");\n\n const model = table.getTableModel();\n filterMessage.addListener(\"changeValue\", e => {\n const value = e.getData();\n model.resetHiddenRows();\n model.addNotRegex(value, \"Message\", true);\n model.applyFilters();\n });\n table.addListener(\"cellTap\", e => {\n const selectedRow = e.getRow();\n const rowData = table.getTableModel().getRowData(selectedRow);\n jsonViewer.setJson(JSON.parse(rowData[2]));\n }, this);\n\n this.__populateTable();\n },\n\n __populateTable: function() {\n const socket = osparc.wrapper.WebSocket.getInstance();\n const messagesObj = socket.getCachedMessages();\n const messagesArray = [];\n for (const channel in messagesObj) {\n messagesObj[channel].forEach(msg => {\n messagesArray.push({\n date: msg.date,\n channel,\n message: msg.message,\n });\n });\n }\n messagesArray.sort((a, b) => {\n return new Date(b.date) - new Date(a.date); // newest first\n });\n const datas = [];\n messagesArray.forEach(entry => {\n const data = [\n new Date(entry.date).toLocaleTimeString(),\n entry.channel,\n JSON.stringify(entry.message),\n ];\n datas.push(data);\n });\n this.getChildControl(\"messages-table\").getTableModel().setData(datas);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tester.ConsoleErrors\", {\n extend: osparc.po.BaseView,\n construct: function() {\n this.base(arguments);\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"filter-message\": {\n control = new qx.ui.form.TextField().set({\n liveUpdate : true,\n placeholder: this.tr(\"Search in Message\"),\n });\n this._add(control);\n break;\n }\n case \"messages-table\": {\n const tableModel = new qx.ui.table.model.Filtered();\n tableModel.setColumns([\n this.tr(\"Date\"),\n this.tr(\"Message\"),\n ]);\n const custom = {\n tableColumnModel: function(obj) {\n return new qx.ui.table.columnmodel.Resize(obj);\n }\n };\n control = new qx.ui.table.Table(tableModel, custom).set({\n selectable: true,\n statusBarVisible: false,\n showCellFocusIndicator: false,\n forceLineHeight: false\n });\n control.getTableColumnModel().setDataCellRenderer(\n 0,\n new qx.ui.table.cellrenderer.String().set({\n defaultCellStyle: \"user-select: text\"\n })\n );\n control.getTableColumnModel().setDataCellRenderer(\n 1,\n new osparc.ui.table.cellrenderer.Html().set({\n defaultCellStyle: \"user-select: text; text-wrap: wrap\"\n })\n );\n control.setColumnWidth(0, 80);\n\n // control.setDataRowRenderer(new osparc.ui.table.rowrenderer.ExpandSelection(control));\n this._add(control, {\n flex: 1\n });\n break;\n }\n case \"error-viewer\":\n control = new qx.ui.form.TextArea().set({\n autoSize: true,\n });\n this._add(control, {\n flex: 1\n });\n break;\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n const filterMessage = this.getChildControl(\"filter-message\");\n const table = this.getChildControl(\"messages-table\");\n const errorViewer = this.getChildControl(\"error-viewer\");\n\n const model = table.getTableModel();\n filterMessage.addListener(\"changeValue\", e => {\n const value = e.getData();\n model.resetHiddenRows();\n model.addNotRegex(value, \"Message\", true);\n model.applyFilters();\n });\n table.addListener(\"cellTap\", e => {\n const selectedRow = e.getRow();\n const rowData = table.getTableModel().getRowData(selectedRow);\n errorViewer.setValue(JSON.stringify(rowData[1]));\n }, this);\n\n this.__populateTable();\n },\n\n __populateTable: function() {\n const consoleErrorTracker = osparc.ConsoleErrorTracker.getInstance();\n const errors = consoleErrorTracker.getErrors();\n const errorsArray = [];\n errors.forEach(msg => {\n errorsArray.push({\n date: msg.date,\n message: msg.error,\n });\n });\n errorsArray.sort((a, b) => {\n return new Date(b.date) - new Date(a.date); // newest first\n });\n const datas = [];\n errorsArray.forEach(entry => {\n const data = [\n new Date(entry.date).toLocaleTimeString(),\n entry.message,\n ];\n datas.push(data);\n });\n this.getChildControl(\"messages-table\").getTableModel().setData(datas);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.tester.Statics\", {\n extend: osparc.po.BaseView,\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"statics-container\":\n control = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Statics\"));\n this._add(control, {\n flex: 1\n });\n break;\n case \"statics-content\": {\n const statics = osparc.store.Store.getInstance().get(\"statics\");\n const form = new qx.ui.form.Form();\n for (let [key, value] of Object.entries(statics)) {\n const textField = new qx.ui.form.TextField().set({\n value: typeof value === \"object\" ? JSON.stringify(value) : value.toString(),\n readOnly: true\n });\n form.add(textField, key, null, key);\n }\n const renderer = new qx.ui.form.renderer.Single(form);\n control = new qx.ui.container.Scroll(renderer);\n this.getChildControl(\"statics-container\").add(control);\n break;\n }\n case \"local-storage-container\":\n control = osparc.ui.window.TabbedView.createSectionBox(this.tr(\"Local Storage\"));\n this._add(control);\n break;\n case \"local-storage-content\": {\n const items = {\n ...window.localStorage\n };\n const form = new qx.ui.form.Form();\n for (let [key, value] of Object.entries(items)) {\n const textField = new qx.ui.form.TextField().set({\n value: typeof value === \"object\" ? JSON.stringify(value) : value.toString(),\n readOnly: true\n });\n form.add(textField, key, null, key);\n }\n control = new qx.ui.form.renderer.Single(form);\n this.getChildControl(\"local-storage-container\").add(control);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n _buildLayout: function() {\n this.getChildControl(\"statics-content\");\n this.getChildControl(\"local-storage-content\");\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2025 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.data.model.LicensedItemResource\", {\n extend: qx.core.Object,\n\n /**\n * @param licensedItemResourceData {Object} Object containing the serialized LicensedItem Data\n */\n construct: function(licensedItemResourceData) {\n this.base(arguments);\n\n let description = licensedItemResourceData[\"description\"] || \"\";\n let title = \"\";\n let subtitle = null;\n description = description.replace(/SPEAG/g, \" \"); // remove SPEAG substring\n const delimiter = \" - \";\n let titleAndSubtitle = description.split(delimiter);\n if (titleAndSubtitle.length > 0) {\n title = titleAndSubtitle[0];\n titleAndSubtitle.shift();\n }\n if (titleAndSubtitle.length > 0) {\n subtitle = titleAndSubtitle.join(delimiter);\n }\n\n const manufacturerData = {};\n if (licensedItemResourceData[\"thumbnail\"]) {\n if (licensedItemResourceData[\"thumbnail\"].includes(\"itis.swiss\")) {\n manufacturerData[\"label\"] = \"IT'IS Foundation\";\n manufacturerData[\"link\"] = \"https://itis.swiss/virtual-population/\";\n manufacturerData[\"icon\"] = \"https://media.licdn.com/dms/image/v2/C4D0BAQE_FGa66IyvrQ/company-logo_200_200/company-logo_200_200/0/1631341490431?e=2147483647&v=beta&t=7f_IK-ArGjPrz-1xuWolAT4S2NdaVH-e_qa8hsKRaAc\";\n } else if (licensedItemResourceData[\"thumbnail\"].includes(\"speag.swiss\")) {\n manufacturerData[\"label\"] = \"Speag\";\n manufacturerData[\"link\"] = \"https://speag.swiss/products/em-phantoms/overview-2/\";\n manufacturerData[\"icon\"] = \"https://media.licdn.com/dms/image/v2/D4E0BAQG2CYG28KAKbA/company-logo_200_200/company-logo_200_200/0/1700045977122/schmid__partner_engineering_ag_logo?e=2147483647&v=beta&t=6CZb1jjg5TnnzQWkrZBS9R3ebRKesdflg-_xYi4dwD8\";\n }\n }\n\n this.set({\n modelId: licensedItemResourceData.id,\n description: description,\n title: title,\n subtitle: subtitle,\n thumbnail: licensedItemResourceData.thumbnail || \"\",\n features: licensedItemResourceData.features || {},\n doi: licensedItemResourceData.doi || null,\n termsOfUseUrl: licensedItemResourceData.termsOfUseUrl || null,\n manufacturerLabel: manufacturerData.label || null,\n manufacturerLink: manufacturerData.link || null,\n manufacturerIcon: manufacturerData.icon || null,\n });\n },\n\n properties: {\n modelId: {\n check: \"Number\",\n nullable: false,\n init: null,\n event: \"changeModelId\",\n },\n\n description: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeDescription\",\n },\n\n title: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeTitle\",\n },\n\n subtitle: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeSubtitle\",\n },\n\n thumbnail: {\n check: \"String\",\n nullable: false,\n init: null,\n event: \"changeThumbnail\",\n },\n\n features: {\n check: \"Object\",\n nullable: false,\n init: null,\n event: \"changeFeatures\",\n },\n\n doi: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeDoi\",\n },\n\n termsOfUseUrl: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeTermsOfUseUrl\",\n },\n\n manufacturerLabel: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeManufacturerLabel\",\n },\n\n manufacturerLink: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeManufacturerLink\",\n },\n\n manufacturerIcon: {\n check: \"String\",\n nullable: true,\n init: null,\n event: \"changeManufacturerIcon\",\n },\n },\n\n statics: {\n longName: function(licensedResource) {\n const name = licensedResource.getFeatures()[\"name\"] || licensedResource.getSubtitle();\n const version = licensedResource.getFeatures()[\"version\"] || \"\";\n const functionality = licensedResource.getFeatures()[\"functionality\"] || \"Static\";\n return `${name} ${version}, ${functionality}`;\n },\n },\n\n members: {\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.SortModelsButtons\", {\n extend: qx.ui.form.MenuButton,\n\n construct: function() {\n this.base(arguments, this.tr(\"Sort\"), \"@FontAwesome5Solid/chevron-down/10\");\n\n this.set({\n iconPosition: \"left\",\n marginRight: 8\n });\n\n const sortByMenu = new qx.ui.menu.Menu().set({\n font: \"text-14\"\n });\n this.setMenu(sortByMenu);\n\n const nameAsc = new qx.ui.menu.Button().set({\n label: this.tr(\"Name\"),\n icon: \"@FontAwesome5Solid/sort-alpha-down/14\"\n });\n nameAsc[\"sortBy\"] = \"name\";\n nameAsc[\"orderBy\"] = \"down\";\n const nameDesc = new qx.ui.menu.Button().set({\n label: this.tr(\"Name\"),\n icon: \"@FontAwesome5Solid/sort-alpha-up/14\"\n });\n nameDesc[\"sortBy\"] = \"name\";\n nameDesc[\"orderBy\"] = \"up\";\n\n const dateDesc = new qx.ui.menu.Button().set({\n label: this.tr(\"Date\"),\n icon: \"@FontAwesome5Solid/arrow-down/14\"\n });\n dateDesc[\"sortBy\"] = \"date\";\n dateDesc[\"orderBy\"] = \"down\";\n const dateAsc = new qx.ui.menu.Button().set({\n label: this.tr(\"Date\"),\n icon: \"@FontAwesome5Solid/arrow-up/14\"\n });\n dateAsc[\"sortBy\"] = \"date\";\n dateAsc[\"orderBy\"] = \"down\";\n\n [\n nameAsc,\n nameDesc,\n dateDesc,\n dateAsc,\n ].forEach((btn, idx) => {\n sortByMenu.add(btn);\n\n btn.addListener(\"execute\", () => this.__buttonExecuted(btn));\n\n if (idx === 0) {\n btn.execute();\n }\n });\n },\n\n events: {\n \"sortBy\": \"qx.event.type.Data\"\n },\n\n statics: {\n DefaultSorting: {\n \"sort\": \"name\",\n \"order\": \"down\"\n }\n },\n\n members: {\n __buttonExecuted: function(btn) {\n this.set({\n label: btn.getLabel(),\n icon: btn.getIcon()\n });\n\n const data = {\n \"sort\": btn[\"sortBy\"],\n \"order\": btn[\"orderBy\"]\n };\n this.fireDataEvent(\"sortBy\", data);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.LicensedItemDetails\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.VBox(15);\n this._setLayout(layout);\n\n this.set({\n allowGrowX: false,\n });\n\n this.__populateLayout();\n },\n\n events: {\n \"modelPurchaseRequested\": \"qx.event.type.Data\",\n \"modelImportRequested\": \"qx.event.type.Data\",\n },\n\n properties: {\n openBy: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeOpenBy\",\n },\n\n anatomicalModelsData: {\n check: \"Object\",\n init: null,\n nullable: true,\n apply: \"__populateLayout\"\n },\n },\n\n statics: {\n createThumbnail: function(source, size) {\n return new qx.ui.basic.Image().set({\n source: source,\n alignY: \"middle\",\n scale: true,\n allowGrowX: true,\n allowGrowY: true,\n allowShrinkX: true,\n allowShrinkY: true,\n maxWidth: size,\n maxHeight: size,\n });\n },\n },\n\n members: {\n __modelsInfoStack: null,\n\n __populateLayout: function() {\n this._removeAll();\n\n const licensedItem = this.getAnatomicalModelsData();\n if (licensedItem && licensedItem.getLicensedResources().length) {\n this.__addModelsInfo();\n this.__addSeatsSection();\n this.__addPricing();\n } else {\n const selectModelLabel = new qx.ui.basic.Label().set({\n value: this.tr(\"Select a model for more details\"),\n font: \"text-16\",\n alignX: \"center\",\n alignY: \"middle\",\n allowGrowX: true,\n allowGrowY: true,\n });\n this._add(selectModelLabel);\n }\n },\n\n __addModelsInfo: function() {\n const modelBundleLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(6));\n\n const stack = this.__modelsInfoStack = new qx.ui.container.Stack();\n this._add(stack, {\n flex: 1\n });\n modelBundleLayout.add(this.__modelsInfoStack);\n\n this.__populateModelsInfo();\n\n const licensedItem = this.getAnatomicalModelsData();\n const licensedResources = licensedItem.getLicensedResources();\n if (licensedResources.length > 1) {\n const modelSelectionLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4));\n const titleLabel = new qx.ui.basic.Label(this.tr(\"This bundle contains:\"));\n modelSelectionLayout.add(titleLabel);\n const modelsLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4));\n modelSelectionLayout.add(modelsLayout);\n\n const modelSelected = idx => {\n if (this.__modelsInfoStack.getSelectables().length > idx) {\n this.__modelsInfoStack.setSelection([stack.getSelectables()[idx]]);\n }\n\n const selectedBorderColor = qx.theme.manager.Color.getInstance().resolve(\"strong-main\");\n const unselectedBorderColor = \"transparent\";\n modelsLayout.getChildren().forEach((thumbnailAndTitle, index) => {\n const thumbnail = thumbnailAndTitle.getChildren()[0];\n osparc.utils.Utils.updateBorderColor(thumbnail, index === idx ? selectedBorderColor : unselectedBorderColor);\n });\n }\n\n licensedResources.forEach((licensedResource, idx) => {\n const modelLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(4)).set({\n allowGrowX: false,\n });\n const miniThumbnail = this.self().createThumbnail(licensedResource.getThumbnail(), 32);\n osparc.utils.Utils.addBorder(miniThumbnail);\n modelLayout.add(miniThumbnail);\n const title = new qx.ui.basic.Label().set({\n value: osparc.data.model.LicensedItemResource.longName(licensedResource),\n alignY: \"middle\"\n });\n modelLayout.add(title);\n modelLayout.setCursor(\"pointer\");\n modelLayout.addListener(\"tap\", () => modelSelected(idx));\n modelsLayout.add(modelLayout);\n });\n modelBundleLayout.add(modelSelectionLayout);\n\n modelSelected(0);\n }\n\n this._add(modelBundleLayout);\n },\n\n __populateModelsInfo: function() {\n this.__modelsInfoStack.removeAll();\n\n const licensedItem = this.getAnatomicalModelsData();\n const licensedResources = licensedItem.getLicensedResources();\n licensedResources.forEach((licensedResource, index) => {\n const modelInfoLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(4));\n\n const topGrid = new qx.ui.layout.Grid(8, 6);\n topGrid.setColumnFlex(0, 1);\n const headerLayout = new qx.ui.container.Composite(topGrid);\n if (licensedResource.getTitle()) {\n const titleLabel = new qx.ui.basic.Label().set({\n value: licensedResource.getTitle(),\n font: \"text-16\",\n alignY: \"middle\",\n allowGrowX: true,\n allowGrowY: true,\n });\n headerLayout.add(titleLabel, {\n column: 0,\n row: 0,\n });\n }\n if (licensedResource.getSubtitle()) {\n const subtitleLabel = new qx.ui.basic.Label().set({\n value: licensedResource.getSubtitle(),\n font: \"text-16\",\n alignY: \"middle\",\n allowGrowX: true,\n allowGrowY: true,\n });\n headerLayout.add(subtitleLabel, {\n column: 0,\n row: 1,\n });\n }\n if (licensedResource.getManufacturerLabel()) {\n const manufacturerLink = new qx.ui.basic.Atom().set({\n label: licensedResource.getManufacturerLabel(),\n icon: licensedResource.getManufacturerIcon(),\n font: \"text-16\",\n gap: 10,\n iconPosition: \"right\",\n cursor: \"pointer\",\n });\n manufacturerLink.getChildControl(\"icon\").set({\n maxWidth: 32,\n maxHeight: 32,\n scale: true,\n decorator: \"rounded\",\n });\n manufacturerLink.addListener(\"tap\", () => window.open(licensedResource.getManufacturerLink()));\n headerLayout.add(manufacturerLink, {\n column: 1,\n row: 0,\n rowSpan: 2,\n });\n }\n modelInfoLayout.add(headerLayout);\n\n\n const middleLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(16));\n const thumbnail = this.self().createThumbnail(licensedResource.getThumbnail(), 256);\n middleLayout.add(thumbnail);\n\n const features = licensedResource.getFeatures();\n const featuresGrid = new qx.ui.layout.Grid(8, 8);\n const featuresLayout = new qx.ui.container.Composite(featuresGrid);\n let idx = 0;\n const capitalizeField = [\n \"Sex\",\n \"Species\",\n \"Ethnicity\",\n \"Functionality\",\n ];\n [\n \"Name\",\n \"Version\",\n \"Date\",\n \"Species\",\n \"Sex\",\n \"Age\",\n \"Weight\",\n \"Height\",\n \"Ethnicity\",\n \"Functionality\",\n ].forEach(key => {\n if (key.toLowerCase() in features) {\n const titleLabel = new qx.ui.basic.Label().set({\n value: key,\n font: \"text-14\",\n alignX: \"right\",\n });\n featuresLayout.add(titleLabel, {\n column: 0,\n row: idx,\n });\n\n const value = features[key.toLowerCase()];\n const featureValue = capitalizeField.includes(key) ? osparc.utils.Utils.capitalize(value) : value;\n const nameLabel = new qx.ui.basic.Label().set({\n value: featureValue,\n font: \"text-14\",\n alignX: \"left\",\n });\n featuresLayout.add(nameLabel, {\n column: 1,\n row: idx,\n });\n\n idx++;\n }\n });\n\n if (licensedResource.getDoi()) {\n const doiTitle = new qx.ui.basic.Label().set({\n value: \"DOI\",\n font: \"text-14\",\n alignX: \"right\",\n marginTop: 10,\n });\n featuresLayout.add(doiTitle, {\n column: 0,\n row: idx,\n });\n\n const doiToLink = doi => {\n const doiLabel = new osparc.ui.basic.LinkLabel(\"-\").set({\n font: \"text-14\",\n alignX: \"left\",\n marginTop: 10,\n });\n if (doi) {\n doiLabel.set({\n value: doi,\n url: \"https://doi.org/\" + doi,\n font: \"link-label-14\",\n });\n }\n return doiLabel;\n };\n featuresLayout.add(doiToLink(licensedResource.getDoi()), {\n column: 1,\n row: idx,\n });\n idx++;\n }\n\n if (licensedResource.getTermsOfUseUrl()) { // remove the first one when this info goes down to the model\n const tAndC = new qx.ui.basic.Label().set({\n font: \"text-14\",\n value: this.tr(\"Terms and Conditions\"),\n rich: true,\n anonymous: false,\n cursor: \"pointer\",\n });\n tAndC.addListener(\"tap\", () => this.__openLicense(licensedResource.getTermsOfUseUrl()));\n featuresLayout.add(tAndC, {\n column: 1,\n row: idx,\n });\n idx++;\n }\n\n middleLayout.add(featuresLayout);\n\n modelInfoLayout.add(middleLayout);\n\n const importSection = this.__createImportSection(licensedItem, index);\n modelInfoLayout.add(importSection);\n\n this.__modelsInfoStack.add(modelInfoLayout);\n })\n },\n\n __openLicense: function(rawLink) {\n if (rawLink.includes(\"github\")) {\n // make sure the raw version of the link is shown\n rawLink += \"?raw=true\";\n }\n const mdWindow = new osparc.ui.markdown.MarkdownWindow(rawLink).set({\n caption: this.tr(\"Terms and Conditions\"),\n width: 800,\n height: 600,\n });\n mdWindow.open();\n },\n\n __createImportSection: function(anatomicalModelsData, selectedIdx) {\n const importSection = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignX: \"center\"\n }));\n\n const importButton = new qx.ui.form.Button().set({\n label: this.tr(\"Import\"),\n appearance: \"strong-button\",\n center: true,\n maxWidth: 200,\n alignX: \"center\",\n marginTop: 10,\n });\n this.bind(\"openBy\", importButton, \"visibility\", {\n converter: openBy => openBy ? \"visible\" : \"excluded\"\n });\n importButton.addListener(\"execute\", () => {\n this.fireDataEvent(\"modelImportRequested\", {\n modelId: anatomicalModelsData.getLicensedResources()[selectedIdx].getModelId(),\n categoryId: anatomicalModelsData.getCategoryId(),\n });\n }, this);\n\n osparc.store.Pricing.getInstance().fetchPricingUnits(anatomicalModelsData.getPricingPlanId())\n .then(pricingUnits => {\n if (\n anatomicalModelsData.getSeats().length ||\n (pricingUnits.length === 1 && pricingUnits[0].getCost() === 0)\n ) {\n importSection.add(importButton);\n }\n });\n\n return importSection;\n },\n\n __addPricing: function() {\n const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox().set({\n alignX: \"center\"\n }))\n\n const pricingLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({\n allowGrowX: false,\n decorator: \"border\",\n });\n layout.add(pricingLayout)\n\n const pricingUnitsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10).set({\n alignX: \"center\"\n }));\n const licensedItem = this.getAnatomicalModelsData();\n osparc.store.Pricing.getInstance().fetchPricingUnits(licensedItem.getPricingPlanId())\n .then(pricingUnits => {\n if (pricingUnits.length === 1 && pricingUnits[0].getCost() === 0) {\n const availableForImporting = new qx.ui.basic.Label().set({\n font: \"text-14\",\n value: this.tr(\"Available for Importing\"),\n padding: 10,\n });\n pricingUnitsLayout.add(availableForImporting);\n // hide the text if Import button is there\n this.bind(\"openBy\", pricingLayout, \"visibility\", {\n converter: openBy => openBy ? \"excluded\" : \"visible\"\n });\n } else {\n pricingUnits.forEach(pricingUnit => {\n pricingUnit.set({\n classification: \"LICENSE\"\n });\n const pUnit = new osparc.study.PricingUnitLicense(pricingUnit).set({\n showRentButton: true,\n });\n pUnit.addListener(\"rentPricingUnit\", () => {\n this.fireDataEvent(\"modelPurchaseRequested\", {\n licensedItemId: licensedItem.getLicensedItemId(),\n pricingPlanId: licensedItem.getPricingPlanId(),\n pricingUnitId: pricingUnit.getPricingUnitId(),\n });\n }, this);\n pricingUnitsLayout.add(pUnit);\n });\n }\n })\n .catch(err => console.error(err));\n this._add(pricingUnitsLayout);\n pricingLayout.add(pricingUnitsLayout);\n\n this._add(layout);\n },\n\n __addSeatsSection: function() {\n const licensedItem = this.getAnatomicalModelsData();\n if (licensedItem.getSeats().length === 0) {\n return;\n }\n const seatsSection = new qx.ui.container.Composite(new qx.ui.layout.VBox(5).set({\n alignX: \"left\",\n }));\n\n licensedItem.getSeats().forEach(purchase => {\n const nSeats = purchase[\"numOfSeats\"];\n const seatsText = \"seat\" + (nSeats > 1 ? \"s\" : \"\");\n const entry = new qx.ui.basic.Label().set({\n value: `${nSeats} ${seatsText} available until ${osparc.utils.Utils.formatDate(purchase[\"expireAt\"])}`,\n font: \"text-14\",\n });\n seatsSection.add(entry);\n });\n\n this._add(seatsSection);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.vipMarket.LicensedItemListItem\", {\n extend: qx.ui.core.Widget,\n implement : [qx.ui.form.IModel, osparc.filter.IFilterable],\n include : [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid(5, 5);\n layout.setRowFlex(0, 1);\n layout.setColumnFlex(1, 1); // flex display name\n layout.setColumnWidth(0, 48);\n layout.setColumnAlign(0, \"center\", \"middle\");\n layout.setColumnAlign(1, \"left\", \"middle\");\n layout.setColumnAlign(2, \"center\", \"middle\");\n this._setLayout(layout);\n\n this.set({\n padding: 5,\n height: 48,\n alignY: \"middle\",\n decorator: \"rounded\",\n });\n\n this.addListener(\"pointerover\", this._onPointerOver, this);\n this.addListener(\"pointerout\", this._onPointerOut, this);\n },\n\n events: {\n /** (Fired by {@link qx.ui.form.List}) */\n \"action\" : \"qx.event.type.Event\"\n },\n\n properties: {\n appearance: {\n refine: true,\n init: \"selectable\"\n },\n\n key: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeKey\",\n },\n\n version: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeVersion\",\n },\n\n licensedItemId: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeLicensedItemId\",\n },\n\n thumbnail: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeThumbnail\",\n apply: \"__applyThumbnail\",\n },\n\n displayName: {\n check: \"String\",\n init: null,\n nullable: false,\n event: \"changeDisplayName\",\n apply: \"__applyDisplayName\",\n },\n\n date: {\n check: \"Date\",\n init: null,\n nullable: true,\n event: \"changeDate\",\n },\n\n pricingPlanId: {\n check: \"Number\",\n init: null,\n nullable: false,\n event: \"changePricingPlanId\",\n },\n\n seats: {\n check: \"Array\",\n nullable: false,\n init: [],\n event: \"changeSeats\",\n apply: \"__applySeats\",\n },\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"thumbnail\":\n control = new qx.ui.basic.Image().set({\n alignY: \"middle\",\n scale: true,\n allowGrowX: true,\n allowGrowY: true,\n allowShrinkX: true,\n allowShrinkY: true,\n maxWidth: 32,\n maxHeight: 32\n });\n this._add(control, {\n row: 0,\n column: 0,\n rowSpan: 2\n });\n break;\n case \"name\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n });\n this._add(control, {\n row: 0,\n column: 1\n });\n break;\n case \"n-seats\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n });\n this._add(control, {\n row: 0,\n column: 2\n });\n break;\n }\n control.set({\n anonymous: true, // pass the tap action over\n });\n\n return control || this.base(arguments, id);\n },\n\n __applyThumbnail: function(value) {\n if (value) {\n this.getChildControl(\"thumbnail\").setSource(value);\n }\n },\n\n __applyDisplayName: function(value) {\n this.getChildControl(\"name\").setValue(value);\n\n this.set({\n toolTipText: value\n });\n },\n\n __applySeats: function(seats) {\n if (seats === null || seats.length === 0) {\n return;\n }\n const nSeatsLabel = this.getChildControl(\"n-seats\");\n const nSeats = osparc.store.LicensedItems.seatsToNSeats(seats);\n if (nSeats) {\n nSeatsLabel.setValue(`(${nSeats})`);\n } else {\n nSeatsLabel.resetValue();\n }\n },\n\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n if (data.text) {\n const checks = [\n this.getDisplayName(),\n ];\n if (checks.filter(check => check && check.toLowerCase().trim().includes(data.text)).length == 0) {\n return true;\n }\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n if (data.text && data.text.length > 1) {\n return true;\n }\n return false;\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2020 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Ignacio Pascual (ignapas)\n */\n\n/**\n * A toolbar button that serves to fetch or load some data from the server. To indicate that some processing is being done, and\n * that the user has to wait, a rotating special icon is shown meanwhile.\n */\nqx.Class.define(\"osparc.ui.toolbar.FetchButton\", {\n extend: qx.ui.toolbar.Button,\n include: osparc.ui.mixin.FetchButton\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2021 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * A toolbar button that serves to fetch or load some data from the server. To indicate that some processing is being done, and\n * that the user has to wait, a rotating special icon is shown meanwhile.\n */\nqx.Class.define(\"osparc.ui.menu.FetchButton\", {\n extend: qx.ui.menu.Button,\n include: osparc.ui.mixin.FetchButton\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n\n/**\n * A button which acts as a normal button and shows a menu on one\n * of the sides to open something like a history list.\n *\n * @childControl button {qx.ui.toolbar.Button} button to interact with\n * @childControl arrow {qx.ui.toolbar.MenuButton} menu button to show the menu connected to the split button\n */\nqx.Class.define(\"qx.ui.toolbar.SplitButton\",\n{\n extend : qx.ui.form.SplitButton,\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n construct : function(label, icon, menu, command)\n {\n this.base(arguments, label, icon, menu, command);\n\n // Toolbar buttons should not support the keyboard events\n this.removeListener(\"keydown\", this._onKeyDown);\n this.removeListener(\"keyup\", this._onKeyUp);\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"toolbar-splitbutton\"\n },\n\n\n // overridden\n focusable :\n {\n refine : true,\n init : false\n }\n },\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n // overridden\n /**\n * @lint ignoreReferenceField(_forwardStates)\n */\n _forwardStates :\n {\n hovered : true,\n focused : true,\n left : true,\n middle : true,\n right : true\n },\n\n /*\n ---------------------------------------------------------------------------\n WIDGET API\n ---------------------------------------------------------------------------\n */\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n case \"button\":\n control = new qx.ui.toolbar.Button;\n control.addListener(\"execute\", this._onButtonExecute, this);\n this._addAt(control, 0);\n break;\n\n case \"arrow\":\n control = new qx.ui.toolbar.MenuButton;\n this._addAt(control, 1);\n break;\n }\n\n return control || this.base(arguments, id);\n }\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2021 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\n/**\n * A toolbar split button that serves to fetch or load some data from the server. To indicate that some processing is being done, and\n * that the user has to wait, a rotating special icon is shown meanwhile.\n */\nqx.Class.define(\"osparc.ui.toolbar.FetchSplitButton\", {\n extend: qx.ui.toolbar.SplitButton,\n include: osparc.ui.mixin.FetchButton,\n\n members: {\n // overridden\n _createChildControlImpl : function(id, hash) {\n let control;\n\n switch (id) {\n case \"button\":\n control = new osparc.ui.form.FetchButton();\n control.addListener(\"execute\", this._onButtonExecute, this);\n control.setFocusable(false);\n this._addAt(control, 0, {flex: 1});\n break;\n }\n\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n * Jonathan Weiß (jonathan_rass)\n * Matthew Gregory\n\n************************************************************************ */\n\n/**\n * A typical color selector as known from native applications.\n *\n * Includes support for RGB and HSB color areas.\n *\n * @childControl control-bar {qx.ui.container.Composite} container which holds the control-pane and visual-pane\n * @childControl visual-pane {qx.ui.groupbox.GroupBox} pane shows the hue-saturation-pane and the brightness-pane\n * @childControl hue-saturation-pane {qx.ui.container.Composite} shows the hue saturation and the handle to select\n * @childControl hue-saturation-field {qx.ui.basic.Image} hue saturation image which shows all available colors\n * @childControl hue-saturation-handle {qx.ui.basic.Image} handle to select the color using the pointer\n * @childControl brightness-pane {qx.ui.container.Composite} shows the brightness field and the handle to select\n * @childControl brightness-field {qx.ui.basic.Image} brightness image which shows all brightness steps\n * @childControl brightness-handle {qx.ui.basic.Image} brightness handle to select the brightness using the pointer\n * @childControl preset-field-set {qx.ui.groupbox.GroupBox} groupbox holding all preset colors\n * @childControl colorbucket {qx.ui.core.Widget} color bucket\n * @childControl preset-grid {qx.ui.container.Composite} container for all color presets\n * @childControl input-field-set {qx.ui.groupbox.GroupBox} groupbox holding different input elements\n * @childControl preview-field-set {qx.ui.groupbox.GroupBox} groupbox holding the two preview fields\n * @childControl hex-field-composite {qx.ui.container.Composite} container for the hex field\n * @childControl hex-field {qx.ui.form.TextField} textfield to input a hex value\n * @childControl rgb-spinner-composite {qx.ui.container.Composite} container for the rgb spinner\n * @childControl rgb-spinner-red {qx.ui.form.Spinner} spinner control for the red hex value\n * @childControl rgb-spinner-green {qx.ui.form.Spinner} spinner control for the green hex value\n * @childControl rgb-spinner-blue {qx.ui.form.Spinner} spinner control for the blue hex value\n * @childControl hsb-spinner-composite {qx.ui.container.Composite} container for the hsb spinners\n * @childControl hsb-spinner-hue {qx.ui.form.Spinner} spinner control for the huevalue\n * @childControl hsb-spinner-saturation {qx.ui.form.Spinner} spinner control for the saturation value\n * @childControl hsb-spinner-brightness {qx.ui.form.Spinner} spinner control for the brightness value\n * @childControl preview-content-old {qx.ui.core.Widget} preview of the old color\n * @childControl preview-content-new {qx.ui.core.Widget} preview of the new color\n */\nqx.Class.define(\"qx.ui.control.ColorSelector\",\n{\n extend : qx.ui.core.Widget,\n implement : [qx.ui.form.IColorForm],\n\n\n\n\n /*\n *****************************************************************************\n CONSTRUCTOR\n *****************************************************************************\n */\n\n /**\n * Creates a ColorSelector.\n */\n construct : function()\n {\n this.base(arguments);\n\n // add the basic layout\n this._setLayout(new qx.ui.layout.VBox());\n\n this._createChildControl(\"control-bar\");\n\n this.addListener(\"appear\", this._onAppear, this);\n },\n\n\n\n\n /*\n *****************************************************************************\n EVENTS\n *****************************************************************************\n */\n\n events:\n {\n /** Fired when the \"OK\" button is tapped. */\n \"dialogok\" : \"qx.event.type.Event\",\n\n /** Fired when the \"Cancel\" button is tapped. */\n \"dialogcancel\" : \"qx.event.type.Event\",\n\n /** Fired when the value changes */\n \"changeValue\" : \"qx.event.type.Data\"\n },\n\n\n\n\n /*\n *****************************************************************************\n PROPERTIES\n *****************************************************************************\n */\n\n properties :\n {\n // overridden\n appearance :\n {\n refine : true,\n init : \"colorselector\"\n },\n\n /** The numeric red value of the selected color. */\n red :\n {\n check : \"Integer\",\n init : 255,\n apply : \"_applyRed\"\n },\n\n /** The numeric green value of the selected color. */\n green :\n {\n check : \"Integer\",\n init : 255,\n apply : \"_applyGreen\"\n },\n\n /** The numeric blue value of the selected color. */\n blue :\n {\n check : \"Integer\",\n init : 255,\n apply : \"_applyBlue\"\n },\n\n /** The numeric hue value. */\n hue :\n {\n check : \"Number\",\n init : 0,\n apply : \"_applyHue\"\n },\n\n /** The numeric saturation value. */\n saturation :\n {\n check : \"Number\",\n init : 0,\n apply : \"_applySaturation\"\n },\n\n /** The numeric brightness value. */\n brightness :\n {\n check : \"Number\",\n init : 100,\n apply : \"_applyBrightness\"\n }\n },\n\n\n\n\n /*\n *****************************************************************************\n MEMBERS\n *****************************************************************************\n */\n\n members :\n {\n /*\n ---------------------------------------------------------------------------\n CONTEXT HANDLING\n ---------------------------------------------------------------------------\n */\n\n /**\n * @type {String} The context in which an update has occurred.\n */\n __updateContext : null,\n\n /**\n * @type {Array} Map containing the preset colors.\n * @lint ignoreReferenceField(__presetTable)\n */\n __presetTable : [ \"maroon\", \"red\", \"orange\", \"yellow\", \"olive\", \"purple\",\n \"fuchsia\", \"lime\", \"green\", \"navy\", \"blue\", \"aqua\", \"teal\", \"black\",\n \"#333\", \"#666\", \"#999\", \"#BBB\", \"#EEE\", \"white\" ],\n\n /**\n * @type {String} Name of child control which is captured.\n */\n __capture : \"\",\n\n /**\n * @type {Number} Numeric brightness value\n */\n __brightnessSubtract : 0,\n\n /**\n * @type {Integer} HueSaturation's X coordinate\n */\n __hueSaturationSubtractTop : 0,\n\n /**\n * @type {Integer} HueSaturation's Y coordinate\n */\n __hueSaturationSubtractLeft : 0,\n\n // internal boolean flag to signal, that the value is set to null\n __nullValue : true,\n\n // internal mutex to prevent the changeValue event to be fired too often\n __preventChangeValueEvent : false,\n\n\n // overridden\n _createChildControlImpl : function(id, hash)\n {\n var control;\n\n switch(id)\n {\n /*\n ---------------------------------------------------------------------------\n CREATE #1: BASE STRUCTURE\n ---------------------------------------------------------------------------\n */\n case \"control-bar\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n\n control.add(this.getChildControl(\"control-pane\"));\n control.add(this.getChildControl(\"visual-pane\"));\n\n this._add(control);\n break;\n\n /*\n ---------------------------------------------------------------------------\n CREATE #2: PANES\n ---------------------------------------------------------------------------\n */\n\n case \"visual-pane\":\n control = new qx.ui.groupbox.GroupBox(this.tr(\"Visual\"));\n control.setLayout(new qx.ui.layout.HBox(10));\n control.add(this.getChildControl(\"hue-saturation-pane\"));\n control.add(this.getChildControl(\"brightness-pane\"));\n break;\n\n case \"control-pane\":\n control = new qx.ui.container.Composite(new qx.ui.layout.VBox(0));\n control.add(this.getChildControl(\"preset-field-set\"));\n control.add(this.getChildControl(\"input-field-set\"));\n control.add(this.getChildControl(\"preview-field-set\"), {flex: 1});\n break;\n\n case \"hue-saturation-pane\":\n control = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n control.setAllowGrowY(false);\n control.addListener(\"roll\", this._onHueSaturationPaneRoll, this);\n control.add(this.getChildControl(\"hue-saturation-field\"));\n control.add(this.getChildControl(\"hue-saturation-handle\"), {left: 0, top: 256});\n break;\n\n case \"hue-saturation-field\":\n control = new qx.ui.basic.Image(\"decoration/colorselector/huesaturation-field.jpg\");\n control.addListener(\"pointerdown\", this._onHueSaturationFieldPointerDown, this);\n break;\n\n case \"hue-saturation-handle\":\n control = new qx.ui.basic.Image(\"decoration/colorselector/huesaturation-handle.gif\");\n control.addListener(\"pointerdown\", this._onHueSaturationFieldPointerDown, this);\n control.addListener(\"pointerup\", this._onHueSaturationHandlePointerUp, this);\n control.addListener(\"pointermove\", this._onHueSaturationHandlePointerMove, this);\n break;\n\n case \"brightness-pane\":\n control = new qx.ui.container.Composite(new qx.ui.layout.Canvas());\n control.setAllowGrowY(false);\n control.addListener(\"roll\", this._onBrightnessPaneRoll, this);\n control.add(this.getChildControl(\"brightness-field\"));\n control.add(this.getChildControl(\"brightness-handle\"));\n break;\n\n case \"brightness-field\":\n control = new qx.ui.basic.Image(\"decoration/colorselector/brightness-field.png\");\n control.addListener(\"pointerdown\", this._onBrightnessFieldPointerDown, this);\n break;\n\n case \"brightness-handle\":\n control = new qx.ui.basic.Image(\"decoration/colorselector/brightness-handle.gif\");\n control.addListener(\"pointerdown\", this._onBrightnessHandlePointerDown, this);\n control.addListener(\"pointerup\", this._onBrightnessHandlePointerUp, this);\n control.addListener(\"pointermove\", this._onBrightnessHandlePointerMove, this);\n break;\n\n\n /*\n ---------------------------------------------------------------------------\n CREATE #3: CONTROL PANE CONTENT\n ---------------------------------------------------------------------------\n */\n case \"preset-field-set\":\n control = new qx.ui.groupbox.GroupBox(this.tr(\"Presets\"));\n control.setLayout(new qx.ui.layout.Grow());\n control.add(this.getChildControl(\"preset-grid\"));\n break;\n\n case \"colorbucket\":\n control = new qx.ui.core.Widget();\n control.addListener(\"pointerdown\", this._onColorFieldTap, this);\n break;\n\n case \"preset-grid\":\n controlLayout = new qx.ui.layout.Grid(3, 3);\n control = new qx.ui.container.Composite(controlLayout);\n\n var colorField;\n var colorPos;\n\n for (var i=0; i<2; i++)\n {\n for (var j=0; j<10; j++)\n {\n colorPos = i * 10 + j;\n colorField = this.getChildControl(\"colorbucket#\" + colorPos);\n colorField.setBackgroundColor(this.__presetTable[colorPos]);\n\n control.add(colorField, {column: j, row: i});\n }\n }\n break;\n\n case \"input-field-set\":\n control = new qx.ui.groupbox.GroupBox(this.tr(\"Details\"));\n var controlLayout = new qx.ui.layout.VBox();\n controlLayout.setSpacing(10);\n control.setLayout(controlLayout);\n\n control.add(this.getChildControl(\"hex-field-composite\"));\n control.add(this.getChildControl(\"rgb-spinner-composite\"));\n control.add(this.getChildControl(\"hsb-spinner-composite\"));\n break;\n\n case \"preview-field-set\":\n control = new qx.ui.groupbox.GroupBox(this.tr(\"Preview (Old/New)\"));\n var controlLayout = new qx.ui.layout.HBox(10);\n control.setLayout(controlLayout);\n\n control.add(this.getChildControl(\"preview-content-old\"), {flex: 1});\n control.add(this.getChildControl(\"preview-content-new\"), {flex: 1});\n break;\n\n /*\n ---------------------------------------------------------------------------\n CREATE #4: INPUT FIELDSET CONTENT\n ---------------------------------------------------------------------------\n */\n case \"hex-field-composite\":\n var layout = new qx.ui.layout.HBox(4);\n layout.setAlignY(\"middle\");\n control = new qx.ui.container.Composite(layout);\n\n var hexLabel = new qx.ui.basic.Label(this.tr(\"Hex\"));\n hexLabel.setWidth(30);\n control.add(hexLabel);\n\n var hexHelper = new qx.ui.basic.Label(\"#\");\n control.add(hexHelper);\n\n control.add(this.getChildControl(\"hex-field\"));\n break;\n\n case \"hex-field\":\n control = new qx.ui.form.TextField(\"FFFFFF\");\n control.setMaxLength(6);\n control.setFilter(/[0-9A-Fa-f]/);\n control.setWidth(55);\n control.addListener(\"changeValue\", this._onHexFieldChange, this);\n break;\n\n case \"rgb-spinner-composite\":\n var layout = new qx.ui.layout.HBox(4);\n layout.setAlignY(\"middle\");\n control = new qx.ui.container.Composite(layout);\n\n var rgbSpinLabel = new qx.ui.basic.Label(this.tr(\"RGB\"));\n rgbSpinLabel.setWidth(30);\n control.add(rgbSpinLabel);\n\n control.add(this.getChildControl(\"rgb-spinner-red\"));\n control.add(this.getChildControl(\"rgb-spinner-green\"));\n control.add(this.getChildControl(\"rgb-spinner-blue\"));\n break;\n\n case \"rgb-spinner-red\":\n control = new qx.ui.form.Spinner(0, 255, 255);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setRedFromSpinner, this);\n break;\n\n case \"rgb-spinner-green\":\n control = new qx.ui.form.Spinner(0, 255, 255);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setGreenFromSpinner, this);\n break;\n\n case \"rgb-spinner-blue\":\n control = new qx.ui.form.Spinner(0, 255, 255);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setBlueFromSpinner, this);\n break;\n\n case \"hsb-spinner-composite\":\n var layout = new qx.ui.layout.HBox(4);\n layout.setAlignY(\"middle\");\n control = new qx.ui.container.Composite(layout);\n\n var hsbSpinLabel = new qx.ui.basic.Label(this.tr(\"HSB\"));\n hsbSpinLabel.setWidth(30);\n control.add(hsbSpinLabel);\n\n control.add(this.getChildControl(\"hsb-spinner-hue\"));\n control.add(this.getChildControl(\"hsb-spinner-saturation\"));\n control.add(this.getChildControl(\"hsb-spinner-brightness\"));\n break;\n\n case \"hsb-spinner-hue\":\n control = new qx.ui.form.Spinner(0, 0, 360);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setHueFromSpinner, this);\n break;\n\n case \"hsb-spinner-saturation\":\n control = new qx.ui.form.Spinner(0, 0, 100);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setSaturationFromSpinner, this);\n break;\n\n case \"hsb-spinner-brightness\":\n control = new qx.ui.form.Spinner(0, 100, 100);\n control.setWidth(50);\n control.addListener(\"changeValue\", this._setBrightnessFromSpinner, this);\n break;\n\n\n /*\n ---------------------------------------------------------------------------\n CREATE #5: PREVIEW CONTENT\n ---------------------------------------------------------------------------\n */\n case \"preview-content-old\":\n control = new qx.ui.core.Widget();\n break;\n\n case \"preview-content-new\":\n control = new qx.ui.core.Widget();\n break;\n }\n\n return control || this.base(arguments, id);\n },\n\n\n /**\n * The value of the ColorSelector is a string containing the HEX value of\n * the currently selected color. Take a look at\n * {@link qx.util.ColorUtil#stringToRgb} to see what kind of input the\n * method can handle.\n *\n * @param value {String} The value of a color.\n */\n setValue: function(value)\n {\n var rgb;\n\n if (value == null)\n {\n this.__nullValue = true;\n rgb = [255, 255, 255];\n }\n else\n {\n rgb = qx.util.ColorUtil.stringToRgb(value);\n this.__nullValue = false;\n }\n\n // block the first tow events\n this.__preventChangeValueEvent = true;\n this.setRed(rgb[0]);\n this.setGreen(rgb[1]);\n // only allow the final change event\n this.__preventChangeValueEvent = false;\n this.setBlue(rgb[2]);\n },\n\n\n /**\n * Returns the currently selected color.\n *\n * @return {String | null} The HEX value of the color of if not color\n * is set, null.\n */\n getValue: function()\n {\n return this.__nullValue ? null : qx.util.ColorUtil.rgbToHexString(\n [this.getRed(), this.getGreen(), this.getBlue()]\n );\n },\n\n /**\n * Resets the color to null.\n */\n resetValue: function()\n {\n this.__nullValue = true;\n this.__preventChangeValueEvent = true;\n this.setRed(255);\n this.setGreen(255);\n this.__preventChangeValueEvent = false;\n this.setBlue(255);\n },\n\n\n /**\n * Helper for firing the changeValue event and checking for the mutex.\n */\n __fireChangeValueEvent: function()\n {\n if (!this.__preventChangeValueEvent)\n {\n this.__nullValue = false;\n this.fireDataEvent(\"changeValue\", this.getValue());\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n RGB MODIFIER\n ---------------------------------------------------------------------------\n */\n\n\n // property apply\n _applyRed : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"redModifier\";\n }\n\n if (this.__updateContext !== \"rgbSpinner\") {\n this.getChildControl(\"rgb-spinner-red\").setValue(value);\n }\n\n if (this.__updateContext !== \"hexField\") {\n this._setHexFromRgb();\n }\n\n switch(this.__updateContext)\n {\n case \"rgbSpinner\":\n case \"hexField\":\n case \"redModifier\":\n this._setHueFromRgb();\n }\n\n this._setPreviewFromRgb();\n this.__fireChangeValueEvent();\n\n if (this.__updateContext === \"redModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n // property apply\n _applyGreen : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"greenModifier\";\n }\n\n if (this.__updateContext !== \"rgbSpinner\") {\n this.getChildControl(\"rgb-spinner-green\").setValue(value);\n }\n\n if (this.__updateContext !== \"hexField\") {\n this._setHexFromRgb();\n }\n\n switch(this.__updateContext)\n {\n case \"rgbSpinner\":\n case \"hexField\":\n case \"greenModifier\":\n this._setHueFromRgb();\n }\n\n this._setPreviewFromRgb();\n this.__fireChangeValueEvent();\n\n if (this.__updateContext === \"greenModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n // property apply\n _applyBlue : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"blueModifier\";\n }\n\n if (this.__updateContext !== \"rgbSpinner\") {\n this.getChildControl(\"rgb-spinner-blue\").setValue(value);\n }\n\n if (this.__updateContext !== \"hexField\") {\n this._setHexFromRgb();\n }\n\n switch(this.__updateContext)\n {\n case \"rgbSpinner\":\n case \"hexField\":\n case \"blueModifier\":\n this._setHueFromRgb();\n }\n\n this._setPreviewFromRgb();\n this.__fireChangeValueEvent();\n\n if (this.__updateContext === \"blueModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n HSB MODIFIER\n ---------------------------------------------------------------------------\n */\n\n // property apply\n _applyHue : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"hueModifier\";\n }\n\n if (this.__updateContext !== \"hsbSpinner\") {\n this.getChildControl(\"hsb-spinner-hue\").setValue(value);\n }\n\n if (this.__updateContext !== \"hueSaturationField\")\n {\n if (this.getChildControl(\"hue-saturation-handle\").getBounds()) {\n this.getChildControl(\"hue-saturation-handle\").setDomLeft(Math.round(value / 1.40625) + this.getChildControl(\"hue-saturation-pane\").getPaddingLeft());\n } else {\n this.getChildControl(\"hue-saturation-handle\").setLayoutProperties({ left : Math.round(value / 1.40625) });\n }\n }\n\n switch(this.__updateContext)\n {\n case \"hsbSpinner\":\n case \"hueSaturationField\":\n case \"hueModifier\":\n this._setRgbFromHue();\n }\n this._setBrightnessGradiant();\n if (this.__updateContext === \"hueModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n // property apply\n _applySaturation : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"saturationModifier\";\n }\n\n if (this.__updateContext !== \"hsbSpinner\") {\n this.getChildControl(\"hsb-spinner-saturation\").setValue(value);\n }\n\n if (this.__updateContext !== \"hueSaturationField\")\n {\n this._setBrightnessGradiant();\n if (this.getChildControl(\"hue-saturation-handle\").getBounds()) {\n this.getChildControl(\"hue-saturation-handle\").setDomTop(256 - Math.round(value * 2.56) + this.getChildControl(\"hue-saturation-pane\").getPaddingTop());\n } else {\n this.getChildControl(\"hue-saturation-handle\").setLayoutProperties({ top : 256 - Math.round(value * 2.56)});\n }\n }\n\n switch(this.__updateContext)\n {\n case \"hsbSpinner\":\n case \"hueSaturationField\":\n case \"saturationModifier\":\n this._setRgbFromHue();\n }\n\n if (this.__updateContext === \"saturationModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n // property apply\n _applyBrightness : function(value, old)\n {\n if (this.__updateContext === null) {\n this.__updateContext = \"brightnessModifier\";\n }\n\n if (this.__updateContext !== \"hsbSpinner\") {\n this.getChildControl(\"hsb-spinner-brightness\").setValue(value);\n }\n\n if (this.__updateContext !== \"brightnessField\")\n {\n var topValue = 256 - Math.round(value * 2.56);\n\n if (this.getChildControl(\"brightness-handle\").getBounds()) {\n this.getChildControl(\"brightness-handle\").setDomTop(topValue + this.getChildControl(\"brightness-pane\").getPaddingTop());\n } else {\n this.getChildControl(\"brightness-handle\").setLayoutProperties({ top : topValue });\n }\n }\n\n switch(this.__updateContext)\n {\n case \"hsbSpinner\":\n case \"brightnessField\":\n case \"brightnessModifier\":\n this._setRgbFromHue();\n }\n\n if (this.__updateContext === \"brightnessModifier\") {\n this.__updateContext = null;\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n BRIGHTNESS IMPLEMENTATION\n ---------------------------------------------------------------------------\n */\n\n /**\n * Listener of pointerdown event on the brightness handle.\n * Adjusts the color by changing the brightness.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onBrightnessHandlePointerDown : function(e)\n {\n // Activate Capturing\n this.getChildControl(\"brightness-handle\").capture();\n this.__capture = \"brightness-handle\";\n\n // Calculate subtract: Position of Brightness Field - Current Pointer Offset\n var locationBrightnessField = this.getChildControl(\"brightness-field\").getContentLocation();\n var locationBrightnessHandle = this.getChildControl(\"brightness-handle\").getContentLocation();\n var fieldBounds = this.getChildControl(\"brightness-field\").getBounds();\n\n this.__brightnessSubtract = locationBrightnessField.top +\n (e.getDocumentTop() - locationBrightnessHandle.top) - fieldBounds.top;\n\n // Block field event handling\n e.stopPropagation();\n },\n\n\n /**\n * Listener of pointerup event on the brightness handle.\n * Releases the capture.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onBrightnessHandlePointerUp : function(e)\n {\n // Disabling capturing\n this.getChildControl(\"brightness-handle\").releaseCapture();\n this.__capture = null;\n },\n\n\n /**\n * Listener of pointermove event on the brightness handle.\n * Forwards the event to _setBrightnessOnFieldEvent().\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onBrightnessHandlePointerMove : function(e)\n {\n // Update if captured currently (through previous pointerdown)\n if (this.__capture === \"brightness-handle\") {\n this._setBrightnessOnFieldEvent(e);\n e.stopPropagation();\n }\n },\n\n\n /**\n * Listener of pointerdown event on the brightness field.\n * Adjusts the color by changing the brightness.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onBrightnessFieldPointerDown : function(e)\n {\n // Calculate substract: Half height of handler\n var location = this.getChildControl(\"brightness-field\").getContentLocation();\n var bounds = this.getChildControl(\"brightness-handle\").getBounds();\n this.__brightnessSubtract = location.top + (bounds.height / 2);\n\n // Update\n this._setBrightnessOnFieldEvent(e);\n\n // Afterwards: Activate Capturing for handle\n this.getChildControl(\"brightness-handle\").capture();\n this.__capture = \"brightness-handle\";\n },\n\n\n /**\n * Listener of roll event on the brightness pane.\n * Adjusts the color by changing the brightness.\n *\n * @param e {qx.event.type.Roll} Incoming event object\n */\n _onBrightnessPaneRoll : function(e)\n {\n e.stop();\n\n // only wheel\n if (e.getPointerType() != \"wheel\") {\n return;\n }\n\n this.setBrightness(qx.lang.Number.limit((this.getBrightness() - (e.getDelta().y / 10)), 0, 100));\n },\n\n\n /**\n * Sets the brightness and moves the brightness handle.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _setBrightnessOnFieldEvent : function(e)\n {\n var value = qx.lang.Number.limit(e.getDocumentTop() - this.__brightnessSubtract, 0, 256);\n\n this.__updateContext = \"brightnessField\";\n\n if (this.getChildControl(\"brightness-handle\").getBounds()) {\n this.getChildControl(\"brightness-handle\").setDomTop(value);\n } else {\n this.getChildControl(\"brightness-handle\").setLayoutProperties({ top : value });\n }\n\n this.setBrightness(100 - Math.round(value / 2.56));\n\n this.__updateContext = null;\n },\n\n /*\n ---------------------------------------------------------------------------\n HUE/SATURATION IMPLEMENTATION\n ---------------------------------------------------------------------------\n */\n\n\n /**\n * Listener of pointerup event on the saturation handle.\n * Releases pointer capture.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onHueSaturationHandlePointerUp : function(e)\n {\n // Disabling capturing\n if (this.__capture)\n {\n e.stopPropagation();\n this.getChildControl(\"hue-saturation-handle\").releaseCapture();\n this.__capture = null;\n }\n },\n\n\n /**\n * Listener of pointermove event on the saturation handle.\n * Forwards the event to _onHueSaturationHandlePointerMove().\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onHueSaturationHandlePointerMove : function(e)\n {\n\n // Update if captured currently (through previous pointerdown)\n if (this.__capture === \"hue-saturation-handle\")\n {\n this._setHueSaturationOnFieldEvent(e);\n e.stopPropagation();\n }\n },\n\n\n /**\n * Listener of pointerdown event on the saturation field.\n * Adjusts the color by changing the saturation.\n * Sets pointer capture.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onHueSaturationFieldPointerDown : function(e)\n {\n // Calculate substract: Half width/height of handler\n var location = this.getChildControl(\"hue-saturation-field\").getContentLocation();\n var handleBounds = this.getChildControl(\"hue-saturation-handle\").getBounds();\n var fieldBounds = this.getChildControl(\"hue-saturation-field\").getBounds();\n\n this.__hueSaturationSubtractTop = location.top + (handleBounds.height / 2) - fieldBounds.top;\n this.__hueSaturationSubtractLeft = location.left + (handleBounds.width / 2) - fieldBounds.left;\n\n // Update\n this._setHueSaturationOnFieldEvent(e);\n\n // Afterwards: Activate Capturing for handle\n this.getChildControl(\"hue-saturation-handle\").capture();\n this.__capture = \"hue-saturation-handle\";\n },\n\n\n /**\n * Listener of roll event on the saturation pane.\n * Adjusts the color by changing the saturation.\n *\n * @param e {qx.event.type.Roll} Incoming event object\n */\n _onHueSaturationPaneRoll : function(e)\n {\n e.stop();\n\n // only wheel\n if (e.getPointerType() != \"wheel\") {\n return;\n }\n\n var delta = e.getDelta();\n this.setSaturation(qx.lang.Number.limit(this.getSaturation() - delta.y / 10, 0, 100));\n this.setHue(qx.lang.Number.limit(this.getHue() + delta.x / 10, 0, 360));\n },\n\n\n /**\n * Sets the saturation and moves the saturation handle.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _setHueSaturationOnFieldEvent : function(e)\n {\n var vTop = qx.lang.Number.limit(e.getDocumentTop() - this.__hueSaturationSubtractTop, 0, 256);\n var vLeft = qx.lang.Number.limit(e.getDocumentLeft() - this.__hueSaturationSubtractLeft, 0, 256);\n\n this.getChildControl(\"hue-saturation-handle\").setDomPosition(vLeft, vTop);\n\n this.__updateContext = \"hueSaturationField\";\n\n this.setSaturation(100 - Math.round(vTop / 2.56));\n this.setHue(Math.round(vLeft * 1.40625));\n\n this.__updateContext = null;\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n RGB SPINNER\n ---------------------------------------------------------------------------\n */\n\n /**\n * Sets widget's red value to spinner's value.\n */\n _setRedFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"rgbSpinner\";\n this.setRed(this.getChildControl(\"rgb-spinner-red\").getValue());\n this.__updateContext = null;\n },\n\n\n /**\n * Sets widget's green value to spinner's value.\n */\n _setGreenFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"rgbSpinner\";\n this.setGreen(this.getChildControl(\"rgb-spinner-green\").getValue());\n this.__updateContext = null;\n },\n\n\n /**\n * Sets widget's blue value to spinner's value.\n */\n _setBlueFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"rgbSpinner\";\n this.setBlue(this.getChildControl(\"rgb-spinner-blue\").getValue());\n this.__updateContext = null;\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n HSB SPINNER\n ---------------------------------------------------------------------------\n */\n\n /**\n * Sets widget's hue value to spinner's value.\n */\n _setHueFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"hsbSpinner\";\n this.setHue(this.getChildControl(\"hsb-spinner-hue\").getValue());\n this.__updateContext = null;\n },\n\n\n /**\n * Sets widget's saturation value to spinner's value.\n */\n _setSaturationFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"hsbSpinner\";\n this.setSaturation(this.getChildControl(\"hsb-spinner-saturation\").getValue());\n this.__updateContext = null;\n },\n\n\n /**\n * Sets widget's brightness value to spinner's value.\n */\n _setBrightnessFromSpinner : function()\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n this.__updateContext = \"hsbSpinner\";\n this.setBrightness(this.getChildControl(\"hsb-spinner-brightness\").getValue());\n this.__updateContext = null;\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n HEX FIELD\n ---------------------------------------------------------------------------\n */\n\n /**\n * Changes red, green and blue value to the corresponding hexfield value.\n * @param e {qx.event.type.Data} Incoming event object\n */\n _onHexFieldChange : function(e)\n {\n if (this.__updateContext !== null) {\n return;\n }\n\n try\n {\n var hexField = this.getChildControl(\"hex-field\");\n var rgb = qx.util.ColorUtil.hexStringToRgb(\"#\" + hexField.getValue());\n } catch(ex) {\n return;\n };\n\n this.__updateContext = \"hexField\";\n this.setRed(rgb[0]);\n this.setGreen(rgb[1]);\n this.setBlue(rgb[2]);\n this.__updateContext = null;\n },\n\n\n /**\n * Sets hexfield value to it's corresponding red, green and blue value.\n */\n _setHexFromRgb : function()\n {\n var value = qx.util.ColorUtil.rgbToHexString(\n [this.getRed(),this.getGreen(),this.getBlue()]\n );\n\n // get rid of the starting '#'\n value = value.substring(1, value.length);\n\n this.getChildControl(\"hex-field\").setValue(value);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n COLOR FIELD\n ---------------------------------------------------------------------------\n */\n\n /**\n * Listener of tap event on the color field.\n * Sets red, green and blue values to tapped color field's background color.\n *\n * @param e {qx.event.type.Pointer} Incoming event object\n */\n _onColorFieldTap : function(e)\n {\n var vColor = e.getTarget().getBackgroundColor();\n\n if (!vColor) {\n this.error(\"Missing backgroundColor value for field: \" + e.getTarget());\n return;\n }\n\n var rgb = qx.util.ColorUtil.stringToRgb(vColor);\n\n this.setRed(rgb[0]);\n this.setGreen(rgb[1]);\n this.setBlue(rgb[2]);\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n RGB/HSB SYNC\n ---------------------------------------------------------------------------\n */\n\n /**\n * Sets hue value to it's corresponding red, green and blue value.\n */\n _setHueFromRgb : function()\n {\n switch(this.__updateContext)\n {\n case \"hsbSpinner\":\n case \"hueSaturationField\":\n case \"brightnessField\":\n break;\n\n default:\n var hsb = qx.util.ColorUtil.rgbToHsb([this.getRed(), this.getGreen(), this.getBlue()]);\n\n this.setHue(hsb[0]);\n this.setSaturation(hsb[1]);\n this.setBrightness(hsb[2]);\n }\n },\n\n\n /**\n * Sets red, green and blue value to corresponding hue value.\n */\n _setRgbFromHue : function()\n {\n switch(this.__updateContext)\n {\n case \"rgbSpinner\":\n case \"hexField\":\n break;\n\n default:\n var vRgb = qx.util.ColorUtil.hsbToRgb([this.getHue(), this.getSaturation(), this.getBrightness()]);\n\n this.setRed(vRgb[0]);\n this.setGreen(vRgb[1]);\n this.setBlue(vRgb[2]);\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n PREVIEW SYNC\n ---------------------------------------------------------------------------\n */\n\n /**\n * Sets preview pane's background color to corresponding red, green and blue color values.\n */\n _setPreviewFromRgb : function()\n {\n var rgbString = qx.util.ColorUtil.rgbToRgbString([this.getRed(), this.getGreen(), this.getBlue()]);\n this.getChildControl(\"preview-content-new\").setBackgroundColor(rgbString);\n },\n\n\n /**\n * Sets previous color's to given values.\n *\n * @param red {Number} Red color value.\n * @param green {Number} Green color value.\n * @param blue {Number} Blue color value.\n */\n setPreviousColor : function(red, green, blue)\n {\n var color = qx.util.ColorUtil.rgbToRgbString([red, green, blue]);\n this.getChildControl(\"preview-content-old\").setBackgroundColor(color);\n\n this.setRed(red);\n this.setGreen(green);\n this.setBlue(blue);\n },\n\n /**\n * Updates the background of the brightness field to give a nicer gradient\n */\n _setBrightnessGradiant : function()\n {\n var ColorUtil = qx.util.ColorUtil;\n var helpRgb = ColorUtil.hsbToRgb([this.getHue(), this.getSaturation(), 255]);\n var helpRgbString = ColorUtil.rgbToRgbString(helpRgb);\n this.getChildControl(\"brightness-field\").setBackgroundColor(helpRgbString);\n },\n\n /**\n * Listener for appear.\n * Sets preview pane's background color to the current color.\n *\n * @param e {qx.event.type.Data} Incoming event object\n */\n _onAppear : function(e)\n {\n var color = qx.util.ColorUtil.rgbToRgbString([this.getRed(),\n this.getGreen(), this.getBlue()]);\n\n this.getChildControl(\"preview-content-old\").setBackgroundColor(color);\n this.getChildControl(\"preview-content-new\").setBackgroundColor(color);\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.Plans\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.getChildControl(\"pricing-plans-filter\");\n this.__createList();\n this.fetchPlans();\n this.getChildControl(\"create-pricing-plan\");\n },\n\n events: {\n \"pricingPlanSelected\": \"qx.event.type.Data\"\n },\n\n members: {\n __model: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"pricing-plans-filter\":\n control = new osparc.filter.TextFilter(\"text\", \"pricingPlansList\").set({\n allowStretchX: true,\n margin: 0\n });\n this._addAt(control, 0);\n break;\n case \"pricing-plans-container\":\n control = new qx.ui.container.Scroll();\n this._addAt(control, 1, {\n flex: 1\n });\n break;\n case \"pricing-plans-list\":\n control = new qx.ui.form.List().set({\n decorator: \"no-border\",\n spacing: 3\n });\n control.addListener(\"changeSelection\", e => {\n const selection = e.getData();\n if (selection.length) {\n const ppSelected = selection[0];\n this.fireDataEvent(\"pricingPlanSelected\", ppSelected);\n }\n }, this);\n this.getChildControl(\"pricing-plans-container\").add(control);\n break;\n case \"create-pricing-plan\":\n control = new qx.ui.form.Button().set({\n appearance: \"form-button\",\n label: this.tr(\"New Pricing Plan\"),\n alignX: \"center\",\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n control.addListener(\"execute\", () => this.__openCreatePricingPlan());\n this._addAt(control, 2);\n }\n return control || this.base(arguments, id);\n },\n\n __createList: function() {\n const list = this.getChildControl(\"pricing-plans-list\");\n\n const model = this.__model = new qx.data.Array();\n const ppsCtrl = new qx.data.controller.List(model, list, \"label\");\n ppsCtrl.setDelegate({\n createItem: () => new osparc.pricing.PlanListItem(),\n bindItem: (ctrl, item, id) => {\n ctrl.bindProperty(\"pricingPlanId\", \"model\", null, item, id);\n ctrl.bindProperty(\"pricingPlanId\", \"ppId\", null, item, id);\n ctrl.bindProperty(\"pricingPlanKey\", \"ppKey\", null, item, id);\n ctrl.bindProperty(\"name\", \"title\", null, item, id);\n ctrl.bindProperty(\"description\", \"description\", null, item, id);\n ctrl.bindProperty(\"classification\", \"classification\", null, item, id);\n ctrl.bindProperty(\"isActive\", \"isActive\", null, item, id);\n },\n configureItem: item => {\n item.subscribeToFilterGroup(\"pricingPlansList\");\n item.addListener(\"editPricingPlan\", () => this.__openUpdatePricingPlan(item.getModel()));\n }\n });\n },\n\n fetchPlans: function() {\n osparc.store.Pricing.getInstance().fetchPricingPlans()\n .then(data => this.__populateList(data));\n },\n\n __populateList: function(pricingPlans) {\n this.__model.removeAll();\n pricingPlans.forEach(pricingPlan => this.__model.append(pricingPlan));\n },\n\n __openCreatePricingPlan: function() {\n const ppCreator = new osparc.pricing.PlanEditor();\n const title = this.tr(\"Pricing Plan Creator\");\n const win = osparc.ui.window.Window.popUpInWindow(ppCreator, title, 400, 250);\n ppCreator.addListener(\"done\", () => {\n win.close();\n this.fetchPlans();\n });\n ppCreator.addListener(\"cancel\", () => win.close());\n },\n\n __openUpdatePricingPlan: function(pricingPlanId) {\n osparc.store.Pricing.getInstance().fetchPricingUnits(pricingPlanId)\n .then(pricingPlan => {\n const ppEditor = new osparc.pricing.PlanEditor(pricingPlan);\n const title = this.tr(\"Pricing Plan Editor\");\n const win = osparc.ui.window.Window.popUpInWindow(ppEditor, title, 400, 250);\n ppEditor.addListener(\"done\", () => {\n win.close();\n this.fetchPlans();\n });\n ppEditor.addListener(\"cancel\", () => win.close());\n });\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.PlanDetails\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.getChildControl(\"back-to-pp-button\");\n this.getChildControl(\"pricing-plan-details\");\n this.getChildControl(\"pricing-units\");\n this.getChildControl(\"service-list\");\n },\n\n events: {\n \"backToPricingPlans\": \"qx.event.type.Event\"\n },\n\n statics: {\n createTabPage: function(label, icon) {\n const tabPage = new qx.ui.tabview.Page().set({\n layout: new qx.ui.layout.VBox()\n });\n if (label) {\n tabPage.setLabel(label);\n }\n if (icon) {\n tabPage.setIcon(icon);\n }\n tabPage.getChildControl(\"button\").set({\n font: \"text-13\"\n });\n return tabPage;\n }\n },\n\n members: {\n __servicesPage: null,\n\n _createChildControlImpl: function(id) {\n let control;\n let layout;\n switch (id) {\n case \"title-layout\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));\n this._addAt(control, 0);\n break;\n case \"back-to-pp-button\":\n control = new qx.ui.form.Button().set({\n toolTipText: this.tr(\"Back to Pricing Plans\"),\n icon: \"@FontAwesome5Solid/arrow-left/20\",\n backgroundColor: \"transparent\"\n });\n control.addListener(\"execute\", () => this.fireEvent(\"backToPricingPlans\"));\n this.getChildControl(\"title-layout\").add(control);\n break;\n case \"pricing-plan-details\":\n control = new osparc.pricing.PlanListItem();\n control.getChildControl(\"edit-button\").exclude();\n this.getChildControl(\"title-layout\").add(control, {\n flex: 1\n });\n break;\n case \"resources-view\":\n control = new qx.ui.tabview.TabView().set({\n contentPadding: 10\n });\n this._addAt(control, 1, {\n flex: 1\n });\n break;\n case \"pricing-units\": {\n control = new osparc.pricing.UnitsList();\n const tabPage = this.self().createTabPage(this.tr(\"Pricing Units\"), \"@FontAwesome5Solid/paw/14\");\n tabPage.add(control, {\n flex: 1\n });\n layout = this.getChildControl(\"resources-view\");\n layout.add(tabPage);\n break;\n }\n case \"service-list\": {\n control = new osparc.pricing.ServicesList();\n const tabPage = this.__servicesPage = this.self().createTabPage(this.tr(\"Services\"), \"@FontAwesome5Solid/cogs/14\");\n tabPage.add(control, {\n flex: 1\n });\n layout = this.getChildControl(\"resources-view\");\n layout.add(tabPage);\n break;\n }\n }\n return control || this.base(arguments, id);\n },\n\n setCurrentPricingPlan: function(pricingPlan) {\n if (pricingPlan === null) {\n return;\n }\n\n const pricingPlanListItem = this.getChildControl(\"pricing-plan-details\");\n pricingPlan.bind(\"model\", pricingPlanListItem, \"model\");\n pricingPlan.bind(\"ppId\", pricingPlanListItem, \"ppId\");\n pricingPlan.bind(\"ppKey\", pricingPlanListItem, \"ppKey\");\n pricingPlan.bind(\"title\", pricingPlanListItem, \"title\");\n pricingPlan.bind(\"description\", pricingPlanListItem, \"description\");\n pricingPlan.bind(\"isActive\", pricingPlanListItem, \"isActive\");\n\n // set PricingPlanId to the tab views\n this.getChildControl(\"pricing-units\").setPricingPlanId(pricingPlan.getModel());\n this.getChildControl(\"service-list\").setPricingPlanId(pricingPlan.getModel());\n\n // show services only if it's a TIER pricing plan\n this.__servicesPage.getChildControl(\"button\").set({\n visibility: pricingPlan.getClassification() === \"TIER\" ? \"visible\" : \"excluded\"\n });\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.editor.HtmlEditor\", {\n extend: osparc.editor.TextEditor,\n\n /**\n * @param initText {String} Initialization text\n */\n construct: function(initText = \"\") {\n this.base(arguments, initText);\n\n this.getChildControl(\"preview-html\");\n this.getChildControl(\"subtitle\").set({\n value: this.tr(\"Supports HTML\")\n });\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"preview-html\": {\n control = new qx.ui.embed.Html();\n const textArea = this.getChildControl(\"text-area\");\n textArea.bind(\"value\", control, \"html\");\n const tabs = this.getChildControl(\"tabs\");\n const previewPage = new qx.ui.tabview.Page(this.tr(\"Preview\")).set({\n layout: new qx.ui.layout.VBox(5)\n });\n previewPage.getChildControl(\"button\").getChildControl(\"label\").set({\n font: \"text-13\"\n });\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(control);\n previewPage.add(scrollContainer, {\n flex: 1\n });\n tabs.add(previewPage);\n break;\n }\n }\n return control || this.base(arguments, id);\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2007 by Tartan Solutions, Inc, http://www.tartansolutions.com\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Dan Hummon\n\n************************************************************************ */\n\n/**\n * A filtered table model to provide support for hiding and filtering table\n * rows. Any rows that match any applied filters will be hidden.\n\n\nvar model = new qx.ui.table.model.Filtered();\nmodel.setColumns([\"Login\", \"Name\", \"Email\"], [\"login\", \"name\", \"email\"]);\n\nvar table = new qx.ui.table.Table(model);\n\nvar data = [{\n login : \"darthvader\",\n name : \"Darth Vader\",\n email : \"darthvader@tatooine.org\"\n}, {\n login : \"anakin\",\n name : \"Anakin Skywalker\",\n email : \"anakin@skywalker.org\"\n}, {\n login : \"luke\",\n name : \"Luke Skywalker\",\n email : \"luke@tatooine.org\"\n}, {\n login : \"obi-wan\",\n name : \"Obi-Wan Kenobi\",\n email : \"obiwan@jedi.org\"\n}, {\n login : \"rey\",\n name : \"Rey\",\n email : \"rey@jakku.sw\"\n}];\n\nmodel.setDataAsMapArray(data);\n\nthis.getRoot().add(table);\n\nvar search = new qx.ui.form.TextField();\nsearch.set({\n liveUpdate : true,\n placeholder : \"Search login\"\n});\n\nsearch.addListener(\"changeValue\", function(e) {\n var value = e.getData();\n\n model.resetHiddenRows();\n model.addNotRegex(value, \"login\", true);\n model.applyFilters();\n});\n\nthis.getRoot().add(search, {top : 500, left : 10});\n\n *\n * @deprecated {6.0} You should use\n * Array.filter\n * method to filter the table model\n */\nqx.Class.define(\"qx.ui.table.model.Filtered\",\n{\n extend : qx.ui.table.model.Simple,\n\n\n construct : function()\n {\n this.base(arguments);\n\n this.__filterTypes = {\n \"==\" : \"numeric\",\n \"!=\" : \"numeric\",\n \">\" : \"numeric\",\n \"<\" : \"numeric\",\n \"<=\" : \"numeric\",\n \">=\" : \"numeric\",\n \"between\": \"between\",\n \"!between\": \"between\"\n };\n\n this.__applyingFilters = false;\n this.Filters = [];\n\n },\n\n\n members :\n {\n __fullArr : null,\n __applyingFilters : null,\n __filterTypes : null,\n\n /**\n * Function to get the full array of the filtered model\n * @return {Array} the full array of model (with no changes)\n */\n getFullArray: function ()\n {\n return this.__fullArr;\n },\n\n /**\n * Whether the given string (needle) is in the array (haystack)\n *\n * @param the_needle {String} String to search\n * @param the_haystack {Array} Array, which should be searched\n * @return {Boolean} whether the search string was found.\n * @deprecated {6.0}\n */\n _js_in_array : function(the_needle, the_haystack)\n {\n var the_hay = the_haystack.toString();\n\n if (the_hay == '') {\n return false;\n }\n\n var the_pattern = new RegExp(the_needle, 'g');\n var matched = the_pattern.test(the_haystack);\n return matched;\n },\n\n\n /**\n * The addBetweenFilter method is used to add a between filter to the\n * table model.\n *\n * @param filter {String}\n * The type of filter. Accepted strings are \"between\" and \"!between\".\n *\n * @param value1 {Integer}\n * The first value to compare against.\n *\n * @param value2 {Integer}\n * The second value to compare against.\n *\n * @param target {String}\n * The text value of the column to compare against.\n *\n *\n * @throws {Error} If the filter can not recognized or one of the values\n * is null.\n */\n addBetweenFilter : function(filter, value1, value2, target)\n {\n if (this.__filterTypes[filter] === \"between\" && target != null)\n {\n if (value1 != null && value2 != null) {\n var temp = new Array(filter, value1, value2, target);\n }\n }\n\n if (temp != null) {\n this.Filters.push(temp);\n } else {\n throw new Error(\"Filter not recognized or value1/value2 is null!\");\n }\n },\n\n\n /**\n * The addNumericFilter method is used to add a basic numeric filter to\n * the table model.\n *\n * @param filter {String}\n * The type of filter. Accepted strings are:\n * \"==\", \"!=\", \">\", \"<\", \">=\", and \"<=\".\n *\n * @param value1 {Integer}\n * The value to compare against.\n *\n * @param target {String}\n * The text value of the column to compare against.\n *\n *\n * @throws {Error} If the filter can not recognized or the target is null.\n */\n addNumericFilter : function(filter, value1, target)\n {\n var temp = null;\n\n if (this.__filterTypes[filter] === \"numeric\" && target != null)\n {\n if (value1 != null) {\n temp = [filter, value1, target];\n }\n }\n\n if (temp != null) {\n this.Filters.push(temp);\n } else {\n throw new Error(\"Filter not recognized: value or target is null!\");\n }\n },\n\n\n /**\n * The addRegex method is used to add a regular expression filter to the\n * table model.\n *\n * @param regex {String}\n * The regular expression to match against.\n *\n * @param target {String}\n * The text value of the column to compare against.\n *\n * @param ignorecase {Boolean}\n * If true, the regular expression will ignore case.\n *\n *\n * @throws {Error} If the regex is not valid.\n */\n addRegex : function(regex, target, ignorecase)\n {\n var regexarg;\n if (ignorecase) {\n regexarg ='gi';\n } else {\n regexarg ='g';\n }\n\n if (regex != null && target != null) {\n var temp = new Array(\"regex\", regex, target, regexarg);\n }\n\n if (temp != null) {\n this.Filters.push(temp);\n } else {\n throw new Error(\"regex cannot be null!\");\n }\n },\n\n\n /**\n * The addNotRegex method is used to add a regular expression filter to the\n * table model and filter cells that do not match.\n *\n * @param regex {String}\n * The regular expression to match against.\n *\n * @param target {String}\n * The text value of the column to compare against.\n *\n * @param ignorecase {Boolean}\n * If true, the regular expression will ignore case.\n *\n *\n * @throws {Error} If the regex is null.\n */\n addNotRegex : function(regex, target, ignorecase)\n {\n var regexarg;\n if (ignorecase) {\n regexarg ='gi';\n } else {\n regexarg ='g';\n }\n\n if (regex != null && target != null) {\n var temp = new Array(\"notregex\", regex, target, regexarg);\n }\n\n if (temp != null) {\n this.Filters.push(temp);\n } else {\n throw new Error(\"notregex cannot be null!\");\n }\n },\n\n\n /**\n * The applyFilters method is called to apply filters to the table model.\n */\n applyFilters : function()\n {\n var i;\n var filter_test;\n var compareValue;\n var rowArr = this.getData();\n var rowLength = rowArr.length;\n var rowsToHide = [];\n\n for (var row = 0; row < rowLength; row++)\n {\n filter_test = false;\n for (i in this.Filters)\n {\n\n if (this.__filterTypes[this.Filters[i][0]] === \"numeric\")\n {\n compareValue = this.getValueById(this.Filters[i][2], row);\n switch(this.Filters[i][0])\n {\n case \"==\":\n if (compareValue == this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n\n case \"!=\":\n if (compareValue != this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n\n case \">\":\n if (compareValue > this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n\n case \"<\":\n if (compareValue < this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n\n case \">=\":\n if (compareValue >= this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n\n case \"<=\":\n if (compareValue <= this.Filters[i][1]) {\n filter_test = true;\n }\n\n break;\n }\n }\n else if (this.__filterTypes[this.Filters[i][0]] === \"between\")\n {\n compareValue = this.getValueById(this.Filters[i][3], row);\n\n switch(this.Filters[i][0])\n {\n case \"between\":\n if (compareValue >= this.Filters[i][1] &&\n compareValue <= this.Filters[i][2]) {\n filter_test = true;\n }\n\n break;\n\n case \"!between\":\n if (compareValue < this.Filters[i][1] ||\n compareValue > this.Filters[i][2]) {\n filter_test = true;\n }\n\n break;\n }\n }\n else if (this.Filters[i][0] === \"regex\")\n {\n compareValue = this.getValueById(this.Filters[i][2], row);\n\n var the_pattern = new RegExp(this.Filters[i][1], this.Filters[i][3]);\n filter_test = the_pattern.test(compareValue);\n }\n else if (this.Filters[i][0] === \"notregex\")\n {\n compareValue = this.getValueById(this.Filters[i][2], row);\n\n var the_pattern = new RegExp(this.Filters[i][1], this.Filters[i][3]);\n filter_test = !the_pattern.test(compareValue);\n }\n\n if (filter_test === true) {\n break;\n }\n }\n\n // instead of hiding a single row, push it into the hiding-store for later hiding.\n if (filter_test === true) {\n rowsToHide.push(row);\n }\n }\n\n if (!this.__applyingFilters) {\n this.__fullArr = rowArr.slice(0);\n this.__applyingFilters = true;\n }\n\n rowArr = rowArr.filter(function(row, index) {\n return !rowsToHide.includes(index);\n });\n\n this._rowArr = rowArr;\n\n var data = {\n firstRow : 0,\n lastRow : this._rowArr.length - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n // Inform the listeners\n this.fireDataEvent(\"dataChanged\", data);\n },\n\n\n /**\n * Hides a specified number of rows.\n *\n * @param rowNum {Integer}\n * Index of the first row to be hidden in the table.\n *\n * @param numOfRows {Integer}\n * The number of rows to be hidden sequentially after rowNum.\n *\n * @param dispatchEvent {Boolean?true} Whether a model change event should\n * be fired.\n *\n */\n hideRows : function(rowNum, numOfRows, dispatchEvent)\n {\n var rowArr = this.getData();\n\n dispatchEvent = (dispatchEvent != null ? dispatchEvent : true);\n if (!this.__applyingFilters) {\n this.__fullArr = rowArr.slice(0);\n this.__applyingFilters = true;\n }\n\n if (numOfRows == null || numOfRows < 1) {\n numOfRows = 1;\n }\n\n for (var kludge = rowNum;\n kludge<(rowArr.length - numOfRows);\n kludge++) {\n rowArr[kludge] = rowArr[kludge + numOfRows];\n }\n this.removeRows(kludge, numOfRows);\n\n // Inform the listeners\n if (dispatchEvent)\n {\n var data =\n {\n firstRow : 0,\n lastRow : rowArr.length - 1,\n firstColumn : 0,\n lastColumn : this.getColumnCount() - 1\n };\n\n this.fireDataEvent(\"dataChanged\", data);\n }\n },\n\n\n /**\n * Return the table to the original state with all rows shown and clears\n * all filters.\n *\n */\n resetHiddenRows : function()\n {\n if (!this.__fullArr) {\n // nothing to reset\n return;\n }\n this.Filters = [];\n\n this.setData(qx.lang.Array.clone(this.__fullArr));\n },\n\n\n // overridden\n setData : function(rowArr, clearSorting)\n {\n this.__fullArr = qx.lang.Array.clone(rowArr);\n this.Filters = [];\n this.base(arguments, rowArr, clearSorting);\n }\n },\n\n\n destruct : function()\n {\n this.__fullArr = this.__filterTypes = this.Filters = null;\n }\n});\n","/*\n * oSPARC - The SIMCORE frontend - https://osparc.io\n * Copyright: 2025 IT'IS Foundation - https://itis.swiss\n * License: MIT - https://opensource.org/licenses/MIT\n * Authors: Odei Maiz (odeimaiz)\n */\n\nqx.Class.define(\"osparc.ui.markdown.MarkdownWindow\", {\n extend: osparc.ui.window.Window,\n\n construct: function(markdownUrl) {\n this.base(arguments);\n\n this.set({\n layout: new qx.ui.layout.VBox(),\n resizable: true,\n showMaximize: false,\n showMinimize: false,\n centerOnAppear: true,\n clickAwayClose: true,\n modal: true\n });\n\n const markdown = new osparc.ui.markdown.Markdown().set({\n padding: 15,\n });\n const scrollContainer = new qx.ui.container.Scroll();\n scrollContainer.add(markdown);\n this._add(scrollContainer, {\n flex: 1,\n });\n\n if (markdownUrl) {\n fetch(markdownUrl)\n .then(res => res.text())\n .then(text => markdown.setValue(text));\n }\n },\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.study.PricingUnitLicense\", {\n extend: osparc.study.PricingUnit,\n\n events: {\n \"rentPricingUnit\": \"qx.event.type.Event\",\n },\n\n properties: {\n showRentButton: {\n check: \"Boolean\",\n init: false,\n nullable: true,\n event: \"changeShowRentButton\"\n },\n },\n\n statics: {\n getExpirationDate: function() {\n const expirationDate = new Date();\n expirationDate.setFullYear(expirationDate.getFullYear() + 1); // hardcoded for now: rented for one year from now\n return expirationDate;\n },\n },\n\n members: {\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"rental-period\":\n control = new qx.ui.basic.Label().set({\n value: this.tr(\"Duration: 1 year\"), // hardcoded for now\n font: \"text-14\",\n });\n this._add(control);\n break;\n case \"rent-button\":\n control = new qx.ui.form.Button(this.tr(\"Rent\")).set({\n appearance: \"strong-button\",\n center: true,\n });\n this.bind(\"showRentButton\", control, \"visibility\", {\n converter: show => show ? \"visible\" : \"excluded\"\n });\n control.addListener(\"execute\", () => this.__rentUnit());\n this._add(control);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n // override\n _buildLayout: function(pricingUnit) {\n this.base(arguments, pricingUnit);\n\n this.getChildControl(\"rental-period\");\n\n // add price info\n const price = this.getChildControl(\"price\");\n pricingUnit.bind(\"cost\", price, \"value\", {\n converter: v => this.tr(\"Credits\") + \": \" + osparc.utils.Utils.addWhiteSpaces(v)\n });\n\n // add edit button\n this.getChildControl(\"edit-button\");\n\n // add rent button\n this.getChildControl(\"rent-button\");\n },\n\n __rentUnit: function() {\n const nSeats = parseInt(this.getUnitData().getExtraInfo()[\"num_of_seats\"]);\n const nCredits = this.getUnitData().getCost();\n const expirationDate = osparc.study.PricingUnitLicense.getExpirationDate();\n let msg = nSeats + \" seat\" + (nSeats > 1 ? \"s \" : \" \") + this.tr(\"will be available until \") + osparc.utils.Utils.formatDate(expirationDate);\n msg += `
The rental will cost ${nCredits} credits`;\n msg += `
I hereby accept the Terms and Conditions`;\n const confirmationWin = new osparc.ui.window.Confirmation(msg).set({\n caption: this.tr(\"Rent\"),\n confirmText: this.tr(\"Rent\"),\n });\n\n confirmationWin.open();\n confirmationWin.addListener(\"close\", () => {\n if (confirmationWin.getConfirmed()) {\n this.fireEvent(\"rentPricingUnit\");\n }\n }, this);\n },\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.PlanListItem\", {\n extend: qx.ui.core.Widget,\n implement : [qx.ui.form.IModel, osparc.filter.IFilterable],\n include : [qx.ui.form.MModelProperty, osparc.filter.MFilterable],\n\n construct: function() {\n this.base(arguments);\n\n const layout = new qx.ui.layout.Grid(20, 5);\n layout.setColumnFlex(2, 1);\n this._setLayout(layout);\n this.setPadding(10);\n\n this.getChildControl(\"title\");\n this.getChildControl(\"description\");\n this.getChildControl(\"classification\");\n this.getChildControl(\"edit-button\");\n\n this.addListener(\"pointerover\", this._onPointerOver, this);\n this.addListener(\"pointerout\", this._onPointerOut, this);\n },\n\n events: {\n /** (Fired by {@link qx.ui.form.List}) */\n \"action\": \"qx.event.type.Event\",\n \"editPricingPlan\": \"qx.event.type.Event\"\n },\n\n properties: {\n appearance: {\n refine: true,\n init: \"selectable\"\n },\n\n ppId: {\n check: \"Number\",\n nullable: true,\n apply: \"__applyPpId\",\n event: \"changePpId\"\n },\n\n ppKey: {\n check: \"String\",\n apply: \"__applyPpKey\",\n nullable: true,\n event: \"changePpKey\"\n },\n\n title: {\n check: \"String\",\n nullable: true,\n event: \"changeTitle\"\n },\n\n description: {\n check: \"String\",\n nullable: true,\n event: \"changeDescription\"\n },\n\n classification: {\n check: \"String\",\n nullable: true,\n event: \"changeClassification\"\n },\n\n isActive: {\n check: \"Boolean\",\n apply: \"__applyIsActive\",\n nullable : true,\n event: \"changeIsActive\"\n }\n },\n\n members: { // eslint-disable-line qx-rules/no-refs-in-members\n // overridden\n _forwardStates: {\n focused : true,\n hovered : true,\n selected : true,\n dragover : true\n },\n\n /**\n * Event handler for the pointer over event.\n */\n _onPointerOver: function() {\n this.addState(\"hovered\");\n },\n\n\n /**\n * Event handler for the pointer out event.\n */\n _onPointerOut : function() {\n this.removeState(\"hovered\");\n },\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"pp-id\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n width: 35,\n });\n this._add(control, {\n row: 0,\n column: 0,\n rowSpan: 2\n });\n break;\n case \"pp-key\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n width: 80,\n });\n this._add(control, {\n row: 0,\n column: 1,\n rowSpan: 2\n });\n break;\n case \"title\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\"\n });\n this.bind(\"title\", control, \"value\");\n this._add(control, {\n row: 0,\n column: 2\n });\n break;\n case \"description\":\n control = new qx.ui.basic.Label().set({\n font: \"text-13\"\n });\n this.bind(\"description\", control, \"value\");\n this._add(control, {\n row: 1,\n column: 2\n });\n break;\n case \"classification\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\",\n width: 60,\n });\n this.bind(\"classification\", control, \"value\");\n this._add(control, {\n row: 0,\n column: 3,\n rowSpan: 2\n });\n break;\n case \"is-active\":\n control = new qx.ui.basic.Label().set({\n font: \"text-14\",\n alignY: \"middle\"\n });\n this._add(control, {\n row: 0,\n column: 4,\n rowSpan: 2\n });\n break;\n case \"edit-button\":\n control = new qx.ui.form.Button(this.tr(\"Edit\")).set({\n alignY: \"middle\",\n allowGrowY: false\n });\n control.addListener(\"tap\", () => this.fireEvent(\"editPricingPlan\"));\n this._add(control, {\n row: 0,\n column: 5,\n rowSpan: 2\n });\n break;\n }\n if (control && id !== \"edit-button\") {\n // make edit button tappable\n control.set({\n anonymous: true\n });\n }\n\n return control || this.base(arguments, id);\n },\n\n __applyPpId: function(id) {\n if (id === null) {\n return;\n }\n const label = this.getChildControl(\"pp-id\");\n label.setValue(\"Id: \" + id);\n },\n\n __applyPpKey: function(id) {\n if (id === null) {\n return;\n }\n const label = this.getChildControl(\"pp-key\");\n label.setValue(\"Key: \" + id);\n },\n\n __applyIsActive: function(value) {\n if (value === null) {\n return;\n }\n const label = this.getChildControl(\"is-active\");\n label.setValue(value ? \"Active\" : \"Inactive\");\n },\n\n /**\n * Event handler for filtering events.\n */\n _filter: function() {\n this.exclude();\n },\n\n _unfilter: function() {\n this.show();\n },\n\n _shouldApplyFilter: function(data) {\n if (data.text) {\n const checks = [\n this.getTitle(),\n this.getDescription()\n ];\n if (checks.filter(check => check && check.toLowerCase().trim().includes(data.text)).length == 0) {\n return true;\n }\n }\n return false;\n },\n\n _shouldReactToFilter: function(data) {\n if (data.text && data.text.length > 1) {\n return true;\n }\n return false;\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.PlanEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(pricingPlan) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n const ppKey = this.getChildControl(\"pp-key\");\n const name = this.getChildControl(\"name\");\n this.getChildControl(\"description\");\n this.getChildControl(\"classification\");\n const isActive = this.getChildControl(\"is-active\");\n\n const manager = this.__validator = new qx.ui.form.validation.Manager();\n ppKey.setRequired(true);\n name.setRequired(true);\n manager.add(ppKey);\n manager.add(name);\n\n if (pricingPlan) {\n this.__pricingPlan = osparc.utils.Utils.deepCloneObject(pricingPlan);\n this.set({\n ppKey: pricingPlan.getPricingPlanKey(),\n name: pricingPlan.getName(),\n description: pricingPlan.getDescription(),\n classification: pricingPlan.getClassification(),\n isActive: pricingPlan.getIsActive(),\n });\n ppKey.setEnabled(false);\n this.getChildControl(\"save\");\n } else {\n isActive.setEnabled(false);\n this.getChildControl(\"create\");\n }\n },\n\n properties: {\n ppKey: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changePpKey\"\n },\n\n name: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeName\"\n },\n\n description: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeDescription\"\n },\n\n classification: {\n check: [\"TIER\", \"LICENSE\"],\n init: \"\",\n nullable: false,\n event: \"changeClassification\"\n },\n\n isActive: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changeIsActive\"\n }\n },\n\n events: {\n \"done\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __pricingPlan: null,\n __validator: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"pp-key\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Pricing Plan Key\")\n });\n this.bind(\"ppKey\", control, \"value\");\n control.bind(\"value\", this, \"ppKey\");\n this._add(control);\n break;\n }\n case \"name\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\",\n placeholder: this.tr(\"Name\")\n });\n this.bind(\"name\", control, \"value\");\n control.bind(\"value\", this, \"name\");\n this._add(control);\n break;\n }\n case \"description\": {\n control = new qx.ui.form.TextArea().set({\n font: \"text-14\",\n placeholder: this.tr(\"Description\")\n });\n this.bind(\"description\", control, \"value\");\n control.bind(\"value\", this, \"description\");\n this._add(control);\n break;\n }\n case \"classification\": {\n control = new qx.ui.form.SelectBox().set({\n font: \"text-14\",\n });\n [\n \"TIER\",\n \"LICENSE\",\n ].forEach(c => {\n const cItem = new qx.ui.form.ListItem(c);\n control.add(cItem);\n });\n this.bind(\"classification\", control, \"value\");\n control.addListener(\"changeValue\", e => {\n const currentSelection = e.getData();\n this.setClassification(currentSelection.getLabel());\n }, this);\n this._add(control);\n break;\n }\n case \"is-active\": {\n control = new qx.ui.form.CheckBox().set({\n value: true\n });\n this.bind(\"isActive\", control, \"value\");\n control.bind(\"value\", this, \"isActive\");\n this._add(control);\n break;\n }\n case \"buttonsLayout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n control.addAt(cancelButton, 0);\n this._add(control);\n break;\n }\n case \"create\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Create\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.__createPricingPlan();\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n case \"save\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.__updatePricingPlan();\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __createPricingPlan: function() {\n const ppKey = this.getPpKey();\n const name = this.getName();\n const description = this.getDescription();\n const classification = this.getClassification();\n const newPricingPlanData = {\n \"pricingPlanKey\": ppKey,\n \"displayName\": name,\n \"description\": description,\n \"classification\": classification,\n };\n osparc.store.Pricing.getInstance().postPricingPlan(newPricingPlanData)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(name + this.tr(\" successfully created\"));\n this.fireEvent(\"done\");\n })\n .catch(err => {\n const errorMsg = err.message || this.tr(\"Something went wrong creating \") + name;\n osparc.FlashMessenger.getInstance().logAs(errorMsg, \"ERROR\");\n console.error(err);\n })\n .finally(() => this.getChildControl(\"create\").setFetching(false));\n },\n\n __updatePricingPlan: function() {\n const updateData = {\n \"pricingPlanKey\": this.getPpKey(),\n \"displayName\": this.getName(),\n \"description\": this.getDescription(),\n \"classification\": this.getClassification(),\n \"isActive\": this.getIsActive(),\n };\n osparc.store.Pricing.getInstance().putPricingPlan(this.__pricingPlan[\"pricingPlanId\"], updateData)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Successfully updated\"));\n this.fireEvent(\"done\");\n })\n .catch(err => {\n const errorMsg = err.message || this.tr(\"Something went wrong\");\n osparc.FlashMessenger.getInstance().logAs(errorMsg, \"ERROR\");\n console.error(err);\n })\n .finally(() => this.getChildControl(\"save\").setFetching(false));\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2024 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.UnitsList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.getChildControl(\"pricing-units-container\");\n this.getChildControl(\"create-pricing-unit\");\n },\n\n properties: {\n pricingPlanId: {\n check: \"Number\",\n init: null,\n nullable: false,\n apply: \"__fetchUnits\"\n }\n },\n\n members: {\n __model: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"pricing-units-container\":\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10));\n this._addAt(control, 0, {\n flex: 1\n });\n break;\n case \"create-pricing-unit\":\n control = new qx.ui.form.Button().set({\n appearance: \"form-button\",\n label: this.tr(\"New Pricing Unit\"),\n alignX: \"center\",\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n control.addListener(\"execute\", () => this.__openCreatePricingUnit());\n this._addAt(control, 1);\n }\n return control || this.base(arguments, id);\n },\n\n __fetchUnits: function() {\n osparc.store.Pricing.getInstance().fetchPricingUnits(this.getPricingPlanId())\n .then(pricingUnits => this.__populateList(pricingUnits));\n },\n\n __populateList: function(pricingUnits) {\n this.getChildControl(\"pricing-units-container\").removeAll();\n\n if (pricingUnits === null) {\n return;\n }\n\n pricingUnits.forEach(pricingUnit => {\n let pUnit = null;\n if (pricingUnit.getClassification() === \"LICENSE\") {\n pUnit = new osparc.study.PricingUnitLicense(pricingUnit).set({\n showRentButton: false,\n });\n } else {\n pUnit = new osparc.study.PricingUnitTier(pricingUnit).set({\n showAwsSpecificInfo: true,\n });\n }\n pUnit.set({\n showEditButton: true,\n });\n pUnit.addListener(\"editPricingUnit\", () => this.__openUpdatePricingUnit(pricingUnit));\n this.getChildControl(\"pricing-units-container\").add(pUnit);\n });\n\n const buttons = this.getChildControl(\"pricing-units-container\").getChildren();\n buttons.forEach(btn => {\n btn.setSelected(btn.getUnitData().getIsDefault());\n });\n },\n\n __openCreatePricingUnit: function() {\n const puCreator = new osparc.pricing.UnitEditor(this.getPricingPlanId(), null);\n const title = this.tr(\"Pricing Unit Creator\");\n const win = osparc.ui.window.Window.popUpInWindow(puCreator, title, 400, 250);\n puCreator.addListener(\"done\", () => {\n win.close();\n this.__fetchUnits();\n });\n puCreator.addListener(\"cancel\", () => win.close());\n },\n\n __openUpdatePricingUnit: function(pricingUnit) {\n const puEditor = new osparc.pricing.UnitEditor(this.getPricingPlanId(), pricingUnit);\n const title = this.tr(\"Pricing Unit Editor\");\n const win = osparc.ui.window.Window.popUpInWindow(puEditor, title, 400, 250);\n puEditor.addListener(\"done\", () => {\n win.close();\n this.__fetchUnits();\n });\n puEditor.addListener(\"cancel\", () => win.close());\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.ServicesList\", {\n extend: qx.ui.core.Widget,\n\n construct: function() {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(5));\n\n this.getChildControl(\"services-list\");\n this.getChildControl(\"add-service\");\n },\n\n properties: {\n pricingPlanId: {\n check: \"Number\",\n init: null,\n nullable: false,\n apply: \"__fetchServices\"\n }\n },\n\n members: {\n __model: null,\n __servicesModel: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"services-list\": {\n control = new osparc.service.ServiceList(\"adminPanel\");\n const scrolledServices = new qx.ui.container.Scroll();\n scrolledServices.add(control);\n this._addAt(scrolledServices, 0, {\n flex: 1\n });\n break;\n }\n case \"add-service\":\n control = new qx.ui.form.Button().set({\n appearance: \"form-button\",\n label: this.tr(\"Add Service\"),\n alignX: \"center\",\n icon: \"@FontAwesome5Solid/plus/14\",\n allowGrowX: false\n });\n control.addListener(\"execute\", () => this.__openAddServiceToPlan());\n this._addAt(control, 1);\n break;\n }\n return control || this.base(arguments, id);\n },\n\n __fetchServices: function() {\n const params = {\n url: {\n pricingPlanId: this.getPricingPlanId()\n }\n };\n osparc.data.Resources.fetch(\"billableServices\", \"get\", params)\n .then(data => this.__populateList(data));\n },\n\n __populateList: function(services) {\n // before accessing the metadata in a sync way, we need to bring them to the cache\n const metadataPromises = [];\n services.forEach(service => {\n const key = service[\"serviceKey\"];\n const version = service[\"serviceVersion\"];\n metadataPromises.push(osparc.store.Services.getService(key, version));\n });\n Promise.all(metadataPromises)\n .catch(err => console.error(err))\n .finally(() => {\n const sList = [];\n services.forEach(service => {\n const key = service[\"serviceKey\"];\n const version = service[\"serviceVersion\"];\n const serviceMetadata = osparc.store.Services.getMetadata(key, version);\n if (serviceMetadata) {\n sList.push(new osparc.data.model.Service(serviceMetadata));\n }\n });\n const servicesList = this.getChildControl(\"services-list\");\n servicesList.setModel(new qx.data.Array(sList));\n })\n },\n\n __openAddServiceToPlan: function() {\n const srvCat = new osparc.workbench.ServiceCatalog();\n srvCat.addListener(\"addService\", e => {\n const data = e.getData();\n const service = data.service;\n const params = {\n url: {\n pricingPlanId: this.getPricingPlanId()\n },\n data: {\n serviceKey: service.getKey(),\n serviceVersion: service.getVersion()\n }\n };\n osparc.data.Resources.fetch(\"billableServices\", \"post\", params)\n .then(() => this.__fetchServices());\n });\n srvCat.center();\n srvCat.open();\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2020 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Class.define(\"osparc.pricing.UnitEditor\", {\n extend: qx.ui.core.Widget,\n\n construct: function(pricingPlanId, pricingUnit) {\n this.base(arguments);\n\n this._setLayout(new qx.ui.layout.VBox(10));\n\n this.__validator = new qx.ui.form.validation.Manager();\n\n this.set({\n pricingPlanId\n });\n\n if (pricingUnit) {\n this.set({\n pricingUnitId: pricingUnit.getPricingUnitId(),\n unitName: pricingUnit.getName(),\n costPerUnit: pricingUnit.getCost(),\n default: pricingUnit.getIsDefault(),\n });\n const extraInfo = osparc.utils.Utils.deepCloneObject(pricingUnit.getExtraInfo());\n if (pricingUnit.getClassification() === \"TIER\") {\n this.set({\n specificInfo: pricingUnit.getSpecificInfo() && pricingUnit.getSpecificInfo()[\"aws_ec2_instances\"] ? pricingUnit.getSpecificInfo()[\"aws_ec2_instances\"].toString() : \"\",\n });\n // extract the required fields from the unitExtraInfo\n this.set({\n unitExtraInfoCPU: extraInfo[\"CPU\"],\n unitExtraInfoRAM: extraInfo[\"RAM\"],\n unitExtraInfoVRAM: extraInfo[\"VRAM\"]\n });\n delete extraInfo[\"CPU\"];\n delete extraInfo[\"RAM\"];\n delete extraInfo[\"VRAM\"];\n this.set({\n unitExtraInfo: extraInfo\n });\n } else if (pricingUnit.getClassification() === \"LICENSE\") {\n // extract the required fields from the unitExtraInfo\n this.set({\n unitExtraInfoNSeats: extraInfo[\"num_of_seats\"],\n });\n }\n this.getChildControl(\"save\");\n } else {\n this.getChildControl(\"create\");\n }\n },\n\n properties: {\n pricingPlanId: {\n check: \"Number\",\n init: null,\n nullable: false,\n apply: \"__applyPricingPlanId\"\n },\n\n pricingUnitId: {\n check: \"Number\",\n nullable: true,\n init: null,\n event: \"changePricingUnitId\"\n },\n\n unitName: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeUnitName\"\n },\n\n costPerUnit: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeCostPerUnit\"\n },\n\n comment: {\n check: \"String\",\n init: \"\",\n nullable: false,\n event: \"changeComment\"\n },\n\n specificInfo: {\n check: \"String\",\n init: null,\n nullable: true,\n event: \"changeSpecificInfo\"\n },\n\n unitExtraInfoCPU: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeUnitExtraInfoCPU\"\n },\n\n unitExtraInfoRAM: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeUnitExtraInfoRAM\"\n },\n\n unitExtraInfoVRAM: {\n check: \"Number\",\n init: 0,\n nullable: false,\n event: \"changeUnitExtraInfoVRAM\"\n },\n\n unitExtraInfo: {\n check: \"Object\",\n init: {},\n nullable: false,\n event: \"changeUnitExtraInfo\"\n },\n\n unitExtraInfoNSeats: {\n check: \"Number\",\n init: 1,\n nullable: false,\n event: \"changeUnitExtraInfoNSeats\"\n },\n\n default: {\n check: \"Boolean\",\n init: true,\n nullable: false,\n event: \"changeDefault\"\n }\n },\n\n events: {\n \"done\": \"qx.event.type.Event\",\n \"cancel\": \"qx.event.type.Event\"\n },\n\n members: {\n __validator: null,\n\n _createChildControlImpl: function(id) {\n let control;\n switch (id) {\n case \"unit-form\": {\n control = new qx.ui.form.Form();\n const formRenderer = new qx.ui.form.renderer.Single(control);\n this._add(formRenderer);\n break;\n }\n case \"unit-name\":\n control = new qx.ui.form.TextField().set({\n font: \"text-14\"\n });\n control.setRequired(true);\n this.__validator.add(control);\n this.bind(\"unitName\", control, \"value\");\n control.bind(\"value\", this, \"unitName\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Unit Name\"));\n break;\n case \"cost-per-unit\":\n control = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 10000\n });\n control.setRequired(true);\n this.__validator.add(control);\n this.bind(\"costPerUnit\", control, \"value\");\n control.bind(\"value\", this, \"costPerUnit\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Cost per unit\"));\n break;\n case \"comment\":\n control = new qx.ui.form.TextField().set({\n font: \"text-14\"\n });\n this.bind(\"comment\", control, \"value\");\n control.bind(\"value\", this, \"comment\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Comment\"));\n break;\n case \"specific-info\": {\n control = new qx.ui.form.TextArea().set({\n font: \"text-14\"\n });\n this.__validator.add(control);\n this.bind(\"specificInfo\", control, \"value\");\n control.bind(\"value\", this, \"specificInfo\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Specific info\"));\n break;\n }\n case \"unit-extra-info-cpu\": {\n control = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 10000\n });\n control.setRequired(true);\n this.bind(\"unitExtraInfoCPU\", control, \"value\");\n control.bind(\"value\", this, \"unitExtraInfoCPU\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"CPU\"));\n break;\n }\n case \"unit-extra-info-ram\": {\n control = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 10000\n });\n control.setRequired(true);\n this.bind(\"unitExtraInfoRAM\", control, \"value\");\n control.bind(\"value\", this, \"unitExtraInfoRAM\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"RAM\"));\n break;\n }\n case \"unit-extra-info-vram\": {\n control = new qx.ui.form.Spinner().set({\n minimum: 0,\n maximum: 10000\n });\n control.setRequired(true);\n this.bind(\"unitExtraInfoVRAM\", control, \"value\");\n control.bind(\"value\", this, \"unitExtraInfoVRAM\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"VRAM\"));\n break;\n }\n case \"unit-extra-info\": {\n control = new qx.ui.form.TextField().set({\n font: \"text-14\"\n });\n control.setRequired(true);\n this.__validator.add(control);\n this.bind(\"unitExtraInfo\", control, \"value\", {\n converter: v => JSON.stringify(v)\n });\n control.bind(\"value\", this, \"unitExtraInfo\", {\n converter: v => JSON.parse(v)\n });\n this.getChildControl(\"unit-form\").add(control, this.tr(\"More Extra Info\"));\n break;\n }\n case \"unit-extra-info-n-seats\": {\n control = new qx.ui.form.Spinner().set({\n minimum: 1,\n maximum: 10000\n });\n control.setRequired(true);\n this.__validator.add(control);\n this.bind(\"unitExtraInfoNSeats\", control, \"value\");\n control.bind(\"value\", this, \"unitExtraInfoNSeats\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Number of Seats\"));\n break;\n }\n case \"is-default\": {\n control = new qx.ui.form.CheckBox().set({\n value: true\n });\n this.bind(\"default\", control, \"value\");\n control.bind(\"value\", this, \"default\");\n this.getChildControl(\"unit-form\").add(control, this.tr(\"Default\"));\n break;\n }\n case \"buttonsLayout\": {\n control = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({\n alignX: \"right\"\n }));\n const cancelButton = new qx.ui.form.Button(this.tr(\"Cancel\")).set({\n appearance: \"form-button-text\"\n });\n cancelButton.addListener(\"execute\", () => this.fireEvent(\"cancel\"), this);\n control.addAt(cancelButton, 0);\n this._add(control);\n break;\n }\n case \"create\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Create\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.__createPricingUnit();\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n case \"save\": {\n const buttons = this.getChildControl(\"buttonsLayout\");\n control = new osparc.ui.form.FetchButton(this.tr(\"Save\")).set({\n appearance: \"form-button\"\n });\n control.addListener(\"execute\", () => {\n if (this.__validator.validate()) {\n control.setFetching(true);\n this.__updatePricingUnit();\n }\n }, this);\n buttons.addAt(control, 1);\n break;\n }\n }\n\n return control || this.base(arguments, id);\n },\n\n __applyPricingPlanId: function(pricingPlanId) {\n const pricingPlan = osparc.store.Pricing.getInstance().getPricingPlan(pricingPlanId);\n if (pricingPlan) {\n this.getChildControl(\"unit-name\");\n this.getChildControl(\"cost-per-unit\");\n this.getChildControl(\"comment\");\n if (pricingPlan.getClassification() === \"TIER\") {\n this.getChildControl(\"specific-info\");\n this.getChildControl(\"unit-extra-info-cpu\");\n this.getChildControl(\"unit-extra-info-ram\");\n this.getChildControl(\"unit-extra-info-vram\");\n this.getChildControl(\"unit-extra-info\");\n } else if (pricingPlan.getClassification() === \"LICENSE\") {\n this.getChildControl(\"unit-extra-info-n-seats\");\n }\n this.getChildControl(\"is-default\");\n }\n },\n\n __createPricingUnit: function() {\n const data = {\n \"unitName\": this.getUnitName(),\n \"costPerUnit\": this.getCostPerUnit(),\n \"comment\": this.getComment(),\n \"default\": this.getDefault(),\n };\n\n const pricingPlan = osparc.store.Pricing.getInstance().getPricingPlan(this.getPricingPlanId());\n if (pricingPlan) {\n if (pricingPlan.getClassification() === \"TIER\") {\n const awsEc2Instances = [];\n const specificInfo = this.getSpecificInfo();\n if (specificInfo) {\n awsEc2Instances.push(specificInfo);\n }\n data[\"specificInfo\"] = {\n \"aws_ec2_instances\": awsEc2Instances\n };\n const extraInfo = {\n \"CPU\": this.getUnitExtraInfoCPU(),\n \"RAM\": this.getUnitExtraInfoRAM(),\n \"VRAM\": this.getUnitExtraInfoVRAM(),\n };\n Object.assign(extraInfo, this.getUnitExtraInfo());\n data[\"unitExtraInfo\"] = extraInfo;\n } else if (pricingPlan.getClassification() === \"LICENSE\") {\n data[\"specificInfo\"] = {\n \"aws_ec2_instances\": [],\n };\n data[\"unitExtraInfo\"] = {\n \"num_of_seats\": this.getUnitExtraInfoNSeats(),\n };\n }\n }\n\n osparc.store.Pricing.getInstance().createPricingUnit(this.getPricingPlanId(), data)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Successfully created\"));\n this.fireEvent(\"done\");\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong\"), \"ERROR\");\n console.error(err);\n })\n .finally(() => this.getChildControl(\"create\").setFetching(false));\n },\n\n __updatePricingUnit: function() {\n const data = {\n \"unitName\": this.getUnitName(),\n \"pricingUnitCostUpdate\": {\n \"costPerUnit\": this.getCostPerUnit(),\n \"comment\": this.getComment(),\n },\n \"default\": this.getDefault(),\n };\n\n const pricingPlan = osparc.store.Pricing.getInstance().getPricingPlan(this.getPricingPlanId());\n if (pricingPlan) {\n if (pricingPlan.getClassification() === \"TIER\") {\n const specificInfo = this.getSpecificInfo();\n data[\"specificInfo\"] = {\n \"aws_ec2_instances\": [specificInfo]\n };\n const extraInfo = {\n \"CPU\": this.getUnitExtraInfoCPU(),\n \"RAM\": this.getUnitExtraInfoRAM(),\n \"VRAM\": this.getUnitExtraInfoVRAM(),\n };\n Object.assign(extraInfo, this.getUnitExtraInfo());\n data[\"unitExtraInfo\"] = extraInfo;\n } else if (pricingPlan.getClassification() === \"LICENSE\") {\n const specificInfo = this.getSpecificInfo();\n data[\"specificInfo\"] = {\n \"aws_ec2_instances\": [specificInfo]\n };\n data[\"unitExtraInfo\"] = {\n \"num_of_seats\": this.getUnitExtraInfoNSeats(),\n };\n }\n }\n\n osparc.store.Pricing.getInstance().updatePricingUnit(this.getPricingPlanId(), this.getPricingUnitId(), data)\n .then(() => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Successfully updated\"));\n this.fireEvent(\"done\");\n })\n .catch(err => {\n osparc.FlashMessenger.getInstance().logAs(this.tr(\"Something went wrong\"), \"ERROR\");\n console.error(err);\n })\n .finally(() => this.getChildControl(\"save\").setFetching(false));\n }\n }\n});\n","qx.Theme.define(\"osparc.theme.mixin.Color\", {\n colors: {\n \"activitytree-background-cpu\": \"#2C7CCE\",\n \"activitytree-background-memory\": \"#358475\",\n\n \"ready-green\": \"#58A6FF\", // It is not really green because of reasons\n \"warning-yellow\": \"#F8DB1F\", // Speag yellow\n \"busy-orange\": \"#FFA500\",\n \"failed-red\": \"#FF2D2D\",\n \"danger-red\": \"#E00020\", // Z43 red\n \"text-on-warning\": \"#141414\",\n\n \"info\": \"rgba(9, 89, 122, 1)\", // #09597A\n \"info-bg\": \"rgba(9, 89, 122, 0.1)\", // #09597A1A\n \"success\": \"rgba(10, 182, 255, 1)\", // #0AB6FF\n \"success-bg\": \"rgba(10, 182, 255, 0.1)\", // #0AB6FF1A\n \"warning\": \"rgba(255, 205, 108, 1)\", // #FFCD6C\n \"warning-bg\": \"rgba(255, 205, 108, 0.1)\", // #FFCD6C1A\n \"error\": \"rgba(255, 108, 108, 1)\", // #FF6C6C\n \"error-bg\": \"rgba(255, 108, 108, 0.1)\", // #FF6C6C1A\n \"disclaimer-bg\": \"rgba(228, 234, 237, 1)\", // #E4EAEDAA\n\n \"pb-new\": \"rgba(10, 182, 255, 0.25)\",\n \"pb-study\": \"rgba(10, 182, 255, 0.4)\",\n \"pb-template\": \"rgba(9, 89, 122, 0.4)\",\n \"pb-service\": \"rgba(248, 219, 31, 0.4)\",\n \"pb-computational\": \"rgba(255, 165, 0, 0.4)\",\n \"pb-dynamic\": \"rgba(248, 219, 31, 0.4)\",\n \"pb-locked\": \"rgba(113, 157, 181, 0.4)\",\n\n // button\n \"default-button-text-outline\": \"contrasted-text-light\",\n \"default-button-text-action\": \"contrasted-text-dark\",\n \"default-button\": \"product-color\",\n \"default-button-background\": \"rgba(10, 182, 255, 0.1)\",\n \"default-button-hover\": \"rgba(4, 73, 102, 1)\",\n \"default-button-hover-background\": \"rgba(10, 182, 255, 0.25)\",\n \"default-button-active\": \"rgba(9, 89, 122, 1)\",\n \"default-button-active-background\": \"rgba(4, 73, 102, 0.4)\",\n \"default-button-focus\": \"product-color\",\n \"default-button-focus-background\": \"rgba(4, 73, 102, 0.4)\",\n \"default-button-disabled\": \"text-disabled\",\n \"default-button-disabled-background\": \"rgba(113, 157, 181, 0.25)\",\n \"default-button-focus-blur\": \"rgba(254, 233, 86, 1)\",\n\n // separator\n \"border-separator\": \"product-color\",\n\n \"visual-blue\": \"#007fd4\", // Visual Studio blue\n\n \"logger-warning-message\": \"warning-yellow\",\n \"logger-error-message\": \"failed-red\",\n\n \"workbench-edge-selected\": \"busy-orange\",\n\n\n // table\n \"table-header\": \"transparent\",\n \"table-header-foreground\": \"text\", // text color\n \"table-header-border\": \"text\", // header underline\n \"table-header-cell\": \"transparent\",\n\n // used in table code\n \"table-focus-indicator\": \"transparent\",\n \"table-row-background-even\": \"transparent\",\n \"table-row-background-odd\": \"transparent\",\n \"table-row-background-focused\": \"transparent\",\n \"table-row-background-focused-selected\": \"background-main-2\",\n \"table-row-background-selected\": \"background-main-2\",\n\n // foreground\n \"table-row-selected\": \"text\",\n \"table-row\": \"text\",\n\n // table grid color\n \"table-row-line\": \"transparent\",\n \"table-column-line\": \"transparent\",\n }\n});\n","\nqx.Class.define(\"osparc.theme.colorProvider.ColorProvider\", {\n type: \"static\",\n\n statics: {\n // nested-zmt-dark.json\n colors: {\n \"color\": {\n \"scales\": {\n \"static\": {\n \"base\": {\n \"0\": [\n 255,\n 255,\n 255,\n 1\n ],\n \"1\": [\n 248,\n 249,\n 249,\n 1\n ],\n \"2\": [\n 246,\n 247,\n 248,\n 1\n ],\n \"3\": [\n 244,\n 245,\n 246,\n 1\n ],\n \"4\": [\n 242,\n 244,\n 245,\n 1\n ],\n \"5\": [\n 240,\n 242,\n 243,\n 1\n ],\n \"6\": [\n 238,\n 240,\n 242,\n 1\n ],\n \"7\": [\n 236,\n 238,\n 240,\n 1\n ],\n \"8\": [\n 234,\n 237,\n 239,\n 1\n ],\n \"9\": [\n 232,\n 235,\n 237,\n 1\n ],\n \"10\": [\n 230,\n 233,\n 236,\n 1\n ],\n \"15\": [\n 220,\n 225,\n 228,\n 1\n ],\n \"20\": [\n 210,\n 216,\n 220,\n 1\n ],\n \"25\": [\n 199,\n 207,\n 212,\n 1\n ],\n \"30\": [\n 189,\n 197,\n 203,\n 1\n ],\n \"35\": [\n 179,\n 188,\n 195,\n 1\n ],\n \"40\": [\n 168,\n 178,\n 185,\n 1\n ],\n \"45\": [\n 158,\n 169,\n 176,\n 1\n ],\n \"50\": [\n 148,\n 159,\n 166,\n 1\n ],\n \"55\": [\n 137,\n 148,\n 156,\n 1\n ],\n \"60\": [\n 127,\n 138,\n 145,\n 1\n ],\n \"65\": [\n 116,\n 127,\n 134,\n 1\n ],\n \"70\": [\n 106,\n 116,\n 123,\n 1\n ],\n \"75\": [\n 95,\n 104,\n 110,\n 1\n ],\n \"80\": [\n 83,\n 92,\n 98,\n 1\n ],\n \"85\": [\n 72,\n 79,\n 84,\n 1\n ],\n \"90\": [\n 59,\n 66,\n 70,\n 1\n ],\n \"95\": [\n 46,\n 52,\n 55,\n 1\n ],\n \"100\": [\n 32,\n 36,\n 38,\n 1\n ],\n \"101\": [\n 28,\n 31,\n 34,\n 1\n ],\n \"102\": [\n 24,\n 27,\n 29,\n 1\n ],\n \"103\": [\n 19,\n 22,\n 24,\n 1\n ],\n \"104\": [\n 13,\n 16,\n 17,\n 1\n ],\n \"105\": [\n 7,\n 8,\n 9,\n 1\n ]\n },\n \"warning\": {\n \"2\": [\n 255,\n 245,\n 238,\n 1\n ],\n \"4\": [\n 255,\n 241,\n 230,\n 1\n ],\n \"5\": [\n 255,\n 239,\n 226,\n 1\n ],\n \"6\": [\n 255,\n 237,\n 222,\n 1\n ],\n \"8\": [\n 255,\n 233,\n 215,\n 1\n ],\n \"10\": [\n 255,\n 228,\n 207,\n 1\n ],\n \"15\": [\n 255,\n 217,\n 186,\n 1\n ],\n \"20\": [\n 255,\n 205,\n 165,\n 1\n ],\n \"25\": [\n 254,\n 193,\n 142,\n 1\n ],\n \"30\": [\n 254,\n 181,\n 117,\n 1\n ],\n \"35\": [\n 253,\n 168,\n 89,\n 1\n ],\n \"40\": [\n 251,\n 154,\n 56,\n 1\n ],\n \"45\": [\n 243,\n 143,\n 32,\n 1\n ],\n \"50\": [\n 229,\n 133,\n 22,\n 1\n ],\n \"55\": [\n 215,\n 124,\n 16,\n 1\n ],\n \"60\": [\n 201,\n 115,\n 12,\n 1\n ],\n \"65\": [\n 185,\n 106,\n 9,\n 1\n ],\n \"70\": [\n 169,\n 96,\n 7,\n 1\n ],\n \"75\": [\n 153,\n 86,\n 5,\n 1\n ],\n \"80\": [\n 136,\n 76,\n 4,\n 1\n ],\n \"85\": [\n 118,\n 65,\n 3,\n 1\n ],\n \"90\": [\n 99,\n 54,\n 2,\n 1\n ],\n \"95\": [\n 79,\n 42,\n 1,\n 1\n ],\n \"100\": [\n 56,\n 28,\n 1,\n 1\n ],\n \"101\": [\n 50,\n 24,\n 1,\n 1\n ],\n \"102\": [\n 44,\n 21,\n 0,\n 1\n ],\n \"103\": [\n 36,\n 16,\n 0,\n 1\n ],\n \"104\": [\n 28,\n 11,\n 0,\n 1\n ],\n \"105\": [\n 17,\n 5,\n 0,\n 1\n ]\n },\n \"danger\": {\n \"2\": [\n 255,\n 245,\n 243,\n 1\n ],\n \"4\": [\n 255,\n 240,\n 238,\n 1\n ],\n \"5\": [\n 255,\n 238,\n 236,\n 1\n ],\n \"6\": [\n 255,\n 236,\n 233,\n 1\n ],\n \"8\": [\n 255,\n 231,\n 228,\n 1\n ],\n \"10\": [\n 255,\n 227,\n 223,\n 1\n ],\n \"15\": [\n 254,\n 215,\n 210,\n 1\n ],\n \"20\": [\n 254,\n 203,\n 197,\n 1\n ],\n \"25\": [\n 254,\n 190,\n 183,\n 1\n ],\n \"30\": [\n 254,\n 177,\n 168,\n 1\n ],\n \"35\": [\n 254,\n 163,\n 153,\n 1\n ],\n \"40\": [\n 253,\n 148,\n 138,\n 1\n ],\n \"45\": [\n 253,\n 132,\n 121,\n 1\n ],\n \"50\": [\n 252,\n 114,\n 104,\n 1\n ],\n \"55\": [\n 250,\n 94,\n 86,\n 1\n ],\n \"60\": [\n 248,\n 70,\n 66,\n 1\n ],\n \"65\": [\n 240,\n 45,\n 49,\n 1\n ],\n \"70\": [\n 221,\n 36,\n 42,\n 1\n ],\n \"75\": [\n 201,\n 30,\n 36,\n 1\n ],\n \"80\": [\n 179,\n 24,\n 30,\n 1\n ],\n \"85\": [\n 156,\n 19,\n 25,\n 1\n ],\n \"90\": [\n 132,\n 15,\n 19,\n 1\n ],\n \"95\": [\n 106,\n 10,\n 13,\n 1\n ],\n \"100\": [\n 76,\n 5,\n 7,\n 1\n ],\n \"101\": [\n 69,\n 4,\n 6,\n 1\n ],\n \"102\": [\n 60,\n 3,\n 4,\n 1\n ],\n \"103\": [\n 51,\n 2,\n 3,\n 1\n ],\n \"104\": [\n 40,\n 1,\n 2,\n 1\n ],\n \"105\": [\n 26,\n 1,\n 1,\n 1\n ]\n },\n \"zmt\": {\n \"2\": [\n 239,\n 248,\n 255,\n 1\n ],\n \"4\": [\n 232,\n 245,\n 255,\n 1\n ],\n \"5\": [\n 229,\n 244,\n 254,\n 1\n ],\n \"6\": [\n 225,\n 242,\n 254,\n 1\n ],\n \"8\": [\n 218,\n 239,\n 254,\n 1\n ],\n \"10\": [\n 211,\n 236,\n 254,\n 1\n ],\n \"15\": [\n 193,\n 229,\n 254,\n 1\n ],\n \"20\": [\n 173,\n 221,\n 254,\n 1\n ],\n \"25\": [\n 153,\n 213,\n 253,\n 1\n ],\n \"30\": [\n 132,\n 204,\n 252,\n 1\n ],\n \"35\": [\n 109,\n 195,\n 251,\n 1\n ],\n \"40\": [\n 85,\n 186,\n 248,\n 1\n ],\n \"45\": [\n 59,\n 176,\n 243,\n 1\n ],\n \"50\": [\n 45,\n 166,\n 232,\n 1\n ],\n \"55\": [\n 35,\n 155,\n 219,\n 1\n ],\n \"60\": [\n 27,\n 144,\n 205,\n 1\n ],\n \"65\": [\n 22,\n 133,\n 190,\n 1\n ],\n \"70\": [\n 17,\n 121,\n 173,\n 1\n ],\n \"75\": [\n 14,\n 109,\n 157,\n 1\n ],\n \"80\": [\n 11,\n 96,\n 139,\n 1\n ],\n \"85\": [\n 8,\n 83,\n 121,\n 1\n ],\n \"90\": [\n 6,\n 69,\n 102,\n 1\n ],\n \"95\": [\n 4,\n 54,\n 81,\n 1\n ],\n \"100\": [\n 2,\n 38,\n 58,\n 1\n ],\n \"101\": [\n 1,\n 33,\n 52,\n 1\n ],\n \"102\": [\n 1,\n 28,\n 45,\n 1\n ],\n \"103\": [\n 1,\n 23,\n 38,\n 1\n ],\n \"104\": [\n 1,\n 17,\n 29,\n 1\n ],\n \"105\": [\n 0,\n 9,\n 18,\n 1\n ]\n },\n \"speag\": {\n \"2\": [\n 255,\n 248,\n 211,\n 1\n ],\n \"4\": [\n 255,\n 244,\n 192,\n 1\n ],\n \"5\": [\n 255,\n 243,\n 182,\n 1\n ],\n \"6\": [\n 255,\n 241,\n 172,\n 1\n ],\n \"8\": [\n 255,\n 237,\n 151,\n 1\n ],\n \"10\": [\n 255,\n 233,\n 129,\n 1\n ],\n \"15\": [\n 255,\n 223,\n 50,\n 1\n ],\n \"20\": [\n 247,\n 214,\n 0,\n 1\n ],\n \"25\": [\n 236,\n 205,\n 0,\n 1\n ],\n \"30\": [\n 226,\n 195,\n 0,\n 1\n ],\n \"35\": [\n 215,\n 186,\n 0,\n 1\n ],\n \"40\": [\n 204,\n 176,\n 0,\n 1\n ],\n \"45\": [\n 192,\n 166,\n 0,\n 1\n ],\n \"50\": [\n 181,\n 156,\n 0,\n 1\n ],\n \"55\": [\n 169,\n 146,\n 0,\n 1\n ],\n \"60\": [\n 157,\n 135,\n 0,\n 1\n ],\n \"65\": [\n 145,\n 125,\n 0,\n 1\n ],\n \"70\": [\n 132,\n 114,\n 0,\n 1\n ],\n \"75\": [\n 119,\n 102,\n 0,\n 1\n ],\n \"80\": [\n 105,\n 90,\n 0,\n 1\n ],\n \"85\": [\n 91,\n 78,\n 0,\n 1\n ],\n \"90\": [\n 76,\n 65,\n 0,\n 1\n ],\n \"95\": [\n 60,\n 51,\n 0,\n 1\n ],\n \"100\": [\n 42,\n 35,\n 0,\n 1\n ],\n \"101\": [\n 37,\n 31,\n 0,\n 1\n ],\n \"102\": [\n 32,\n 26,\n 0,\n 1\n ],\n \"103\": [\n 26,\n 21,\n 0,\n 1\n ],\n \"104\": [\n 19,\n 15,\n 0,\n 1\n ],\n \"105\": [\n 11,\n 8,\n 0,\n 1\n ]\n },\n \"inversed\": {\n \"base\": {\n \"0\": [\n 255,\n 255,\n 255,\n 1\n ],\n \"1\": [\n 248,\n 249,\n 249,\n 1\n ],\n \"2\": [\n 246,\n 247,\n 248,\n 1\n ],\n \"3\": [\n 244,\n 245,\n 246,\n 1\n ],\n \"4\": [\n 242,\n 244,\n 245,\n 1\n ],\n \"5\": [\n 240,\n 242,\n 243,\n 1\n ],\n \"6\": [\n 238,\n 240,\n 242,\n 1\n ],\n \"7\": [\n 236,\n 238,\n 240,\n 1\n ],\n \"8\": [\n 234,\n 237,\n 239,\n 1\n ],\n \"9\": [\n 232,\n 235,\n 237,\n 1\n ],\n \"10\": [\n 230,\n 233,\n 236,\n 1\n ],\n \"15\": [\n 220,\n 225,\n 228,\n 1\n ],\n \"20\": [\n 210,\n 216,\n 220,\n 1\n ],\n \"25\": [\n 199,\n 207,\n 212,\n 1\n ],\n \"30\": [\n 189,\n 197,\n 203,\n 1\n ],\n \"35\": [\n 179,\n 188,\n 195,\n 1\n ],\n \"40\": [\n 168,\n 178,\n 185,\n 1\n ],\n \"45\": [\n 158,\n 169,\n 176,\n 1\n ],\n \"50\": [\n 148,\n 159,\n 166,\n 1\n ],\n \"55\": [\n 137,\n 148,\n 156,\n 1\n ],\n \"60\": [\n 127,\n 138,\n 145,\n 1\n ],\n \"65\": [\n 116,\n 127,\n 134,\n 1\n ],\n \"70\": [\n 106,\n 116,\n 123,\n 1\n ],\n \"75\": [\n 95,\n 104,\n 110,\n 1\n ],\n \"80\": [\n 83,\n 92,\n 98,\n 1\n ],\n \"85\": [\n 72,\n 79,\n 84,\n 1\n ],\n \"90\": [\n 59,\n 66,\n 70,\n 1\n ],\n \"95\": [\n 46,\n 52,\n 55,\n 1\n ],\n \"100\": [\n 32,\n 36,\n 38,\n 1\n ],\n \"101\": [\n 28,\n 31,\n 34,\n 1\n ],\n \"102\": [\n 24,\n 27,\n 29,\n 1\n ],\n \"103\": [\n 19,\n 22,\n 24,\n 1\n ],\n \"104\": [\n 13,\n 16,\n 17,\n 1\n ],\n \"105\": [\n 7,\n 8,\n 9,\n 1\n ]\n },\n \"warning\": {\n \"2\": [\n 255,\n 245,\n 238,\n 1\n ],\n \"4\": [\n 255,\n 241,\n 230,\n 1\n ],\n \"5\": [\n 255,\n 239,\n 226,\n 1\n ],\n \"6\": [\n 255,\n 237,\n 222,\n 1\n ],\n \"8\": [\n 255,\n 233,\n 215,\n 1\n ],\n \"10\": [\n 255,\n 228,\n 207,\n 1\n ],\n \"15\": [\n 255,\n 217,\n 186,\n 1\n ],\n \"20\": [\n 255,\n 205,\n 165,\n 1\n ],\n \"25\": [\n 254,\n 193,\n 142,\n 1\n ],\n \"30\": [\n 254,\n 181,\n 117,\n 1\n ],\n \"35\": [\n 253,\n 168,\n 89,\n 1\n ],\n \"40\": [\n 251,\n 154,\n 56,\n 1\n ],\n \"45\": [\n 243,\n 143,\n 32,\n 1\n ],\n \"50\": [\n 229,\n 133,\n 22,\n 1\n ],\n \"55\": [\n 215,\n 124,\n 16,\n 1\n ],\n \"60\": [\n 201,\n 115,\n 12,\n 1\n ],\n \"65\": [\n 185,\n 106,\n 9,\n 1\n ],\n \"70\": [\n 169,\n 96,\n 7,\n 1\n ],\n \"75\": [\n 153,\n 86,\n 5,\n 1\n ],\n \"80\": [\n 136,\n 76,\n 4,\n 1\n ],\n \"85\": [\n 118,\n 65,\n 3,\n 1\n ],\n \"90\": [\n 99,\n 54,\n 2,\n 1\n ],\n \"95\": [\n 79,\n 42,\n 1,\n 1\n ],\n \"100\": [\n 56,\n 28,\n 1,\n 1\n ],\n \"101\": [\n 50,\n 24,\n 1,\n 1\n ],\n \"102\": [\n 44,\n 21,\n 0,\n 1\n ],\n \"103\": [\n 36,\n 16,\n 0,\n 1\n ],\n \"104\": [\n 28,\n 11,\n 0,\n 1\n ],\n \"105\": [\n 17,\n 5,\n 0,\n 1\n ]\n },\n \"danger\": {\n \"2\": [\n 255,\n 245,\n 243,\n 1\n ],\n \"4\": [\n 255,\n 240,\n 238,\n 1\n ],\n \"5\": [\n 255,\n 238,\n 236,\n 1\n ],\n \"6\": [\n 255,\n 236,\n 233,\n 1\n ],\n \"8\": [\n 255,\n 231,\n 228,\n 1\n ],\n \"10\": [\n 255,\n 227,\n 223,\n 1\n ],\n \"15\": [\n 254,\n 215,\n 210,\n 1\n ],\n \"20\": [\n 254,\n 203,\n 197,\n 1\n ],\n \"25\": [\n 254,\n 190,\n 183,\n 1\n ],\n \"30\": [\n 254,\n 177,\n 168,\n 1\n ],\n \"35\": [\n 254,\n 163,\n 153,\n 1\n ],\n \"40\": [\n 253,\n 148,\n 138,\n 1\n ],\n \"45\": [\n 253,\n 132,\n 121,\n 1\n ],\n \"50\": [\n 252,\n 114,\n 104,\n 1\n ],\n \"55\": [\n 250,\n 94,\n 86,\n 1\n ],\n \"60\": [\n 248,\n 70,\n 66,\n 1\n ],\n \"65\": [\n 240,\n 45,\n 49,\n 1\n ],\n \"70\": [\n 221,\n 36,\n 42,\n 1\n ],\n \"75\": [\n 201,\n 30,\n 36,\n 1\n ],\n \"80\": [\n 179,\n 24,\n 30,\n 1\n ],\n \"85\": [\n 156,\n 19,\n 25,\n 1\n ],\n \"90\": [\n 132,\n 15,\n 19,\n 1\n ],\n \"95\": [\n 106,\n 10,\n 13,\n 1\n ],\n \"100\": [\n 76,\n 5,\n 7,\n 1\n ],\n \"101\": [\n 69,\n 4,\n 6,\n 1\n ],\n \"102\": [\n 60,\n 3,\n 4,\n 1\n ],\n \"103\": [\n 51,\n 2,\n 3,\n 1\n ],\n \"104\": [\n 40,\n 1,\n 2,\n 1\n ],\n \"105\": [\n 26,\n 1,\n 1,\n 1\n ]\n },\n \"zmt\": {\n \"2\": [\n 239,\n 248,\n 255,\n 1\n ],\n \"4\": [\n 232,\n 245,\n 255,\n 1\n ],\n \"5\": [\n 229,\n 244,\n 254,\n 1\n ],\n \"6\": [\n 225,\n 242,\n 254,\n 1\n ],\n \"8\": [\n 218,\n 239,\n 254,\n 1\n ],\n \"10\": [\n 211,\n 236,\n 254,\n 1\n ],\n \"15\": [\n 193,\n 229,\n 254,\n 1\n ],\n \"20\": [\n 173,\n 221,\n 254,\n 1\n ],\n \"25\": [\n 153,\n 213,\n 253,\n 1\n ],\n \"30\": [\n 132,\n 204,\n 252,\n 1\n ],\n \"35\": [\n 109,\n 195,\n 251,\n 1\n ],\n \"40\": [\n 85,\n 186,\n 248,\n 1\n ],\n \"45\": [\n 59,\n 176,\n 243,\n 1\n ],\n \"50\": [\n 45,\n 166,\n 232,\n 1\n ],\n \"55\": [\n 35,\n 155,\n 219,\n 1\n ],\n \"60\": [\n 27,\n 144,\n 205,\n 1\n ],\n \"65\": [\n 22,\n 133,\n 190,\n 1\n ],\n \"70\": [\n 17,\n 121,\n 173,\n 1\n ],\n \"75\": [\n 14,\n 109,\n 157,\n 1\n ],\n \"80\": [\n 11,\n 96,\n 139,\n 1\n ],\n \"85\": [\n 8,\n 83,\n 121,\n 1\n ],\n \"90\": [\n 6,\n 69,\n 102,\n 1\n ],\n \"95\": [\n 4,\n 54,\n 81,\n 1\n ],\n \"100\": [\n 2,\n 38,\n 58,\n 1\n ],\n \"101\": [\n 1,\n 33,\n 52,\n 1\n ],\n \"102\": [\n 1,\n 28,\n 45,\n 1\n ],\n \"103\": [\n 1,\n 23,\n 38,\n 1\n ],\n \"104\": [\n 1,\n 17,\n 29,\n 1\n ],\n \"105\": [\n 0,\n 9,\n 18,\n 1\n ]\n },\n \"speag\": {\n \"2\": [\n 255,\n 248,\n 211,\n 1\n ],\n \"4\": [\n 255,\n 244,\n 192,\n 1\n ],\n \"5\": [\n 255,\n 243,\n 182,\n 1\n ],\n \"6\": [\n 255,\n 241,\n 172,\n 1\n ],\n \"8\": [\n 255,\n 237,\n 151,\n 1\n ],\n \"10\": [\n 255,\n 233,\n 129,\n 1\n ],\n \"15\": [\n 255,\n 223,\n 50,\n 1\n ],\n \"20\": [\n 247,\n 214,\n 0,\n 1\n ],\n \"25\": [\n 236,\n 205,\n 0,\n 1\n ],\n \"30\": [\n 226,\n 195,\n 0,\n 1\n ],\n \"35\": [\n 215,\n 186,\n 0,\n 1\n ],\n \"40\": [\n 204,\n 176,\n 0,\n 1\n ],\n \"45\": [\n 192,\n 166,\n 0,\n 1\n ],\n \"50\": [\n 181,\n 156,\n 0,\n 1\n ],\n \"55\": [\n 169,\n 146,\n 0,\n 1\n ],\n \"60\": [\n 157,\n 135,\n 0,\n 1\n ],\n \"65\": [\n 145,\n 125,\n 0,\n 1\n ],\n \"70\": [\n 132,\n 114,\n 0,\n 1\n ],\n \"75\": [\n 119,\n 102,\n 0,\n 1\n ],\n \"80\": [\n 105,\n 90,\n 0,\n 1\n ],\n \"85\": [\n 91,\n 78,\n 0,\n 1\n ],\n \"90\": [\n 76,\n 65,\n 0,\n 1\n ],\n \"95\": [\n 60,\n 51,\n 0,\n 1\n ],\n \"100\": [\n 42,\n 35,\n 0,\n 1\n ],\n \"101\": [\n 37,\n 31,\n 0,\n 1\n ],\n \"102\": [\n 32,\n 26,\n 0,\n 1\n ],\n \"103\": [\n 26,\n 21,\n 0,\n 1\n ],\n \"104\": [\n 19,\n 15,\n 0,\n 1\n ],\n \"105\": [\n 11,\n 8,\n 0,\n 1\n ]\n }\n }\n },\n \"zmt\": {\n \"2\": [\n 1,\n 32,\n 50,\n 1\n ],\n \"4\": [\n 2,\n 42,\n 63,\n 1\n ],\n \"5\": [\n 3,\n 45,\n 68,\n 1\n ],\n \"6\": [\n 3,\n 49,\n 73,\n 1\n ],\n \"8\": [\n 4,\n 56,\n 83,\n 1\n ],\n \"10\": [\n 5,\n 62,\n 92,\n 1\n ],\n \"15\": [\n 7,\n 77,\n 113,\n 1\n ],\n \"20\": [\n 10,\n 91,\n 132,\n 1\n ],\n \"25\": [\n 13,\n 105,\n 151,\n 1\n ],\n \"30\": [\n 16,\n 117,\n 168,\n 1\n ],\n \"35\": [\n 20,\n 129,\n 184,\n 1\n ],\n \"40\": [\n 25,\n 140,\n 200,\n 1\n ],\n \"45\": [\n 32,\n 151,\n 214,\n 1\n ],\n \"50\": [\n 41,\n 162,\n 227,\n 1\n ],\n \"55\": [\n 53,\n 172,\n 239,\n 1\n ],\n \"60\": [\n 74,\n 182,\n 246,\n 1\n ],\n \"65\": [\n 97,\n 191,\n 250,\n 1\n ],\n \"70\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"75\": [\n 141,\n 208,\n 253,\n 1\n ],\n \"80\": [\n 161,\n 216,\n 253,\n 1\n ],\n \"85\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"90\": [\n 197,\n 231,\n 254,\n 1\n ],\n \"95\": [\n 214,\n 238,\n 254,\n 1\n ],\n \"100\": [\n 230,\n 245,\n 255,\n 1\n ],\n \"101\": [\n 234,\n 246,\n 255,\n 1\n ],\n \"102\": [\n 237,\n 247,\n 255,\n 1\n ],\n \"103\": [\n 240,\n 249,\n 255,\n 1\n ],\n \"104\": [\n 243,\n 250,\n 255,\n 1\n ],\n \"105\": [\n 246,\n 251,\n 255,\n 1\n ]\n },\n \"speag\": {\n \"2\": [\n 36,\n 30,\n 0,\n 1\n ],\n \"4\": [\n 46,\n 38,\n 0,\n 1\n ],\n \"5\": [\n 50,\n 42,\n 0,\n 1\n ],\n \"6\": [\n 54,\n 45,\n 0,\n 1\n ],\n \"8\": [\n 61,\n 52,\n 0,\n 1\n ],\n \"10\": [\n 68,\n 58,\n 0,\n 1\n ],\n \"15\": [\n 85,\n 72,\n 0,\n 1\n ],\n \"20\": [\n 100,\n 86,\n 0,\n 1\n ],\n \"25\": [\n 114,\n 98,\n 0,\n 1\n ],\n \"30\": [\n 128,\n 110,\n 0,\n 1\n ],\n \"35\": [\n 141,\n 121,\n 0,\n 1\n ],\n \"40\": [\n 153,\n 132,\n 0,\n 1\n ],\n \"45\": [\n 165,\n 142,\n 0,\n 1\n ],\n \"50\": [\n 176,\n 152,\n 0,\n 1\n ],\n \"55\": [\n 188,\n 162,\n 0,\n 1\n ],\n \"60\": [\n 199,\n 172,\n 0,\n 1\n ],\n \"65\": [\n 209,\n 181,\n 0,\n 1\n ],\n \"70\": [\n 220,\n 190,\n 0,\n 1\n ],\n \"75\": [\n 230,\n 199,\n 0,\n 1\n ],\n \"80\": [\n 240,\n 208,\n 0,\n 1\n ],\n \"85\": [\n 250,\n 216,\n 0,\n 1\n ],\n \"90\": [\n 255,\n 226,\n 75,\n 1\n ],\n \"95\": [\n 255,\n 235,\n 138,\n 1\n ],\n \"100\": [\n 255,\n 243,\n 186,\n 1\n ],\n \"101\": [\n 255,\n 245,\n 195,\n 1\n ],\n \"102\": [\n 255,\n 246,\n 204,\n 1\n ],\n \"103\": [\n 255,\n 248,\n 213,\n 1\n ],\n \"104\": [\n 255,\n 249,\n 221,\n 1\n ],\n \"105\": [\n 255,\n 251,\n 230,\n 1\n ]\n },\n \"base\": {\n \"0\": [\n 0,\n 0,\n 0,\n 1\n ],\n \"1\": [\n 22,\n 25,\n 27,\n 1\n ],\n \"2\": [\n 27,\n 30,\n 33,\n 1\n ],\n \"3\": [\n 31,\n 35,\n 38,\n 1\n ],\n \"4\": [\n 35,\n 39,\n 42,\n 1\n ],\n \"5\": [\n 38,\n 43,\n 46,\n 1\n ],\n \"6\": [\n 41,\n 46,\n 50,\n 1\n ],\n \"7\": [\n 45,\n 50,\n 53,\n 1\n ],\n \"8\": [\n 47,\n 53,\n 57,\n 1\n ],\n \"9\": [\n 50,\n 56,\n 60,\n 1\n ],\n \"10\": [\n 53,\n 59,\n 63,\n 1\n ],\n \"15\": [\n 67,\n 74,\n 79,\n 1\n ],\n \"20\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"25\": [\n 91,\n 100,\n 106,\n 1\n ],\n \"30\": [\n 102,\n 112,\n 119,\n 1\n ],\n \"35\": [\n 113,\n 123,\n 130,\n 1\n ],\n \"40\": [\n 123,\n 134,\n 142,\n 1\n ],\n \"45\": [\n 134,\n 145,\n 152,\n 1\n ],\n \"50\": [\n 144,\n 155,\n 162,\n 1\n ],\n \"55\": [\n 154,\n 165,\n 172,\n 1\n ],\n \"60\": [\n 164,\n 174,\n 181,\n 1\n ],\n \"65\": [\n 174,\n 183,\n 190,\n 1\n ],\n \"70\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"75\": [\n 193,\n 201,\n 207,\n 1\n ],\n \"80\": [\n 203,\n 210,\n 215,\n 1\n ],\n \"85\": [\n 213,\n 218,\n 222,\n 1\n ],\n \"90\": [\n 222,\n 227,\n 230,\n 1\n ],\n \"95\": [\n 231,\n 235,\n 237,\n 1\n ],\n \"100\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"101\": [\n 243,\n 244,\n 245,\n 1\n ],\n \"102\": [\n 244,\n 246,\n 247,\n 1\n ],\n \"103\": [\n 246,\n 247,\n 248,\n 1\n ],\n \"104\": [\n 248,\n 249,\n 250,\n 1\n ],\n \"105\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"translucent\": {\n \"0\": {\n \"0\": [\n 0,\n 0,\n 0,\n 0\n ],\n \"5\": [\n 0,\n 0,\n 0,\n 0.05\n ],\n \"10\": [\n 0,\n 0,\n 0,\n 0.1\n ],\n \"15\": [\n 0,\n 0,\n 0,\n 0.15\n ],\n \"20\": [\n 0,\n 0,\n 0,\n 0.2\n ],\n \"25\": [\n 0,\n 0,\n 0,\n 0.25\n ],\n \"30\": [\n 0,\n 0,\n 0,\n 0.3\n ],\n \"35\": [\n 0,\n 0,\n 0,\n 0.35\n ],\n \"40\": [\n 0,\n 0,\n 0,\n 0.4\n ],\n \"45\": [\n 0,\n 0,\n 0,\n 0.45\n ],\n \"50\": [\n 0,\n 0,\n 0,\n 0.5\n ],\n \"55\": [\n 0,\n 0,\n 0,\n 0.55\n ],\n \"60\": [\n 0,\n 0,\n 0,\n 0.6\n ],\n \"65\": [\n 0,\n 0,\n 0,\n 0.65\n ],\n \"70\": [\n 0,\n 0,\n 0,\n 0.7\n ],\n \"75\": [\n 0,\n 0,\n 0,\n 0.75\n ],\n \"80\": [\n 0,\n 0,\n 0,\n 0.8\n ],\n \"85\": [\n 0,\n 0,\n 0,\n 0.85\n ],\n \"90\": [\n 0,\n 0,\n 0,\n 0.9\n ],\n \"95\": [\n 0,\n 0,\n 0,\n 0.95\n ],\n \"100\": [\n 0,\n 0,\n 0,\n 1\n ]\n },\n \"50\": {\n \"0\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"5\": [\n 144,\n 155,\n 162,\n 0.05\n ],\n \"10\": [\n 144,\n 155,\n 162,\n 0.1\n ],\n \"15\": [\n 144,\n 155,\n 162,\n 0.15\n ],\n \"20\": [\n 144,\n 155,\n 162,\n 0.2\n ],\n \"25\": [\n 144,\n 155,\n 162,\n 0.25\n ],\n \"30\": [\n 144,\n 155,\n 162,\n 0.3\n ],\n \"35\": [\n 144,\n 155,\n 162,\n 0.35\n ],\n \"40\": [\n 144,\n 155,\n 162,\n 0.4\n ],\n \"45\": [\n 144,\n 155,\n 162,\n 0.45\n ],\n \"50\": [\n 144,\n 155,\n 162,\n 0.5\n ],\n \"55\": [\n 144,\n 155,\n 162,\n 0.55\n ],\n \"60\": [\n 144,\n 155,\n 162,\n 0.6\n ],\n \"65\": [\n 144,\n 155,\n 162,\n 0.65\n ],\n \"70\": [\n 144,\n 155,\n 162,\n 0.7\n ],\n \"75\": [\n 144,\n 155,\n 162,\n 0.75\n ],\n \"80\": [\n 144,\n 155,\n 162,\n 0.8\n ],\n \"85\": [\n 144,\n 155,\n 162,\n 0.85\n ],\n \"90\": [\n 144,\n 155,\n 162,\n 0.9\n ],\n \"95\": [\n 144,\n 155,\n 162,\n 0.95\n ],\n \"100\": [\n 144,\n 155,\n 162,\n 1\n ]\n },\n \"100\": {\n \"0\": [\n 241,\n 243,\n 244,\n 0\n ],\n \"5\": [\n 241,\n 243,\n 244,\n 0.05\n ],\n \"10\": [\n 241,\n 243,\n 244,\n 0.1\n ],\n \"15\": [\n 241,\n 243,\n 244,\n 0.15\n ],\n \"20\": [\n 241,\n 243,\n 244,\n 0.2\n ],\n \"25\": [\n 241,\n 243,\n 244,\n 0.25\n ],\n \"30\": [\n 241,\n 243,\n 244,\n 0.3\n ],\n \"35\": [\n 241,\n 243,\n 244,\n 0.35\n ],\n \"40\": [\n 241,\n 243,\n 244,\n 0.4\n ],\n \"45\": [\n 241,\n 243,\n 244,\n 0.45\n ],\n \"50\": [\n 241,\n 243,\n 244,\n 0.5\n ],\n \"55\": [\n 241,\n 243,\n 244,\n 0.55\n ],\n \"60\": [\n 241,\n 243,\n 244,\n 0.6\n ],\n \"65\": [\n 241,\n 243,\n 244,\n 0.65\n ],\n \"70\": [\n 241,\n 243,\n 244,\n 0.7\n ],\n \"75\": [\n 241,\n 243,\n 244,\n 0.75\n ],\n \"80\": [\n 241,\n 243,\n 244,\n 0.8\n ],\n \"85\": [\n 241,\n 243,\n 244,\n 0.85\n ],\n \"90\": [\n 241,\n 243,\n 244,\n 0.9\n ],\n \"95\": [\n 241,\n 243,\n 244,\n 0.95\n ],\n \"100\": [\n 241,\n 243,\n 244,\n 1\n ]\n }\n }\n },\n \"warning\": {\n \"2\": [\n 49,\n 24,\n 1,\n 1\n ],\n \"4\": [\n 61,\n 31,\n 1,\n 1\n ],\n \"5\": [\n 67,\n 34,\n 1,\n 1\n ],\n \"6\": [\n 71,\n 37,\n 1,\n 1\n ],\n \"8\": [\n 81,\n 43,\n 1,\n 1\n ],\n \"10\": [\n 89,\n 48,\n 2,\n 1\n ],\n \"15\": [\n 110,\n 60,\n 3,\n 1\n ],\n \"20\": [\n 129,\n 72,\n 4,\n 1\n ],\n \"25\": [\n 147,\n 83,\n 5,\n 1\n ],\n \"30\": [\n 164,\n 93,\n 6,\n 1\n ],\n \"35\": [\n 180,\n 102,\n 8,\n 1\n ],\n \"40\": [\n 195,\n 112,\n 10,\n 1\n ],\n \"45\": [\n 210,\n 121,\n 14,\n 1\n ],\n \"50\": [\n 224,\n 130,\n 19,\n 1\n ],\n \"55\": [\n 237,\n 139,\n 27,\n 1\n ],\n \"60\": [\n 249,\n 148,\n 39,\n 1\n ],\n \"65\": [\n 252,\n 161,\n 74,\n 1\n ],\n \"70\": [\n 253,\n 174,\n 103,\n 1\n ],\n \"75\": [\n 254,\n 186,\n 128,\n 1\n ],\n \"80\": [\n 254,\n 198,\n 150,\n 1\n ],\n \"85\": [\n 255,\n 209,\n 171,\n 1\n ],\n \"90\": [\n 255,\n 220,\n 191,\n 1\n ],\n \"95\": [\n 255,\n 230,\n 210,\n 1\n ],\n \"100\": [\n 255,\n 240,\n 228,\n 1\n ],\n \"101\": [\n 255,\n 242,\n 231,\n 1\n ],\n \"102\": [\n 255,\n 244,\n 235,\n 1\n ],\n \"103\": [\n 255,\n 246,\n 238,\n 1\n ],\n \"104\": [\n 255,\n 248,\n 242,\n 1\n ],\n \"105\": [\n 255,\n 250,\n 245,\n 1\n ]\n },\n \"danger\": {\n \"2\": [\n 67,\n 4,\n 5,\n 1\n ],\n \"4\": [\n 83,\n 6,\n 8,\n 1\n ],\n \"5\": [\n 90,\n 7,\n 10,\n 1\n ],\n \"6\": [\n 96,\n 8,\n 11,\n 1\n ],\n \"8\": [\n 108,\n 10,\n 14,\n 1\n ],\n \"10\": [\n 119,\n 12,\n 17,\n 1\n ],\n \"15\": [\n 146,\n 17,\n 23,\n 1\n ],\n \"20\": [\n 171,\n 22,\n 28,\n 1\n ],\n \"25\": [\n 193,\n 28,\n 34,\n 1\n ],\n \"30\": [\n 214,\n 34,\n 40,\n 1\n ],\n \"35\": [\n 234,\n 42,\n 47,\n 1\n ],\n \"40\": [\n 247,\n 60,\n 59,\n 1\n ],\n \"45\": [\n 250,\n 86,\n 79,\n 1\n ],\n \"50\": [\n 251,\n 106,\n 97,\n 1\n ],\n \"55\": [\n 253,\n 125,\n 114,\n 1\n ],\n \"60\": [\n 253,\n 141,\n 130,\n 1\n ],\n \"65\": [\n 254,\n 156,\n 146,\n 1\n ],\n \"70\": [\n 254,\n 169,\n 160,\n 1\n ],\n \"75\": [\n 254,\n 182,\n 174,\n 1\n ],\n \"80\": [\n 254,\n 195,\n 188,\n 1\n ],\n \"85\": [\n 254,\n 206,\n 201,\n 1\n ],\n \"90\": [\n 254,\n 218,\n 213,\n 1\n ],\n \"95\": [\n 255,\n 229,\n 225,\n 1\n ],\n \"100\": [\n 255,\n 239,\n 237,\n 1\n ],\n \"101\": [\n 255,\n 241,\n 239,\n 1\n ],\n \"102\": [\n 255,\n 243,\n 242,\n 1\n ],\n \"103\": [\n 255,\n 245,\n 244,\n 1\n ],\n \"104\": [\n 255,\n 247,\n 246,\n 1\n ],\n \"105\": [\n 255,\n 249,\n 248,\n 1\n ],\n \"translucent\": {\n \"50\": {\n \"0\": [\n 251,\n 106,\n 97,\n 0\n ],\n \"5\": [\n 251,\n 106,\n 97,\n 0.05\n ],\n \"10\": [\n 251,\n 106,\n 97,\n 0.1\n ],\n \"15\": [\n 251,\n 106,\n 97,\n 0.15\n ],\n \"20\": [\n 251,\n 106,\n 97,\n 0.2\n ],\n \"25\": [\n 251,\n 106,\n 97,\n 0.25\n ],\n \"30\": [\n 251,\n 106,\n 97,\n 0.3\n ],\n \"35\": [\n 251,\n 106,\n 97,\n 0.35\n ],\n \"40\": [\n 251,\n 106,\n 97,\n 0.4\n ],\n \"45\": [\n 251,\n 106,\n 97,\n 0.45\n ],\n \"50\": [\n 251,\n 106,\n 97,\n 0.5\n ],\n \"55\": [\n 251,\n 106,\n 97,\n 0.55\n ],\n \"60\": [\n 251,\n 106,\n 97,\n 0.6\n ],\n \"65\": [\n 251,\n 106,\n 97,\n 0.65\n ],\n \"70\": [\n 251,\n 106,\n 97,\n 0.7\n ],\n \"75\": [\n 251,\n 106,\n 97,\n 0.75\n ],\n \"80\": [\n 251,\n 106,\n 97,\n 0.8\n ],\n \"85\": [\n 251,\n 106,\n 97,\n 0.85\n ],\n \"90\": [\n 251,\n 106,\n 97,\n 0.9\n ],\n \"95\": [\n 251,\n 106,\n 97,\n 0.95\n ],\n \"100\": [\n 251,\n 106,\n 97,\n 1\n ]\n },\n \"100\": {\n \"0\": [\n 255,\n 239,\n 237,\n 0\n ],\n \"5\": [\n 255,\n 239,\n 237,\n 0.05\n ],\n \"10\": [\n 255,\n 239,\n 237,\n 0.1\n ],\n \"15\": [\n 255,\n 239,\n 237,\n 0.15\n ],\n \"20\": [\n 255,\n 239,\n 237,\n 0.2\n ],\n \"25\": [\n 255,\n 239,\n 237,\n 0.25\n ],\n \"30\": [\n 255,\n 239,\n 237,\n 0.3\n ],\n \"35\": [\n 255,\n 239,\n 237,\n 0.35\n ],\n \"40\": [\n 255,\n 239,\n 237,\n 0.4\n ],\n \"45\": [\n 255,\n 239,\n 237,\n 0.45\n ],\n \"50\": [\n 255,\n 239,\n 237,\n 0.5\n ],\n \"55\": [\n 255,\n 239,\n 237,\n 0.55\n ],\n \"60\": [\n 255,\n 239,\n 237,\n 0.6\n ],\n \"65\": [\n 255,\n 239,\n 237,\n 0.65\n ],\n \"70\": [\n 255,\n 239,\n 237,\n 0.7\n ],\n \"75\": [\n 255,\n 239,\n 237,\n 0.75\n ],\n \"80\": [\n 255,\n 239,\n 237,\n 0.8\n ],\n \"85\": [\n 255,\n 239,\n 237,\n 0.85\n ],\n \"90\": [\n 255,\n 239,\n 237,\n 0.9\n ],\n \"95\": [\n 255,\n 239,\n 237,\n 0.95\n ],\n \"100\": [\n 255,\n 239,\n 237,\n 1\n ]\n }\n }\n },\n \"primary\": {\n \"2\": [\n 1,\n 32,\n 50,\n 1\n ],\n \"4\": [\n 2,\n 42,\n 63,\n 1\n ],\n \"5\": [\n 3,\n 45,\n 68,\n 1\n ],\n \"6\": [\n 3,\n 49,\n 73,\n 1\n ],\n \"8\": [\n 4,\n 56,\n 83,\n 1\n ],\n \"10\": [\n 5,\n 62,\n 92,\n 1\n ],\n \"15\": [\n 7,\n 77,\n 113,\n 1\n ],\n \"20\": [\n 10,\n 91,\n 132,\n 1\n ],\n \"25\": [\n 13,\n 105,\n 151,\n 1\n ],\n \"30\": [\n 16,\n 117,\n 168,\n 1\n ],\n \"35\": [\n 20,\n 129,\n 184,\n 1\n ],\n \"40\": [\n 25,\n 140,\n 200,\n 1\n ],\n \"45\": [\n 32,\n 151,\n 214,\n 1\n ],\n \"50\": [\n 41,\n 162,\n 227,\n 1\n ],\n \"55\": [\n 53,\n 172,\n 239,\n 1\n ],\n \"60\": [\n 74,\n 182,\n 246,\n 1\n ],\n \"65\": [\n 97,\n 191,\n 250,\n 1\n ],\n \"70\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"75\": [\n 141,\n 208,\n 253,\n 1\n ],\n \"80\": [\n 161,\n 216,\n 253,\n 1\n ],\n \"85\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"90\": [\n 197,\n 231,\n 254,\n 1\n ],\n \"95\": [\n 214,\n 238,\n 254,\n 1\n ],\n \"100\": [\n 230,\n 245,\n 255,\n 1\n ],\n \"101\": [\n 234,\n 246,\n 255,\n 1\n ],\n \"102\": [\n 237,\n 247,\n 255,\n 1\n ],\n \"103\": [\n 240,\n 249,\n 255,\n 1\n ],\n \"104\": [\n 243,\n 250,\n 255,\n 1\n ],\n \"105\": [\n 246,\n 251,\n 255,\n 1\n ],\n \"translucent\": {\n \"10\": {\n \"0\": [\n 5,\n 62,\n 92,\n 0\n ],\n \"5\": [\n 5,\n 62,\n 92,\n 0.05\n ],\n \"10\": [\n 5,\n 62,\n 92,\n 0.1\n ],\n \"15\": [\n 5,\n 62,\n 92,\n 0.15\n ],\n \"20\": [\n 5,\n 62,\n 92,\n 0.2\n ],\n \"25\": [\n 5,\n 62,\n 92,\n 0.25\n ],\n \"30\": [\n 5,\n 62,\n 92,\n 0.3\n ],\n \"35\": [\n 5,\n 62,\n 92,\n 0.35\n ],\n \"40\": [\n 5,\n 62,\n 92,\n 0.4\n ],\n \"45\": [\n 5,\n 62,\n 92,\n 0.45\n ],\n \"50\": [\n 5,\n 62,\n 92,\n 0.5\n ],\n \"55\": [\n 5,\n 62,\n 92,\n 0.55\n ],\n \"60\": [\n 5,\n 62,\n 92,\n 0.6\n ],\n \"65\": [\n 5,\n 62,\n 92,\n 0.65\n ],\n \"70\": [\n 5,\n 62,\n 92,\n 0.7\n ],\n \"75\": [\n 5,\n 62,\n 92,\n 0.75\n ],\n \"80\": [\n 5,\n 62,\n 92,\n 0.8\n ],\n \"85\": [\n 5,\n 62,\n 92,\n 0.85\n ],\n \"90\": [\n 5,\n 62,\n 92,\n 0.9\n ],\n \"95\": [\n 5,\n 62,\n 92,\n 0.95\n ],\n \"100\": [\n 5,\n 62,\n 92,\n 1\n ]\n },\n \"50\": {\n \"0\": [\n 41,\n 162,\n 227,\n 0\n ],\n \"5\": [\n 41,\n 162,\n 227,\n 0.05\n ],\n \"10\": [\n 41,\n 162,\n 227,\n 0.1\n ],\n \"15\": [\n 41,\n 162,\n 227,\n 0.15\n ],\n \"20\": [\n 41,\n 162,\n 227,\n 0.2\n ],\n \"25\": [\n 41,\n 162,\n 227,\n 0.25\n ],\n \"30\": [\n 41,\n 162,\n 227,\n 0.3\n ],\n \"35\": [\n 41,\n 162,\n 227,\n 0.35\n ],\n \"40\": [\n 41,\n 162,\n 227,\n 0.4\n ],\n \"45\": [\n 41,\n 162,\n 227,\n 0.45\n ],\n \"50\": [\n 41,\n 162,\n 227,\n 0.5\n ],\n \"55\": [\n 41,\n 162,\n 227,\n 0.55\n ],\n \"60\": [\n 41,\n 162,\n 227,\n 0.6\n ],\n \"65\": [\n 41,\n 162,\n 227,\n 0.65\n ],\n \"70\": [\n 41,\n 162,\n 227,\n 0.7\n ],\n \"75\": [\n 41,\n 162,\n 227,\n 0.75\n ],\n \"80\": [\n 41,\n 162,\n 227,\n 0.8\n ],\n \"85\": [\n 41,\n 162,\n 227,\n 0.85\n ],\n \"90\": [\n 41,\n 162,\n 227,\n 0.9\n ],\n \"95\": [\n 41,\n 162,\n 227,\n 0.95\n ],\n \"100\": [\n 41,\n 162,\n 227,\n 1\n ]\n },\n \"100\": {\n \"0\": [\n 230,\n 245,\n 255,\n 0\n ],\n \"5\": [\n 230,\n 245,\n 255,\n 0.05\n ],\n \"10\": [\n 230,\n 245,\n 255,\n 0.1\n ],\n \"15\": [\n 230,\n 245,\n 255,\n 0.15\n ],\n \"20\": [\n 230,\n 245,\n 255,\n 0.2\n ],\n \"25\": [\n 230,\n 245,\n 255,\n 0.25\n ],\n \"30\": [\n 230,\n 245,\n 255,\n 0.3\n ],\n \"35\": [\n 230,\n 245,\n 255,\n 0.35\n ],\n \"40\": [\n 230,\n 245,\n 255,\n 0.4\n ],\n \"45\": [\n 230,\n 245,\n 255,\n 0.45\n ],\n \"50\": [\n 230,\n 245,\n 255,\n 0.5\n ],\n \"55\": [\n 230,\n 245,\n 255,\n 0.55\n ],\n \"60\": [\n 230,\n 245,\n 255,\n 0.6\n ],\n \"65\": [\n 230,\n 245,\n 255,\n 0.65\n ],\n \"70\": [\n 230,\n 245,\n 255,\n 0.7\n ],\n \"75\": [\n 230,\n 245,\n 255,\n 0.75\n ],\n \"80\": [\n 230,\n 245,\n 255,\n 0.8\n ],\n \"85\": [\n 230,\n 245,\n 255,\n 0.85\n ],\n \"90\": [\n 230,\n 245,\n 255,\n 0.9\n ],\n \"95\": [\n 230,\n 245,\n 255,\n 0.95\n ],\n \"100\": [\n 230,\n 245,\n 255,\n 1\n ]\n }\n }\n },\n \"secondary\": {\n \"2\": [\n 36,\n 30,\n 0,\n 1\n ],\n \"4\": [\n 46,\n 38,\n 0,\n 1\n ],\n \"5\": [\n 50,\n 42,\n 0,\n 1\n ],\n \"6\": [\n 54,\n 45,\n 0,\n 1\n ],\n \"8\": [\n 61,\n 52,\n 0,\n 1\n ],\n \"10\": [\n 68,\n 58,\n 0,\n 1\n ],\n \"15\": [\n 85,\n 72,\n 0,\n 1\n ],\n \"20\": [\n 100,\n 86,\n 0,\n 1\n ],\n \"25\": [\n 114,\n 98,\n 0,\n 1\n ],\n \"30\": [\n 128,\n 110,\n 0,\n 1\n ],\n \"35\": [\n 141,\n 121,\n 0,\n 1\n ],\n \"40\": [\n 153,\n 132,\n 0,\n 1\n ],\n \"45\": [\n 165,\n 142,\n 0,\n 1\n ],\n \"50\": [\n 176,\n 152,\n 0,\n 1\n ],\n \"55\": [\n 188,\n 162,\n 0,\n 1\n ],\n \"60\": [\n 199,\n 172,\n 0,\n 1\n ],\n \"65\": [\n 209,\n 181,\n 0,\n 1\n ],\n \"70\": [\n 220,\n 190,\n 0,\n 1\n ],\n \"75\": [\n 230,\n 199,\n 0,\n 1\n ],\n \"80\": [\n 240,\n 208,\n 0,\n 1\n ],\n \"85\": [\n 250,\n 216,\n 0,\n 1\n ],\n \"90\": [\n 255,\n 226,\n 75,\n 1\n ],\n \"95\": [\n 255,\n 235,\n 138,\n 1\n ],\n \"100\": [\n 255,\n 243,\n 186,\n 1\n ],\n \"101\": [\n 255,\n 245,\n 195,\n 1\n ],\n \"102\": [\n 255,\n 246,\n 204,\n 1\n ],\n \"103\": [\n 255,\n 248,\n 213,\n 1\n ],\n \"104\": [\n 255,\n 249,\n 221,\n 1\n ],\n \"105\": [\n 255,\n 251,\n 230,\n 1\n ],\n \"translucent\": {\n \"10\": {\n \"0\": [\n 68,\n 58,\n 0,\n 0\n ],\n \"5\": [\n 68,\n 58,\n 0,\n 0.05\n ],\n \"10\": [\n 68,\n 58,\n 0,\n 0.1\n ],\n \"15\": [\n 68,\n 58,\n 0,\n 0.15\n ],\n \"20\": [\n 68,\n 58,\n 0,\n 0.2\n ],\n \"25\": [\n 68,\n 58,\n 0,\n 0.25\n ],\n \"30\": [\n 68,\n 58,\n 0,\n 0.3\n ],\n \"35\": [\n 68,\n 58,\n 0,\n 0.35\n ],\n \"40\": [\n 68,\n 58,\n 0,\n 0.4\n ],\n \"45\": [\n 68,\n 58,\n 0,\n 0.45\n ],\n \"50\": [\n 68,\n 58,\n 0,\n 0.5\n ],\n \"55\": [\n 68,\n 58,\n 0,\n 0.55\n ],\n \"60\": [\n 68,\n 58,\n 0,\n 0.6\n ],\n \"65\": [\n 68,\n 58,\n 0,\n 0.65\n ],\n \"70\": [\n 68,\n 58,\n 0,\n 0.7\n ],\n \"75\": [\n 68,\n 58,\n 0,\n 0.75\n ],\n \"80\": [\n 68,\n 58,\n 0,\n 0.8\n ],\n \"85\": [\n 68,\n 58,\n 0,\n 0.85\n ],\n \"90\": [\n 68,\n 58,\n 0,\n 0.9\n ],\n \"95\": [\n 68,\n 58,\n 0,\n 0.95\n ],\n \"100\": [\n 68,\n 58,\n 0,\n 1\n ]\n },\n \"50\": {\n \"0\": [\n 176,\n 152,\n 0,\n 0\n ],\n \"5\": [\n 176,\n 152,\n 0,\n 0.05\n ],\n \"10\": [\n 176,\n 152,\n 0,\n 0.1\n ],\n \"15\": [\n 176,\n 152,\n 0,\n 0.15\n ],\n \"20\": [\n 176,\n 152,\n 0,\n 0.2\n ],\n \"25\": [\n 176,\n 152,\n 0,\n 0.25\n ],\n \"30\": [\n 176,\n 152,\n 0,\n 0.3\n ],\n \"35\": [\n 176,\n 152,\n 0,\n 0.35\n ],\n \"40\": [\n 176,\n 152,\n 0,\n 0.4\n ],\n \"45\": [\n 176,\n 152,\n 0,\n 0.45\n ],\n \"50\": [\n 176,\n 152,\n 0,\n 0.5\n ],\n \"55\": [\n 176,\n 152,\n 0,\n 0.55\n ],\n \"60\": [\n 176,\n 152,\n 0,\n 0.6\n ],\n \"65\": [\n 176,\n 152,\n 0,\n 0.65\n ],\n \"70\": [\n 176,\n 152,\n 0,\n 0.7\n ],\n \"75\": [\n 176,\n 152,\n 0,\n 0.75\n ],\n \"80\": [\n 176,\n 152,\n 0,\n 0.8\n ],\n \"85\": [\n 176,\n 152,\n 0,\n 0.85\n ],\n \"90\": [\n 176,\n 152,\n 0,\n 0.9\n ],\n \"95\": [\n 176,\n 152,\n 0,\n 0.95\n ],\n \"100\": [\n 176,\n 152,\n 0,\n 1\n ]\n },\n \"100\": {\n \"0\": [\n 255,\n 243,\n 186,\n 0\n ],\n \"5\": [\n 255,\n 243,\n 186,\n 0.05\n ],\n \"10\": [\n 255,\n 243,\n 186,\n 0.1\n ],\n \"15\": [\n 255,\n 243,\n 186,\n 0.15\n ],\n \"20\": [\n 255,\n 243,\n 186,\n 0.2\n ],\n \"25\": [\n 255,\n 243,\n 186,\n 0.25\n ],\n \"30\": [\n 255,\n 243,\n 186,\n 0.3\n ],\n \"35\": [\n 255,\n 243,\n 186,\n 0.35\n ],\n \"40\": [\n 255,\n 243,\n 186,\n 0.4\n ],\n \"45\": [\n 255,\n 243,\n 186,\n 0.45\n ],\n \"50\": [\n 255,\n 243,\n 186,\n 0.5\n ],\n \"55\": [\n 255,\n 243,\n 186,\n 0.55\n ],\n \"60\": [\n 255,\n 243,\n 186,\n 0.6\n ],\n \"65\": [\n 255,\n 243,\n 186,\n 0.65\n ],\n \"70\": [\n 255,\n 243,\n 186,\n 0.7\n ],\n \"75\": [\n 255,\n 243,\n 186,\n 0.75\n ],\n \"80\": [\n 255,\n 243,\n 186,\n 0.8\n ],\n \"85\": [\n 255,\n 243,\n 186,\n 0.85\n ],\n \"90\": [\n 255,\n 243,\n 186,\n 0.9\n ],\n \"95\": [\n 255,\n 243,\n 186,\n 0.95\n ],\n \"100\": [\n 255,\n 243,\n 186,\n 1\n ]\n }\n }\n }\n },\n \"bg\": {\n \"button\": {\n \"regular\": {\n \"base\": [\n 67,\n 74,\n 79,\n 1\n ],\n \"hover\": [\n 91,\n 100,\n 106,\n 1\n ],\n \"active\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"disabled\": [\n 53,\n 59,\n 63,\n 1\n ],\n \"on\": [\n 25,\n 140,\n 200,\n 1\n ],\n \"on-hover\": [\n 32,\n 151,\n 214,\n 1\n ],\n \"on-active\": [\n 20,\n 129,\n 184,\n 1\n ],\n \"off\": [\n 67,\n 74,\n 79,\n 1\n ],\n \"off-hover\": [\n 91,\n 100,\n 106,\n 1\n ],\n \"off-active\": [\n 79,\n 87,\n 93,\n 1\n ]\n },\n \"outline\": {\n \"base\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"hover\": [\n 144,\n 155,\n 162,\n 0.1\n ],\n \"active\": [\n 144,\n 155,\n 162,\n 0.2\n ],\n \"disabled\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"on\": [\n 41,\n 162,\n 227,\n 0.2\n ],\n \"on-hover\": [\n 41,\n 162,\n 227,\n 0.3\n ],\n \"on-active\": [\n 41,\n 162,\n 227,\n 0.4\n ],\n \"off\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"off-hover\": [\n 144,\n 155,\n 162,\n 0.1\n ],\n \"off-active\": [\n 144,\n 155,\n 162,\n 0.2\n ]\n },\n \"minimal\": {\n \"base\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"hover\": [\n 144,\n 155,\n 162,\n 0.1\n ],\n \"active\": [\n 144,\n 155,\n 162,\n 0.2\n ],\n \"disabled\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"on\": [\n 144,\n 155,\n 162,\n 0.25\n ],\n \"on-hover\": [\n 144,\n 155,\n 162,\n 0.3\n ],\n \"on-active\": [\n 144,\n 155,\n 162,\n 0.4\n ],\n \"off\": [\n 144,\n 155,\n 162,\n 0\n ],\n \"off-hover\": [\n 144,\n 155,\n 162,\n 0.1\n ],\n \"off-active\": [\n 144,\n 155,\n 162,\n 0.2\n ]\n }\n },\n \"default\": [\n 38,\n 43,\n 46,\n 1\n ],\n \"overlay\": [\n 47,\n 53,\n 57,\n 1\n ],\n \"inset\": [\n 31,\n 35,\n 38,\n 1\n ],\n \"subtle\": [\n 38,\n 43,\n 46,\n 1\n ],\n \"strong\": [\n 203,\n 210,\n 215,\n 1\n ],\n \"muted\": [\n 45,\n 50,\n 53,\n 0.6\n ],\n \"alternating\": {\n \"odd\": [\n 0,\n 0,\n 0,\n 0.1\n ],\n \"even\": [\n 53,\n 59,\n 63,\n 0.5\n ]\n },\n \"accent\": {\n \"primary\": {\n \"subtle\": [\n 5,\n 62,\n 92,\n 1\n ],\n \"strong\": [\n 161,\n 216,\n 253,\n 1\n ],\n \"strong-v\": [\n 74,\n 182,\n 246,\n 1\n ],\n \"muted\": [\n 5,\n 62,\n 92,\n 0.5\n ]\n },\n \"secondary\": {\n \"subtle\": [\n 68,\n 58,\n 0,\n 1\n ],\n \"strong\": [\n 240,\n 208,\n 0,\n 1\n ],\n \"strong-v\": [\n 199,\n 172,\n 0,\n 1\n ],\n \"muted\": [\n 68,\n 58,\n 0,\n 0.4\n ]\n },\n \"warning\": {\n \"subtle\": [\n 89,\n 48,\n 2,\n 1\n ],\n \"strong\": [\n 254,\n 198,\n 150,\n 1\n ],\n \"strong-v\": [\n 249,\n 148,\n 39,\n 1\n ],\n \"muted\": [\n 89,\n 48,\n 2,\n 0.4\n ]\n },\n \"danger\": {\n \"subtle\": [\n 119,\n 12,\n 17,\n 1\n ],\n \"strong\": [\n 254,\n 195,\n 188,\n 1\n ],\n \"strong-v\": [\n 253,\n 141,\n 130,\n 1\n ],\n \"muted\": [\n 119,\n 12,\n 17,\n 0.4\n ]\n }\n }\n },\n \"fg\": {\n \"button\": {\n \"regular\": {\n \"base\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"hover\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"active\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"disabled\": [\n 184,\n 192,\n 199,\n 0.5\n ],\n \"on\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"on-hover\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"on-active\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"off\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"off-hover\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"off-active\": [\n 250,\n 251,\n 251,\n 1\n ]\n },\n \"outline\": {\n \"base\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"hover\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"active\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"disabled\": [\n 184,\n 192,\n 199,\n 0.5\n ],\n \"on\": [\n 197,\n 231,\n 254,\n 1\n ],\n \"on-hover\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"on-active\": [\n 161,\n 216,\n 253,\n 1\n ],\n \"off\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"off-hover\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"off-active\": [\n 250,\n 251,\n 251,\n 1\n ]\n },\n \"minimal\": {\n \"base\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"hover\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"active\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"disabled\": [\n 184,\n 192,\n 199,\n 0.5\n ],\n \"on\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"on-hover\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"on-active\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"off\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"off-hover\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"off-active\": [\n 250,\n 251,\n 251,\n 1\n ]\n }\n },\n \"default\": [\n 241,\n 243,\n 244,\n 1\n ],\n \"strong\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"subtle\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"disabled\": [\n 184,\n 192,\n 199,\n 0.5\n ],\n \"on-strong\": [\n 38,\n 43,\n 46,\n 1\n ],\n \"on-strong-v\": [\n 0,\n 0,\n 0,\n 1\n ],\n \"inversed\": {\n \"default\": [\n 38,\n 43,\n 46,\n 1\n ],\n \"strong\": [\n 0,\n 0,\n 0,\n 1\n ],\n \"subtle\": [\n 102,\n 112,\n 119,\n 1\n ]\n },\n \"translucent\": {\n \"default\": [\n 250,\n 251,\n 251,\n 0.9\n ],\n \"strong\": [\n 250,\n 251,\n 251,\n 1\n ],\n \"subtle\": [\n 241,\n 243,\n 244,\n 0.6\n ],\n \"disabled\": [\n 184,\n 192,\n 199,\n 0.5\n ],\n \"on-strong\": [\n 0,\n 0,\n 0,\n 0.9\n ],\n \"on-strong-v\": [\n 0,\n 0,\n 0,\n 0.8\n ]\n },\n \"accent\": {\n \"primary\": [\n 179,\n 223,\n 254,\n 1\n ],\n \"secondary\": [\n 220,\n 190,\n 0,\n 1\n ],\n \"warning\": [\n 253,\n 174,\n 103,\n 1\n ],\n \"danger\": [\n 254,\n 206,\n 201,\n 1\n ],\n \"primary-v\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"secondary-v\": [\n 199,\n 172,\n 0,\n 1\n ],\n \"warning-v\": [\n 249,\n 148,\n 39,\n 1\n ],\n \"danger-v\": [\n 254,\n 169,\n 160,\n 1\n ]\n }\n },\n \"border\": {\n \"button\": {\n \"regular\": {\n \"base\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"hover\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"active\": [\n 113,\n 123,\n 130,\n 1\n ],\n \"disabled\": [\n 144,\n 155,\n 162,\n 0.4\n ],\n \"on\": [\n 20,\n 129,\n 184,\n 1\n ],\n \"on-hover\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"on-active\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"off\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"off-hover\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"off-active\": [\n 113,\n 123,\n 130,\n 1\n ]\n },\n \"outline\": {\n \"base\": [\n 113,\n 123,\n 130,\n 1\n ],\n \"hover\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"active\": [\n 113,\n 123,\n 130,\n 1\n ],\n \"disabled\": [\n 144,\n 155,\n 162,\n 0.4\n ],\n \"on\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"on-hover\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"on-active\": [\n 120,\n 200,\n 252,\n 1\n ],\n \"off\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"off-hover\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"off-active\": [\n 113,\n 123,\n 130,\n 1\n ]\n }\n },\n \"default\": [\n 113,\n 123,\n 130,\n 1\n ],\n \"subtle\": [\n 79,\n 87,\n 93,\n 1\n ],\n \"strong\": [\n 184,\n 192,\n 199,\n 1\n ],\n \"muted\": [\n 144,\n 155,\n 162,\n 0.4\n ],\n \"accent\": {\n \"primary\": {\n \"default\": [\n 20,\n 129,\n 184,\n 1\n ],\n \"strong\": [\n 120,\n 200,\n 252,\n 1\n ]\n },\n \"secondary\": {\n \"default\": [\n 141,\n 121,\n 0,\n 1\n ],\n \"strong\": [\n 220,\n 190,\n 0,\n 1\n ]\n },\n \"warning\": {\n \"default\": [\n 210,\n 121,\n 14,\n 1\n ],\n \"strong\": [\n 253,\n 174,\n 103,\n 1\n ]\n },\n \"danger\": {\n \"default\": [\n 234,\n 42,\n 47,\n 1\n ],\n \"strong\": [\n 254,\n 169,\n 160,\n 1\n ]\n }\n }\n }\n },\n \"shadow\": {\n \"button\": {\n \"regular\": {\n \"base\": {},\n \"active\": {},\n \"disabled\": {}\n }\n }\n }\n },\n\n __resolvePath: function(path, obj, defaultValue = null, separator=\".\") {\n const keys = Array.isArray(path) ? path : path.split(separator);\n return keys.reduce((prev, curr) => prev ? prev[curr] : defaultValue, obj);\n },\n\n getColor(path, cKey) {\n return this.__resolvePath(path, this.colors)[cKey];\n }\n }\n});\n","qx.Theme.define(\"osparc.theme.ColorLight\", {\n include: osparc.theme.mixin.Color,\n\n colors: {\n // 0-105\n \"c00\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0),\n \"c01\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+5),\n \"c02\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+10),\n \"c03\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+20),\n \"c04\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+25),\n \"c05\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+35),\n \"c06\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+50),\n \"c07\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+60),\n \"c08\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+70),\n \"c09\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+75),\n \"c10\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+80),\n \"c12\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+90),\n \"c14\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 0+105),\n\n \"product-color\": \"rgba(0, 144, 208, 1)\", // override in product\n \"strong-main\": \"product-color\",\n \"a-bit-transparent\": \"rgba(255, 255, 255, 0.4)\",\n\n // main\n \"background-main\": \"c01\",\n \"background-main-1\": \"c02\",\n \"background-main-2\": \"c03\",\n \"background-main-3\": \"c04\",\n \"background-main-4\": \"c05\",\n \"background-main-5\": \"c06\",\n\n \"background-card-overlay\": \"rgba(229, 229, 229, 0.8)\",\n \"background-workspace-card-overlay\": \"rgb(165, 223, 252)\",\n\n \"navigation_bar_background_color\": \"rgba(229, 229, 229, 0.8)\",\n \"fab_text\": \"contrasted-text-dark\",\n \"fab-background\": \"rgba(255, 255, 255, 0.2)\",\n \"input_background\": \"rgba(209, 214, 218, 1)\",\n \"input_background_disable\": \"rgba(113, 157, 181, 0.04)\",\n \"hint-background\": \"rgba(201, 201, 201, 1)\",\n \"transparent_overlay\": \"rgba(1, 18, 26, 0.1)\",\n\n \"flash_message_bg\": \"input_background\",\n\n // text\n \"text\": \"rgba(40, 40, 40, 1)\",\n \"text-disabled\": \"rgba(113, 157, 181, 1)\",\n \"text-selected\": \"rgba(20, 20, 20, 1)\",\n \"text-placeholder\": \"rgba(90, 100, 110, 1)\",\n \"text-darker\": \"rgba(20, 20, 20, 1)\",\n \"contrasted-text-dark\": \"rgba(20, 20, 20, 1)\",\n \"contrasted-text-light\": \"rgba(40, 40, 40, 1)\",\n \"link\": \"rgba(10, 182, 255, 1)\",\n\n // shadows\n \"bg-shadow\": \"background-main-5\",\n \"box-shadow\": \"rgba(0, 0, 0, 0.15)\",\n \"shadow\": qx.core.Environment.get(\"css.rgba\") ? \"a-bit-transparent\" : \"bg-shadow\",\n\n // window\n // OM here\n \"window-popup-background\": \"rgba(225, 225, 225, 1)\",\n \"window-caption-background\": \"background-main\",\n \"window-caption-background-active\": \"background-main-3\",\n \"window-caption-text\": \"text\",\n \"window-caption-text-active\": \"c12\",\n \"window-border\": \"background-main-2\",\n \"window-border-inner\": \"background-main-1\",\n\n // material-button\n \"material-button-background\": \"fab-background\",\n \"material-button-background-disabled\": \"default-button-disabled-background\",\n \"material-button-background-hovered\": \"default-button-hover-background\",\n \"material-button-background-pressed\": \"default-button-active-background\",\n \"material-button-text-disabled\": \"default-button-disabled-background\",\n \"material-button-text\": \"default-button-text-outline\",\n\n // material-textfield\n \"material-textfield\": \"input_background\",\n \"material-textfield-focused\": \"product-color\",\n \"material-textfield-disabled\": \"default-button-disabled\",\n \"material-textfield-invalid\": \"error\",\n \"invalid\": \"error\",\n\n // backgrounds\n \"background-selected\": \"default-button-background\",\n \"background-selected-disabled\": \"default-button-disabled\",\n \"background-selected-dark\": \"product-color\",\n \"background-disabled\": \"background-main\",\n \"background-disabled-checked\": \"background-main-1\",\n \"background-pane\": \"background-main\",\n\n // tabview\n \"tabview-unselected\": \"c14\",\n \"tabview-button-border\": \"product-color\",\n \"tabview-label-active-disabled\": \"c10\",\n \"tabview-pane-background\": \"transparent\",\n \"tabview-button-background\": \"transparent\",\n\n // scrollbar\n \"scrollbar-passive\": \"background-main-4\",\n \"scrollbar-active\": \"background-main-5\",\n\n // form\n \"button\": \"background-main-4\",\n \"button-border\": \"background-main-5\",\n \"button-border-hovered\": \"c07\",\n \"button-box\": \"background-main-3\",\n \"button-box-pressed\": \"background-main-4\",\n \"border-lead\": \"c07\",\n\n // group box\n \"white-box-border\": \"background-main-2\",\n\n // borders\n // 'border-main' is an alias of 'background-selected' (compatibility reasons)\n \"border\": \"background-main-3\",\n \"border-focused\": \"c09\",\n \"border-invalid\": \"failed-red\",\n \"border-disabled\": \"background-main\",\n\n // tooltip\n \"tooltip\": \"flash_message_bg\",\n \"tooltip-text\": \"text\",\n\n\n // used in progressive code\n \"progressive-table-header\": \"c08\",\n \"progressive-table-row-background-even\": \"background-main\",\n \"progressive-table-row-background-odd\": \"background-main\",\n \"progressive-progressbar-background\": \"background-main\",\n \"progressive-progressbar-indicator-done\": \"background-main\",\n \"progressive-progressbar-indicator-undone\": \"background-main-1\",\n \"progressive-progressbar-percent-background\": \"background-main\",\n \"progressive-progressbar-percent-text\": \"background-main-1\",\n\n\n // OSPARC\n \"workbench-edge-comp-active\": \"#888888\",\n \"workbench-edge-api-active\": \"#444444\",\n \"workbench-start-hint\": \"#AFAFAF\",\n \"workbench-view-navbar\": \"c02\",\n \"workbench-view-splitter\": \"background-main-3\",\n\n \"node-background\": \"rgba(113, 157, 181, 0.35)\",\n \"node-selected-background\": \"strong-main\",\n \"node-title-text\": \"#232323\",\n \"node-port-text\": \"#454545\",\n\n \"logger-debug-message\": \"#000000\",\n \"logger-info-message\": \"#000000\",\n\n \"service-window-hint\": \"#7F7F7F\",\n\n \"progressbar\": \"success\",\n \"progressbar-disabled\": \"rgba(113, 157, 181, 0.25)\",\n \"progressbar-runner\": \"rgba(228, 234, 237, 1)\",\n\n \"haloProgressbar\": \"progressbar\",\n \"haloProgressbar-disabled\": \"progressbar-disabled\",\n \"haloProgressbar-runner\": \"progressbar-runner\",\n \"haloProgressbar-fill\": \"background-card-overlay\",\n\n \"loading-page-background-color\": \"background-main\",\n \"loading-page-text\": \"#000000\",\n \"loading-page-spinner\": \"#222222\"\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.products.s4l.ColorLight\", {\n include: osparc.theme.ColorLight,\n\n colors: {\n \"product-color\": \"rgba(0, 144, 208, 1)\",\n \"default-button\": \"product-color\",\n \"default-button-background\": \"rgba(0, 144, 208, 0.25)\"\n }\n});\n","/* ************************************************************************\n\n OSparc Dark Theme for Qooxdoo\n\n Copyright:\n 2018 IT'IS Foundation\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tobias Oetiker (oetiker)\n\n Origin:\n This theme is based in large parts on the the Simple\n theme included with Qooxdoo.\n************************************************************************ */\n/**\n * The simple qooxdoo decoration theme.\n */\nqx.Theme.define(\"osparc.theme.common.Decoration\",\n {\n aliases: {decoration: \"qx/decoration/Simple\"},\n\n decorations: {\n\n /*\n ---------------------------------------------------------------------------\n MATERIAL TEXT FIELD\n ---------------------------------------------------------------------------\n */\n \"material-textfield\": {\n style: {\n styleBottom: \"solid\",\n widthBottom: 1,\n colorBottom: \"material-textfield\"\n }\n },\n \"material-textfield-focused\": {\n include: \"material-textfield\",\n style: {\n widthBottom: 2,\n colorBottom: \"material-textfield-focused\"\n }\n },\n \"material-textfield-focused-invalid\": {\n include: \"material-textfield\",\n style: {\n widthBottom: 2,\n colorBottom: \"material-textfield-invalid\"\n }\n },\n \"material-textfield-invalid\": {\n include: \"material-textfield\",\n style: {\n widthBottom: 1,\n colorBottom: \"material-textfield-invalid\"\n }\n },\n \"material-textfield-disabled\": {\n include: \"material-textfield\",\n style: {\n widthBottom: 1,\n colorBottom: \"material-textfield-disabled\"\n }\n },\n\n \"material-textfield-readonly\": {style: {}},\n\n /*\n ---------------------------------------------------------------------------\n BUTTON\n ---------------------------------------------------------------------------\n */\n\n \"material-button\": {\n style: {\n radius: 2,\n backgroundColor: \"material-button-background\",\n shadowHorizontalLength: 0,\n shadowVerticalLength: [3, 2, 1],\n shadowBlurRadius: [1, 2, 5],\n shadowSpreadRadius: [-2, 0, 0],\n shadowColor: [\n \"rgba(0, 0, 0, 0.2)\",\n \"rgba(0, 0, 0, 0.14)\",\n \"rgba(0, 0, 0, 0.12)\"\n ],\n transitionProperty: [\"all\"],\n transitionDuration: \"0s\"\n }\n },\n \"material-button-hovered\": {\n include: \"material-button\",\n style: {\n backgroundColor: \"material-button-background-hovered\",\n shadowVerticalLength: [2, 4, 1],\n shadowBlurRadius: [4, 5, 10],\n shadowSpreadRadius: [-1, 0, 0],\n transitionDuration: \"0.2s\"\n }\n },\n \"material-button-pressed\": {\n include: \"material-button\",\n style: {\n backgroundColor: \"material-button-background-pressed\",\n shadowVerticalLength: [5, 8, 3],\n shadowBlurRadius: [5, 10, 14],\n shadowSpreadRadius: [-3, 1, 2],\n transitionDuration: \"0.2s\"\n }\n },\n \"material-button-disabled\": {\n include: \"material-button\",\n style: {backgroundColor: \"material-button-background-disabled\"}\n },\n\n \"material-button-left\": {\n include: \"material-button\",\n style: {radius: [2, 0, 0, 2]}\n },\n \"material-button-right\": {\n include: \"material-button\",\n style: {radius: [0, 2, 2, 0]}\n },\n \"material-button-hovered-left\": {\n include: \"material-button-hovered\",\n style: {radius: [2, 0, 0, 2]}\n },\n \"material-button-focused-left\": {\n include: \"material-button-hovered\",\n style: {radius: [2, 0, 0, 2]}\n },\n \"material-button-hovered-right\": {\n include: \"material-button-hovered\",\n style: {radius: [0, 2, 2, 0]}\n },\n \"material-button-focused-right\": {\n include: \"material-button-hovered\",\n style: {radius: [0, 2, 2, 0]}\n },\n \"material-button-pressed-left\": {\n include: \"material-button-pressed\",\n style: {radius: [2, 0, 0, 2]}\n },\n \"material-button-pressed-right\": {\n include: \"material-button-pressed\",\n style: {radius: [0, 2, 2, 0]}\n },\n \"material-button-disabled-left\": {\n include: \"material-button-disabled\",\n style: {radius: [2, 0, 0, 2]}\n },\n \"material-button-disabled-right\": {\n include: \"material-button-disabled\",\n style: {radius: [0, 2, 2, 0]}\n },\n /*\n ---------------------------------------------------------------------------\n CORE\n ---------------------------------------------------------------------------\n */\n \"border-blue\":\n {\n style:\n {\n width: 4,\n color: \"background-selected\"\n }\n },\n\n\n \"main\":\n {\n style:\n {\n width: 1,\n color: \"border\"\n }\n },\n \"main-top\":\n {\n include: \"main\",\n style:\n {width: [1, 0, 0, 0]}\n },\n \"main-right\":\n {\n include: \"main\",\n style:\n {width: [0, 1, 0, 0]}\n },\n // eslint-disable-next-line no-dupe-keys\n \"main-bottom\":\n {\n include: \"main\",\n style:\n {width: [0, 0, 1, 0]}\n },\n \"main-left\":\n {\n include: \"main\",\n style:\n {width: [0, 0, 0, 1]}\n },\n \"main-dark\":\n {\n style:\n {\n width: 1,\n color: \"button-border\"\n }\n },\n\n\n \"popup\":\n {\n style:\n {\n width: 1,\n color: \"window-border\",\n shadowLength: 2,\n shadowBlurRadius: 5,\n shadowColor: \"shadow\"\n }\n },\n\n\n \"dragover\":\n {style: {bottom: [2, \"solid\", \"dark-blue\"]}},\n\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON\n ---------------------------------------------------------------------------\n */\n\n\n\n\n \"button-box\":\n {\n style:\n {\n radius: 0,\n width: 0,\n color: \"button-border\",\n backgroundColor: \"button-box\"\n }\n },\n\n \"button-box-pressed\":\n {\n include: \"button-box\",\n\n style:\n {backgroundColor: \"button-box-pressed\"}\n },\n\n \"button-box-pressed-hovered\":\n {\n include: \"button-box-pressed\",\n\n style:\n {color: \"button-border-hovered\"}\n },\n\n \"button-box-hovered\":\n {\n include: \"button-box\",\n\n style:\n {color: \"button-border-hovered\"}\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON INVALID\n ---------------------------------------------------------------------------\n */\n \"button-box-invalid\":\n {\n include: \"button-box\",\n\n style:\n {color: \"invalid\"}\n },\n\n \"button-box-pressed-invalid\":\n {\n include: \"button-box-pressed\",\n\n style:\n {color: \"invalid\"}\n },\n\n \"button-box-hovered-invalid\": {include: \"button-box-invalid\"},\n\n \"button-box-pressed-hovered-invalid\": {include: \"button-box-pressed-invalid\"},\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON FOCUSED\n ---------------------------------------------------------------------------\n */\n \"button-box-focused\":\n {\n include: \"button-box\",\n\n style:\n {color: \"background-selected\"}\n },\n\n \"button-box-pressed-focused\":\n {\n include: \"button-box-pressed\",\n\n style:\n {color: \"background-selected\"}\n },\n\n \"button-box-hovered-focused\": {include: \"button-box-focused\"},\n\n \"button-box-pressed-hovered-focused\": {include: \"button-box-pressed-focused\"},\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON RIGHT\n ---------------------------------------------------------------------------\n */\n \"button-box-right\":\n {\n include: \"button-box\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-pressed-right\":\n {\n include: \"button-box-pressed\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-pressed-hovered-right\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-hovered-right\":\n {\n include: \"button-box-hovered\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-focused-right\":\n {\n include: \"button-box-focused\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-hovered-focused-right\":\n {\n include: \"button-box-hovered-focused\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-pressed-focused-right\":\n {\n include: \"button-box-pressed-focused\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n \"button-box-pressed-hovered-focused-right\":\n {\n include: \"button-box-pressed-hovered-focused\",\n\n style:\n {radius: [0, 1, 1, 0]}\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON BORDERLESS RIGHT\n ---------------------------------------------------------------------------\n\n \"button-box-right-borderless\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: [0, 1, 1, 0],\n width: [1, 1, 1, 0]\n }\n },\n\n \"button-box-pressed-right-borderless\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: [0, 1, 1, 0],\n width: [1, 1, 1, 0]\n }\n },\n\n \"button-box-pressed-hovered-right-borderless\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: [0, 1, 1, 0],\n width: [1, 1, 1, 0]\n }\n },\n\n \"button-box-hovered-right-borderless\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: [0, 1, 1, 0],\n width: [1, 1, 1, 0]\n }\n },\n*/\n\n /*\n ---------------------------------------------------------------------------\n BUTTON TOP RIGHT\n ---------------------------------------------------------------------------\n */\n \"button-box-top-right\":\n {\n include: \"button-box\",\n\n style:\n {radius: [0, 1, 0, 0]}\n },\n\n \"button-box-pressed-top-right\":\n {\n include: \"button-box-pressed\",\n\n style:\n {radius: [0, 1, 0, 0]}\n },\n\n \"button-box-pressed-hovered-top-right\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {radius: [0, 1, 0, 0]}\n },\n\n \"button-box-hovered-top-right\":\n {\n include: \"button-box-hovered\",\n\n style:\n {radius: [0, 1, 0, 0]}\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON BOTOM RIGHT\n ---------------------------------------------------------------------------\n */\n \"button-box-bottom-right\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: [0, 0, 1, 0],\n width: [0, 1, 1, 0]\n }\n },\n\n \"button-box-pressed-bottom-right\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: [0, 0, 1, 0],\n width: [0, 1, 1, 0]\n }\n },\n\n \"button-box-pressed-hovered-bottom-right\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: [0, 0, 1, 0],\n width: [0, 1, 1, 0]\n }\n },\n\n \"button-box-hovered-bottom-right\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: [0, 0, 1, 0],\n width: [0, 1, 1, 0]\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON BOTOM LEFT\n ---------------------------------------------------------------------------\n */\n \"button-box-bottom-left\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: [0, 0, 0, 1],\n width: [0, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-bottom-left\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: [0, 0, 0, 1],\n width: [0, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-hovered-bottom-left\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: [0, 0, 0, 1],\n width: [0, 0, 1, 1]\n }\n },\n\n \"button-box-hovered-bottom-left\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: [0, 0, 0, 1],\n width: [0, 0, 1, 1]\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON TOP LEFT\n ---------------------------------------------------------------------------\n */\n \"button-box-top-left\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: [1, 0, 0, 0],\n width: [1, 0, 0, 1]\n }\n },\n\n \"button-box-pressed-top-left\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: [1, 0, 0, 0],\n width: [1, 0, 0, 1]\n }\n },\n\n \"button-box-pressed-hovered-top-left\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: [1, 0, 0, 0],\n width: [1, 0, 0, 1]\n }\n },\n\n \"button-box-hovered-top-left\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: [1, 0, 0, 0],\n width: [1, 0, 0, 1]\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON MIDDLE\n ---------------------------------------------------------------------------\n */\n \"button-box-middle\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: 0,\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-middle\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: 0,\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-hovered-middle\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: 0,\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-hovered-middle\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: 0,\n width: [1, 0, 1, 1]\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n BUTTON LEFT\n ---------------------------------------------------------------------------\n */\n \"button-box-left\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-left\":\n {\n include: \"button-box-pressed\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-hovered-left\":\n {\n include: \"button-box-pressed-hovered\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-hovered-left\":\n {\n include: \"button-box-hovered\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-focused-left\":\n {\n include: \"button-box-focused\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-hovered-focused-left\":\n {\n include: \"button-box-hovered-focused\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-hovered-focused-left\":\n {\n include: \"button-box-pressed-hovered-focused\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n \"button-box-pressed-focused-left\":\n {\n include: \"button-box-pressed-focused\",\n\n style:\n {\n radius: [1, 0, 0, 1],\n width: [1, 0, 1, 1]\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SEPARATOR\n ---------------------------------------------------------------------------\n */\n\n \"separator-horizontal\":\n {\n style:\n {\n widthLeft: 1,\n colorLeft: \"border-separator\"\n }\n },\n\n \"separator-vertical\":\n {\n style:\n {\n widthTop: 1,\n colorTop: \"border-separator\"\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n SCROLL KNOB\n ---------------------------------------------------------------------------\n */\n \"scroll-knob\":\n {\n style:\n {\n radius: 4,\n width: 0,\n color: \"button-border\",\n backgroundColor: \"scrollbar-passive\"\n }\n },\n\n \"scroll-knob-pressed\":\n {\n include: \"scroll-knob\",\n\n style:\n {backgroundColor: \"scrollbar-active\"}\n },\n\n \"scroll-knob-hovered\":\n {include: \"scroll-knob\"},\n\n \"scroll-knob-pressed-hovered\":\n {include: \"scroll-knob-pressed\"},\n\n /*\n ---------------------------------------------------------------------------\n HOVER BUTTON\n ---------------------------------------------------------------------------\n */\n \"button-hover\":\n {\n style:\n {\n backgroundColor: \"button\",\n radius: 1\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n WINDOW\n ---------------------------------------------------------------------------\n */\n \"window\":\n {\n style:\n {\n width: 1,\n color: \"window-border\",\n innerWidth: 0,\n innerColor: \"window-border-inner\",\n shadowLength: 1,\n shadowBlurRadius: 3,\n shadowColor: \"shadow\",\n backgroundColor: \"background-main\"\n }\n },\n\n \"window-active\":\n {\n include: \"window\",\n\n style:\n {\n shadowLength: 2,\n shadowBlurRadius: 5\n }\n },\n\n\n \"window-caption\": {\n style:\n {\n width: [0, 0, 2, 0],\n color: \"window-border-inner\"\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n GROUP BOX\n ---------------------------------------------------------------------------\n */\n\n \"white-box\":\n {\n style:\n {\n width: 1,\n radius: 2,\n color: \"white-box-border\",\n backgroundColor: \"background-main\"\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n FRAME BOX\n ---------------------------------------------------------------------------\n */\n \"border\":\n {\n style:\n {\n width: 1,\n color: \"border\"\n }\n },\n \"border-disabled\":\n {\n style:\n {\n width: 1,\n color: \"border-disabled\"\n }\n },\n\n \"border-focused\":\n {\n style:\n {\n width: 1,\n color: \"border-focused\"\n }\n },\n\n \"border-invalid\":\n {\n style:\n {\n width: 1,\n color: \"border-invalid\"\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n LIST ITEM\n ---------------------------------------------------------------------------\n */\n\n \"lead-item\":\n {\n style:\n {\n width: 1,\n style: \"dotted\",\n color: \"border-lead\"\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n TOOL TIP\n ---------------------------------------------------------------------------\n */\n\n \"tooltip\":\n {\n style:\n {\n width: 1,\n color: \"tooltip-text\",\n shadowLength: 1,\n shadowBlurRadius: 2,\n shadowColor: \"shadow\"\n }\n },\n\n\n \"tooltip-error\":\n {\n style: {\n radius: 5,\n backgroundColor: \"invalid\"\n }\n },\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n TOOLBAR\n ---------------------------------------------------------------------------\n */\n\n \"toolbar-separator\":\n {\n style:\n {\n widthLeft: 1,\n colorLeft: \"button-border\"\n }\n },\n \"toolbar-button\": {\n include: \"material-button\",\n style: {\n shadowHorizontalLength: 0,\n shadowVerticalLength: 0,\n shadowBlurRadius: 0,\n shadowSpreadRadius: 0\n }\n },\n \"toolbar-button-hovered\": {include: \"material-button-hovered\"},\n\n \"toolbar-button-left\": {\n include: \"material-button-left\",\n style: {\n shadowHorizontalLength: 0,\n shadowVerticalLength: 0,\n shadowBlurRadius: 0,\n shadowSpreadRadius: 0\n }\n },\n \"toolbar-button-hovered-left\": {include: \"material-button-hovered-left\"},\n \"toolbar-button-right\": {\n include: \"material-button-right\",\n style: {\n shadowHorizontalLength: 0,\n shadowVerticalLength: 0,\n shadowBlurRadius: 0,\n shadowSpreadRadius: 0\n }\n },\n \"toolbar-button-hovered-right\": {include: \"material-button-hovered-right\"},\n\n /*\n ---------------------------------------------------------------------------\n MENU\n ---------------------------------------------------------------------------\n */\n \"menu-separator\":\n {\n style:\n {\n widthTop: 1,\n colorTop: \"background-selected\"\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n MENU BAR\n ---------------------------------------------------------------------------\n */\n \"menubar-button-hovered\":\n {\n style:\n {backgroundColor: \"material-button-background-hovered\"}\n },\n\n\n \"menubar-button-pressed\":\n {\n include: \"menubar-button-hovered\",\n\n style:\n {backgroundColor: \"material-button-background-pressed\"}\n },\n\n\n /*\n ---------------------------------------------------------------------------\n DATE CHOOSER\n ---------------------------------------------------------------------------\n */\n\n \"datechooser-date-pane\":\n {\n style:\n {\n widthTop: 1,\n colorTop: \"gray\",\n style: \"solid\"\n }\n },\n\n\n \"datechooser-weekday\":\n {\n style:\n {\n widthBottom: 1,\n colorBottom: \"gray\",\n style: \"solid\"\n }\n },\n\n \"datechooser-week\":\n {\n style:\n {\n widthRight: 1,\n colorRight: \"gray\",\n style: \"solid\"\n }\n },\n\n \"datechooser-week-header\":\n {\n style:\n {\n widthBottom: 1,\n colorBottom: \"gray\",\n widthRight: 1,\n colorRight: \"gray\",\n style: \"solid\"\n }\n },\n\n\n\n\n\n /*\n ---------------------------------------------------------------------------\n TAB VIEW\n ---------------------------------------------------------------------------\n */\n\n \"tabview-page-button-top\":\n {\n style:\n {\n width: [0, 0, 2, 0],\n backgroundColor: \"tabview-button-background\",\n color: \"tabview-button-border\"\n }\n },\n\n \"tabview-page-button-bottom\": {\n include: \"tabview-page-button-top\",\n\n style:\n {width: [2, 0, 0, 0]}\n },\n\n \"tabview-page-button-left\": {\n include: \"tabview-page-button-top\",\n\n style:\n {width: [0, 2, 0, 0]}\n },\n\n \"tabview-page-button-right\": {\n include: \"tabview-page-button-top\",\n\n style:\n {width: [0, 0, 0, 2]}\n },\n\n\n /*\n ---------------------------------------------------------------------------\n TABLE\n ---------------------------------------------------------------------------\n */\n\n \"statusbar\":\n {\n style:\n {\n widthTop: 1,\n colorTop: \"background-selected\",\n styleTop: \"solid\"\n }\n },\n\n \"table-scroller-focus-indicator\":\n {\n style:\n {\n width: 2,\n color: \"table-focus-indicator\",\n style: \"solid\"\n }\n },\n\n \"table-header\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: 0,\n color: \"table-header-border\",\n width: [0, 0, 2, 0]\n }\n },\n\n \"table-header-column-button\":\n {include: \"table-header\"},\n\n \"table-header-cell\":\n {\n style:\n {}\n },\n\n \"table-header-cell-first\":\n {include: \"table-header-cell\"},\n\n \"progressive-table-header\":\n {\n include: \"button-box\",\n\n style:\n {\n radius: 0,\n width: [1, 0, 1, 1]\n }\n },\n\n \"progressive-table-header-cell\":\n {\n style:\n {\n widthRight: 1,\n color: \"button-border\"\n }\n },\n\n\n /*\n ---------------------------------------------------------------------------\n PROGRESSBAR\n ---------------------------------------------------------------------------\n */\n\n \"progressbar\":\n {\n style:\n {\n width: 1,\n color: \"border-separator\"\n }\n },\n\n\n\n /*\n ---------------------------------------------------------------------------\n RADIO BUTTON\n ---------------------------------------------------------------------------\n */\n \"radiobutton\":\n {\n style:\n {color: \"text\"}\n },\n /*\n ---------------------------------------------------------------------------\n CHECK BOX\n ---------------------------------------------------------------------------\n */\n\n \"checkbox\":\n {\n style:\n {color: \"text\"}\n }\n }\n });\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Tobias Oetiker (oetiker)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.Decoration\", {\n extend: osparc.theme.common.Decoration,\n\n decorations: {\n \"rounded\": {\n style: {\n radius: 4\n }\n },\n\n \"border-simple\": {\n include: \"border\",\n style: {\n radius: 4\n }\n },\n\n \"no-border\": {\n style: {\n radius: 4,\n width: 1,\n color: \"transparent\"\n }\n },\n\n \"material-button-invalid\": {},\n \"material-button\": {\n style: {\n radius: 4,\n backgroundColor: \"material-button-background\",\n transitionProperty: [\"background-color\", \"border-color\", \"opacity\"],\n transitionDuration: \"0.25s\",\n transitionTimingFunction: \"linear\",\n shadowColor: \"transparent\"\n }\n },\n\n \"indicator-border\": {\n include: \"material-button\",\n style: {\n radius: 4,\n width: 1,\n color: \"text\"\n }\n },\n\n \"form-input\": {\n style: {\n radius: [4, 4, 0, 0],\n width: [0, 0, 1, 0],\n style: \"solid\",\n color: \"info\"\n }\n },\n\n \"form-password\": {\n include: \"form-input\",\n style: {\n radius: 0,\n width: 0,\n backgroundColor: \"transparent\"\n }\n },\n\n \"form-input-focused\": {\n include: \"form-input\",\n style: {\n color: \"product-color\"\n }\n },\n\n \"form-input-disabled\": {\n include: \"form-input\",\n style: {\n color: \"text-disabled\"\n }\n },\n\n \"form-input-invalid\": {\n include: \"form-input\",\n style: {\n color: \"error\"\n }\n },\n\n \"form-input-focused-invalid\": {\n include: \"form-input-invalid\"\n },\n\n \"form-array-container\": {\n style: {\n radius: 2,\n width: 1\n }\n },\n\n \"service-tree\": {\n decorator: qx.ui.decoration.MSingleBorder,\n style: {\n width: 0\n }\n },\n\n \"panelview\": {\n style: {\n transitionProperty: \"top\",\n transitionDuration: \"0.2s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"panelview-content\": {\n style: {\n transitionProperty: \"height\",\n transitionDuration: \"0.2s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"outputPortHighlighted\": {\n style: {\n backgroundColor: \"background-main-2\"\n }\n },\n\n \"node-ui-cap\": {\n include: \"service-window\",\n style: {\n shadowBlurRadius: 0,\n shadowLength: 0,\n width: 0,\n radius: 4,\n transitionProperty: \"opacity\",\n transitionDuration: \"0.05s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"node-ui-cap-maximized\": {\n include: \"service-window-maximized\",\n style: {\n width: 1,\n transitionProperty: \"opacity\",\n transitionDuration: \"0.05s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"workbench-small-cap-captionbar\": {\n style: {\n width: 0\n }\n },\n\n \"service-window\": {\n include: \"window\",\n style: {\n radius: 4,\n width: 1\n }\n },\n\n \"service-window-maximized\": {\n include: \"window\",\n style: {\n width: 1\n }\n },\n\n \"sidepanel\": {\n style: {\n transitionProperty: [\"left\", \"width\"],\n transitionDuration: \"0.2s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"service-browser\": {\n style: {\n color: \"background-main-2\"\n }\n },\n\n \"flash\": {\n style: {\n radius: 4,\n transitionProperty: \"top\",\n transitionDuration: \"0.2s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"flash-message\": {\n style: {\n radius: 4,\n width: 1,\n style: \"solid\"\n }\n },\n\n \"flash-info\": {\n include: \"flash-message\",\n style: {\n color: \"info\"\n }\n },\n\n \"flash-success\": {\n include: \"flash-message\",\n style: {\n color: \"success\"\n }\n },\n\n \"flash-warning\": {\n include: \"flash-message\",\n style: {\n color: \"warning\"\n }\n },\n\n \"flash-error\": {\n include: \"flash-message\",\n style: {\n color: \"error\"\n }\n },\n\n \"flash-badge\": {\n style: {\n radius: 4\n }\n },\n\n \"flash-container-transitioned\": {\n style: {\n transitionProperty: \"height\",\n transitionDuration: \"0.2s\",\n transitionTimingFunction: \"ease-in\"\n }\n },\n\n \"no-border-2\": {\n style: {\n width: 0\n }\n },\n\n \"border-status\": {\n decorator: qx.ui.decoration.MSingleBorder,\n style: {\n width: 1\n }\n },\n\n \"border-ok\": {\n include: \"border-status\",\n style: {\n color: \"ready-green\"\n }\n },\n\n \"border-warning\": {\n include: \"border-status\",\n style: {\n color: \"warning-yellow\"\n }\n },\n\n \"border-error\": {\n include: \"border-status\",\n style: {\n color: \"failed-red\"\n }\n },\n\n \"border-busy\": {\n include: \"border-status\",\n style: {\n color: \"busy-orange\"\n }\n },\n\n \"border-editable\": {\n style: {\n width: 1,\n radius: 4,\n color: \"text-disabled\"\n }\n },\n\n \"hint\": {\n style: {\n radius: 4\n }\n },\n\n \"chip\": {\n style: {\n radius: 4\n }\n },\n\n \"chip-button\": {\n style: {\n width: 1,\n radius: 4,\n color: \"text\",\n backgroundColor: \"transparent\"\n }\n },\n\n \"filter-toggle-button\": {\n style: {\n width: 1,\n radius: 4,\n color: \"transparent\"\n }\n },\n\n \"filter-toggle-button-selected\": {\n include: \"filter-toggle-button\",\n style: {\n color: \"text\"\n }\n },\n\n \"pb-listitem\": {\n style: {\n radius: 4\n }\n },\n\n \"pb-locked\": {\n style: {\n backgroundColor: \"pb-locked\"\n }\n },\n\n \"no-radius-button\": {\n style: {\n radius: 0\n }\n },\n\n \"tag\": {\n style: {\n radius: 4\n }\n },\n \"tagitem\": {\n style: {\n radius: 4\n }\n },\n \"tagitem-colorbutton\": {\n include: \"material-button\",\n style: {\n radiusBottomRight: 0,\n radiusTopRight: 0\n }\n },\n \"tagbutton\": {\n include: \"material-button\",\n style: {\n backgroundColor: \"transparent\",\n shadowColor: \"transparent\",\n radius: 0\n }\n },\n \"bordered-button\": {\n include: \"material-button\",\n style: {\n width: 1,\n color: \"background-main-4\"\n }\n },\n \"strong-bordered-button\": {\n include: \"material-button\",\n style: {\n width: 1,\n color: \"text\"\n }\n },\n \"tab-button\": {\n style: {\n style: \"solid\",\n width: [0, 0, 2, 0],\n color: \"transparent\",\n radius: [4, 4, 0, 0]\n }\n },\n \"tab-button-selected\": {\n style: {\n style: \"solid\",\n width: [0, 0, 2, 0],\n color: \"default-button-focus\",\n radius: [4, 4, 0, 0]\n }\n },\n\n // Button types\n \"form-button\": {\n include: \"material-button\",\n style: {\n style: \"solid\",\n width: 1,\n color: \"default-button\",\n radius: 4,\n backgroundColor: \"default-button\"\n }\n },\n \"fab-button\": {\n include: \"form-button\",\n style: {\n style: \"solid\",\n width: 1,\n radius: 4,\n color: \"fab-background\",\n backgroundColor: \"fab-background\",\n shadowSpreadRadius: 0,\n shadowBlurRadius: 3,\n shadowLength: 0,\n shadowColor: \"box-shadow\"\n }\n },\n \"form-button-outlined\": {\n include: \"form-button\",\n style: {\n color: \"default-button\",\n backgroundColor: \"default-button-background\"\n }\n },\n \"form-button-text\": {\n style: {\n width: 0,\n radius: 0,\n color: null,\n backgroundColor: null\n }\n },\n\n // Button States\n \"form-button-hovered\": {\n include: \"form-button\",\n style: {\n color: \"default-button-hover\",\n backgroundColor: \"default-button-hover-background\"\n }\n },\n \"form-button-hovered-checked\": {\n include: \"form-button\",\n style: {\n color: \"default-button-disabled\",\n backgroundColor: \"default-button\"\n }\n },\n \"form-button-checked\": {\n include: \"form-button\",\n style: {\n color: \"default-button-disabled\",\n backgroundColor: \"default-button-disabled-background\"\n }\n },\n \"form-button-focused\": {\n include: \"form-button\",\n style: {\n color: \"default-button-focus\",\n backgroundColor: \"default-button-focus-background\"\n }\n },\n \"form-button-active\": {\n include: \"form-button\",\n style: {\n color: \"default-button-active\",\n backgroundColor: \"default-button-focus-background\"\n }\n },\n \"form-button-disabled\": {\n include: \"form-button\",\n style: {\n color: \"transparent\",\n backgroundColor: \"transparent\"\n }\n },\n\n // Split buttons\n // Middle\n \"form-button-outlined-middle\": {\n include: \"form-button-outlined\",\n style: {\n width: [1, 0],\n radius: 0\n }\n },\n\n // Right\n \"form-button-outlined-right\": {\n include: \"form-button-outlined\",\n style: {\n width: [1, 1, 1, 1],\n radius: [0, 4, 4, 0]\n }\n },\n \"form-button-outlined-hovered-right\": {\n include: \"form-button-outlined-right\",\n style: {\n color: \"default-button-hover\",\n backgroundColor: \"default-button-hover-background\"\n }\n },\n \"form-button-outlined-checked-right\": {\n include: \"form-button-outlined-right\",\n style: {\n color: \"default-button\",\n backgroundColor: \"default-button\"\n }\n },\n\n // Left\n \"form-button-outlined-left\": {\n include: \"form-button-outlined\",\n style: {\n width: [1, 0, 1, 1],\n radius: [4, 0, 0, 4]\n }\n },\n \"form-button-outlined-hovered-left\": {\n include: \"form-button-outlined-left\",\n style: {\n color: \"default-button-hover\",\n backgroundColor: \"default-button-hover-background\"\n }\n },\n \"form-button-outlined-checked-left\": {\n include: \"form-button-outlined-left\",\n style: {\n color: \"default-button\",\n backgroundColor: \"default-button\"\n }\n },\n\n // Warning button\n \"form-button-warning\": {\n include:\"form-button-outlined\",\n style: {\n color: \"warning\",\n width: 1,\n style: \"solid\"\n }\n },\n \"form-button-warning-hover\": {\n include:\"form-button-outlined\",\n style: {\n color: \"warning\",\n width: 1,\n style: \"solid\"\n }\n },\n\n // Delete button\n \"form-button-danger\": {\n include:\"form-button-outlined\",\n style: {\n color: \"error\",\n width: 1,\n style: \"solid\"\n }\n },\n \"form-button-danger-hover\": {\n include:\"form-button-outlined\",\n style: {\n color: \"error\",\n width: 1,\n style: \"solid\"\n }\n },\n\n \"toolbar-button\": {\n include: \"form-button-outlined\"\n },\n\n \"toolbar-button-hovered\": {\n include: \"form-button-outlined\",\n style: {\n backgroundColor: \"default-button-hover-background\"\n }\n },\n\n \"selected-light\": {\n include: \"material-button\",\n style: {\n style: \"solid\",\n width: 1,\n color: \"background-selected-dark\",\n backgroundColor: \"background-selected\"\n }\n },\n\n \"selected-dark\": {\n include: \"material-button\",\n style: {\n style: \"solid\",\n width: 1,\n color: \"background-selected-dark\",\n backgroundColor: \"background-selected-dark\"\n }\n },\n\n \"thumbnail\": {\n include: \"material-button\",\n style: {\n style: \"solid\",\n width: 1,\n color: \"box-shadow\",\n backgroundColor: \"fab-background\",\n }\n },\n\n \"thumbnail-selected\": {\n include: \"thumbnail\",\n style: {\n style: \"solid\",\n width: 1,\n color: \"background-selected-dark\",\n backgroundColor: \"background-selected\"\n }\n },\n\n \"progressbar\": {\n style: {\n style: \"solid\",\n width: 0,\n color: \"transparent\",\n backgroundColor: \"progressbar-runner\",\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n Tooltip\n ---------------------------------------------------------------------------\n */\n \"tooltip\": {\n style: {\n style: \"solid\",\n width: 1,\n color: \"info\",\n backgroundColor: \"tooltip\",\n }\n },\n\n /*\n ---------------------------------------------------------------------------\n Appmotion\n ---------------------------------------------------------------------------\n */\n \"appmotion-buy-credits-input\": {\n style: {\n radius: 4\n }\n }\n }\n});\n","/* ************************************************************************\n\n OSparc Dark Theme for Qooxdoo\n\n Copyright:\n 2018 IT'IS Foundation\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Tobias Oetiker (oetiker)\n\n Origin:\n This theme is based in large parts on the the Simple\n theme included with Qooxdoo.\n************************************************************************ */\n/**\n * @asset(osparc/theme/font/*.woff)\n * @asset(osparc/theme/font/*.woff2)\n * @asset(osparc/theme/font/*.eot)\n * @asset(osparc/theme/font/*.ttf)\n */\n/**\n * The simple qooxdoo font theme.\n */\nqx.Theme.define(\"osparc.theme.common.Font\", {\n fonts: {\n \"default\": {\n size: 13,\n family: [\"sans-serif\"],\n color: \"text\",\n sources: [\n {\n family: \"Roboto\",\n source: [\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.eot\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff2\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.ttf\"\n ]\n }\n ]\n },\n\n \"bold\":\n {\n size: 13,\n family: [\"sans-serif\"],\n bold: true,\n color: \"text\",\n sources: [\n {\n family: \"Roboto\",\n source: [\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-700.eot\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-700.woff2\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-700.woff\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-700.ttf\"\n ]\n }\n ]\n },\n\n \"headline\":\n {\n size: 24,\n family: [\"sans-serif\"],\n color: \"text\",\n sources: [\n {\n family: \"Roboto\",\n source: [\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.eot\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff2\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.ttf\"\n ]\n }\n ]\n },\n\n \"small\":\n {\n size: 12,\n family: [\"sans-serif\"],\n color: \"text\",\n sources: [\n {\n family: \"Roboto\",\n source: [\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.eot\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff2\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.woff\",\n \"osparc/theme/font/Roboto/roboto-v18-latin_latin-ext-regular.ttf\"\n ]\n }\n ]\n },\n\n \"monospace\":\n {\n size: 14,\n family: [\"monospace\"],\n color: \"text\",\n sources: [\n {\n family: \"Roboto Mono\",\n source: [\n \"osparc/theme/font/Roboto/roboto-mono-v6-latin_latin-ext-regular.eot\",\n \"osparc/theme/font/Roboto/roboto-mono-v6-latin_latin-ext-regular.woff2\",\n \"osparc/theme/font/Roboto/roboto-mono-v6-latin_latin-ext-regular.woff\",\n \"osparc/theme/font/Roboto/roboto-mono-v6-latin_latin-ext-regular.ttf\"\n ]\n }\n ]\n }\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2018 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Tobias Oetiker (oetiker)\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.Font\", {\n extend: osparc.theme.common.Font,\n\n fonts: {\n \"defaults\": {\n family: [\"sans-serif\"],\n color: \"text\",\n sources: [\n {\n family: \"Manrope\",\n source: [\n \"common/Manrope/Manrope-VariableFont_wght.ttf\"\n ]\n }\n ]\n },\n\n \"default\": {\n include: \"defaults\",\n size: 13\n },\n\n \"title-18\": {\n include: \"defaults\",\n size: 18,\n bold: true\n },\n\n \"text-18\": {\n include: \"defaults\",\n size: 18\n },\n\n \"title-16\": {\n include: \"defaults\",\n size: 16,\n bold: true\n },\n\n \"text-16\": {\n include: \"defaults\",\n size: 16\n },\n\n \"title-14\": {\n include: \"defaults\",\n size: 14,\n bold: true\n },\n\n \"text-14\": {\n include: \"defaults\",\n size: 14\n },\n\n \"link-label-14\": {\n include: \"defaults\",\n size: 14,\n color: \"text-darker\",\n decoration: \"underline\"\n },\n\n \"text-13\": {\n include: \"defaults\",\n size: 13\n },\n\n \"text-13-italic\": {\n include: \"defaults\",\n size: 13,\n italic: true\n },\n\n \"text-12\": {\n include: \"defaults\",\n size: 12\n },\n\n \"link-label-12\": {\n include: \"defaults\",\n size: 12,\n color: \"text-darker\",\n decoration: \"underline\"\n },\n\n \"text-11\": {\n include: \"defaults\",\n size: 11\n },\n\n \"text-11-italic\": {\n include: \"defaults\",\n size: 11,\n italic: true\n },\n\n \"text-10\": {\n include: \"defaults\",\n size: 10\n },\n\n \"text-9\": {\n include: \"defaults\",\n size: 9\n },\n\n \"workbench-start-hint\": {\n include: \"defaults\",\n size: 20,\n color: \"workbench-start-hint\",\n bold: true\n }\n }\n});\n","/* ************************************************************************\n\n qooxdoo - the new era of web development\n\n http://qooxdoo.org\n\n Copyright:\n 2004-2008 1&1 Internet AG, Germany, http://www.1und1.de\n\n License:\n MIT: https://opensource.org/licenses/MIT\n See the LICENSE file in the project's top-level directory for details.\n\n Authors:\n * Sebastian Werner (wpbasti)\n * Andreas Ecker (ecker)\n\n************************************************************************ */\n/**\n * KDE Oxygen icons\n */\nqx.Theme.define(\"qx.theme.icon.Oxygen\",\n{\n title : \"Oxygen\",\n aliases : {\n \"icon\" : \"qx/icon/Oxygen\"\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.products.s4l.ThemeLight\", {\n meta: {\n color: osparc.theme.products.s4l.ColorLight,\n decoration: osparc.theme.Decoration,\n font: osparc.theme.Font,\n icon: qx.theme.icon.Oxygen,\n appearance: osparc.theme.Appearance,\n }\n});\n","qx.Theme.define(\"osparc.theme.ColorDark\", {\n include: osparc.theme.mixin.Color,\n\n colors: {\n // 105-0\n \"c00\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105),\n \"c01\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-5),\n \"c02\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-10),\n \"c03\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-20),\n \"c04\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-25),\n \"c05\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-35),\n \"c06\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-50),\n \"c07\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-60),\n \"c08\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-70),\n \"c09\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-75),\n \"c10\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-80),\n \"c12\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-90),\n \"c14\": osparc.theme.colorProvider.ColorProvider.getColor(\"color.scales.static.base\", 105-105),\n\n \"product-color\": \"rgba(0, 144, 208, 1)\", // override in product\n \"strong-main\": \"product-color\",\n \"a-bit-transparent\": \"rgba(0, 0, 0, 0.4)\",\n\n // main\n \"background-main\": \"c01\",\n \"background-main-1\": \"c02\",\n \"background-main-2\": \"c03\",\n \"background-main-3\": \"c04\",\n \"background-main-4\": \"c05\",\n \"background-main-5\": \"c06\",\n\n \"background-card-overlay\": \"rgba(25, 33, 37, 0.8)\",\n \"background-workspace-card-overlay\": \"rgb(35, 93, 122)\",\n\n \"navigation_bar_background_color\": \"rgba(1, 18, 26, 0.8)\",\n \"fab_text\": \"contrasted-text-dark\",\n \"fab-background\": \"rgba(255, 255, 255, 0.2)\",\n \"input_background\": \"#213248\",\n \"input_background_disable\": \"rgba(113, 157, 181, 0.25)\",\n \"hint-background\": \"rgba(82, 82, 82, 1)\",\n \"transparent_overlay\": \"rgba(1, 18, 26, 0.1)\",\n\n \"flash_message_bg\": \"input_background\",\n\n // text\n \"text\": \"rgba(216, 216, 216, 1)\",\n \"text-disabled\": \"rgba(113, 157, 181, 1)\",\n \"text-selected\": \"rgba(255, 255, 255, 1)\",\n \"text-placeholder\": \"rgba(174, 191, 207, 1)\",\n \"text-darker\": \"rgba(255, 255, 255, 1)\",\n \"contrasted-text-dark\": \"rgba(216, 216, 216, 1)\",\n \"contrasted-text-light\": \"rgba(255, 255, 255, 1)\",\n \"link\": \"rgba(10, 182, 255, 1)\",\n\n // shadows\n \"bg-shadow\": \"background-main-5\",\n \"box-shadow\": \"rgba(0, 0, 0, 0.15)\",\n \"shadow\": qx.core.Environment.get(\"css.rgba\") ? \"a-bit-transparent\" : \"bg-shadow\",\n\n // window\n \"window-popup-background\": \"rgba(66, 66, 66, 1)\",\n \"window-caption-background\": \"background-main\",\n \"window-caption-background-active\": \"background-main-3\",\n \"window-caption-text\": \"text\",\n \"window-caption-text-active\": \"c12\",\n \"window-border\": \"background-main-2\",\n \"window-border-inner\": \"background-main-1\",\n\n // material-button\n \"material-button-background\": \"fab-background\",\n \"material-button-background-disabled\": \"default-button-disabled-background\",\n \"material-button-background-hovered\": \"default-button-hover-background\",\n \"material-button-background-pressed\": \"default-button-active-background\",\n \"material-button-text-disabled\": \"default-button-disabled-background\",\n \"material-button-text\": \"default-button-text-outline\",\n\n // material-textfield\n \"material-textfield\": \"input_background\",\n \"material-textfield-focused\": \"product-color\",\n \"material-textfield-disabled\": \"default-button-disabled\",\n \"material-textfield-invalid\": \"error\",\n \"invalid\": \"error\",\n\n // backgrounds\n \"background-selected\": \"default-button-background\",\n \"background-selected-disabled\": \"default-button-disabled\",\n \"background-selected-dark\": \"product-color\",\n \"background-disabled\": \"background-main\",\n \"background-disabled-checked\": \"background-main-1\",\n \"background-pane\": \"background-main\",\n\n // tabview\n \"tabview-unselected\": \"c14\",\n \"tabview-button-border\": \"product-color\",\n \"tabview-label-active-disabled\": \"c10\",\n \"tabview-pane-background\": \"transparent\",\n \"tabview-button-background\": \"transparent\",\n\n // scrollbar\n \"scrollbar-passive\": \"background-main-4\",\n \"scrollbar-active\": \"background-main-5\",\n\n // form\n \"button\": \"background-main-4\",\n \"button-border\": \"background-main-5\",\n \"button-border-hovered\": \"c07\",\n \"button-box\": \"background-main-3\",\n \"button-box-pressed\": \"background-main-4\",\n \"border-lead\": \"c07\",\n\n // group box\n \"white-box-border\": \"background-main-2\",\n\n // borders\n // 'border-main' is an alias of 'background-selected' (compatibility reasons)\n \"border\": \"background-main-3\",\n \"border-focused\": \"c09\",\n \"border-invalid\": \"failed-red\",\n \"border-disabled\": \"background-main\",\n\n // tooltip\n \"tooltip\": \"flash_message_bg\",\n \"tooltip-text\": \"text\",\n\n // used in progressive code\n \"progressive-table-header\": \"c08\",\n \"progressive-table-row-background-even\": \"background-main\",\n \"progressive-table-row-background-odd\": \"background-main\",\n \"progressive-progressbar-background\": \"background-main\",\n \"progressive-progressbar-indicator-done\": \"background-main\",\n \"progressive-progressbar-indicator-undone\": \"background-main-1\",\n \"progressive-progressbar-percent-background\": \"background-main\",\n \"progressive-progressbar-percent-text\": \"background-main-1\",\n\n\n\n // OSPARC\n \"workbench-edge-comp-active\": \"#777777\",\n \"workbench-edge-api-active\": \"#BBBBBB\",\n \"workbench-start-hint\": \"#505050\",\n \"workbench-view-navbar\": \"c00\",\n \"workbench-view-splitter\": \"#000000\",\n\n \"node-background\": \"rgba(113, 157, 181, 0.5)\",\n \"node-selected-background\": \"strong-main\",\n \"node-title-text\": \"text-selected\",\n \"node-port-text\": \"#454545\",\n\n \"logger-debug-message\": \"#FFFFFF\",\n \"logger-info-message\": \"#FFFFFF\",\n\n \"service-window-hint\": \"#808080\",\n\n \"progressbar\": \"success\",\n \"progressbar-disabled\": \"rgba(113, 157, 181, 0.25)\",\n \"progressbar-runner\": \"rgba(228, 234, 237, 0.5)\",\n\n \"haloProgressbar\": \"progressbar\",\n \"haloProgressbar-disabled\": \"progressbar-disabled\",\n \"haloProgressbar-runner\": \"progressbar-runner\",\n \"haloProgressbar-fill\": \"background-card-overlay\",\n\n \"loading-page-background-color\": \"#202020\",\n \"loading-page-text\": \"#FFFFFF\",\n \"loading-page-spinner\": \"#DDDDDD\"\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.products.s4l.ColorDark\", {\n include: osparc.theme.ColorDark,\n\n colors: {\n \"product-color\": \"rgba(0, 144, 208, 1)\",\n \"default-button\": \"product-color\",\n \"default-button-background\": \"rgba(0, 144, 208, 0.25)\"\n }\n});\n","/* ************************************************************************\n\n osparc - the simcore frontend\n\n https://osparc.io\n\n Copyright:\n 2023 IT'IS Foundation, https://itis.swiss\n\n License:\n MIT: https://opensource.org/licenses/MIT\n\n Authors:\n * Odei Maiz (odeimaiz)\n\n************************************************************************ */\n\nqx.Theme.define(\"osparc.theme.products.s4l.ThemeDark\", {\n meta: {\n color: osparc.theme.products.s4l.ColorDark,\n decoration: osparc.theme.Decoration,\n font: osparc.theme.Font,\n icon: qx.theme.icon.Oxygen,\n appearance: osparc.theme.Appearance,\n }\n});\n"]}