I need a Dash component that is a heatmap with clustering dendograms on its axes. I need the heatmap to be interactive so that a user can select a cluster in this heatmap (by clicking on a branch of the dendogram) and this selection needs to result in different data being plotted in another componen…

@chriddyp , @albsantosdel , @popohoma , an update: So I’ve got my Dash wrapper around Clustergrammer working. I’m still hazy on why things didn’t work before, but I think that’s because of Clustergrammer, not Dash or webpack. Disclaimer: this pretty specific to what I was trying to do, might not help …

In principle, this component looks good. I believe that the error that you are seeing is just related to the tests. You could remove that test command in package.json for now: "scripts": { ..., "test": "" } For JSON itself, Dash handles serializing your python’s dictionaries as JSON and …

Thanks for the response @chriddyp ! I removed the test script I made, and npm install works. However, when I then run python usage.py (see below for the app layout), the webpage just says “Error loading dependencies”, and when I inspect the console in Chrome, it has these errors (scquery_components …

[image] amiralavi: ‘clustergrammer_example.json’ Yeah, I’d try loading it into python memory rather than trying to make an API request to it. i.e. import json with open('clustergrammer_example.json') as f: data = json.loads(f.read()) app.layout = html.Div([ scquery_components.Cluste…

Ah, thanks for the explanation @chriddyp , that makes sense. However, even after getting rid of the d3.json call and using the Dash way above, I still can’t get a very basic app working, and get the bundle.js?v=0.0.1:1 Uncaught ReferenceError: d3 is not defined error. I’ve tried to create a minimum …

Hm odd. I wonder if the old bundle is getting cached? Could you try opening up your Browser’s dev tools and disabling the network cache and reloading? See here: https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development

Ok, I’ve tried disabling the cache, and still no luck. Just to make sure I understand how it’s supposed to work: You write your custom Dash component as a React component Any JS libraries that you need that are installed via npm are added to node_packages and also added to a list of dependencies …

Yeah, that’s the idea. And builder is running a webpack command. So yeah, the probem is that d3.js isn’t being added to the bundle. The order shouldn’t matter as long as the import is happening in the file where you are referencing the variable.

Ah ok, do you have any suggestions for how to fix this? I’ve been trying hard to look at other Dash components that users have written, but most are wrappers around React components. None seem to touch d3.

[image] amiralavi: I’ve been trying hard to look at other Dash components that users have written, but most are wrappers around React components. None seem to touch d3. We’ve started making some guides to help folks out with this: React for Python Devs: https://dash.plot.ly/react-for-python…

Hey thanks for keeping me posted @chriddyp ! I’m hoping to get some time to sit down and try this out soon. Will update here if I finally finish a component.

Using external JS libraries in custom Dash component

Dash Python

Topic		Replies	Views
Converting React.js components to Dash compatible components Dash Python	4	6678	February 14, 2018
Creating Dash Component from existing npm react package Dash Python	13	2189	February 9, 2019
dash is giving an incomplete result page without the graphic based on the script Dash Python	0	280	August 5, 2019
Need help creating a custom dash component Dash Python	7	2357	September 20, 2018
Faster react component prototyping by loading js files directly from the project structure Dash Python show-and-tell , community-components	1	393	October 2, 2022

Using external JS libraries in custom Dash component

Related topics