Firstly, Dash is amazing and using it is the first time I’ve actually been excited about doing anything on the front end. But since I’m very new to anything to do with JavaScript, I’ve been having some problems trying to create my own custom component. I’ve basically been attempting to shoehorn a react draggable component into the ExampleComponent tutorial with mixed results.
The react build appears to work - I can run npm run demo and I get a draggable component, but when I try to run the same example as a Dash app (python usage.py), the component renders but is not draggable. This has me completely stumped, and I’m not sure what tack to take trying to debug this. I’d appreciate any hints that people more versed in component development might have.
static propTypes has been moved to Draggable.propTypes
children added to PropTypes so I could use it in Dash
(None of these changes were particularly scientific - given my very limited knowledge of JavaScript, they were only done to get the build to work)
So rather than copying the source of react-draggable, you should try to just import the component and render it.
Draggable.js
import React from 'react';
import Draggable from 'react-draggable';
class DashDraggable extends Draggable {
render() {
return (
<Draggable {...this.props}/>
);
}
}
DashDraggable.propTypes = {
// fill this in with the properties
// that you want to make accessible to your component
// I recommend including _all_ of the properties of draggable
// that are JSON serializable (i.e. everything but functions)
}
Thanks for the suggestion! I’ve just tried that out, and unfortunately it looks like I’m running into the same issue (the react demo handles the new DashDraggable fine, but it is no longer draggable when running it as a dash component).
I suspect (from my very limited understanding of how this works) that the problem might be with the way dash builds the virtual DOM, since the draggable component appears to check parents for a Draggable component. In the react demo, the DOM looks like Draggable -> DraggableCore -> div, whereas in the Dash version it is Draggable -> DraggableCore -> Connect(a) -> a -> div. This is completely conjecture at this point, but I think diagnosing what is happening will require me to learn a lot more about React (which is probably a good thing )
I would like to modify the “Tabs” component. I can get the boilerplate custom component to work, but not the Tabs component sourced directly from the Tabs branch in the dash-custom-components library on Github.
My process was:
(1) Create a boilerplate component but rename it to “Tabs”:
cd ~/custom_component_playpen
source activate myenv
conda install -c cpcloud npm
conda install -c conda-forge nodejs
npm config set strict-ssl false
npm install -g builder-init
builder-init dash-components-archetype (then follow the prompts to create ‘mycomponent’)
Here is a snippet from the log of the failed prepublish:
mycomponent@0.0.1 prepublish ~/custom_component_playpen/mycomponent
npm test && builder run build-dist && npm run copy-lib
mycomponent@0.0.1 test ~/custom_component_playpen/mycomponent
builder run check
[builder:config:environment] {“cwd”:“~/custom_component_playpen/mycomponent”,“dir”:“~/custom_component_playpen/mycomponent/node_modules/builder/lib”}
[builder:builder-core:start:30199] Started: run check
[builder:run] check - builder run lint && builder run test-frontend-cov
[builder:proc:start] Command: builder run lint && builder run test-frontend-cov
[builder:config:environment] {“cwd”:“~/custom_component_playpen/mycomponent”,“dir”:“~/custom_component_playpen/mycomponent/node_modules/builder/lib”}
[builder:builder-core:start:30227] Started: run lint
[builder:run] lint - eslint --fix --ignore-path .gitignore .
[builder:proc:start] Command: eslint --fix --ignore-path .gitignore .
~/custom_component_playpen/mycomponent/src/components/Tabs.react.js
1:1 error ‘ramda’ should be listed in the project’s dependencies. Run ‘npm i -S ramda’ to add it import/no-extraneous-dependencies
[builder:proc:end:1] Command: builder run lint && builder run test-frontend-cov
[builder:builder-core:end:30199] Task: run check, Error: Command failed: sh -c builder run lint && builder run test-frontend-cov
npm ERR! Test failed. See above for more details.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mycomponent@0.0.1 prepublish: npm test && builder run build-dist && npm run copy-lib
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mycomponent@0.0.1 prepublish script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! ~/.npm/_logs/2018-07-08T23_25_31_508Z-debug.log
Running the suggested “npm i -S ramda” does remove that particular error but the last two errors remain. Any ideas as to how I can generate the Tabs component would be greatly appreciated!
)