Minor fixes to search layout and data histogram. #339

gui/src/components/search/Search.js

@@ -113,7 +113,7 @@ Search.propTypes = {
 const useSearchEntryStyles = makeStyles(theme => ({
   search: {
     marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(8),
+    marginBottom: theme.spacing(2),
     maxWidth: 1024,
     margin: 'auto',
     width: '100%'
@@ -130,7 +130,8 @@ const useSearchEntryStyles = makeStyles(theme => ({
     marginRight: 0
   },
   searchBar: {
-    marginTop: theme.spacing(1)
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
   },
   selectButton: {
     margin: theme.spacing(1)
@@ -227,7 +228,7 @@ function UsersVisualization() {
     // eslint-disable-next-line
   }, [])
   return <div>
-    <UploadsHistogram tooltips />
+    <UploadsHistogram tooltips initialScale={0.5} />
     <QuantityHistogram quantity="uploader" title="Uploader/origin" valueLabels={originLabels}/>
   </div>
 }
@@ -467,7 +468,9 @@ OwnerSelect.propTypes = {
 }
 
 const useSearchResultStyles = makeStyles(theme => ({
-  root: theme.spacing(4)
+  root: {
+    marginTop: theme.spacing(4)
+  }
 }))
 function SearchResults({availableTabs = ['entries'], initialTab = 'entries', resultListProps = {}}) {
   const classes = useSearchResultStyles()

gui/src/components/search/SearchBar.js

@@ -109,6 +109,12 @@ export default function SearchBar() {
   }, [api, currentLoadOptionsConfigRef, apiQuery, loading, setLoading])
 
   const getOptionLabel = useCallback(option => {
+    if (option.quantity === 'from_time' || option.quantity === 'until_time') {
+      if (option.value) {
+        return `${option.quantity.replace('_time', '')}=${option.value.substring(0, 10)}`
+      }
+    }
+
     let label = option.quantity + '='
     if (option.value) {
       if (Array.isArray(option.value)) {

gui/src/components/search/UploadsHistogram.js

@@ -12,6 +12,9 @@ const useStyles = makeStyles(theme => ({
   root: {
     marginTop: theme.spacing(2)
   },
+  header: {
+    paddingBottom: 0
+  },
   content: {
     paddingTop: 0,
     position: 'relative',
@@ -66,7 +69,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
       data = Object.keys(statistics.date_histogram).map(key => ({
         time: Dates.JSDate(parseInt(key)),
         value: statistics.date_histogram[key][metric]
-      }))
+      })).filter(d => d.value)
     }
 
     const fromTime = Dates.JSDate(response.from_time || Dates.dateHistogramStartDate)
@@ -89,7 +92,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
     const width = containerRef.current.offsetWidth
     const height = 250
     const marginRight = 32
-    const marginTop = 0
+    const marginTop = 16
     const marginBottom = 16
 
     const y = scalePow().range([height - marginBottom, marginTop]).exponent(scale)
@@ -132,14 +135,6 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
       .call(yAxis)
 
     const {label, shortLabel} = domain.searchMetrics[metric]
-    // svg.select('.ylabel').remove()
-    // svg.append('text')
-    //   .attr('class', 'ylabel')
-    //   .attr('x', 0)
-    //   .attr('y', 0)
-    //   .attr('dy', '1em')
-    //   .attr('font-size', '12px')
-    //   .text(`${shortLabel || label}`)
 
     let withData = svg
       .selectAll('.bar').remove().exit()
@@ -148,6 +143,15 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
     let item = withData.enter()
       .append('g')
 
+    item
+      .append('rect')
+      .attr('x', d => x(d.time) + 1)
+      .attr('y', y(max))
+      .attr('width', d => x(Dates.addSeconds(d.time, interval)) - x(d.time) - 2)
+      .attr('class', 'background')
+      .style('opacity', 0)
+      .attr('height', y(0) - y(max))
+
     item
       .append('rect')
       .attr('class', 'bar')
@@ -206,6 +210,7 @@ export default function UploadsHistogram({title = 'Uploads over time', initialSc
 
   return <Card classes={{root: classes.root}}>
     <CardHeader
+      classes={{root: classes.header}}
       title={title}
       titleTypographyProps={{variant: 'body1'}}
       action={(