antisrdy / pyldavis_dash

Custom Dash component to make pyLDAvis available in the Dash framework

pyldavis-dash

pyLDAvis to Dash. Once pyLDAvis data has been saved as a .html file, just extract the var section and pass it to the dash custom component.

Big thanks to ngotchac

Dash

Go to this link to learn about Dash.

Getting started

# Install dependencies
$ npm install

# Watch source for changes and build to `lib/`
$ npm start

Development

Demo server

You can start up a demo development server to see a demo of the rendered components:

$ builder run demo
$ open http://localhost:9000

You have to maintain the list of components in demo/Demo.react.js.

Code quality and tests

To run lint and unit tests:

$ npm test

To run unit tests and watch for changes:

$ npm run test-watch

To debug unit tests in a browser (Chrome):

$ npm run test-debug

1. Wait until Chrome launches.
2. Click the "DEBUG" button in the top right corner.
3. Open up Chrome Devtools (Cmd+opt+i).
4. Click the "Sources" tab.
5. Find source files

• Navigate to webpack:// -> . -> spec/components to find your test source files.
• Navigate to webpack:// -> [your/repo/path]] -> pyldavis-dash -> src to find your component source files.

6. Now you can set breakpoints and reload the page to hit them.
7. The test output is available in the "Console" tab, or in any tab by pressing "Esc".

To run a specific test

In your test, append .only to a describe or it statement:

describe.only('Foo component', () => {
    // ...
})l

Testing your components in Dash

1. Build development bundle to lib/ and watch for changes

    # Once this is started, you can just leave it running.
    $ npm start
   

2. Install module locally (after every change)

    # Generate metadata, and build the JavaScript bundle
    $ npm run install-local
   
    # Now you're done. For subsequent changes, if you've got `npm start`
    # running in a separate process, it's enough to just do:
    $ python setup.py install
   

3. Run the dash layout you want to test

    # Import pyldavis-dash to your layout, then run it:
    $ python my_dash_layout.py
   

TODO: There is a workflow that links your module into site-packages which would make it unnecessary to re-run 2. on every change: python setup.py develop. Unfortunately, this doesn't seem to work with resources defined in package_data.

See https://github.com/plotly/dash-components-archetype/issues/20

Installing python package locally

Before publishing to PyPi, you can test installing the module locally:

# Install in `site-packages` on your machine
$ npm run install-local

Uninstalling python package locally

$ npm run uninstall-local

Publishing

For now, multiple steps are necessary for publishing to NPM and PyPi, respectively. TODO: #5 will roll up publishing steps into one workflow.

Ask @chriddyp to get NPM / PyPi package publishing accesss.

1. Preparing to publish to NPM

    # Bump the package version
    $ npm version major|minor|patch
   
    # Push branch and tags to repo
    $ git push --follow-tags
   

2. Preparing to publish to PyPi

    # Bump the PyPi package to the same version
    $ vi setup.py
   
    # Commit to github
    $ git add setup.py
    $ git commit -m "Bump pypi package version to vx.x.x"
   

3. Publish to npm and PyPi

    $ npm run publish-all
   

Builder / Archetype

We use Builder to centrally manage build configuration, dependencies, and scripts.

To see all builder scripts available:

$ builder help

See the dash-components-archetype repo for more information.

pyldavis_dash's Issues

Black background in rendered plot

Hi,

I can render the plot however it does not show correctly. any suggestion?

Error when running npm install

Hi,
I am unable to use the package, as I always run into an error when trying to run npm install as indicated by your guideline. The error I get is the following. Do you have any suggestions on how to solve this?

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! Linux 4.4.0-138-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn

npm ERR! [email protected] install: `node install.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the phantomjs-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs phantomjs-prebuilt
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls phantomjs-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/ammo/pyldavis_dash-master/npm-debug.log

Issue with extracting var section

Thanks so much for providing this solution. I was able to run npm and create the metadata.json file, however as I want to pass on the pyLDAvis object to the pyldavis_dash.pyLDAvis output, I'm having some issues. How exactly should I extract the var section (as per your instructions)?

This is my code to create the pyLDAvis object and save it as html:
panel = pyLDAvis.gensim.prepare(lda_model, bow_corpus, id2word)
pyLDAvis.display(panel)
pyLDAvis_file = os.path.join(data_path,'plots/pyLDAvis.html')
pyldavis_figure = pyLDAvis.save_html(panel, pyLDAvis_file)

And then trying to pass it on to the dash output:
return [ html.Div( className='eight columns', children=[ pyldavis_dash.pyLDAvis( id='lda_graph', data=pyldavis_figure ) ]) ]

The html file was created successfully, and I can load it outside of my dash app in Chrome. Any help would be greatly appreciated.