diff --git a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js index 0235ea5408d2..8d65da2689b5 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/CardBase.js @@ -1137,10 +1137,12 @@ qx.Class.define("osparc.dashboard.CardBase", { return this.self().filterClassifiers(checks, classifiers); }, - _shouldApplyFilter: function(data) { - let filterId = "searchBarFilter"; + __curateFilterId: function(filterId) { if (this.isPropertyInitialized("resourceType")) { switch (this.getResourceType()) { + case "tutorial": + filterId += "-template"; + break; case "hypertool": filterId += "-service"; break; @@ -1149,6 +1151,11 @@ qx.Class.define("osparc.dashboard.CardBase", { break; } } + return filterId; + }, + + _shouldApplyFilter: function(data) { + const filterId = this.__curateFilterId("searchBarFilter"); data = filterId in data ? data[filterId] : data; if (this._filterText(data.text)) { return true; @@ -1169,17 +1176,7 @@ qx.Class.define("osparc.dashboard.CardBase", { }, _shouldReactToFilter: function(data) { - let filterId = "searchBarFilter"; - if (this.isPropertyInitialized("resourceType")) { - switch (this.getResourceType()) { - case "hypertool": - filterId += "-service"; - break; - default: - filterId += "-" + this.getResourceType(); - break; - } - } + const filterId = this.__curateFilterId("searchBarFilter"); data = filterId in data ? data[filterId] : data; if (data.text && data.text.length > 1) { return true; diff --git a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js index 28460ec8111b..cb83065b35fd 100644 --- a/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js +++ b/services/static-webserver/client/source/class/osparc/dashboard/Dashboard.js @@ -52,6 +52,7 @@ qx.Class.define("osparc.dashboard.Dashboard", { osparc.wrapper.Svg.getInstance().init(); osparc.wrapper.JsonDiffPatch.getInstance().init(); osparc.wrapper.JsonTreeViewer.getInstance().init(); + osparc.wrapper.JsonFormatter.getInstance().init(); osparc.wrapper.DOMPurify.getInstance().init(); osparc.wrapper.RadialMenu.getInstance().init() .then(loaded => { diff --git a/services/static-webserver/client/source/class/osparc/jobs/Info.js b/services/static-webserver/client/source/class/osparc/jobs/Info.js index b4d3c8668d95..2ae9a811eed5 100644 --- a/services/static-webserver/client/source/class/osparc/jobs/Info.js +++ b/services/static-webserver/client/source/class/osparc/jobs/Info.js @@ -24,8 +24,14 @@ qx.Class.define("osparc.jobs.Info", { this._setLayout(new qx.ui.layout.VBox()); - const jobInfoViewer = this.getChildControl("job-info-viewer"); - jobInfoViewer.setJson(info); + const divId = "job-info-viewer"; + const htmlEmbed = osparc.wrapper.JsonFormatter.getInstance().createContainer(divId); + this._add(htmlEmbed, { + flex: 1 + }); + this.addListener("appear", () => { + osparc.wrapper.JsonFormatter.getInstance().setJson(info, divId); + }); }, statics: { diff --git a/services/static-webserver/client/source/class/osparc/wrapper/JsonFormatter.js b/services/static-webserver/client/source/class/osparc/wrapper/JsonFormatter.js new file mode 100644 index 000000000000..77c219f5452e --- /dev/null +++ b/services/static-webserver/client/source/class/osparc/wrapper/JsonFormatter.js @@ -0,0 +1,118 @@ +/* ************************************************************************ + + osparc - the simcore frontend + + https://osparc.io + + Copyright: + 2022 IT'IS Foundation, https://itis.swiss + + License: + MIT: https://opensource.org/licenses/MIT + + Authors: + * Odei Maiz (odeimaiz) + +************************************************************************ */ + +/** + * @asset(jsonFormatter/json-formatter-2.5.23.js) + * @asset(jsonFormatter/json-formatter-2.5.23.css) + * @ignore(JSONFormatter) + */ + +/** + * A qooxdoo wrapper for + * JSONFormatter + */ + +qx.Class.define("osparc.wrapper.JsonFormatter", { + extend: qx.core.Object, + type: "singleton", + + properties: { + libReady: { + nullable: false, + init: false, + check: "Boolean" + } + }, + + statics: { + NAME: "JSONFormatter", + VERSION: "2.5.23", + URL: "https://azimi.me/json-formatter-js/", + }, + + members: { + init: function() { + return new Promise((resolve, reject) => { + if (this.getLibReady()) { + resolve(); + return; + } + + const jsonFormatterCss = "jsonFormatter/json-formatter-2.5.23.css"; + const jsonFormatterCssUri = qx.util.ResourceManager.getInstance().toUri(jsonFormatterCss); + qx.module.Css.includeStylesheet(jsonFormatterCssUri); + + // initialize the script loading + const jsonFormatterPath = "jsonFormatter/json-formatter-2.5.23.js"; + const dynLoader = new qx.util.DynamicScriptLoader([ + jsonFormatterPath + ]); + + dynLoader.addListenerOnce("ready", () => { + console.log(jsonFormatterPath + " loaded"); + this.setLibReady(true); + resolve(); + }, this); + + dynLoader.addListener("failed", e => { + const data = e.getData(); + console.error("failed to load " + data.script); + reject(data); + }, this); + + dynLoader.start(); + }); + }, + + createContainer: function(divId) { + const container = new qx.ui.embed.Html("
"); + + // Inject custom CSS for the JSONFormatter container + const styleId = "json-formatter-custom-style"; + if (!document.getElementById(styleId)) { + const color = qx.theme.manager.Color.getInstance().resolve("text"); + const style = document.createElement("style"); + style.id = styleId; + style.innerHTML = ` + #${divId} * { + color: ${color} !important; /* Use osparc text color */ + font-family: "Manrope", sans-serif !important; /* Use osparc font */ + } + #${divId} .json-formatter-key { + font-size: 13px !important; /* Actually keeping the default size */ + } + #${divId} .json-formatter-constructor-name { + display: none !important; /* Hide "Object" and "Array(n)" labels */ + } + `; + document.head.appendChild(style); + } + + return container + }, + + setJson: function(jsonObject, divId) { + // Remove previous content + const container = document.getElementById(divId); + container.innerHTML = ""; + + // Render JSON + const formatter = new JSONFormatter(jsonObject, 2); // 2 = expand depth + container.appendChild(formatter.render()); + }, + } +}); diff --git a/services/static-webserver/client/source/class/osparc/wrapper/JsonTreeViewer.js b/services/static-webserver/client/source/class/osparc/wrapper/JsonTreeViewer.js index f41ab5b0be25..465779ddf043 100644 --- a/services/static-webserver/client/source/class/osparc/wrapper/JsonTreeViewer.js +++ b/services/static-webserver/client/source/class/osparc/wrapper/JsonTreeViewer.js @@ -53,11 +53,11 @@ qx.Class.define("osparc.wrapper.JsonTreeViewer", { members: { init: function() { // initialize the script loading - let jsonTreeViewerPath = "jsontreeviewer/jsonTree.js"; - let jsonTreeViewerCss = "jsontreeviewer/jsonTree.css"; - let jsonTreeViewerCssUri = qx.util.ResourceManager.getInstance().toUri(jsonTreeViewerCss); + const jsonTreeViewerPath = "jsontreeviewer/jsonTree.js"; + const jsonTreeViewerCss = "jsontreeviewer/jsonTree.css"; + const jsonTreeViewerCssUri = qx.util.ResourceManager.getInstance().toUri(jsonTreeViewerCss); qx.module.Css.includeStylesheet(jsonTreeViewerCssUri); - let dynLoader = new qx.util.DynamicScriptLoader([ + const dynLoader = new qx.util.DynamicScriptLoader([ jsonTreeViewerPath ]); @@ -67,16 +67,16 @@ qx.Class.define("osparc.wrapper.JsonTreeViewer", { }, this); dynLoader.addListener("failed", e => { - let data = e.getData(); + const data = e.getData(); console.error("failed to load " + data.script); }, this); dynLoader.start(); }, - print: function(data, wrapper) { - jsonTree.create(data, wrapper); - // tree.expand(); + print: function(jsonObj, domEl) { + const tree = jsonTree.create(jsonObj, domEl); + tree.expand(); } } }); diff --git a/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.css b/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.css new file mode 100644 index 000000000000..42100bcabcd3 --- /dev/null +++ b/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.css @@ -0,0 +1,8 @@ +/** + * Minified by jsDelivr using clean-css v5.3.3. + * Original file: /npm/json-formatter-js@2.5.23/dist/json-formatter.css + * + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +.json-formatter-row{font-family:monospace}.json-formatter-row,.json-formatter-row a,.json-formatter-row a:hover{color:#000;text-decoration:none}.json-formatter-row .json-formatter-row{margin-left:1rem}.json-formatter-row .json-formatter-children.json-formatter-empty{opacity:.5;margin-left:1rem}.json-formatter-row .json-formatter-children.json-formatter-empty:after{display:none}.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after{content:"No properties"}.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after{content:"[]"}.json-formatter-row .json-formatter-string,.json-formatter-row .json-formatter-stringifiable{color:green;white-space:pre;word-wrap:break-word}.json-formatter-row .json-formatter-number{color:#00f}.json-formatter-row .json-formatter-boolean{color:red}.json-formatter-row .json-formatter-null{color:#855a00}.json-formatter-row .json-formatter-undefined{color:#ca0b69}.json-formatter-row .json-formatter-function{color:#ff20ed}.json-formatter-row .json-formatter-date{background-color:rgba(0,0,0,.05)}.json-formatter-row .json-formatter-url{text-decoration:underline;color:#00f;cursor:pointer}.json-formatter-row .json-formatter-bracket{color:#00f}.json-formatter-row .json-formatter-key{color:#00008b;padding-right:.2rem}.json-formatter-row .json-formatter-toggler-link{cursor:pointer}.json-formatter-row .json-formatter-toggler{line-height:1.2rem;font-size:.7rem;vertical-align:middle;opacity:.6;cursor:pointer;padding-right:.2rem}.json-formatter-row .json-formatter-toggler:after{display:inline-block;transition:transform .1s ease-in;content:"►"}.json-formatter-row>a>.json-formatter-preview-text{opacity:0;transition:opacity .15s ease-in;font-style:italic}.json-formatter-row:hover>a>.json-formatter-preview-text{opacity:.6}.json-formatter-row.json-formatter-open>.json-formatter-toggler-link .json-formatter-toggler:after{transform:rotate(90deg)}.json-formatter-row.json-formatter-open>.json-formatter-children:after{display:inline-block}.json-formatter-row.json-formatter-open>a>.json-formatter-preview-text{display:none}.json-formatter-row.json-formatter-open.json-formatter-empty:after{display:block}.json-formatter-dark.json-formatter-row{font-family:monospace}.json-formatter-dark.json-formatter-row,.json-formatter-dark.json-formatter-row a,.json-formatter-dark.json-formatter-row a:hover{color:#fff;text-decoration:none}.json-formatter-dark.json-formatter-row .json-formatter-row{margin-left:1rem}.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty{opacity:.5;margin-left:1rem}.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after{display:none}.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after{content:"No properties"}.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after{content:"[]"}.json-formatter-dark.json-formatter-row .json-formatter-string,.json-formatter-dark.json-formatter-row .json-formatter-stringifiable{color:#31f031;white-space:pre;word-wrap:break-word}.json-formatter-dark.json-formatter-row .json-formatter-number{color:#66c2ff}.json-formatter-dark.json-formatter-row .json-formatter-boolean{color:#ec4242}.json-formatter-dark.json-formatter-row .json-formatter-null{color:#eec97d}.json-formatter-dark.json-formatter-row .json-formatter-undefined{color:#ef8fbe}.json-formatter-dark.json-formatter-row .json-formatter-function{color:#fd48cb}.json-formatter-dark.json-formatter-row .json-formatter-date{background-color:rgba(255,255,255,.05)}.json-formatter-dark.json-formatter-row .json-formatter-url{text-decoration:underline;color:#027bff;cursor:pointer}.json-formatter-dark.json-formatter-row .json-formatter-bracket{color:#9494ff}.json-formatter-dark.json-formatter-row .json-formatter-key{color:#23a0db;padding-right:.2rem}.json-formatter-dark.json-formatter-row .json-formatter-toggler-link{cursor:pointer}.json-formatter-dark.json-formatter-row .json-formatter-toggler{line-height:1.2rem;font-size:.7rem;vertical-align:middle;opacity:.6;cursor:pointer;padding-right:.2rem}.json-formatter-dark.json-formatter-row .json-formatter-toggler:after{display:inline-block;transition:transform .1s ease-in;content:"►"}.json-formatter-dark.json-formatter-row>a>.json-formatter-preview-text{opacity:0;transition:opacity .15s ease-in;font-style:italic}.json-formatter-dark.json-formatter-row:hover>a>.json-formatter-preview-text{opacity:.6}.json-formatter-dark.json-formatter-row.json-formatter-open>.json-formatter-toggler-link .json-formatter-toggler:after{transform:rotate(90deg)}.json-formatter-dark.json-formatter-row.json-formatter-open>.json-formatter-children:after{display:inline-block}.json-formatter-dark.json-formatter-row.json-formatter-open>a>.json-formatter-preview-text{display:none}.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after{display:block} +/*# sourceMappingURL=/sm/4e6f2f81e40c0c1a7c2222f8b71ee9d8f025a55716a781c2bd6cbffa19adb7a9.map */ diff --git a/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.js b/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.js new file mode 100644 index 000000000000..1d62baf01598 --- /dev/null +++ b/services/static-webserver/client/source/resource/jsonFormatter/json-formatter-2.5.23.js @@ -0,0 +1,7 @@ +/** + * Skipped minification because the original files appears to be already minified. + * Original file: /npm/json-formatter-js@2.5.23/dist/json-formatter.umd.js + * + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).JSONFormatter=e()}(this,(function(){"use strict";function t(t){return null===t?"null":typeof t}function e(t){return!!t&&"object"==typeof t}function r(t){if(void 0===t)return"";if(null===t)return"Object";if("object"==typeof t&&!t.constructor)return"Object";var e=/function ([^(]*)/.exec(t.constructor.toString());return e&&e.length>1?e[1]:""}function n(t,e,r){return"null"===t||"undefined"===t?t:("string"!==t&&"stringifiable"!==t||(r='"'+(r.replace(/"/g,'\\"')+'"')),"function"===t?e.toString().replace(/[\r\n]/g,"").replace(/\{.*\}/,"")+"{…}":r)}function o(o){var i="";return e(o)?(i=r(o),Array.isArray(o)&&(i+="["+o.length+"]")):i=n(t(o),o,o),i}function i(t){return"json-formatter-".concat(t)}function s(t,e,r){var n=document.createElement(t);return e&&n.classList.add(i(e)),void 0!==r&&(r instanceof Node?n.appendChild(r):n.appendChild(document.createTextNode(String(r)))),n}!function(t){if(t&&"undefined"!=typeof window){var e=document.createElement("style");e.setAttribute("media","screen"),e.innerHTML=t,document.head.appendChild(e)}}('.json-formatter-row {\n font-family: monospace;\n}\n.json-formatter-row,\n.json-formatter-row a,\n.json-formatter-row a:hover {\n color: black;\n text-decoration: none;\n}\n.json-formatter-row .json-formatter-row {\n margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty {\n opacity: 0.5;\n margin-left: 1rem;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n display: none;\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n content: "No properties";\n}\n.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n content: "[]";\n}\n.json-formatter-row .json-formatter-string,\n.json-formatter-row .json-formatter-stringifiable {\n color: green;\n white-space: pre;\n word-wrap: break-word;\n}\n.json-formatter-row .json-formatter-number {\n color: blue;\n}\n.json-formatter-row .json-formatter-boolean {\n color: red;\n}\n.json-formatter-row .json-formatter-null {\n color: #855a00;\n}\n.json-formatter-row .json-formatter-undefined {\n color: #ca0b69;\n}\n.json-formatter-row .json-formatter-function {\n color: #FF20ED;\n}\n.json-formatter-row .json-formatter-date {\n background-color: rgba(0, 0, 0, 0.05);\n}\n.json-formatter-row .json-formatter-url {\n text-decoration: underline;\n color: blue;\n cursor: pointer;\n}\n.json-formatter-row .json-formatter-bracket {\n color: blue;\n}\n.json-formatter-row .json-formatter-key {\n color: #00008b;\n padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler-link {\n cursor: pointer;\n}\n.json-formatter-row .json-formatter-toggler {\n line-height: 1.2rem;\n font-size: 0.7rem;\n vertical-align: middle;\n opacity: 0.6;\n cursor: pointer;\n padding-right: 0.2rem;\n}\n.json-formatter-row .json-formatter-toggler:after {\n display: inline-block;\n transition: transform 100ms ease-in;\n content: "►";\n}\n.json-formatter-row > a > .json-formatter-preview-text {\n opacity: 0;\n transition: opacity 0.15s ease-in;\n font-style: italic;\n}\n.json-formatter-row:hover > a > .json-formatter-preview-text {\n opacity: 0.6;\n}\n.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n transform: rotate(90deg);\n}\n.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n display: inline-block;\n}\n.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n display: none;\n}\n.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n display: block;\n}\n.json-formatter-dark.json-formatter-row {\n font-family: monospace;\n}\n.json-formatter-dark.json-formatter-row,\n.json-formatter-dark.json-formatter-row a,\n.json-formatter-dark.json-formatter-row a:hover {\n color: white;\n text-decoration: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-row {\n margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty {\n opacity: 0.5;\n margin-left: 1rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty:after {\n display: none;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-object:after {\n content: "No properties";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-children.json-formatter-empty.json-formatter-array:after {\n content: "[]";\n}\n.json-formatter-dark.json-formatter-row .json-formatter-string,\n.json-formatter-dark.json-formatter-row .json-formatter-stringifiable {\n color: #31f031;\n white-space: pre;\n word-wrap: break-word;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-number {\n color: #66c2ff;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-boolean {\n color: #EC4242;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-null {\n color: #EEC97D;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-undefined {\n color: #ef8fbe;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-function {\n color: #FD48CB;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-date {\n background-color: rgba(255, 255, 255, 0.05);\n}\n.json-formatter-dark.json-formatter-row .json-formatter-url {\n text-decoration: underline;\n color: #027bff;\n cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-bracket {\n color: #9494ff;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-key {\n color: #23a0db;\n padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler-link {\n cursor: pointer;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler {\n line-height: 1.2rem;\n font-size: 0.7rem;\n vertical-align: middle;\n opacity: 0.6;\n cursor: pointer;\n padding-right: 0.2rem;\n}\n.json-formatter-dark.json-formatter-row .json-formatter-toggler:after {\n display: inline-block;\n transition: transform 100ms ease-in;\n content: "►";\n}\n.json-formatter-dark.json-formatter-row > a > .json-formatter-preview-text {\n opacity: 0;\n transition: opacity 0.15s ease-in;\n font-style: italic;\n}\n.json-formatter-dark.json-formatter-row:hover > a > .json-formatter-preview-text {\n opacity: 0.6;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-toggler-link .json-formatter-toggler:after {\n transform: rotate(90deg);\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > .json-formatter-children:after {\n display: inline-block;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open > a > .json-formatter-preview-text {\n display: none;\n}\n.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty:after {\n display: block;\n}\n');var a=/(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/,f=/\d{2}:\d{2}:\d{2} GMT-\d{4}/,m=/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/,c=/^https?:\/\//,l=window.requestAnimationFrame||function(t){return t(),0},d={hoverPreviewEnabled:!1,hoverPreviewArrayCount:100,hoverPreviewFieldCount:5,animateOpen:!0,animateClose:!0,theme:null,useToJSON:!0,sortPropertiesBy:null,maxArrayItems:100,exposePath:!1};return function(){function h(t,e,r,n,o,i,s){void 0===e&&(e=1),void 0===r&&(r=d),void 0===i&&(i=[]),this.json=t,this.open=e,this.config=r,this.key=n,this.displayKey=o,this.path=i,this.arrayRange=s,this._isOpen=null,void 0===this.config.hoverPreviewEnabled&&(this.config.hoverPreviewEnabled=d.hoverPreviewEnabled),void 0===this.config.hoverPreviewArrayCount&&(this.config.hoverPreviewArrayCount=d.hoverPreviewArrayCount),void 0===this.config.hoverPreviewFieldCount&&(this.config.hoverPreviewFieldCount=d.hoverPreviewFieldCount),void 0===this.config.useToJSON&&(this.config.useToJSON=d.useToJSON),void 0===this.config.maxArrayItems&&(this.config.maxArrayItems=d.maxArrayItems),""===this.key&&(this.key='""'),void 0===this.displayKey&&(this.displayKey=this.key)}return Object.defineProperty(h.prototype,"isOpen",{get:function(){return null!==this._isOpen?this._isOpen:this.open>0},set:function(t){this._isOpen=t},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isDate",{get:function(){return this.json instanceof Date||"string"===this.type&&(a.test(this.json)||m.test(this.json)||f.test(this.json))},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isUrl",{get:function(){return"string"===this.type&&c.test(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isArray",{get:function(){return Array.isArray(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isLargeArray",{get:function(){return this.isArray&&this.json.length>this.config.maxArrayItems},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isArrayRange",{get:function(){return this.isArray&&void 0!==this.arrayRange&&2==this.arrayRange.length},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isObject",{get:function(){return e(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isEmptyObject",{get:function(){return!this.keys.length&&!this.isArray},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"isEmpty",{get:function(){return this.isEmptyObject||this.keys&&!this.keys.length&&this.isArray},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"useToJSON",{get:function(){return this.config.useToJSON&&"stringifiable"===this.type},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"hasKey",{get:function(){return void 0!==this.key},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"constructorName",{get:function(){return r(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"type",{get:function(){return this.config.useToJSON&&this.json&&this.json.toJSON?"stringifiable":t(this.json)},enumerable:!1,configurable:!0}),Object.defineProperty(h.prototype,"keys",{get:function(){if(this.isObject){var t=Object.keys(this.json);if(this.isLargeArray){var e=Math.ceil(this.json.length/this.config.maxArrayItems);t=[];for(var r=0;rthis.config.hoverPreviewArrayCount?"Array[".concat(this.json.length,"]"):"[".concat(this.json.map(o).join(", "),"]");var e=this.keys,r=e.slice(0,this.config.hoverPreviewFieldCount).map((function(e){return"".concat(e,":").concat(o(t.json[e]))})),n=e.length>=this.config.hoverPreviewFieldCount?"…":"";return"{".concat(r.join(", ")).concat(n,"}")},h.prototype.render=function(){this.element=s("div","row");var t=this.isObject?s("a","toggler-link"):s("span");if(this.isObject&&!this.useToJSON&&t.appendChild(s("span","toggler")),this.isArrayRange?t.appendChild(s("span","range","[".concat(this.displayKey,"]"))):this.hasKey&&(t.appendChild(s("span","key","".concat(this.displayKey,":"))),this.config.exposePath&&(this.element.dataset.path=JSON.stringify(this.path))),this.isObject&&!this.useToJSON){var e=s("span","value"),r=s("span");if(!this.isArrayRange){var o=s("span","constructor-name",this.constructorName);r.appendChild(o)}if(this.isArray&&!this.isArrayRange){var a=s("span");a.appendChild(s("span","bracket","[")),a.appendChild(s("span","number",this.json.length)),a.appendChild(s("span","bracket","]")),r.appendChild(a)}e.appendChild(r),t.appendChild(e)}else{(e=this.isUrl?s("a"):s("span")).classList.add(i(this.type)),this.isDate&&e.classList.add(i("date")),this.isUrl&&(e.classList.add(i("url")),e.setAttribute("href",this.json));var f=n(this.type,this.json,this.useToJSON?this.json.toJSON():this.json);e.appendChild(document.createTextNode(f)),t.appendChild(e)}if(this.isObject&&this.config.hoverPreviewEnabled){var m=s("span","preview-text");m.appendChild(document.createTextNode(this.getInlinepreview())),t.appendChild(m)}var c=s("div","children");return this.isObject&&c.classList.add(i("object")),this.isArray&&c.classList.add(i("array")),this.isEmpty&&c.classList.add(i("empty")),this.config&&this.config.theme&&this.element.classList.add(i(this.config.theme)),this.isOpen&&this.element.classList.add(i("open")),this.element.appendChild(t),this.element.appendChild(c),this.isObject&&this.isOpen&&this.appendChildren(),this.isObject&&!this.useToJSON&&t.addEventListener("click",this.toggleOpen.bind(this)),this.element},h.prototype.appendChildren=function(t){var e=this;void 0===t&&(t=!1);var r=this.element.querySelector("div.".concat(i("children")));if(r&&!this.isEmpty){var n=function(t,n){var o=e.isLargeArray?[n*e.config.maxArrayItems,Math.min(e.json.length-1,n*e.config.maxArrayItems+(e.config.maxArrayItems-1))]:void 0,i=e.isArrayRange?(e.arrayRange[0]+n).toString():t,s=new h(o?e.json.slice(o[0],o[1]+1):e.json[t],e.open-1,e.config,t,i,o?e.path:e.path.concat(i),o);r.appendChild(s.render())};if(t){var o=0,s=function(){var t=e.keys[o];n(t,o),(o+=1)10?s():l(s))};l(s)}else this.keys.forEach((function(t,e){return n(t,e)}))}},h.prototype.removeChildren=function(t){void 0===t&&(t=!1);var e=this.element.querySelector("div.".concat(i("children")));if(t){var r=0,n=function(){e&&e.children.length&&(e.removeChild(e.children[0]),(r+=1)>10?n():l(n))};l(n)}else e&&(e.innerHTML="")},h}()})); diff --git a/services/static-webserver/client/source/resource/jsontreeviewer/jsonTree.css b/services/static-webserver/client/source/resource/jsontreeviewer/jsonTree.css index 569ec151f29a..5dd9a589de1c 100644 --- a/services/static-webserver/client/source/resource/jsontreeviewer/jsonTree.css +++ b/services/static-webserver/client/source/resource/jsontreeviewer/jsonTree.css @@ -20,7 +20,7 @@ font-size: 14px; margin-left: 0px; - font-family: 'Roboto'; + font-family: 'Manrope'; /* osparc */ } /* Styles for a list of child nodes */ @@ -31,7 +31,7 @@ /* line-height: 2; */ margin-left: 0px; - line-height: 1.5; + /* line-height: 1.5; osparc */ } .jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_child-nodes { display: block; @@ -71,7 +71,7 @@ color: transparent; } -.jsontree_value { +.jsontree_value { vertical-align: top; display: inline;