✨ [Frontend] Pretty JSON objects (#7710)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: odeimaiz

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;

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 => {

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: {

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
+ * <a href='https://azimi.me/json-formatter-js/' target='_blank'>JSONFormatter</a>
+ */
+
+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("<div id='"+divId+"'></div>");
+
+      // 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());
+    },
+  }
+});

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();
     }
   }
 });