Add CSV-loading mode

tensorboard/components/vz_example_viewer/vz-example-viewer.html

@@ -458,7 +458,6 @@
                         on-blur="onInputBlur"
                         data-feature="[[feat.name]]"
                         data-index="[[index]]"
-                        type="[[getInputType(feat.name)]]"
                         value="[[value]]">
                   </input>
                 </template>
@@ -471,7 +470,6 @@
                   on-blur="onInputBlur"
                   data-feature="[[feat.name]]"
                   data-index="[[zeroIndex]]"
-                  type="[[getInputType(feat.name)]]"
                   value="[[getFirstFeatureValue(feat.name)]]">
                 </input>
                 <template is="dom-if" if="[[featureHasMultipleValues(feat.name)]]">
@@ -487,15 +485,13 @@
                   <template is="dom-repeat" items="[[getCompareFeatureValues(feat.name)]]" as="value">
                     <input type="text" class$="[[getCompareInputClass(feat.name, displayMode, index)]]"
                           readonly
-                          type="[[getInputType(feat.name)]]"
                           value="[[value]]">
                     </input>
                   </template>
                 </template>
                 <template is="dom-if" if="[[!isExpanded(feat.name, expandAllFeatures)]]">
                   <input type="text" class$="[[getCompareInputClass(feat.name, displayMode, zeroIndex)]]"
                     readonly
-                    type="[[getInputType(feat.name)]]"
                     value="[[getFirstCompareFeatureValue(feat.name)]]">
                   </input>
                   <template is="dom-if" if="[[compareFeatureHasMultipleValues(feat.name)]]">
@@ -618,7 +614,6 @@
                           data-feature="[[seqfeat.name]]"
                           data-index="[[index]]"
                           data-seq-num="[[seqNumber]]"
-                          type="[[getInputType(seqfeat.name)]]"
                           value="[[seqvalue]]">
                       </input>
                     </template>
@@ -632,7 +627,6 @@
                       data-feature="[[seqfeat.name]]"
                       data-index="[[zeroIndex]]"
                       data-seq-num="[[seqNumber]]"
-                      type="[[getInputType(seqfeat.name)]]"
                       value="[[getFirstSeqFeatureValue(seqfeat.name, seqNumber)]]">
                     </input>
                     <template is="dom-if" if="[[seqFeatureHasMultipleValues(seqfeat.name, seqNumber)]]">
@@ -650,15 +644,13 @@
                                 as="seqvalue">
                         <input type="text" class$="[[getSeqCompareInputClass(seqfeat.name, displayMode, seqNumber, index)]]"
                             readonly
-                            type="[[getInputType(seqfeat.name)]]"
                             value="[[seqvalue]]">
                         </input>
                       </template>
                     </template>
                     <template is="dom-if" if="[[!isExpanded(seqfeat.name, expandAllFeatures)]]">
                       <input type="text" class$="[[getSeqCompareInputClass(seqfeat.name, displayMode, seqNumber, zeroIndex)]]"
                         readonly
-                        type="[[getInputType(seqfeat.name)]]"
                         value="[[getFirstCompareSeqFeatureValue(seqfeat.name, seqNumber)]]">
                       </input>
                       <template is="dom-if" if="[[compareSeqFeatureHasMultipleValues(seqfeat.name, seqNumber)]]">

tensorboard/components/vz_example_viewer/vz-example-viewer.ts

