Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Create Jupyter widget for Captum Insights #124

Merged
merged 3 commits into from
Oct 25, 2019

Conversation

J0Nreynolds
Copy link
Contributor

  • Make AppBase React component that can be used for both widget and webapp
  • Create Widget React component to handle view-logic for Captum Insights widget
  • Create widget module to handle model-logic for Captum Insights widget
  • Modify AttributionVisualizer to either serve the webapp or render the widget
  • Refactor React app to use CSS modules for scoped styling
  • Update build script for Captum Insights
  • Update README

@J0Nreynolds J0Nreynolds requested a review from edward-io October 18, 2019 01:30
@edward-io
Copy link
Contributor

Awesome! I'll give it a more thorough review tomorrow, can you check why the tests are failing?

@J0Nreynolds J0Nreynolds force-pushed the widget branch 6 times, most recently from e59abb1 to 8d5c707 Compare October 18, 2019 19:33
Copy link
Contributor

@edward-io edward-io left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is fantastic! Thanks for working on this. Looks good to me.

Can you format your Javascript code using Prettier?

Comment on lines 1 to 4
button {
cursor: pointer;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why leave this here? should we just move it all into the css module?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the main purpose of CSS modules is to allow locally scoped styles linked to classnames. For that reason, I put all class-specific styles in the App.module.css file and all global styles in App.css. A CSS selector like this isn't directly accessible by CSS modules since there's no classname tied to it.

Example: if we import the CSS modules like so:

import styles from "./App.module.css";

You can't refer to styles.button, but you can use styles.btn since .btn is a classname.

That being said, global styles like button { ... } will still work as expected when placed in a CSS modules file.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should move this into the .btn class, does it influence the Jupyter notebook at all?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the Jupyter notebook buttons are already styled to have cursor: pointer;, but I think it would be more proper to scope this locally in the .btn class.

@J0Nreynolds J0Nreynolds force-pushed the widget branch 3 times, most recently from a6d0139 to b8f504c Compare October 21, 2019 22:34
@J0Nreynolds
Copy link
Contributor Author

Formatted JS code with Prettier and moved WebApp react component to its own file.

@edward-io
Copy link
Contributor

edward-io commented Oct 24, 2019

Rebase to master and resolve the merge conflicts please :) Otherwise, LGTM.

@J0Nreynolds J0Nreynolds merged commit 2fea0d7 into pytorch:master Oct 25, 2019
NarineK pushed a commit to NarineK/captum-1 that referenced this pull request Nov 19, 2020
Create Jupyter widget for Captum Insights
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants