Merge pull request #783 from opencb/TASK-4255

TASK-4255 - Implement an extension system

.gitignore

@@ -10,7 +10,7 @@ grunt/
 dist-genome/
 custom-conf
 custom-sites
-extensions
+/extensions
 *.tar.gz
 package-lock.json
 npm-debug.log

cypress/e2e/iva/variant-browser-grid-cancer.cy.js

@@ -140,4 +140,8 @@ context("Variant Browser Grid Cancer", () => {
         })
     })
 
+    it.only("[extensions] Check 'Extra Column' column", () => {
+        cy.get("thead th").contains("div","Extra column").should('be.visible')
+    })
+
 });

rollup.config.js

@@ -54,21 +54,36 @@ const getCustomSitePath = (name, from, folder) => {
     return folder; // Default path configuration
 };
 
-const transformHtmlContent = html => {
+const getExtensionsPath = name => {
+    // NOTE: extensions are only enabled at this moment for IVA
+    if (env.npm_extensions && name.toUpperCase() === "IVA") {
+        // We need to make sure that the extensions file exists
+        // eslint-disable-next-line no-undef
+        const extensionsPath = path.join(__dirname, "extensions", "build", "extensions.js");
+        if (fs.existsSync(extensionsPath)) {
+            return "../../../extensions/build";
+        }
+    }
+    return "extensions";
+};
+
+const transformHtmlContent = (html, name) => {
     const annihilator = /<!-- build:delete -->[\s\S]*?<!-- \/build -->/mg;
-    let newHtml = html.replace("[build-signature]", revision()).replace(annihilator, "");
-    sites.forEach(name => {
-        const regex = new RegExp(`{{ ${name.toUpperCase()}_CONFIG_PATH }}`, "g");
-        newHtml = newHtml.replace(regex, getCustomSitePath(name, "../../../", "conf")).replace(annihilator, "");
-    });
-    return newHtml;
+    const configRegex = new RegExp(`{{ ${name.toUpperCase()}_CONFIG_PATH }}`, "g");
+    const extensionsRegex = new RegExp(`{{ ${name.toUpperCase()}_EXTENSIONS_PATH }}`, "g");
+
+    return html
+        .replace("[build-signature]", revision())
+        .replace(annihilator, "")
+        .replace(configRegex, getCustomSitePath(name, "../../../", "conf"))
+        .replace(extensionsRegex, getExtensionsPath(name));
 };
 
 const getSiteContent = name => {
     const content = fs.readFileSync(path.join(sitesPath, name, "index.html"), "utf8");
     return {
         name: "index.html",
-        html: transformHtmlContent(content),
+        html: transformHtmlContent(content, name),
     };
 };
 
@@ -188,6 +203,10 @@ export default sites.map(site => ({
                 return "css/[name]-[hash][extname]";
             }
 
+            if (assetInfo.name.includes("extensions")) {
+                return "extensions/[name][extname]";
+            }
+
             if (assetInfo.name.endsWith(".js") && !isConfig(assetInfo.name)) {
                 return "vendors/js/[name]-[hash][extname]";
             }

src/sites/iva/extensions/extensions.js

@@ -0,0 +1,8 @@
+window.IVA_EXTENSIONS = {
+    id: "opencb",
+    name: "OpenCB",
+    description: "",
+    commercial: false,
+    license: "",
+    extensions: [],
+};

src/sites/iva/index.html

@@ -187,6 +187,7 @@
     <!-- /build -->
     <!-- LitElement assets -->
     <!-- build:void[] -->
+    <script src="{{ IVA_EXTENSIONS_PATH }}/extensions.js"></script>
     <script type="module" src="./iva-app.js"></script>
     <!-- /build -->
 

src/sites/iva/iva-app.js

@@ -101,6 +101,7 @@ import "../../webcomponents/commons/layouts/custom-landing.js";
 
 import "../../webcomponents/clinical/rga/rga-browser.js";
 import OpencgaCatalogUtils from "../../core/clients/opencga/opencga-catalog-utils";
+import ExtensionsManager from "../../webcomponents/extensions-manager.js";
 
 class IvaApp extends LitElement {
 
@@ -236,7 +237,13 @@ class IvaApp extends LitElement {
             "variants-admin",
             "projects-admin",
             // REST-API
-            "rest-api"];
+            "rest-api",
+        ];
+
+        // Add custom tools
+        ExtensionsManager
+            .getTools()
+            .forEach(tool => components.push(tool.id));
 
         for (const component of components) {
             _config.enabledComponents[component] = false;
@@ -2039,6 +2046,14 @@ class IvaApp extends LitElement {
                         <rest-api .opencgaSession="${this.opencgaSession}"></rest-api>
                     </div>
                 ` : null}
+        
+                ${ExtensionsManager.getTools().map(tool => html`
+                    ${this.config.enabledComponents[tool.id] ? html`
+                        <div class="content">
+                            ${tool.render(this.opencgaSession)}
+                        </div>
+                    ` : null}
+                `)}
             </div>
 
             <custom-footer

src/sites/test-app/extensions/extensions.js

@@ -0,0 +1,155 @@
+window.IVA_EXTENSIONS = {
+    id: "opencb",
+    name: "OpenCB",
+    description: "",
+    commercial: false,
+    license: "",
+    extensions: [
+        {
+            id: "custom-tool",
+            name: "Custom Tool",
+            description: "Example Tool extension",
+            type: "tool",
+            components: [],
+            maintainer: "",
+            version: "",
+            compatibleWith: "",
+            render: params => params.html`
+                <div>
+                    <h1>Hello ${params.opencgaSession.user.name}</h1>
+                </div>
+            `,
+        },
+        {
+            id: "variant-columns",
+            name: "Variant Columns",
+            description: "Example columns for Variant Browser",
+            type: "column",
+            components: [
+                "variant-browser-grid",
+                "variant-interpreter-rd-grid",
+                "variant-interpreter-cancer-snv-grid",
+                "variant-interpreter-cancer-cnv-grid",
+                "variant-interpreter-rearrangement-grid",
+            ],
+            maintainer: "",
+            version: "",
+            compatibleWith: "",
+            columns: [
+                [
+                    {
+                        position: -2,
+                        config: {
+                            id: "new-column-1",
+                            title: "Extra column",
+                            field: "",
+                            rowspan: 2,
+                            colspan: 1,
+                            align: "center",
+                            formatter: (value, row, index) => `Row ${index}`,
+                        },
+                    },
+                ],
+            ],
+        },
+        {
+            id: "variant-detail",
+            name: "New Variant Tab",
+            description: "Example detail_tab extension for Variant Browser",
+            type: "detail_tab",
+            components: [
+                "variant-browser-detail",
+                "variant-interpreter-rd-detail",
+                "variant-interpreter-cancer-snv-detail",
+                "variant-interpreter-cancer-cnv-detail",
+                "variant-interpreter-rearrangement-detail",
+            ],
+            compatibleWith: "",
+            render: params => params.html`
+                <div>Content of the new detail tab for <b>Variant Browser</b></div>
+            `,
+        },
+        {
+            id: "catalog-columns",
+            name: "Catalog Columns",
+            description: "Example columns for Catalog Grids",
+            type: "column",
+            components: [
+                "clinical-analysis-grid",
+                "cohort-grid",
+                "family-grid",
+                "file-grid",
+                "individual-grid",
+                "job-grid",
+                "sample-grid",
+            ],
+            maintainer: "",
+            version: "",
+            compatibleWith: "",
+            columns: [
+                {
+                    // position: 0,
+                    config: {
+                        id: "new-column-1",
+                        title: "Extra column",
+                        field: "",
+                        align: "center",
+                        formatter: (value, row, index) => `Row ${index}`,
+                    },
+                },
+            ],
+        },
+        {
+            id: "catalog-columns-multiple",
+            name: "Catalog Columns",
+            description: "Example columns for Catalog Grids",
+            type: "column",
+            components: [
+                "disease-panel-grid",
+            ],
+            maintainer: "",
+            version: "",
+            compatibleWith: "",
+            columns: [
+                [
+                    {
+                        // position: 0,
+                        config: {
+                            id: "new-column-1",
+                            title: "Extra column",
+                            field: "",
+                            align: "center",
+                            rowspan: 2,
+                            colspan: 1,
+                            formatter: (value, row, index) => `Row ${index}`,
+                        },
+                    },
+                ],
+            ],
+        },
+        {
+            id: "catalog-detail",
+            name: "New Catalog Tab",
+            description: "Example detail tab for Catalog Details",
+            type: "detail_tab",
+            components: [
+                "clinical-analysis-detail",
+                "cohort-detail",
+                "disease-panel-detail",
+                "family-detail",
+                "file-detail",
+                "individual-detail",
+                "job-detail",
+                "sample-detail",
+            ],
+            maintainer: "",
+            version: "",
+            compatibleWith: "",
+            render: params => {
+                return params.html`
+                    <div>Hello world</div>
+                `;
+            },
+        },
+    ],
+};

src/sites/test-app/index.html

@@ -162,6 +162,7 @@
     <!-- /build -->
     <!-- LitElement assets -->
     <!-- build:void[] -->
+    <script src="{{ IVA_EXTENSIONS_PATH }}/extensions.js"></script>
     <script type="module" src="./test-app.js"></script>
     <!-- /build -->