Merge pull request #2558 from OpenRefine/issue-2553

Implementation of #2553: Implementation of minimize facets

main/webapp/modules/core/langs/translation-en.json

@@ -286,6 +286,7 @@
     "core-dialogs/choose-export-destination": "Please choose the destination for project export",
     "core-dialogs/export-to-local": "OpenRefine project archive to file",
     "core-facets/remove-facet": "Remove this facet",
+    "core-facets/minimize-facet": "Toggle between the minimization and maximization of this facet",
     "core-facets/reset": "reset",
     "core-facets/invert": "invert",
     "core-facets/change": "change",

main/webapp/modules/core/langs/translation-es.json

@@ -310,6 +310,7 @@
     "core-facets/facet-by-count": "Facetas por conteo de opciones",
     "core-facets/linear-plot": "Gráfica lineal",
     "core-facets/rotated-clock": "Girar 45° en dirección de las manecillas de reloj",
+    "core-facets/remove-facet": "Alternar la minimización y la maximización de esta faceta",
     "core-facets/remove-facet": "Quitar esta faceta",
     "core-facets/too-many-choices": "opciones en total, son muchas para mostrar",
     "core-facets/time": "Hora",

main/webapp/modules/core/langs/translation-fr.json

@@ -296,6 +296,7 @@
     "core-facets/reset": "réinitialiser",
     "core-facets/time": "Date",
     "core-facets/remove-facet": "Supprimer cette facette",
+    "core-facets/remove-facet": "Permuter la minimisation ou la maximisation de cette facette",
     "core-facets/non-time": "Non-date",
     "core-facets/linear-plot-abbr": "lin",
     "core-facets/small-dot": "Point de petite taille",

main/webapp/modules/core/scripts/facets/list-facet.js

@@ -44,6 +44,9 @@ function ListFacet(div, config, options, selection) {
   }
 
   this._selection = selection || [];
+
+  this._minimizeState = false;
+
   this._blankChoice = (config.selectBlank) ? { s : true, c : 0 } : null;
   this._errorChoice = (config.selectError) ? { s : true, c : 0 } : null;
 
@@ -146,29 +149,34 @@ ListFacet.prototype._initializeUI = function() {
   var facet_id = this._div.attr("id");
 
   this._div.empty().show().html(
-      '<div class="facet-title" bind="facetTitle">' +
-        '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
-          '<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
-          '<td>' +
-            '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
-            '<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
-            '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
-            '<span bind="titleSpan"></span>' +
-          '</td>' +
-        '</tr></table></div>' +
-      '</div>' +
-      '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
-      '<div class="facet-controls" bind="controlsDiv" style="display:none;">' +
-        '<a bind="choiceCountContainer" class="action" href="javascript:{}"></a> ' +
-        '<span class="facet-controls-sortControls" bind="sortGroup">'+$.i18n('core-facets/sort-by')+': ' +
-          '<a href="javascript:{}" bind="sortByNameLink">'+$.i18n('core-facets/name')+'</a>' +
-          '<a href="javascript:{}" bind="sortByCountLink">'+$.i18n('core-facets/count')+'</a>' +
-        '</span>' +
-        '<button bind="clusterLink" class="facet-controls-button button">'+$.i18n('core-facets/cluster')+'</button>' +
-      '</div>' +
-      '<div class="facet-body" bind="bodyDiv">' +
-        '<div class="facet-body-inner" bind="bodyInnerDiv"></div>' +
-      '</div>'
+    '<div class="facet-title" bind="facetTitle">' +
+      '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
+          '<span bind="titleSpan"></span>' +
+        '</td>' +
+      '</tr></table></div>' +
+    '</div>' +
+    '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
+    '<div class="facet-controls" bind="controlsDiv" style="display:none;">' +
+      '<a bind="choiceCountContainer" class="action" href="javascript:{}"></a> ' +
+      '<span class="facet-controls-sortControls" bind="sortGroup">'+$.i18n('core-facets/sort-by')+': ' +
+        '<a href="javascript:{}" bind="sortByNameLink">'+$.i18n('core-facets/name')+'</a>' +
+        '<a href="javascript:{}" bind="sortByCountLink">'+$.i18n('core-facets/count')+'</a>' +
+      '</span>' +
+      '<button bind="clusterLink" class="facet-controls-button button">'+$.i18n('core-facets/cluster')+'</button>' +
+    '</div>' +
+    '<div class="facet-body" bind="bodyDiv">' +
+      '<div class="facet-body-inner" bind="bodyInnerDiv"></div>' +
+    '</div>'
   );
   this._elmts = DOM.bind(this._div);
 
@@ -180,8 +188,10 @@ ListFacet.prototype._initializeUI = function() {
       }
     });
   });
