disable js map files to reduce package size (#556)

Summary:
- Clean up some JS warnings
- remove unpkg
- switch to plotlyjs-basic-dist-min

Pull Request resolved: #556

Reviewed By: NarineK

Differential Revision: D25506078

Pulled By: edward-io

fbshipit-source-id: f133975579c1ab3376f243499aca6520aafbb568

Author: edward-io

captum/insights/attr_vis/frontend/package.json

@@ -16,7 +16,7 @@
     "babel-loader": "^8.0.6",
     "css-loader": "3.3.0",
     "js-levenshtein": "^1.1.6",
-    "plotly.js-basic-dist": "^1.53.0",
+    "plotly.js-basic-dist-min": "^1.58.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-plotly.js": "^2.4.0",

captum/insights/attr_vis/frontend/src/App.tsx

@@ -4,7 +4,6 @@ import Header from "./components/Header";
 import cx from "./utils/cx";
 import Spinner from "./components/Spinner";
 import FilterContainer from "./components/FilterContainer";
-import Visualization from "./components/Visualization";
 import VisualizationGroupDisplay from "./components/VisualizationGroup";
 import "./App.css";
 import { VisualizationGroup } from "./models/visualizationOutput";

captum/insights/attr_vis/frontend/src/components/Plot.tsx

@@ -1,5 +1,5 @@
 import createPlotlyComponent from "react-plotly.js/factory";
-import Plotly from "plotly.js-basic-dist";
+import Plotly from "plotly.js-basic-dist-min";
 
 const Plot = createPlotlyComponent(Plotly);
 

captum/insights/attr_vis/frontend/src/components/Visualization.tsx

@@ -47,8 +47,7 @@ class Visualization extends React.Component<
   //TODO: Refactor the visualization table as a <table> instead of columns, in order to have cleaner styling
   render() {
     const data = this.props.data;
-    const isFirstInGroup = this.props.data.model_index == 0;
-    console.log("visualization", data);
+    const isFirstInGroup = this.props.data.model_index === 0;
     const features = data.feature_outputs.map((f) => (
       <Feature data={f} hideHeaders={isFirstInGroup} />
     ));

captum/insights/attr_vis/frontend/src/components/plotly.module.d.ts

@@ -1 +1 @@
-declare module "plotly.js-basic-dist";
+declare module "plotly.js-basic-dist-min";

captum/insights/attr_vis/frontend/widget/webpack.config.js

@@ -1,5 +1,4 @@
 var path = require("path");
-var version = require("../package.json").version;
 
 // Custom webpack rules are generally the same for all webpack bundles, hence
 // stored in a separate local variable.
@@ -73,44 +72,6 @@ module.exports = [
       path: path.resolve(__dirname, "..", "..", "widget", "static"),
       libraryTarget: "amd",
     },
-    devtool: "source-map",
-    module: {
-      rules: rules,
-    },
-    resolveLoader: {
-      modules: ["../node_modules"],
-    },
-    resolve: {
-      modules: ["../node_modules"],
-      extensions: extensions,
-    },
-    externals: ["@jupyter-widgets/base"],
-  },
-  {
-    // Embeddable jupyter-captum-insights bundle
-    //
-    // This bundle is generally almost identical to the notebook bundle
-    // containing the custom widget views and models.
-    //
-    // The only difference is in the configuration of the webpack public path
-    // for the static assets.
-    //
-    // It will be automatically distributed by unpkg to work with the static
-    // widget embedder.
-    //
-    // The target bundle is always `dist/index.js`, which is the path required
-    // by the custom widget embedder.
-    //
-    mode: "production",
-    entry: "./src/embed.js",
-    output: {
-      filename: "index.js",
-      path: path.resolve(__dirname, "..", "..", "widget", "dist"),
-      libraryTarget: "amd",
-      publicPath:
-        "https://unpkg.com/jupyter-captum-insights@" + version + "/dist/",
-    },
-    devtool: "source-map",
     module: {
       rules: rules,
     },

captum/insights/attr_vis/frontend/yarn.lock

@@ -7716,10 +7716,10 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-plotly.js-basic-dist@^1.53.0:
-  version "1.53.0"
-  resolved "https://registry.yarnpkg.com/plotly.js-basic-dist/-/plotly.js-basic-dist-1.53.0.tgz#dadc4cbd1fcdeec803deb55462439b5bcbcd2b40"
-  integrity sha512-906O6cwy+D8rygaYiP/ujl6PaLrEXkgwnuiNjjYnkCUfpkfd2QQEQaoRp4W9WAFFDJofbnWPOVIso7P5y1Xwtw==
+plotly.js-basic-dist-min@^1.58.2:
+  version "1.58.2"
+  resolved "https://registry.yarnpkg.com/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-1.58.2.tgz#7b40228f0e6d46c8936f90a0d876803df68dfe39"
+  integrity sha512-Yu84SGV2+bgK7ZVzmr/xUh7d6qucZ5kR/lA9emJs7N+KFmZXn7t69NCMn5YWCNeKdFys/ogdHBT9iG42yBFdPA==
 
 pn@^1.1.0:
   version "1.1.0"

scripts/install_via_conda.sh

@@ -44,5 +44,4 @@ conda update -y --no-channel-priority -c conda-forge nodejs
 
 
 # build insights and install captum
-# TODO: remove CI=false when we want React warnings treated as errors
-CI=false BUILD_INSIGHTS=1 python setup.py develop
+BUILD_INSIGHTS=1 python setup.py develop

setup.py

@@ -159,7 +159,6 @@ def get_package_files(root, subdirs):
                 [
                     "captum/insights/attr_vis/widget/static/extension.js",
                     "captum/insights/attr_vis/widget/static/index.js",
-                    "captum/insights/attr_vis/widget/static/index.js.map",
                 ],
             ),
             (

tutorials/CIFAR_TorchVision_Captum_Insights.ipynb

@@ -32,7 +32,7 @@
     "import torchvision.transforms as transforms\n",
     "\n",
     "from captum.insights import AttributionVisualizer, Batch\n",
-    "from captum.insights.features import ImageFeature\n"
+    "from captum.insights.attr_vis.features import ImageFeature\n"
    ]
   },
   {
@@ -224,4 +224,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 2
-}
+}

tutorials/Multimodal_VQA_Captum_Insights.ipynb

@@ -86,7 +86,7 @@
     "    print(\"please provide a valid path to pytorch-vqa\")\n",
     "    \n",
     "from captum.insights import AttributionVisualizer, Batch\n",
-    "from captum.insights.features import ImageFeature, TextFeature\n",
+    "from captum.insights.attr_vis.features import ImageFeature, TextFeature\n",
     "from captum.attr import TokenReferenceBase, configure_interpretable_embedding_layer, remove_interpretable_embedding_layer"
    ]
   },
@@ -621,4 +621,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 2
-}
+}