From 351f4e9fe338a534feeb53f792682d20ef7012c0 Mon Sep 17 00:00:00 2001 From: Patrick Kalita Date: Wed, 1 Nov 2023 12:12:09 -0700 Subject: [PATCH 1/5] Fix gene panel horizontal overflow when more than 4 evidence entries are present --- src/components/genes-panel/genes-panel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/genes-panel/genes-panel.scss b/src/components/genes-panel/genes-panel.scss index 0d79e60..e6436a1 100644 --- a/src/components/genes-panel/genes-panel.scss +++ b/src/components/genes-panel/genes-panel.scss @@ -121,8 +121,8 @@ .node-term { font-size: 0.75em; flex-grow: 1; + flex-shrink: 1; } .node-evidence { - @include deep-width(2em); } From b4b9822f758a81ecae6fdee7a5ccf13d557e2077 Mon Sep 17 00:00:00 2001 From: Patrick Kalita Date: Wed, 1 Nov 2023 12:12:56 -0700 Subject: [PATCH 2/5] Remove unused dependency --- package-lock.json | 59 ----------------------------------------------- package.json | 1 - 2 files changed, 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad86abc..7cbea0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,6 @@ "license": "BSD-3", "dependencies": { "@geneontology/dbxrefs": "^1.0.16", - "@geneontology/wc-light-modal": "0.0.7", "@stencil/core": "^4.1.0", "bbop-graph-noctua": "0.0.35", "cytoscape": "^3.16.1", @@ -35,29 +34,6 @@ "js-yaml": "^4.0.0" } }, - "node_modules/@geneontology/wc-light-modal": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/@geneontology/wc-light-modal/-/wc-light-modal-0.0.7.tgz", - "integrity": "sha512-7jUATAbdQJBGSDqmvXU/qWVUTAQPd7zOm5tyRZQNDDtGJMAx7wp+DZrxN8XEhkYclbUs+/3XFspF7KQtMf4FQg==", - "dependencies": { - "@stencil/core": "^1.8.8" - } - }, - "node_modules/@geneontology/wc-light-modal/node_modules/@stencil/core": { - "version": "1.17.4", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.17.4.tgz", - "integrity": "sha512-dmuNYM6fnHPvE2ptHoUBQtjcpXqrHnkDtdyUD6/JrZWcJt6jBtrykewObOxzpDCMLs+NT7668ussRagdVL03gQ==", - "dependencies": { - "typescript": "3.9.7" - }, - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=10.13.0", - "npm": ">=6.0.0" - } - }, "node_modules/@stencil/core": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", @@ -358,18 +334,6 @@ "deprecated": "Please use @jridgewell/sourcemap-codec instead", "dev": true }, - "node_modules/typescript": { - "version": "3.9.7", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz", - "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==", - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/underscore": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz", @@ -405,24 +369,6 @@ "js-yaml": "^4.0.0" } }, - "@geneontology/wc-light-modal": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/@geneontology/wc-light-modal/-/wc-light-modal-0.0.7.tgz", - "integrity": "sha512-7jUATAbdQJBGSDqmvXU/qWVUTAQPd7zOm5tyRZQNDDtGJMAx7wp+DZrxN8XEhkYclbUs+/3XFspF7KQtMf4FQg==", - "requires": { - "@stencil/core": "^1.8.8" - }, - "dependencies": { - "@stencil/core": { - "version": "1.17.4", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-1.17.4.tgz", - "integrity": "sha512-dmuNYM6fnHPvE2ptHoUBQtjcpXqrHnkDtdyUD6/JrZWcJt6jBtrykewObOxzpDCMLs+NT7668ussRagdVL03gQ==", - "requires": { - "typescript": "3.9.7" - } - } - } - }, "@stencil/core": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", @@ -663,11 +609,6 @@ "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", "dev": true }, - "typescript": { - "version": "3.9.7", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz", - "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==" - }, "underscore": { "version": "1.8.3", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz", diff --git a/package.json b/package.json index 9220597..eb551de 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ }, "dependencies": { "@geneontology/dbxrefs": "^1.0.16", - "@geneontology/wc-light-modal": "0.0.7", "@stencil/core": "^4.1.0", "bbop-graph-noctua": "0.0.35", "cytoscape": "^3.16.1", From a6e8d18a376dee132ecc6b0085751a0b06540953 Mon Sep 17 00:00:00 2001 From: Patrick Kalita Date: Wed, 1 Nov 2023 12:14:45 -0700 Subject: [PATCH 3/5] Add more documentation on configuring asset locations in client applications --- readme.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/readme.md b/readme.md index 46f34ed..90e0f14 100644 --- a/readme.md +++ b/readme.md @@ -93,3 +93,20 @@ For other bundlers, consider a similar configuration using one of the following * [rollup-plugin-copy](https://github.com/vladshcherbin/rollup-plugin-copy) * [vite-plugin-static-copy](https://github.com/sapphi-red/vite-plugin-static-copy) * [esbuild-plugin-copy](https://github.com/LinbuduLab/esbuild-plugins/tree/main/packages/esbuild-plugin-copy) + +By default, images will be requested at a location relative to the current page's URL. For example, if the legend component is on the page at `http://example.com`, then the image requests will be to `http://example.com/assets/...`. If your application is able to serve the image files from a top-level `assets` route (as in the above example), then no additional configuration is needed. + +However, in the following scenarios some extra configuration is needed: + +* You have a multi-page app and the legend component might be hosted on a page like `http://example.com/path/to/page` +* Your application requires static assets to be served from a non-root path. For example, you need to serve the images from, say, `http://example.com/static/assets/...` + +In these scenarios, pass the `window` object and an options object with the `resourceUrl` key to `defineCustomElements()`. Note that the `resourceUrl` value can be absolute (starting with a `/`) or relative (in which case it will be relative to the current document's `baseURI`). In either case the value should include a trailing slash. + +```javascript +import { defineCustomElements } from '@geneontology/wc-gocam-viz/loader' + +defineCustomElements(window, { + resourcesUrl: '/static/' +}); +``` From 756f725a0a4ebae2ebb18b75e6561db62d87fcdc Mon Sep 17 00:00:00 2001 From: Patrick Kalita Date: Thu, 2 Nov 2023 14:22:41 -0700 Subject: [PATCH 4/5] Fix issue where cytoscape click positions are calculated incorrectly after the host page is scrolled --- src/components/gocam-viz/gocam-viz.scss | 1 + src/components/gocam-viz/gocam-viz.tsx | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/components/gocam-viz/gocam-viz.scss b/src/components/gocam-viz/gocam-viz.scss index 7b0bbf0..5be4836 100644 --- a/src/components/gocam-viz/gocam-viz.scss +++ b/src/components/gocam-viz/gocam-viz.scss @@ -177,6 +177,7 @@ button { padding: var(--graph-padding); height: var(--graph-height); box-sizing: border-box; + position: relative; } wc-gocam-legend { diff --git a/src/components/gocam-viz/gocam-viz.tsx b/src/components/gocam-viz/gocam-viz.tsx index 85b4718..f73db41 100644 --- a/src/components/gocam-viz/gocam-viz.tsx +++ b/src/components/gocam-viz/gocam-viz.tsx @@ -528,7 +528,6 @@ export class GoCamViz { */ finishRendering() { console.log("Rendering of the GO-CAM complete"); - // tableElement.innerHTML = "" } @@ -832,6 +831,26 @@ export class GoCamViz { */ componentDidLoad() { this.loadGoCam(); + + // Cytoscape's renderer initialization code includes a step where it walks up the DOM + // tree from the cytoscape container (this.graphDiv here) following `parentNode` + // attributes and attaches event listeners to each element is passes[1]. It assumes that + // it can reach the HTML document root doing this. However, that's not a valid + // assumption when the cytoscape container is in a shadow DOM host (this.gocamviz here). + // From the outside, the host's `parentNode` attribute is null. Someone reported a + // different issue to cytoscape that also involves hosting it in a shadow DOM element, + // but it didn't get much traction[2]. So here we help cytoscape out by setting up the event + // listeners that it won't be able to reach. + // [1] https://github.com/cytoscape/cytoscape.js/blob/3.16.x/src/extensions/renderer/base/load-listeners.js#L326-L342 + // [2] https://github.com/cytoscape/cytoscape.js/issues/3133 + let element: Node = this.gocamviz; + const invalidateCoordsCache = () => this.cy.renderer().invalidateContainerClientCoordsCache(); + while (element != null) { + element.addEventListener('transitionend', invalidateCoordsCache); + element.addEventListener('animationend', invalidateCoordsCache); + element.addEventListener('scroll', invalidateCoordsCache); + element = element.parentNode; + } } /** @@ -862,7 +881,7 @@ export class GoCamViz { } {this.showLegend && ( - + )} From 82dcda1a827793e8a1796dcb351ebae66a896e61 Mon Sep 17 00:00:00 2001 From: Patrick Kalita Date: Thu, 2 Nov 2023 16:05:56 -0700 Subject: [PATCH 5/5] Inline legend images instead of using Stencil's asset feature --- package-lock.json | 124 +++++++++++++++++++ package.json | 1 + readme.md | 60 +-------- src/components/gocam-legend/gocam-legend.tsx | 32 ++++- src/global.d.ts | 4 + stencil.config.ts | 4 +- 6 files changed, 161 insertions(+), 64 deletions(-) create mode 100644 src/global.d.ts diff --git a/package-lock.json b/package-lock.json index 7cbea0a..d444601 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "uuid": "^8.3.2" }, "devDependencies": { + "@rollup/plugin-image": "^3.0.3", "@stencil/sass": "^3.0.5", "rollup-plugin-node-polyfills": "^0.2.1" } @@ -34,6 +35,55 @@ "js-yaml": "^4.0.0" } }, + "node_modules/@rollup/plugin-image": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-3.0.3.tgz", + "integrity": "sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^5.0.1", + "mini-svg-data-uri": "^1.4.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz", + "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==", + "dev": true, + "dependencies": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils/node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/@stencil/core": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", @@ -59,6 +109,12 @@ "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0" } }, + "node_modules/@types/estree": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz", + "integrity": "sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==", + "dev": true + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -297,6 +353,27 @@ "sourcemap-codec": "^1.4.4" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "dev": true, + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/rollup-plugin-inject": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz", @@ -369,6 +446,35 @@ "js-yaml": "^4.0.0" } }, + "@rollup/plugin-image": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-3.0.3.tgz", + "integrity": "sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==", + "dev": true, + "requires": { + "@rollup/pluginutils": "^5.0.1", + "mini-svg-data-uri": "^1.4.4" + } + }, + "@rollup/pluginutils": { + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.5.tgz", + "integrity": "sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==", + "dev": true, + "requires": { + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" + }, + "dependencies": { + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + } + } + }, "@stencil/core": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.1.0.tgz", @@ -381,6 +487,12 @@ "dev": true, "requires": {} }, + "@types/estree": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.4.tgz", + "integrity": "sha512-2JwWnHK9H+wUZNorf2Zr6ves96WHoWDJIftkcxPKsS7Djta6Zu519LarhRNljPXkpsZR2ZMwNCPeW7omW07BJw==", + "dev": true + }, "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -574,6 +686,18 @@ "sourcemap-codec": "^1.4.4" } }, + "mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "dev": true + }, + "picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true + }, "rollup-plugin-inject": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rollup-plugin-inject/-/rollup-plugin-inject-3.0.2.tgz", diff --git a/package.json b/package.json index eb551de..be31969 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "uuid": "^8.3.2" }, "devDependencies": { + "@rollup/plugin-image": "^3.0.3", "@stencil/sass": "^3.0.5", "rollup-plugin-node-polyfills": "^0.2.1" }, diff --git a/readme.md b/readme.md index 90e0f14..332d5c9 100644 --- a/readme.md +++ b/readme.md @@ -51,62 +51,4 @@ import { defineCustomElements } from '@geneontology/wc-gocam-viz/loader' defineCustomElements() ``` -Now the `` element can be used in your application's markup. - -#### Configuration for image assets - -The legend feature of the component requires image assets to be served by your -application. These assets are distributed in the -`node_modules/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/assets` directory. If -your applications uses a bundler you should configure it to automatically copy -the files in that directory to an `assets` directory in the build ouput. - -A webpack configuration that uses the -[CopyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/) to do -this might look like: - -```js -const path = require('path'); -const CopyPlugin = require('copy-webpack-plugin'); - -module.exports = { - entry: './src/index.js', - output: { - filename: 'main.js', - path: path.resolve(__dirname, 'dist'), - }, - plugins: [ - new CopyPlugin({ - patterns: [ - { - from: path.resolve(__dirname, 'node_modules/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/assets'), - to: path.resolve(__dirname, 'dist/assets'), - }, - ], - }), - ], -}; -``` - -For other bundlers, consider a similar configuration using one of the following plugins: - -* [rollup-plugin-copy](https://github.com/vladshcherbin/rollup-plugin-copy) -* [vite-plugin-static-copy](https://github.com/sapphi-red/vite-plugin-static-copy) -* [esbuild-plugin-copy](https://github.com/LinbuduLab/esbuild-plugins/tree/main/packages/esbuild-plugin-copy) - -By default, images will be requested at a location relative to the current page's URL. For example, if the legend component is on the page at `http://example.com`, then the image requests will be to `http://example.com/assets/...`. If your application is able to serve the image files from a top-level `assets` route (as in the above example), then no additional configuration is needed. - -However, in the following scenarios some extra configuration is needed: - -* You have a multi-page app and the legend component might be hosted on a page like `http://example.com/path/to/page` -* Your application requires static assets to be served from a non-root path. For example, you need to serve the images from, say, `http://example.com/static/assets/...` - -In these scenarios, pass the `window` object and an options object with the `resourceUrl` key to `defineCustomElements()`. Note that the `resourceUrl` value can be absolute (starting with a `/`) or relative (in which case it will be relative to the current document's `baseURI`). In either case the value should include a trailing slash. - -```javascript -import { defineCustomElements } from '@geneontology/wc-gocam-viz/loader' - -defineCustomElements(window, { - resourcesUrl: '/static/' -}); -``` +Now the `` element can be used in your application's markup. diff --git a/src/components/gocam-legend/gocam-legend.tsx b/src/components/gocam-legend/gocam-legend.tsx index 7856648..4ecaf0f 100644 --- a/src/components/gocam-legend/gocam-legend.tsx +++ b/src/components/gocam-legend/gocam-legend.tsx @@ -1,6 +1,32 @@ -import { Component, Host, h, getAssetPath } from '@stencil/core'; +import { Component, Host, h } from '@stencil/core'; import { legend } from '../../globals/constants'; +import direct_regulation from './assets/relation/direct_regulation.png'; +import indirect_regulation from './assets/relation/indirect_regulation.png'; +import positive_regulation from './assets/relation/positive_regulation.png'; +import negative_regulation from './assets/relation/negative_regulation.png'; +import neutral from './assets/relation/neutral.png'; +import has_input from './assets/relation/has_input.png'; +import has_output from './assets/relation/has_output.png'; + +// Stencil's Assets feature[1] makes client applications jump through a lot of hoops[2] in order +// to get the assets served from the right location if they choose to the NPM package instead of +// a