+  
   this._elmts.expressionDiv.text(this._config.expression).hide().click(function() { self._editExpression(); });
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
   this._elmts.resetButton.click(function() { self._reset(); });
   this._elmts.invertButton.click(function() { self._invert(); });
 
@@ -674,6 +684,16 @@ ListFacet.prototype._remove = function() {
   this._data = null;
 };
 
+ListFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 ListFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/range-facet.js

@@ -36,6 +36,8 @@ function RangeFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._from = ("from" in this._config) ? this._config.from : null;
   this._to = ("to" in this._config) ? this._config.to : null;
 
@@ -130,25 +132,30 @@ RangeFacet.prototype._initializeUI = function() {
   .empty()
   .show()
   .html(
-      '<div class="facet-title" bind="headerDiv">' +
+    '<div class="facet-title" bind="headerDiv">' +
       '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
-      '<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
-      '<td>' +
-      '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
-      '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
-      '<span bind="facetTitle"></span>' +
-      '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
+          '<span bind="facetTitle"></span>' +
+        '</td>' +
       '</tr></table></div>' +
-      '</div>' +
-      '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
+    '</div>' +
+    '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
       '<div class="facet-range-body">' +
-      '<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
-      '<div class="facet-range-slider" bind="sliderWidgetDiv">' +
-      '<div class="facet-range-histogram" bind="histogramDiv"></div>' +
+        '<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
+        '<div class="facet-range-slider" bind="sliderWidgetDiv">' +
+        '<div class="facet-range-histogram" bind="histogramDiv"></div>' +
       '</div>' +
       '<div class="facet-range-status" bind="statusDiv"></div>' +
       '<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
-      '</div>'
+    '</div>'
   );
   this._elmts = DOM.bind(this._div);
 
@@ -168,9 +175,9 @@ RangeFacet.prototype._initializeUI = function() {
     self.reset();
     self._updateRest();
   });
-  this._elmts.removeButton.click(function() {
-    self._remove();
-  });
+  
+  this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
 
   this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#bbccff", "#88aaee" ] });
   this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
@@ -368,6 +375,16 @@ RangeFacet.prototype._remove = function() {
   this._data = null;
 };
 
+RangeFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 RangeFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/scatterplot-facet.js

@@ -36,6 +36,8 @@ function ScatterplotFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._error = false;
   this._initializedUI = false;
 }
