search

ebi-gene-expression-group / atlas-heatmap

Heatmap visualizing bulk Expression Atlas data
8 stars 2 forks source link

Widget not showing anatomogram #19

Open mirandaio opened 5 years ago

mirandaio commented 5 years ago

Hi, the anatomogram is not being displayed in this minimal app https://expression-atlas.netlify.com

The app has been bootstrap with create-react-app and the code can be found here https://github.com/mirandaio/expression-atlas

The anatomogram is displayed when in development mode yarn start, however, it is not displayed when doing a production build yarn build.

Thanks

alfonsomunozpomer commented 5 years ago

In the link you sent, the SVG in the anatomogram is being resolved as https://www.ebi.ac.uk/static/media/homo_sapiens.male.4626c730.svg. I’m not familiar with Create React App, but I suspect there must be options on how to pack and access static assets from third party packages.

alfonsomunozpomer commented 5 years ago

For example, this is our output block in our webpack.config.js file:

output: {
    library: `[name]`,
    filename: `[name].bundle.js`,
    publicPath: `/gxa/resources/js-bundles/`,
    path: path.resolve(__dirname, `../webapp/resources/js-bundles`)
  }
alfonsomunozpomer commented 5 years ago

I’ve checked the following:

  1. https://expression-atlas.netlify.com/static/media/homo_sapiens.male.4626c730.svg indeed exists
  2. PNGs are fine because they are embedded as Base64

I think you need to specify in your build script that your assets will be at https://expression-atlas.netlify.com.

mirandaio commented 3 years ago

Hi @alfonsomunozpomer, thanks for the info. create-react-app is a widely used setup for React apps. It uses webpack under the hood. In order to configure webpack within an app bootstrapped with create-react-app, we would have to eject which is not ideal. I think this package should just work with create-react-app setups without having to configure webpack on the apps side.