@attivio/suit/es/components/Facet.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';

import BarChartFacetContents from './BarChartFacetContents';
import Card from './Card';
import CollapsiblePanel from './CollapsiblePanel';
import DateFormat from '../api/DateFormat';
import DateUtils from '../util/DateUtils';
import FacetSearchBar from './FacetSearchBar';
import HierarchicalFacetContents from './HierarchicalFacetContents';
import ListWithBarsFacetContents from './ListWithBarsFacetContents';
import MapFacetContents from './MapFacetContents';
import MoreListFacetContents from './MoreListFacetContents';
import PieChartFacetContents from './PieChartFacetContents';
import SearchFacet from '../api/SearchFacet';
import SearchFacetBucket from '../api/SearchFacetBucket';
import SentimentFacetContents from './SentimentFacetContents';
import SentimentTagCloudFacetContents from './SentimentTagCloudFacetContents';
import TagCloudFacetContents from './TagCloudFacetContents';
import TimeSeriesFacetContents from './TimeSeriesFacetContents';

/**
 * Display a single facet from the search results.
 */
var Facet = (_temp = _class = function (_React$Component) {
  _inherits(Facet, _React$Component);

  Facet.isHierarchical = function isHierarchical(facet) {
    if (facet && facet.buckets) {
      // Look for a bucket that has child buckets
      var parentBucket = facet.buckets.find(function (bucket) {
        return bucket.children && bucket.children.length > 0;
      });
      return !!parentBucket;
    }
    return false;
  };

  function Facet(props) {
    _classCallCheck(this, Facet);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.addFacetFilter = _this.addFacetFilter.bind(_this);
    _this.addTimeSeriesFilter = _this.addTimeSeriesFilter.bind(_this);
    return _this;
  }

  Facet.prototype.addFacetFilter = function addFacetFilter(bucket, customBucketLabel) {
    var bucketLabel = void 0;
    if (this.props.positiveKeyphrases || this.props.negativeKeyphrases) {
      bucketLabel = customBucketLabel || bucket.value.displayLabel();
      if (bucket.sentiment === 'positive' && this.props.positiveKeyphrases) {
        this.context.searcher.addFacetFilter(this.props.positiveKeyphrases.findLabel(), bucketLabel, bucket.value.filter);
      } else if (bucket.sentiment === 'negative' && this.props.negativeKeyphrases) {
        this.context.searcher.addFacetFilter(this.props.negativeKeyphrases.findLabel(), bucketLabel, bucket.value.filter);
      }
    } else if (this.props.facet) {
      bucketLabel = customBucketLabel || bucket.displayLabel();
      this.context.searcher.addFacetFilter(this.props.facet.findLabel(), bucketLabel, bucket.filter);
    }
  };

  /**
   * Create a facet filter for the starting and ending dates...
   * If start is set but end is not, filters on the specific time
   * set by start, otherwises filters on the range. (If start is not
   * set, this simply returns).
   */


  Facet.prototype.addTimeSeriesFilter = function addTimeSeriesFilter(start, end) {
    var _this2 = this;

    if (start !== null) {
      var facetFilterString = void 0;
      var labelString = void 0;

      var startFacetFilterString = DateUtils.formatDate(start, DateFormat.ATTIVIO);
      var startLabelString = DateUtils.formatDate(start, DateFormat.MEDIUM);
      if (end !== null) {
        var endFacetFilterString = DateUtils.formatDate(end, DateFormat.ATTIVIO);
        var endLabelString = DateUtils.formatDate(end, DateFormat.MEDIUM);
        labelString = startLabelString + ' to ' + endLabelString;

        facetFilterString = this.props.facet.name + ':FACET(RANGE("' + startFacetFilterString + '", "' + endFacetFilterString + '", upper=inclusive))'; // eslint-disable-line max-len
      } else {
        labelString = startLabelString;
        facetFilterString = this.props.facet.name + ':FACET(RANGE("' + startFacetFilterString + '", ' + startFacetFilterString + ', upper=inclusive))'; // eslint-disable-line max-len
      }
      // If a timeseries filter for this facet is already applied,
      // remove it using removeFacetFilter() and repeatSearch = false.
      // And then add the new timeseries filter using addFacetFilter().
      // So, the search will not be repeated when the facet is removed,
      // but only when the new filter is added.
      // This would also ensure, signal for both removing and adding the filter is created.
      // Also, add the new filter only if the same filter is not already applied.
      var existingFilters = this.context.searcher.state.facetFilters;
      var label = this.props.facet ? this.props.facet.findLabel() : '';
      var sameFilterAlreadyExists = false;
      existingFilters.forEach(function (existingFilter) {
        if (existingFilter.facetName === label) {
          if (existingFilter.filter === facetFilterString) {
            sameFilterAlreadyExists = true;
            return;
          }
          _this2.context.searcher.removeFacetFilter(existingFilter, false);
        }
      });
      if (!sameFilterAlreadyExists) {
        this.context.searcher.addFacetFilter(label, labelString, facetFilterString);
      }
    }
  };

  Facet.prototype.render = function render() {
    var facetColors = this.props.entityColors;
    var facetColor = void 0;
    if (this.props.facet) {
      facetColor = facetColors.has(this.props.facet.field) ? facetColors.get(this.props.facet.field) : null;
    }

    var facetContents = void 0;
    if (this.props.type === 'sentimenttagcloud' && this.props.positiveKeyphrases && this.props.negativeKeyphrases) {
      if (this.props.positiveKeyphrases.buckets && this.props.negativeKeyphrases.buckets) {
        if (this.props.positiveKeyphrases.buckets.length > 0 || this.props.negativeKeyphrases.buckets.length > 0) {
          facetContents = React.createElement(SentimentTagCloudFacetContents, {
            positiveBuckets: this.props.positiveKeyphrases.buckets,
            negativeBuckets: this.props.negativeKeyphrases.buckets,
            maxBuckets: this.props.maxBuckets,
            addFacetFilter: this.addFacetFilter
          });
        }
      }
    }

    if (this.props.facet && this.props.facet.buckets && this.props.facet.buckets.length > 0) {
      if (Facet.isHierarchical(this.props.facet)) {
        // Hierarchical facets are a special case... ignore the type
        facetContents = React.createElement(HierarchicalFacetContents, {
          buckets: this.props.facet.buckets,
          addFacetFilter: this.addFacetFilter
        });
      } else {
        switch (this.props.type) {
          case 'barchart':
            facetContents = facetColor ? React.createElement(BarChartFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter,
              color: facetColor
            }) : React.createElement(BarChartFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter
            });
            break;
          case 'columnchart':
            facetContents = facetColor ? React.createElement(BarChartFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter,
              columns: true,
              color: facetColor
            }) : React.createElement(BarChartFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter,
              columns: true
            });
            break;
          case 'piechart':
            facetContents = React.createElement(PieChartFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter,
              entityColors: this.props.entityColors
            });
            break;
          case 'barlist':
            facetContents = facetColor ? React.createElement(ListWithBarsFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter,
              color: facetColor
            }) : React.createElement(ListWithBarsFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addFacetFilter
            });
            break;
          case 'tagcloud':
            facetContents = React.createElement(TagCloudFacetContents, {
              buckets: this.props.facet.buckets,
              maxBuckets: this.props.maxBuckets,
              addFacetFilter: this.addFacetFilter
            });
            break;
          case 'timeseries':
            facetContents = React.createElement(TimeSeriesFacetContents, {
              buckets: this.props.facet.buckets,
              addFacetFilter: this.addTimeSeriesFilter
            });
            break;
          case 'sentiment':
            facetContents = React.createElement(SentimentFacetContents, { buckets: this.props.facet.buckets, addFacetFilter: this.addFacetFilter });
            break;
          case 'geomap':
            facetContents = React.createElement(MapFacetContents, { buckets: this.props.facet.buckets, addFacetFilter: this.addFacetFilter });
            break;
          case 'list':
          default:
            {
              facetContents = React.createElement(
                FacetSearchBar,
                {
                  name: this.props.facet.field,
                  label: this.props.facet.label,
                  addFacetFilter: this.addFacetFilter
                },
                React.createElement(MoreListFacetContents, { buckets: this.props.facet.buckets, addFacetFilter: this.addFacetFilter })
              );
              break;
            }
        }
      }
    } else if (!this.props.positiveKeyphrases && !this.props.negativeKeyphrases) {
      facetContents = React.createElement(
        'span',
        { className: 'none' },
        'No values for this facet.'
      );
    }

    // Prefer the display name but fall back to the name field
    var label = this.props.facet ? this.props.facet.findLabel() : '';

    if (this.props.facet && this.props.collapse) {
      var collapsed = this.props.facet.buckets.length === 0;
      return React.createElement(
        CollapsiblePanel,
        { title: label, id: 'facet-' + this.props.facet.field, collapsed: collapsed },
        facetContents
      );
    }
    return React.createElement(
      Card,
      { title: label, borderless: !this.props.bordered, className: 'attivio-facet' },
      facetContents
    );
  };

  return Facet;
}(React.Component), _class.defaultProps = {
  type: 'list',
  maxBuckets: 15,
  collapse: false,
  bordered: false,
  entityColors: new Map()
}, _class.contextTypes = {
  searcher: PropTypes.any
}, _class.displayName = 'Facet', _temp);
export { Facet as default };