diff --git a/package-lock.json b/package-lock.json index ad86abc..d444601 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", @@ -22,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" } @@ -35,29 +35,55 @@ "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==", + "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": { - "@stencil/core": "^1.8.8" + "@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/@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==", + "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": { - "typescript": "3.9.7" - }, - "bin": { - "stencil": "bin/stencil" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "engines": { - "node": ">=10.13.0", - "npm": ">=6.0.0" + "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", @@ -83,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", @@ -321,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", @@ -358,18 +411,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,21 +446,32 @@ "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==", + "@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": { - "@stencil/core": "^1.8.8" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "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" - } + "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 } } }, @@ -435,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", @@ -628,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", @@ -663,11 +733,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..be31969 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", @@ -35,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 46f34ed..332d5c9 100644 --- a/readme.md +++ b/readme.md @@ -51,45 +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) +Now the `` element can be used in your application's markup. 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); } 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