Merge pull request #378 from Kitware/ui-fixes

UI fixes

app/resonant-laboratory/models/Dataset.js

@@ -353,6 +353,12 @@ let Dataset = MetadataItem.extend({
   },
   postProcessHistogram: function (histogram) {
     let formatter = d3.format('0.3s');
+    let formatValue = value => {
+      // 0.3s is *almost* perfect for our needs, except when
+      // the values are nice round numbers... so chew off any
+      // unnecessary zeros
+      return formatter(value).replace(/\.*0+$/, '');
+    };
     // If the user is logged out, we'll sometimes get an
     // empty histogram back
     if (!('__passedFilters__' in histogram)) {
@@ -364,8 +370,8 @@ let Dataset = MetadataItem.extend({
             typeof bin.highBound === 'number') {
           // binUtils.js doesn't have access to D3's superior number formatting
           // abilities, so we patch on slightly better human-readable labels
-          bin.label = '[' + formatter(bin.lowBound) + ' - ' +
-            formatter(bin.highBound);
+          bin.label = '[' + formatValue(bin.lowBound) + ' - ' +
+            formatValue(bin.highBound);
           if (index === histogram[attrName].length - 1) {
             bin.label += ']';
           } else {

app/resonant-laboratory/scripts/populateGirder.py

@@ -200,7 +200,13 @@ def createMongoCollections(args, host, datasets, dbId, parentId):
         'table': json.dumps(collectionNames),
         'parentType': 'collection'
     }
-    gc.sendRestRequest('PUT', 'database_assetstore/' + dbId + '/import', parameters)
+    if (len(collectionNames) > 0):
+        gc.sendRestRequest('PUT', 'database_assetstore/' + dbId + '/import', parameters)
+    else:
+        # We don't actually have any mongo collections... make a fake folder as if we did
+        del parameters['table']
+        parameters['name'] = args.dbName
+        gc.sendRestRequest('POST', 'folder', parameters)
 
     # This will create a folder named args.dbName inside the
     # Resonant Laboratory library collection; we want to rename that
@@ -341,6 +347,7 @@ def cacheBasicInfo(datasets):
     # Set up the datasets
     datasets = getDatasets()
     datasetIdLookup = {}
+
     # Mongo datasets first
     dbAssetstoreId, dbAssetstoreHost = getDBassetstore(gc, args.dbAssetstoreId)
     dataFolderId, datasetIdLookup = createMongoCollections(args,

app/resonant-laboratory/server/datasetItem.py

@@ -97,7 +97,9 @@ def mapReduceViaDownload(self, item, user, mapScript, reduceScript, params):
 
         extraParameters = {
             'fileType': item['meta']['rlab']['format'],
-            'outputType': 'jsonlines'
+            'outputType': 'jsonlines',
+            'limit': params.get('limit', None),
+            'offset': params.get('offset', 0)
         }
         if 'filter' in params and params['filter'] is not None:
             extraParameters['filter'] = params['filter']
@@ -107,12 +109,14 @@ def mapReduceViaDownload(self, item, user, mapScript, reduceScript, params):
                                           level=AccessType.READ,
                                           user=user,
                                           exc=True)
-        stream = self.model('file').download(fileObj, headers=False, extraParameters=extraParameters)
+        stream = self.model('file').download(fileObj,
+                                             headers=False,
+                                             extraParameters=extraParameters)
 
         # Because we already used the offset and limit params in the download endpoint,
         # the mapReduce code should run on the full result
         params['offset'] = 0
-        params['limit'] = 0
+        params['limit'] = None
 
         # Stitch together the code for running via PyExecJS
         paramsCode = json.dumps(params, indent=2, separators=(',', ': '))
@@ -338,10 +342,10 @@ def fillInDefaultHistogramParams(self, item, params):
         params['filter'] = params.get('filter', None)
         if params['filter'] is not None:
             params['filter'] = json.loads(params['filter'])
-        params['limit'] = params.get('limit', None)
+        params['limit'] = int(params.get('limit', 0))
         if params['limit'] == 0:
             params['limit'] = None
-        params['offset'] = params.get('offset', 0)
+        params['offset'] = int(params.get('offset', 0))
 
         binSettings = json.loads(params.get('binSettings', '{}'))
         for attrName, attrSchema in item['meta']['rlab']['schema'].iteritems():

app/resonant-laboratory/views/layout/Overlay/reallyBadErrorTemplate.html

@@ -16,7 +16,7 @@ <h1>
   </details>
   <p>
     This is a problem we didn't anticipate. Please
-    <a href="<%= bugReportLink %>" target="_blank">let us know</a>that this happened.
+    <a href="<%= bugReportLink %>" target="_blank">let us know</a> that this happened.
   </p>
   <button id="okButton">OK</button>
 </div>

app/resonant-laboratory/views/layout/Overlay/style.scss

@@ -4,7 +4,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba($lightDisabledColor,0.95);
+  background-color: rgba($lightDisabledColor,0.85);
   z-index: 1108;
   overflow: auto;
 }

app/resonant-laboratory/views/widgets/DatasetView/index.js

@@ -213,12 +213,10 @@ let DatasetView = Widget.extend({
       window.mainPage.overlay.renderUserErrorScreen('There was a problem parsing the data; you\'ll probably need to reshape the data in order to use it.');
     } else if (this.status === STATUS.NO_ATTRIBUTES) {
       window.mainPage.overlay.renderUserErrorScreen('There was a problem parsing the data. Specifically, we\'re having trouble understanding the dataset attributes (usually column headers); you\'ll probably need to reshape the data in order to use it.');
+    } else if (this.status === STATUS.LOADING) {
+      window.mainPage.overlay.renderLoadingScreen('The dataset is still loading.');
     }
   },
-  renderEmptyState: function () {
-    this.$el.find('#datasetOverview, #tablePreview, #histogramPreview').hide();
-    this.$el.find('#noDatasetState').show();
-  },
   renderFilterPie: function (overviewCount, filteredCount, pageOffset, pageCount, radius) {
     // Draw a pie using the left square of space
     // I know, eww: a pie. But in this case,
@@ -525,7 +523,7 @@ let DatasetView = Widget.extend({
       .scale(yScale)
       .orient('left')
       .ticks(Math.min(4, scale.yMax))
-      .tickFormat(d3.format('0.3s'));
+      .tickFormat(d3.format('s'));
     let yAxisObj = svg.select('.yAxis')
       .attr('transform', 'translate(' + scale.leftAxisPadding + ',0)')
       .call(yAxis);
@@ -926,7 +924,7 @@ let DatasetView = Widget.extend({
 
     datasetPromise.then(datasetObj => {
       if (!datasetObj) {
-        this.renderEmptyState();
+        this.$el.find('#noDatasetState').show();
         this.status = STATUS.NO_DATA;
         this.statusText.text = 'No file loaded';
         this.renderIndicators();

app/resonant-laboratory/views/widgets/DatasetView/template.html

@@ -1,5 +1,5 @@
-<img id="noDatasetState" class="emptyStateHelper" src="../../../images/emptyState/noDataset.svg"/>
-<div id="datasetOverview">
+<img id="noDatasetState"  style="display: none;" class="emptyStateHelper" src="../../../images/emptyState/noDataset.svg"/>
+<div id="datasetOverview" style="display: none;">
   <svg>
     <g id="connector"></g>
     <g id="filterPie"></g>
@@ -41,9 +41,9 @@
     </g>
   </svg>
 </div>
-<div id="histogramPreview">
+<div id="histogramPreview" style="display: none;">
 </div>
-<div id="tablePreview">
+<div id="tablePreview" style="display: none;">
   <div id="dataTableContainer">
     <table id="dataTable">
       <tbody>

app/resonant-laboratory/views/widgets/MatchingView/index.js

@@ -100,6 +100,10 @@ let MatchingView = Widget.extend({
     this.status = STATUS.NOTHING_TO_MAP;
 
     if (window.mainPage.project) {
+      this.stopListening(window.mainPage.project, 'rl:changeDatasets');
+      this.listenTo(window.mainPage.project, 'rl:changeDatasets',
+        this.render);
+
       this.stopListening(window.mainPage.project, 'rl:changeMatchings');
       this.listenTo(window.mainPage.project, 'rl:changeMatchings', () => {
         this.selection = null;
@@ -129,6 +133,8 @@ Still accessing this project's matching settings...`);
       window.mainPage.overlay.renderUserErrorScreen(`
 You need to choose both a Dataset and a Visualization
 in order to connect them together.`);
+    } else if (this.status === STATUS.LOADING) {
+      window.mainPage.overlay.renderLoadingScreen('Still loading needed information.');
     }
   },
   getTips: function () {

app/resonant-laboratory/views/widgets/VisualizationView/index.js

@@ -113,6 +113,8 @@ let VisualizationView = Widget.extend({
       window.mainPage.overlay.renderUserErrorScreen('This visualization needs more data matchings. Make sure there are no orange circles in the Matching panel.');
     } else if (this.status === STATUS.FAILED_RENDER) {
       window.mainPage.overlay.renderReallyBadErrorScreen('There was a failure in attempting to render the visualization. There may be some hints in the developer console.');
+    } else if (this.status === STATUS.LOADING) {
+      window.mainPage.overlay.renderLoadingScreen('The visualization is still loading.');
     }
   },
   render: Underscore.debounce(function () {
@@ -164,11 +166,9 @@ let VisualizationView = Widget.extend({
       // Okay, now ask the project if it has any new data for
       // us (changing the matchings, editing the data, or grabbing
       // a new dataset will invalidate the parsed cache).
-      if (widgetIsShowing) {
-        this.vis.component.render();
-      }
       this.status = STATUS.LOADING;
       this.statusText.text = 'Loading...';
+      this.$el.find('#visualization, #noVisualizationState').hide();
       this.renderIndicators();
       window.mainPage.project.shapeDataForVis().then(data => {
         widgetIsShowing = this.isTargeted();
@@ -192,7 +192,6 @@ let VisualizationView = Widget.extend({
           if (!successfullyUpdated) {
             // Nuke the vis and start fresh
             this.$el.html(myTemplate);
-            this.$el.find('#noVisualizationState').hide();
             try {
               this.vis.component = new candela.components[this.vis.spec.name](
                 '#' + this.spec.hashName + 'Container .visualization', options);
@@ -206,6 +205,8 @@ let VisualizationView = Widget.extend({
             }
           }
           this.vis.component.render();
+          this.$el.find('#noVisualizationState').hide();
+          this.$el.find('#visualization').show();
         }
         // Okay, finally change the status if there aren't enough mappings
         // (for now, the empty state is the partially-rendered visualization...

app/resonant-laboratory/views/widgets/Widget/index.js

@@ -6,6 +6,7 @@ import warningIcon from '../../../images/warning.svg';
 import infoIcon from '../../../images/info.svg';
 import swapIcon from '../../../images/swap.svg';
 import settingsIcon from '../../../images/gear.svg';
+import './style.scss';
 
 let Widget = Backbone.View.extend({
   initialize: function (spec) {

app/resonant-laboratory/views/widgets/Widget/style.scss

@@ -0,0 +1,11 @@
+@import '../../../stylesheets/colors.scss';
+
+#WidgetPanels #spinnerWatermark {
+  position: absolute;
+  top: calc(50% - 1.5em);
+  left: calc(50% - 1.5em);
+  width: 3em;
+  height: 3em;
+  -webkit-filter: imgColorFilter($watermarkColor);
+  filter: imgColorFilter($watermarkColor);
+}