Make the demo datasets provider fetch a projector config JSON file.

This makes "Smart Reply 5K" the first in the list of tensors, and we now choose the first
tensor in the embeddings array as the default tensor.
Change: 137964537

tensorflow/tensorboard/components/vz_projector/data-provider-demo.ts

@@ -20,69 +20,15 @@ import * as logging from './logging';
 
 /** Data provider that loads data from a demo folder. */
 export class DemoDataProvider implements DataProvider {
-  /** List of demo datasets for showing the capabilities of the tool. */
-  private DEMO_CONFIG: ProjectorConfig = {
-    embeddings: [
-      {
-        tensorName: 'Word2Vec 5K',
-        tensorShape: [5000, 200],
-        tensorPath: 'word2vec_5000_200d_tensors.tsv',
-        metadataPath: 'word2vec_5000_200d_labels.tsv'
-      },
-      {
-        tensorName: 'Word2Vec 10K',
-        tensorShape: [10000, 200],
-        tensorPath: 'word2vec_10000_200d_tensors.tsv',
-        metadataPath: 'word2vec_10000_200d_labels.tsv'
-      },
-      {
-        tensorName: 'Word2Vec All',
-        tensorShape: [71291, 200],
-        tensorPath: 'word2vec_full_200d_tensors.tsv',
-        metadataPath: 'word2vec_full_200d_labels.tsv'
-      },
-      {
-        tensorName: 'SmartReply 5K',
-        tensorShape: [5000, 256],
-        tensorPath: 'smartreply_5000_256d_tensors.tsv',
-        metadataPath: 'smartreply_5000_256d_labels.tsv'
-      },
-      {
-        tensorName: 'SmartReply All',
-        tensorShape: [35860, 256],
-        tensorPath: 'smartreply_full_256d_tensors.tsv',
-        metadataPath: 'smartreply_full_256d_labels.tsv'
-      },
-      {
-        tensorName: 'Mnist with images 10K',
-        tensorShape: [10000, 784],
-        tensorPath: 'mnist_10k_784d_tensors.tsv',
-        metadataPath: 'mnist_10k_784d_labels.tsv',
-        sprite: {
-          imagePath: 'mnist_10k_sprite.png',
-          singleImageDim: [28, 28]
-        }
-      },
-      {
-        tensorName: 'Iris',
-        tensorShape: [150, 4],
-        tensorPath: 'iris_tensors.tsv',
-        metadataPath: 'iris_labels.tsv'
-      },
-      {
-        tensorName: 'Unit Cube',
-        tensorShape: [8, 3],
-        tensorPath: 'cube_tensors.tsv',
-        metadataPath: 'cube_metadata.tsv'
-      }
-    ],
-    modelCheckpointPath: 'Demo datasets'
-  };
-  /** Name of the folder where the demo datasets are stored. */
-  private DEMO_FOLDER = 'data';
+  private projectorConfigPath: string;
+  private projectorConfig: ProjectorConfig;
+
+  constructor(projectorConfigPath: string) {
+    this.projectorConfigPath = projectorConfigPath;
+  }
 
   private getEmbeddingInfo(tensorName: string): EmbeddingInfo {
-    let embeddings = this.DEMO_CONFIG.embeddings;
+    let embeddings = this.projectorConfig.embeddings;
     for (let i = 0; i < embeddings.length; i++) {
       let embedding = embeddings[i];
       if (embedding.tensorName === tensorName) {
@@ -98,18 +44,28 @@ export class DemoDataProvider implements DataProvider {
 
   retrieveProjectorConfig(run: string, callback: (d: ProjectorConfig) => void)
       : void {
-    callback(this.DEMO_CONFIG);
+    let msgId = logging.setModalMessage('Fetching projector config...');
+    d3.json(this.projectorConfigPath, (err, projectorConfig) => {
+      if (err) {
+        logging.setModalMessage('Error: ' + err.responseText);
+        return;
+      }
+      logging.setModalMessage(null, msgId);
+      this.projectorConfig = projectorConfig;
+      callback(projectorConfig);
+    });
   }
 
   getDefaultTensor(run: string, callback: (tensorName: string) => void) {
-    callback('SmartReply 5K');
+    // Return the first tensor as the default tensor.
+    callback(this.projectorConfig.embeddings[0].tensorName);
   }
 
   retrieveTensor(run: string, tensorName: string,
       callback: (ds: DataSet) => void) {
     let embedding = this.getEmbeddingInfo(tensorName);
     let separator = embedding.tensorPath.substr(-3) === 'tsv' ? '\t' : ' ';
-    let url = `${this.DEMO_FOLDER}/${embedding.tensorPath}`;
+    let url = `${embedding.tensorPath}`;
     logging.setModalMessage('Fetching tensors...', TENSORS_MSG_ID);
     d3.text(url, (error: any, dataString: string) => {
       if (error) {
@@ -125,16 +81,12 @@ export class DemoDataProvider implements DataProvider {
   retrieveSpriteAndMetadata(run: string, tensorName: string,
       callback: (r: SpriteAndMetadataInfo) => void) {
     let embedding = this.getEmbeddingInfo(tensorName);
-    let metadataPath = null;
-    if (embedding.metadataPath) {
-      metadataPath = `${this.DEMO_FOLDER}/${embedding.metadataPath}`;
-    }
     let spriteImagePath = null;
     if (embedding.sprite && embedding.sprite.imagePath) {
-      spriteImagePath = `${this.DEMO_FOLDER}/${embedding.sprite.imagePath}`;
+      spriteImagePath = embedding.sprite.imagePath;
     }
-    dataProvider.retrieveSpriteAndMetadataInfo(metadataPath, spriteImagePath,
-        embedding.sprite, callback);
+    dataProvider.retrieveSpriteAndMetadataInfo(
+        embedding.metadataPath, spriteImagePath, embedding.sprite, callback);
   }
 
   getBookmarks(

tensorflow/tensorboard/components/vz_projector/vz-projector-app.html

@@ -76,7 +76,9 @@ vz-projector {
       </a>
     </div>
   </div>
-  <vz-projector route-prefix="[[routePrefix]]" serving-mode="[[servingMode]]"></vz-projector>
+  <vz-projector route-prefix="[[routePrefix]]"
+      serving-mode="[[servingMode]]"
+      projector-config-json-path="[[projectorConfigJsonPath]]"></vz-projector>
 </div>
 <!-- Google analytics -->
 <script>

tensorflow/tensorboard/components/vz_projector/vz-projector.ts

@@ -48,7 +48,8 @@ export let ProjectorPolymer = PolymerElement({
   properties: {
     routePrefix: String,
     dataProto: {type: String, observer: '_dataProtoChanged'},
-    servingMode: String
+    servingMode: String,
+    projectorConfigJsonPath: String
   }
 });
 
@@ -59,6 +60,8 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
   // The working subset of the data source's original data set.
   dataSet: DataSet;
   servingMode: ServingMode;
+  // The path to the projector config JSON file for demo mode.
+  projectorConfigJsonPath: string;
 
   private selectionChangedListeners: SelectionChangedListener[];
   private hoverListeners: HoverListener[];
@@ -247,7 +250,7 @@ export class Projector extends ProjectorPolymer implements SelectionContext,
 
   private initializeDataProvider(dataProto?: DataProto) {
     if (this.servingMode === 'demo') {
-      this.dataProvider = new DemoDataProvider();
+      this.dataProvider = new DemoDataProvider(this.projectorConfigJsonPath);
     } else if (this.servingMode === 'server') {
       if (!this.routePrefix) {
         throw 'route-prefix is a required parameter';