@aibsweb/faceted-search/lib/components/pivot-table/pivot-table.js

A generalized faceted search application.

"use strict";

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

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

var _ScrollSync = require("react-virtualized/dist/es/ScrollSync");

var _Grid = require("react-virtualized/dist/es/Grid");

var _AutoSizer = require("react-virtualized/dist/es/AutoSizer");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _get = _interopRequireDefault(require("lodash/get"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _d3Hierarchy = require("d3-hierarchy");

var _loadIndicator = _interopRequireDefault(require("../status/load-indicator"));

var _tooltip = _interopRequireDefault(require("./tooltip"));

var _dendrogram = _interopRequireDefault(require("./dendrogram/dendrogram"));

var _cellRenderers = require("./cell-renderers");

var _utils = require("./utils");

require("../../../scss/pivot-table.scss");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

var SCROLL_BAR_SPACE = 15;
exports.SCROLL_BAR_SPACE = SCROLL_BAR_SPACE;
var DENDROGRAM_HEIGHT = 100;
var DENDROGRAM_VERTICAL_OFFSET = 10;
/**
 * The pivot table component renders a set of tables with a common column header/dimension.
 *
 * @param {Object} props Component Props
 */

var PivotTable = function PivotTable(props) {
  var _props$store$pivotTab = props.store.pivotTable,
      _props$store$pivotTab2 = _props$store$pivotTab.columnMetadata,
      columnQueryKey = _props$store$pivotTab2.columnQueryKey,
      columnLabelAccessorKey = _props$store$pivotTab2.labelAccessorKey,
      columnColorAccessorKey = _props$store$pivotTab2.colorAccessorKey,
      columnAccessorKey = _props$store$pivotTab2.columnAccessorKey,
      parentAccessorKey = _props$store$pivotTab2.parentAccessorKey,
      sortAccessorKey = _props$store$pivotTab2.sortAccessorKey,
      idAccessorKey = _props$store$pivotTab2.idAccessorKey,
      cellHeight = _props$store$pivotTab.cellHeight,
      cellWidth = _props$store$pivotTab.cellWidth,
      tableMetadataList = _props$store$pivotTab.tableMetadataList,
      transform = props.transform; // transformed data

  var data = transform((0, _get["default"])(props, 'data', [])); // Check if data has loaded

  if ((0, _isEmpty["default"])(data)) {
    return _react["default"].createElement("div", {
      className: "pivot-table pivot-table--loading"
    }, _loadIndicator["default"]);
  }

  var dendrogramData = (0, _react.useMemo)(function () {
    // create hierarchy
    var hierarchy = (0, _d3Hierarchy.stratify)().id(function (d) {
      return d[columnAccessorKey];
    }).parentId(function (d) {
      return d[parentAccessorKey];
    })(data[columnQueryKey]); // sort hierarchy

    hierarchy.sort(function (a, b) {
      // If `a` is a leaf and `b` is not, compare `a` with `b`'s first sorted child
      if (!a.children && b.children) {
        return a.data[sortAccessorKey] - Math.min.apply(Math, _toConsumableArray(b.leaves().map(function (l) {
          return l.data[sortAccessorKey];
        })));
      } // No need to sort when `a` is non-leaf


      return 0;
    }); // return dendrogram layout with sorted hierarchy

    return (0, _d3Hierarchy.cluster)().size([cellWidth * hierarchy.leaves().length, DENDROGRAM_HEIGHT - DENDROGRAM_VERTICAL_OFFSET]).separation(function () {
      return 1;
    })(hierarchy);
  }, [data]); // column data from query

  var columnData = dendrogramData.leaves().map(function (d) {
    return d.data;
  }); // list of column label strings

  var columnLabels = columnData.map(function (datum) {
    return datum[columnLabelAccessorKey];
  }); // compute data to be used for left side row headers and main body table

  var _computeTableBodyData = (0, _utils.computeTableBodyData)(data, tableMetadataList, columnLabels, cellHeight, cellWidth),
      leftSideData = _computeTableBodyData.leftSideData,
      bodyData = _computeTableBodyData.bodyData;

  var leftColumnWidth = (0, _utils.getLongestRowLabelLength)(leftSideData);
  var rightColumnWidth = columnData.length * cellWidth;
  return _react["default"].createElement(_AutoSizer.AutoSizer, null, function (_ref) {
    var height = _ref.height,
        outerWidth = _ref.width;
    return _react["default"].createElement(_ScrollSync.ScrollSync, null, function (_ref2) {
      var onScroll = _ref2.onScroll,
          scrollLeft = _ref2.scrollLeft,
          scrollTop = _ref2.scrollTop;
      return _react["default"].createElement("div", {
        className: "grid-row"
      }, _react["default"].createElement("div", {
        className: "left-side-grid-container",
        style: {
          position: 'absolute',
          left: 0,
          top: 0
        }
      }, _react["default"].createElement(_Grid.Grid, {
        cellRenderer: _cellRenderers.renderLeftHeaderCell,
        className: "header-grid",
        columnCount: 1,
        columnWidth: leftColumnWidth,
        height: cellHeight + DENDROGRAM_HEIGHT,
        rowCount: 1,
        rowHeight: cellHeight + DENDROGRAM_HEIGHT,
        width: leftColumnWidth
      })), _react["default"].createElement("div", {
        className: "left-side-grid-container",
        style: {
          position: 'absolute',
          left: 0,
          top: cellHeight + DENDROGRAM_HEIGHT
        }
      }, _react["default"].createElement(_Grid.Grid, {
        cellRenderer: (0, _cellRenderers.renderLeftSideCell)(leftSideData),
        className: "left-side-grid",
        columnCount: 1,
        columnWidth: leftColumnWidth,
        height: height - cellHeight - SCROLL_BAR_SPACE - DENDROGRAM_HEIGHT,
        rowCount: leftSideData.length,
        rowHeight: cellHeight,
        scrollTop: scrollTop,
        width: leftColumnWidth
      })), _react["default"].createElement("div", {
        className: "grid-column",
        style: {
          position: 'absolute',
          left: leftColumnWidth,
          top: 0,
          width: outerWidth - leftColumnWidth
        }
      }, _react["default"].createElement(_AutoSizer.AutoSizer, {
        disableHeight: true
      }, function (_ref3) {
        var width = _ref3.width;
        return _react["default"].createElement("div", null, _react["default"].createElement("div", {
          style: {
            height: DENDROGRAM_HEIGHT,
            width: width
          }
        }, _react["default"].createElement(_dendrogram["default"], {
          className: "dendrogram",
          data: dendrogramData,
          dataAccessors: {
            id: idAccessorKey,
            label: columnLabelAccessorKey,
            key: columnAccessorKey
          },
          height: DENDROGRAM_HEIGHT,
          verticalOffset: DENDROGRAM_VERTICAL_OFFSET,
          scrollLeft: scrollLeft,
          width: width
        })), _react["default"].createElement("div", {
          style: {
            height: cellHeight,
            width: width
          }
        }, _react["default"].createElement(_Grid.Grid, {
          cellRenderer: (0, _cellRenderers.renderHeaderCell)(columnData, {
            color: columnColorAccessorKey,
            label: columnLabelAccessorKey
          }),
          className: "header-grid",
          columnCount: columnLabels.length,
          columnWidth: cellWidth,
          height: cellHeight,
          rowCount: 1,
          rowHeight: cellHeight,
          scrollLeft: scrollLeft,
          width: width - Math.max(scrollLeft - (rightColumnWidth - width), 0)
        })), _react["default"].createElement("div", {
          style: {
            height: height,
            width: width
          }
        }, _react["default"].createElement(_Grid.Grid, {
          cellRenderer: (0, _cellRenderers.renderBodyCell)(bodyData),
          className: "body-grid",
          columnCount: columnData.length,
          columnWidth: cellWidth,
          height: height - cellHeight - DENDROGRAM_HEIGHT,
          onScroll: onScroll,
          rowCount: bodyData.length,
          rowHeight: cellHeight,
          width: width
        })));
      })), _react["default"].createElement(_tooltip["default"], {
        tooltipId: "body",
        scrollLeft: scrollLeft - leftColumnWidth,
        scrollTop: scrollTop - DENDROGRAM_HEIGHT
      }), _react["default"].createElement(_tooltip["default"], {
        tooltipId: "header",
        scrollLeft: scrollLeft - leftColumnWidth,
        scrollTop: 0
      }), _react["default"].createElement(_tooltip["default"], {
        tooltipId: "title",
        scrollLeft: leftColumnWidth,
        scrollTop: scrollTop - DENDROGRAM_HEIGHT
      }));
    });
  });
};

PivotTable.propTypes = {
  data: _propTypes["default"].object,
  store: _propTypes["default"].object,
  transform: _propTypes["default"].func.isRequired,
  componentDefinition: _propTypes["default"].string,
  renderer: _propTypes["default"].string,
  className: _propTypes["default"].string,
  position: _propTypes["default"].number
};
var _default = PivotTable;
exports["default"] = _default;