@@ -91,53 +93,60 @@ ScatterplotFacet.prototype._initializeUI = function() {
   var facet_id = container.attr("id");
 
   this._div.empty().show().html(
-      '<div class="facet-title">' +
+    '<div class="facet-title">' +
       '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
-      '<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
-      '<td>' +
-      '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
-      '<span bind="titleSpan"></span>' +
-      '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
+          '<span bind="titleSpan"></span>' +
+        '</td>' +
       '</tr></table></div>' +
-      '</div>' +
-      '<div class="facet-scatterplot-body" bind="bodyDiv">' +
+    '</div>' +
+    '<div class="facet-scatterplot-body" bind="bodyDiv">' +
       '<div class="facet-scatterplot-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
       '<table width="100%"><tr>' + 
-      '<td>' +
-      '<div class="facet-scatterplot-plot-container">' +
-      '<div class="facet-scatterplot-plot" bind="plotDiv">' +
-      '<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
-      '<img class="facet-scatterplot-image" bind="plotImg" />' +
-      '</div>' +
-      '</div>' +
-      '</td>' +
-      '<td class="facet-scatterplot-selectors-container" width="100%">' +
-      '<div class="scatterplot-selectors" bind="selectors">' +
-      '<div class="buttonset scatterplot-dim-selector">' +
-      '<input type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
-      '<input type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
-      '</div>' + 
-      '<div class="buttonset scatterplot-rot-selector">' +
-      '<input type="radio" id="' + facet_id + '-rot-ccw"  name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'">&nbsp;</label>' +
-      '<input type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'">&nbsp;</label>' +
-      '<input type="radio" id="' + facet_id + '-rot-cw"   name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'">&nbsp;</label>' +
-      '</div>' +
-      '<div class="buttonset scatterplot-dot-selector">' +
-      '<input type="radio" id="' + facet_id + '-dot-small"   name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'">&nbsp;</label>' +
-      '<input type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'">&nbsp;</label>' +
-      '<input type="radio" id="' + facet_id + '-dot-big"     name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'">&nbsp;</label>' +
-      '</div>' +
-      '<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
-      '</div>' +
-      '</td>' + 
+        '<td>' +
+          '<div class="facet-scatterplot-plot-container">' +
+          '<div class="facet-scatterplot-plot" bind="plotDiv">' +
+          '<img class="facet-scatterplot-image" bind="plotBaseImg" />' +
+          '<img class="facet-scatterplot-image" bind="plotImg" />' +
+          '</div>' +
+          '</div>' +
+        '</td>' +
+        '<td class="facet-scatterplot-selectors-container" width="100%">' +
+          '<div class="scatterplot-selectors" bind="selectors">' +
+            '<div class="buttonset scatterplot-dim-selector">' +
+              '<input type="radio" id="' + facet_id + '-dim-lin" name="' + facet_id + '-dim" value="lin"/><label class="dim-lin-label" for="' + facet_id + '-dim-lin" title="'+$.i18n('core-facets/linear-plot')+'">'+$.i18n('core-facets/linear-plot-abbr')+'</label>' +
+              '<input type="radio" id="' + facet_id + '-dim-log" name="' + facet_id + '-dim" value="log"/><label class="dim-log-label" for="' + facet_id + '-dim-log" title="'+$.i18n('core-facets/logar-plot')+'">'+$.i18n('core-facets/logar-plot-abbr')+'</label>' +
+            '</div>' + 
+            '<div class="buttonset scatterplot-rot-selector">' +
+              '<input type="radio" id="' + facet_id + '-rot-ccw"  name="' + facet_id + '-rot" value="ccw"/><label class="rot-ccw-label" for="' + facet_id + '-rot-ccw" title="'+$.i18n('core-facets/rotated-counter-clock')+'">&nbsp;</label>' +
+              '<input type="radio" id="' + facet_id + '-rot-none" name="' + facet_id + '-rot" value="none"/><label class="rot-none-label" for="' + facet_id + '-rot-none" title="'+$.i18n('core-facets/no-rotation')+'">&nbsp;</label>' +
+              '<input type="radio" id="' + facet_id + '-rot-cw"   name="' + facet_id + '-rot" value="cw"/><label class="rot-cw-label" for="' + facet_id + '-rot-cw" title="'+$.i18n('core-facets/rotated-clock')+'">&nbsp;</label>' +
+            '</div>' +
+            '<div class="buttonset scatterplot-dot-selector">' +
+              '<input type="radio" id="' + facet_id + '-dot-small"   name="' + facet_id + '-dot" value="small"/><label class="dot-small-label" for="' + facet_id + '-dot-small" title="'+$.i18n('core-facets/small-dot')+'">&nbsp;</label>' +
+              '<input type="radio" id="' + facet_id + '-dot-regular" name="' + facet_id + '-dot" value="regular"/><label class="dot-regular-label" for="' + facet_id + '-dot-regular" title="'+$.i18n('core-facets/regular-dot')+'">&nbsp;</label>' +
+              '<input type="radio" id="' + facet_id + '-dot-big"     name="' + facet_id + '-dot" value="big"/><label class="dot-big-label" for="' + facet_id + '-dot-big" title="'+$.i18n('core-facets/big-dot')+'">&nbsp;</label>' +
+            '</div>' +
+            '<div class="scatterplot-export-plot"><a bind="exportPlotLink" class="action" target="_blank">'+$.i18n('core-facets/export-plot')+'</a></div>' +
+          '</div>' +
+        '</td>' + 
       '</tr></table>' +
       '<div class="facet-scatterplot-status" bind="statusDiv"></div>' +
-      '</div>'
+    '</div>'
   );
   this._elmts = DOM.bind(this._div);
 
   this._elmts.titleSpan.text(this._config.name);
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
+  
   this._elmts.resetButton.click(function() {
     self.reset();
     self._updateRest();
@@ -351,6 +360,16 @@ ScatterplotFacet.prototype._remove = function() {
   this._config = null;
 };
 
+ScatterplotFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 ScatterplotFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/scripts/facets/text-search-facet.js

@@ -40,6 +40,8 @@ function TextSearchFacet(div, config, options) {
 
   this._options = options;
 
+  this._minimizeState = false;
+
   this._query = config.query || null;
   this._timerID = null;
 
@@ -89,25 +91,30 @@ TextSearchFacet.prototype._initializeUI = function() {
   var self = this;
   var counter = this._uniqueIdForLabels();
   this._div.empty().show().html(
-      '<div class="facet-title" bind="facetTitle">' + 
+    '<div class="facet-title" bind="facetTitle">' + 
       '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
-      '<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
-      '<td>' +
-            '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
-            '<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
-            '<span bind="titleSpan"></span>' +
-      '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="invertButton">'+$.i18n('core-facets/invert')+'</a>' +
+          '<span bind="titleSpan"></span>' +
+        '</td>' +
       '</tr></table></div>' +
-      '</div>' +
-      '<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
+    '</div>' +
+    '<div class="facet-text-body"><div class="grid-layout layout-tightest layout-full"><table>' +
       '<tr><td colspan="4"><div class="input-container"><input bind="input" /></div></td></tr>' +
       '<tr>' +
-      '<td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" id="caseSensitiveCheckbox'+counter+'" /></td>' +
-      '<td><label for="caseSensitiveCheckbox'+counter+'">'+$.i18n('core-facets/case-sensitive')+'</label></td>' +
-      '<td width="1%"><input type="checkbox" bind="regexCheckbox" id="regexCheckbox'+counter+'" /></td>' +
-      '<td><label for="regexCheckbox'+counter+'">'+$.i18n('core-facets/regular-exp')+'</label></td>' +
+        '<td width="1%"><input type="checkbox" bind="caseSensitiveCheckbox" id="caseSensitiveCheckbox'+counter+'" /></td>' +
+        '<td><label for="caseSensitiveCheckbox'+counter+'">'+$.i18n('core-facets/case-sensitive')+'</label></td>' +
+        '<td width="1%"><input type="checkbox" bind="regexCheckbox" id="regexCheckbox'+counter+'" /></td>' +
+        '<td><label for="regexCheckbox'+counter+'">'+$.i18n('core-facets/regular-exp')+'</label></td>' +
       '</tr>' +
-      '</table></div></div>'
+    '</table></div>'
   );
 
   this._elmts = DOM.bind(this._div);
@@ -121,6 +128,7 @@ TextSearchFacet.prototype._initializeUI = function() {
   }
 
   this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
   this._elmts.resetButton.click(function() { self._reset(); });
   this._elmts.invertButton.click(function() { self._invert(); });
 
@@ -186,6 +194,16 @@ TextSearchFacet.prototype._remove = function() {
   this._options = null;
 };
 
+TextSearchFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 TextSearchFacet.prototype._update = function () {
   var invert = this._config.invert;
   if (invert) {

main/webapp/modules/core/scripts/facets/timerange-facet.js

@@ -36,6 +36,8 @@ function TimeRangeFacet(div, config, options) {
   this._config = config;
   this._options = options;
 
+  this._minimizeState = false;
+
   this._from = ("from" in this._config) ? this._config.from : null;
   this._to = ("to" in this._config) ? this._config.to : null;
   this._step = ("step" in this._config) ? this._config.step : null;
@@ -131,25 +133,30 @@ TimeRangeFacet.prototype._initializeUI = function() {
   .empty()
   .show()
   .html(
-      '<div class="facet-title" bind="headerDiv">' +
+    '<div class="facet-title" bind="headerDiv">' +
       '<div class="grid-layout layout-tightest layout-full"><table><tr>' +
-      '<td width="1%"><a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a></td>' +
-      '<td>' +
-      '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
-      '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
-      '<span bind="facetTitle"></span>' +
-      '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/remove-facet')+'" class="facet-title-remove" bind="removeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td width="1%">' +
+          '<a href="javascript:{}" title="'+$.i18n('core-facets/minimize-facet')+'" class="facet-title-minimize" bind="minimizeButton">&nbsp;</a>' +
+        '</td>' +
+        '<td>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="resetButton">'+$.i18n('core-facets/reset')+'</a>' +
+          '<a href="javascript:{}" class="facet-choice-link" bind="changeButton">'+$.i18n('core-facets/change')+'</a>' +
+          '<span bind="facetTitle"></span>' +
+        '</td>' +
       '</tr></table></div>' +
-      '</div>' +
-      '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
-      '<div class="facet-range-body">' +
+    '</div>' +
+    '<div class="facet-expression" bind="expressionDiv" title="'+$.i18n('core-facets/click-to-edit')+'"></div>' +
+    '<div class="facet-range-body">' +
       '<div class="facet-range-message" bind="messageDiv">'+$.i18n('core-facets/loading')+'</div>' +
       '<div class="facet-range-slider" bind="sliderWidgetDiv">' +
-      '<div class="facet-range-histogram" bind="histogramDiv"></div>' +
+        '<div class="facet-range-histogram" bind="histogramDiv"></div>' +
       '</div>' +
       '<div class="facet-range-status" bind="statusDiv"></div>' +
       '<div class="facet-range-other-choices" bind="otherChoicesDiv"></div>' +
-      '</div>'
+    '</div>'
   );
   this._elmts = DOM.bind(this._div);
 
@@ -169,9 +176,9 @@ TimeRangeFacet.prototype._initializeUI = function() {
     self.reset();
     self._updateRest();
   });
-  this._elmts.removeButton.click(function() {
-    self._remove();
-  });
+  
+  this._elmts.removeButton.click(function() { self._remove(); });
+  this._elmts.minimizeButton.click(function() { self._minimize(); });
 
   this._histogram = new HistogramWidget(this._elmts.histogramDiv, { binColors: [ "#ccccff", "#6666ff" ] });
   this._sliderWidget = new SliderWidget(this._elmts.sliderWidgetDiv);
@@ -320,16 +327,18 @@ TimeRangeFacet.prototype.updateState = function(data) {
     case "min":
       this._from = Math.max(data.from, this._config.min);
       break;
+      
     case "max":
       this._to = Math.min(data.to, this._config.max);
       break;
+      
     default:
       this._from = Math.max(data.from, this._config.min);
-    if ("to" in data) {
-      this._to = Math.min(data.to, this._config.max);
-    } else {
-      this._to = data.max;
-    }
+      if ("to" in data) {
+        this._to = Math.min(data.to, this._config.max);
+      } else {
+        this._to = data.max;
+      }
     }
 
     this._baseTimeCount = data.baseTimeCount;
@@ -396,6 +405,16 @@ TimeRangeFacet.prototype._remove = function() {
   this._data = null;
 };
 
+TimeRangeFacet.prototype._minimize = function() {
+  if(!this._minimizeState) {
+    this._div.addClass("facet-state-minimize");
+  } else {
+    this._div.removeClass("facet-state-minimize");
+  }
+  
+  this._minimizeState = !this._minimizeState;
+};
+
 TimeRangeFacet.prototype._updateRest = function() {
   Refine.update({ engineChanged: true });
 };

main/webapp/modules/core/styles/project/facets.less

@@ -77,6 +77,34 @@ a.facet-title-remove:hover {
   background-position: -12px 0px;
   }
 
+li.facet-state-minimize {
+  height: 22px;
+  overflow: hidden;
+}
+
+a.facet-title-minimize {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin: 2px 0 0 0;
+  text-decoration: none;
+  background-image: url(../../images/minimize-map.png);
+  background-repeat: no-repeat;
+  background-position: -0px 0px;
+  }
+
+a.facet-title-minimize:hover {
+  background-position: -12px 0px;
+  }
+
+li.facet-state-minimize a.facet-title-minimize {
+  background-position: -24px 0px;
+  }
+
+li.facet-state-minimize a.facet-title-minimize:hover {
+  background-position: -36px 0px;
+  }
+
 .facet-expression {
   padding: 3px 5px;
   font-family: monospace;