geneontology / wc-gocam-viz

Web component to visualize GO-CAMs
BSD 3-Clause "New" or "Revised" License
2 stars 1 forks source link

Legend images do not work when used via NPM package #14

Closed pkalita-lbl closed 11 months ago

pkalita-lbl commented 1 year ago

When I attempt to define the custom components via importing the NPM package (as opposed to using a <script> tag with a prebuilt script) the images used in the legend cause errors.

I have a very simple application with this source file:

// src/main.ts
import { defineCustomElements } from '@geneontology/wc-gocam-viz/dist/custom-elements'

function init() {
  defineCustomElements(window)
  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
    <wc-gocam-viz 
      id="gocam-1"
      gocam-id="568b0f9600000284"
      show-go-cam-selector=true
      show-has-input=false
      show-has-output=false
      show-gene-product=true
      show-activity=false
      show-legend=true
    ></wc-gocam-viz>
  `
}

init()

I bundle with esbuild:

esbuild src/main.ts --bundle --outfile=dist/index.js

And I include the output in this page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>gocam widget test page</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/index.js"></script>
  </body>
</html>

At runtime the following error is thrown:

index.js:2179 TypeError: Failed to construct 'URL': Invalid base URL
    at getAssetPath (index.js:462:22)
    at index.js:53750:137
    at Array.map (<anonymous>)
    at index.js:53749:138
    at Array.map (<anonymous>)
    at GoCamViz.renderLegend (index.js:53748:262)
    at GoCamViz.render (index.js:53744:714)
    at callRender (index.js:1628:80)
    at updateComponent (index.js:1578:7)
    at index.js:1562:33 
index.js:2179 TypeError: Cannot set properties of null (setting 'innerHTML')
    at GoCamViz.loadGoCam (index.js:53271:21)
    at GoCamViz.componentDidLoad (index.js:53725:12)
    at safeCall (index.js:1735:32)
    at postUpdateComponent (index.js:1677:9)
    at updateComponent (index.js:1618:7)
    at index.js:1562:33
    at then (index.js:1743:64)
    at dispatchHooks (index.js:1562:12)
    at Array.dispatch (index.js:1531:28)
    at consume (index.js:2266:19) undefined

This error goes away if I change show-legend=true to show-legend=false.

I think this points to something incorrect about the way the legend images are bundled or referenced.

pkalita-lbl commented 12 months ago

As far as I can tell this is something that Stencil requires client applications to handle themselves, as alluded to by this documentation section: https://stenciljs.com/docs/custom-elements#example-bundler-configs. It's also something that confuses a lot of people about Stencil. So the best thing to do is probably just document what a very basic setup looks like.