@@ -145,8 +145,8 @@ Polymer({
     colors: {type: Object, computed: 'getColors(saliency)', observer: 'createLegend'},
     displayMode: {type: String, value: 'grid'},
     featureSearchValue: {type: String, value: '', notify: true},
-    filteredFeaturesList: {type: Object, computed: 'getFilteredFeaturesList(featuresList, featureSearchValue, saliency)'},
-    filteredSeqFeaturesList: {type: Object, computed: 'getFilteredFeaturesList(seqFeaturesList, featureSearchValue, saliency)'},
+    filteredFeaturesList: {type: Object},
+    filteredSeqFeaturesList: {type: Object},
     focusedFeatureName: String,
     focusedFeatureValueIndex: Number,
     focusedSeqNumber: Number,
@@ -173,6 +173,8 @@ Polymer({
   observers: [
     'haveSaliency(filteredFeaturesList, saliency, colors, showSaliency, saliencyCutoff)',
     'seqSaliency(seqNumber, seqFeaturesList, saliency, colors, showSaliency, saliencyCutoff)',
+    'setFilteredFeaturesList(featuresList, featureSearchValue, saliency)',
+    'setFilteredSeqFeaturesList(seqFeaturesList, featureSearchValue, saliency)',
   ],
 
   isExpanded: function(featName: string, expandAllFeatures: boolean) {
@@ -274,6 +276,20 @@ Polymer({
         .getFeatureLists()!.getFeatureListMap();
   },
 
+  setFilteredFeaturesList: function(featureList: NameAndFeature[],
+    searchValue: string, saliency: SaliencyMap) {
+      this.filteredFeaturesList = [];
+      this.filteredFeaturesList = this.getFilteredFeaturesList(
+        featureList, searchValue, saliency);
+  },
+
+  setFilteredSeqFeaturesList: function(seqFeatureList: NameAndFeature[],
+    searchValue: string, saliency: SaliencyMap) {
+      this.filteredSeqFeaturesList = [];
+      this.filteredSeqFeaturesList = this.getFilteredFeaturesList(
+        seqFeatureList, searchValue, saliency);
+  },
+
   getFilteredFeaturesList: function(featureList: NameAndFeature[],
       searchValue: string, saliency: SaliencyMap) {
     let filtered = featureList;
@@ -477,6 +493,14 @@ Polymer({
     }
     min = Math.min(0, min) * clipSaliencyRatio;
     max = Math.max(0, max) * clipSaliencyRatio;
+    // Make min/max symmetric around 0 so that attribution visualization scales
+    // for negative and positive attributions are the same, for visual
+    // consistency.
+    if (min < 0 && max > Math.abs(min)) {
+      min = -1 *  max;
+    } else if (max > 0 && Math.abs(min) > max) {
+      max = -1 * min;
+    }
     return [min, max];
   },
 
@@ -646,27 +670,6 @@ Polymer({
     return false;
   },
 
-  /**
-   * Gets the allowed input type for a feature value, according to its
-   * feature type.
-   */
-  getInputType: function(feature: string) {
-    const feat = this.features.get(feature);
-    if (feat) {
-      if (feat.getInt64List() || feat.getFloatList()) {
-        return 'number'
-      }
-    }
-    const seqfeat = this.seqFeatures.get(feature);
-    if (seqfeat) {
-      if (seqfeat.getFeatureList()[0].getInt64List() ||
-          seqfeat.getFeatureList()[0].getFloatList()) {
-        return 'number';
-      }
-    }
-    return 'text';
-  },
-
   /**
    * Returns the feature object from the provided json attribute for a given
    * feature name.
@@ -1071,7 +1074,7 @@ Polymer({
    * be used in css classes/ids.
    */
   sanitizeFeature: function(feat: string) {
-   let sanitized = feat;
+   let sanitized = feat.trim();
     if (!feat.match(/^[A-Za-z].*$/)) {
       sanitized = '_' + feat;
     }
@@ -1155,7 +1158,7 @@ Polymer({
           0, LEGEND_WIDTH_PX
         ]);
 
-    const legendAxis = d3.axisBottom(legendScale);
+    const legendAxis = d3.axisBottom(legendScale).ticks(5);
 
     legendSvg.append('g')
         .attr('class', 'legend axis')

tensorboard/plugins/interactive_inference/README.md

@@ -86,20 +86,45 @@ To use the tool, only the following information needs to be provided:
       labels for a classification model. If not, it will show the predicted
       class indices.
 
+Alternatively, the What-If Tool can be used to explore a dataset directly from
+a CSV file. See the next section for details.
+
 The information can be provided in the settings dialog screen, which pops up
 automatically upon opening this tool and is accessible through the settings
 icon button in the top-right of the tool.
 The information can also be provided directly through URL parameters.
 Changing the settings through the controls automatically updates the URL so that
 it can be shared with others for them to view the same data in the What-If Tool.
 
-## All I have is a dataset. Where do I start?
+## All I have is a dataset. What can I do? Where do I start?
+
+If you want to explore a dataset directly, you have two options:
 
-Check out the [WIT_from_scratch.ipynb ipython notebook](./WIT_from_scratch.ipynb)
+If you want to train an ML model from the dataset and explore the dataset and
+model, check out the [WIT_from_scratch.ipynb ipython notebook](./WIT_from_scratch.ipynb)
 which shows how to install TensorFlow, TensorBoard, and TensorFlow Serving,
 train a very simple model to predict a column from a CSV file, serve that model
 and load it up in the What-If Tool.
 
+If instead you just want to explore the information in the CSV, just set the
+path to the examples to the file (with a ".csv" extension) and leave the
+inference address and model name fields blank. The first line of the CSV file
+must contain column names. Each line after that contains one example from the
+dataset, with values for each of the columns defined on the first line. The pipe
+character ("|") deliminates separate feature values in a list of feature values
+for a given feature.
+
+In order to make use of the model understanding features of the tool, you can
+have columns in your dataset that contain the output from an ML model. If your
+file has a column named "probabilities" with a pipe-delimited ("|") list of
+probability scores (between 0 and 1), then the tool will treat those as the
+output scores of a classification model. If your file has a numeric column named
+"score" then the tool will treat those as the output of a regression model. In
+this way, the tool can be used to analyze any dataset and the results of any
+model run offline against the dataset. Note that in this mode, the examples
+aren't editable as there is no way to get new inference results when an example
+changes.
+
 ## What can it do?
 * Visualize a dataset of TensorFlow Example protos.
   * The main panel shows the dataset using [Facets Dive](https://pair-code.github.io/facets),