@aibsweb/faceted-search/es/components/pivot-table/cell-renderers/bubble-cell-renderer.js

A generalized faceted search application.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _bubbleCell = _interopRequireDefault(require("../bubble-cell"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * Provides content for the tooltip.
 *
 * @param {number} value Aggregate value for the given cell. This is the number of cells.
 * @param {string} rowLabel  This cell's row label
 * @param {string} columnLabel This cell's column label
 * @param {string} rowDim This is the rowDimension i.e. Donor Name, Layer, Class, etc.
 */
var overlayContent = function overlayContent(datum, rowDim) {
  var tooltipProperties = [{
    name: 'Cluster',
    value: datum.columnValue
  }, {
    name: rowDim,
    value: datum.rowValue
  }, {
    name: 'Number of Cells',
    value: datum.count
  }];
  return _react["default"].createElement("ul", {
    className: "cell-tooltip"
  }, tooltipProperties.map(function (tooltipRow) {
    return _react["default"].createElement("li", {
      key: tooltipRow.name,
      className: "cell-tooltip__dims"
    }, _react["default"].createElement("span", {
      className: "cell-tooltip__label"
    }, tooltipRow.name, ":"), tooltipRow.value);
  }));
};

var onMouseEnter = function onMouseEnter(style, contentComponent, tooltipId) {
  return function (_ref) {
    var screenX = _ref.screenX,
        screenY = _ref.screenY;
    var customEvent = new CustomEvent("".concat(tooltipId, "_TOOLTIP_CHANGE"), {
      detail: {
        tooltipOpen: true,
        style: style,
        contentComponent: contentComponent,
        screenX: screenX,
        screenY: screenY
      }
    });
    document.dispatchEvent(customEvent);
  };
};

var onMouseLeave = function onMouseLeave(tooltipId) {
  return function () {
    var customEvent = new CustomEvent("".concat(tooltipId, "_TOOLTIP_CHANGE"), {
      detail: {
        tooltipOpen: false
      }
    });
    document.dispatchEvent(customEvent);
  };
};
/**
 * Cell Renderer for bubble pivot table.
 * This is a high-order function that takes the max data value and the max diameter for a circle
 * and also takes data as a 2d matrix
 * which returns a cellRenderer function compatible with
 * https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md#cellrenderer
 *
 * @param {Array} data - number[][]
 * @param {number} maxDataValue maximum numerical value in the dataset for this grid
 * @param {number} maxDiameter maximum diameter for a bubble
 * @param {string} dimensionFriendlyName friendly name of row dimension
 * @returns {Function} cellRenderer
 *      @param {Object}
 *      @param columnIndex - Horizontal (column) index of cell
 *      @param isScrolling - The Grid is currently being scrolled
 *      @param isVisible - This cell is visible within the grid (eg it is not an overscanned cell)
 *      @param key - Unique key within array of cells
 *      @param parent - Reference to the parent Grid (instance)
 *      @param rowIndex - Vertical (row) index of cell
 *      @param style -  Style object to be applied to cell (to position it)
 */


var bubbleCellRenderer = function bubbleCellRenderer(data, maxDataValue, maxDiameter, dimensionFriendlyName, tooltipId) {
  return function (props) {
    var columnIndex = props.columnIndex,
        key = props.key,
        rowIndex = props.rowIndex,
        style = props.style;
    var count = data[rowIndex][columnIndex].count;
    var tooltipContent = overlayContent(data[rowIndex][columnIndex], dimensionFriendlyName);
    return _react["default"].createElement("div", {
      className: "pivot-table__grid-cell",
      key: key,
      style: _objectSpread({}, style, {
        padding: 0
      }),
      onMouseEnter: onMouseEnter(style, tooltipContent, tooltipId),
      onMouseLeave: onMouseLeave(tooltipId)
    }, _react["default"].createElement(_bubbleCell["default"], {
      count: count,
      maxDataValue: maxDataValue,
      maxDiameter: maxDiameter
    }));
  };
};

var _default = bubbleCellRenderer;
exports["default"] = _default;