Merge pull request #31 from geneontology/fix-amigo-integration

Misc small identified by preliminary AmiGO integration

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"
   },

readme.md

@@ -51,45 +51,4 @@ import { defineCustomElements } from '@geneontology/wc-gocam-viz/loader'
 defineCustomElements()
 ```
 
-Now the `<wc-gocam-viz>` 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 `<wc-gocam-viz>` element can be used in your application's markup.

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

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 <script> tag. Since these legend images are quite small, it's a good tradeoff to just inline
+// them via the rollup image plugin[3].
+// [1] https://stenciljs.com/docs/assets
+// [2] https://github.com/ionic-team/stencil/issues/1868
+// [3] https://github.com/rollup/plugins/tree/master/packages/image
+
+const IMAGE_DATA = {
+  direct_regulation,
+  indirect_regulation,
+  positive_regulation,
+  negative_regulation,
+  neutral,
+  has_input,
+  has_output
+};
+
 /**
  * @part header - The header
  * @part section - Group of legend entries
@@ -9,7 +35,6 @@ import { legend } from '../../globals/constants';
   tag: 'wc-gocam-legend',
   styleUrl: 'gocam-legend.scss',
   shadow: true,
-  assetsDirs: ['assets'],
 })
 export class GocamLegend {
   render() {
@@ -23,8 +48,7 @@ export class GocamLegend {
                 {legend[section].map((item) => {
                   return (
                     <div class='item'>
-                      <img alt={item.label}
-                           src={getAssetPath(`./assets/relation/${item.id}.png`)}></img>
+                      <img alt={item.label} src={IMAGE_DATA[item.id]}></img>
                       <div class='item-label'>
                         {item.label}
                       </div>

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 {