@deephaven/iris-grid 0.43.0 → 0.44.0

package/dist/IrisGridRenderer.js

@@ -0,0 +1,779 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint react/destructuring-assignment: "off" */
+/* eslint class-methods-use-this: "off" */
+/* eslint no-param-reassign: "off" */
+import { DEFAULT_FONT_WIDTH, GridRenderer, GridUtils } from '@deephaven/grid';
+import { TableUtils } from '@deephaven/jsapi-utils';
+import { assertNotNull, getOrThrow } from '@deephaven/utils';
+import IrisGridTextCellRenderer from "./IrisGridTextCellRenderer.js";
+import IrisGridDataBarCellRenderer from "./IrisGridDataBarCellRenderer.js";
+import { getIcon } from "./IrisGridIcons.js";
+var ICON_NAMES = Object.freeze({
+  SORT_UP: 'sortUp',
+  SORT_DOWN: 'sortDown',
+  CARET_DOWN: 'caretDown',
+  CARET_RIGHT: 'caretRight',
+  CELL_OVERFLOW: 'cellOverflow'
+});
+var EXPAND_ICON_SIZE = 10;
+/**
+ * Handles rendering some of the Iris specific features, such as sorting icons, sort bar display
+ * */
+class IrisGridRenderer extends GridRenderer {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "textCellRenderer", new IrisGridTextCellRenderer());
+    _defineProperty(this, "dataBarCellRenderer", new IrisGridDataBarCellRenderer());
+  }
+  static isFilterValid(advancedFilter, quickFilter) {
+    var isAdvancedFilterValid = advancedFilter == null || advancedFilter.filter != null;
+    var isQuickFilterValid = quickFilter == null || quickFilter.filter != null;
+    return isAdvancedFilterValid && isQuickFilterValid;
+  }
+  getSortIcon(sort) {
+    if (!sort) {
+      return null;
+    }
+    if (sort.direction === TableUtils.sortDirection.ascending) {
+      return getIcon(ICON_NAMES.SORT_UP);
+    }
+    if (sort.direction === TableUtils.sortDirection.descending) {
+      return getIcon(ICON_NAMES.SORT_DOWN);
+    }
+    return null;
+  }
+  drawCanvas(state) {
+    super.drawCanvas(state);
+    this.drawScrim(state);
+  }
+  drawGrid(context, state) {
+    super.drawGrid(context, state);
+    this.drawCellOverflowButton(state);
+  }
+  drawGridLines(context, state) {
+    super.drawGridLines(context, state);
+    this.drawGroupedColumnLine(context, state);
+    this.drawPendingRowLine(context, state);
+  }
+  drawCellContent(context, state, column, row) {
+    var {
+      metrics,
+      model
+    } = state;
+    var {
+      modelColumns,
+      modelRows
+    } = metrics;
+    var modelColumn = modelColumns.get(column);
+    var modelRow = getOrThrow(modelRows, row);
+    if (modelColumn === undefined) {
+      return;
+    }
+    var renderType = model.renderTypeForCell(modelColumn, modelRow);
+    var cellRenderer = this.getCellRenderer(renderType);
+    cellRenderer.drawCellContent(context, state, column, row);
+  }
+  getCellOverflowButtonPosition(_ref) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      theme
+    } = _ref;
+    return this.textCellRenderer.getCellOverflowButtonPosition(mouseX, mouseY, metrics, theme);
+  }
+  shouldRenderOverflowButton(state) {
+    return this.textCellRenderer.shouldRenderOverflowButton(state);
+  }
+  drawCellOverflowButton(state) {
+    var {
+      context,
+      mouseX,
+      mouseY,
+      theme
+    } = state;
+    if (mouseX == null || mouseY == null) return;
+    if (!this.shouldRenderOverflowButton(state)) {
+      return;
+    }
+    var {
+      left: buttonLeft,
+      top: buttonTop,
+      width: buttonWidth,
+      height: buttonHeight
+    } = this.getCellOverflowButtonPosition(state);
+    var {
+      cellHorizontalPadding,
+      overflowButtonColor,
+      overflowButtonHoverColor
+    } = theme;
+    context.save();
+    if (overflowButtonHoverColor != null && buttonLeft != null && buttonWidth != null && buttonTop != null && buttonHeight != null && mouseX >= buttonLeft && mouseX <= buttonLeft + buttonWidth && mouseY >= buttonTop && mouseY <= buttonTop + buttonHeight) {
+      context.fillStyle = overflowButtonHoverColor;
+    } else if (overflowButtonColor != null) {
+      context.fillStyle = overflowButtonColor;
+    }
+    var icon = getIcon(ICON_NAMES.CELL_OVERFLOW);
+    if (buttonLeft != null && buttonTop != null) {
+      context.translate(buttonLeft + cellHorizontalPadding, buttonTop + 2);
+    }
+    context.fill(icon);
+    context.restore();
+  }
+  drawGroupedColumnLine(context, state) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      groupedColumns
+    } = model;
+    var {
+      maxY,
+      allColumnWidths,
+      allColumnXs
+    } = metrics;
+    if (groupedColumns.length === 0 || theme.groupedColumnDividerColor == null) {
+      return;
+    }
+
+    // This assumes that the engine puts the grouped columns at the start of the
+    // model, so model and visible index match for grouped columns. If we ever
+    // add freeze support for tree tables or allow moving the grouped columns,
+    // this assumption may no longer hold true. If such a change occurs, we'll
+    // need to revisit this since a single vertical divider may no longer make
+    // sense.
+    var lastVisibleGroupColumnIndex = groupedColumns.length - 1;
+    var columnX = allColumnXs.get(lastVisibleGroupColumnIndex);
+    var columnWidth = allColumnWidths.get(lastVisibleGroupColumnIndex);
+    if (columnX == null || columnWidth == null) {
+      return;
+    }
+    var x = columnX + columnWidth + 0.5;
+    context.strokeStyle = theme.groupedColumnDividerColor;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(x, 0);
+    context.lineTo(x, maxY);
+    context.stroke();
+  }
+  drawPendingRowLine(context, state) {
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      allRowYs,
+      maxX
+    } = metrics;
+    var {
+      pendingRowCount
+    } = model;
+    if (pendingRowCount <= 0) {
+      return;
+    }
+    var firstPendingRow = model.rowCount - model.pendingRowCount - model.floatingBottomRowCount;
+    var y = allRowYs.get(firstPendingRow);
+    if (y == null) {
+      return;
+    }
+    y -= 0.5;
+    context.save();
+    context.setLineDash([4, 2]);
+    context.strokeStyle = theme.pendingTextColor;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(0, y);
+    context.lineTo(maxX, y);
+    context.stroke();
+    context.restore();
+  }
+  drawMouseColumnHover(context, state) {
+    var {
+      theme,
+      metrics,
+      hoverSelectColumn
+    } = state;
+    if (hoverSelectColumn == null || theme.linkerColumnHoverBackgroundColor == null) {
+      return;
+    }
+    var {
+      allColumnWidths,
+      allColumnXs,
+      maxY
+    } = metrics;
+    var x = getOrThrow(allColumnXs, hoverSelectColumn);
+    var columnWidth = getOrThrow(allColumnWidths, hoverSelectColumn);
+    context.fillStyle = theme.linkerColumnHoverBackgroundColor;
+    context.fillRect(x, 0, columnWidth, maxY);
+  }
+  drawMouseRowHover(context, state) {
+    var {
+      isSelectingColumn
+    } = state;
+    if (!isSelectingColumn) {
+      super.drawMouseRowHover(context, state);
+    }
+  }
+  drawScrim(state) {
+    var {
+      context,
+      loadingScrimProgress,
+      metrics,
+      theme
+    } = state;
+    if (loadingScrimProgress == null) {
+      return;
+    }
+    var {
+      width,
+      height,
+      gridY
+    } = metrics;
+    var {
+      scrimBlurSize,
+      scrimColor
+    } = theme;
+    context.save();
+
+    // Use global composite so we can change the underlying layer to grayscale
+    context.globalCompositeOperation = 'color';
+    context.filter = "blur(".concat(scrimBlurSize, "px)");
+    if (scrimColor != null) {
+      context.fillStyle = scrimColor;
+    }
+
+    // Clip the path so the top edge is hard edge, bottom edge is soft/blurry
+    context.beginPath();
+    context.rect(0, gridY, width, height - gridY);
+    context.clip();
+
+    // Extend the edges beyond the clip area so they're hard edges
+    context.fillRect(-scrimBlurSize, -scrimBlurSize + gridY, scrimBlurSize * 2 + width, (scrimBlurSize * 2 + (height - gridY)) * loadingScrimProgress);
+
+    // add an overlay of the scrim color to darken things a bit
+    context.globalCompositeOperation = 'overlay';
+    context.filter = "blur(".concat(scrimBlurSize, "px) opacity(15%)");
+    context.fillRect(-scrimBlurSize, -scrimBlurSize + gridY, scrimBlurSize * 2 + width, (scrimBlurSize * 2 + (height - gridY)) * loadingScrimProgress);
+    context.restore();
+  }
+  drawColumnHeaders(context, state) {
+    super.drawColumnHeaders(context, state);
+    var {
+      theme,
+      metrics,
+      model,
+      reverseType
+    } = state;
+    var {
+      columnHeaderHeight
+    } = metrics;
+    this.drawFilterHeaders(context, state);
+    if (columnHeaderHeight <= 0) {
+      return;
+    }
+    var {
+      sort
+    } = model;
+    // if there is only one sort bar, it is interior to the header to save space
+    if (sort.length === 1) {
+      var hasReverse = reverseType !== TableUtils.REVERSE_TYPE.NONE;
+      var color;
+      if (hasReverse) {
+        color = theme.headerReverseBarColor;
+      } else {
+        color = theme.headerSortBarColor;
+      }
+      this.drawHeaderBar(context, state, color, hasReverse ? theme.reverseHeaderBarHeight : theme.sortHeaderBarHeight);
+    } else if (sort.length > 1) {
+      // if there's multiple bars, the sort is interior to header
+      // and the reverse claims space in the table
+      if (
+      // has table reverse
+      reverseType !== TableUtils.REVERSE_TYPE.NONE) {
+        this.drawHeaderBar(context, state, theme.headerReverseBarColor, theme.reverseHeaderBarHeight, false);
+      }
+      this.drawHeaderBar(context, state, theme.headerSortBarColor, theme.sortHeaderBarHeight);
+    }
+  }
+  drawHeaderBar(context, state, color, barHeight) {
+    var interior = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+    var {
+      theme,
+      metrics,
+      model
+    } = state;
+    var {
+      columnHeaderHeight,
+      width
+    } = metrics;
+    // Draw casing with 1 pixel above and below the bar,
+    // 1px falls on the existing split between grid/headers
+    // so don't need to be accounnted for in math elsewhere
+    var offset = 0;
+    if (!interior) {
+      offset = barHeight;
+    }
+    context.fillStyle = theme.headerBarCasingColor;
+    context.fillRect(0, model.columnHeaderMaxDepth * columnHeaderHeight - barHeight - 2 + offset, width, barHeight + 2);
+    context.fillStyle = color;
+    context.fillRect(0, model.columnHeaderMaxDepth * columnHeaderHeight - barHeight - 1 + offset, width, barHeight);
+  }
+  drawColumnHeadersAtDepth(context, state, range, boundsProp, depth) {
+    var {
+      metrics,
+      model,
+      isMenuShown
+    } = state;
+    var {
+      columnHeaderMaxDepth
+    } = model;
+    var {
+      width
+    } = metrics;
+    var bounds = _objectSpread(_objectSpread({}, boundsProp), {}, {
+      maxX: depth === columnHeaderMaxDepth - 1 && boundsProp.maxX === width ? width - (isMenuShown ? 0 : 30) // Account for the menu button
+      : boundsProp.maxX
+    });
+    super.drawColumnHeadersAtDepth(context, state, range, bounds, depth);
+  }
+  drawColumnHeaderAtIndex(context, state, index, bounds) {
+    var _model$columns$modelC, _fontWidths$get;
+    super.drawColumnHeaderAtIndex(context, state, index, bounds);
+    var {
+      metrics,
+      model,
+      theme
+    } = state;
+    var {
+      modelColumns,
+      allColumnWidths,
+      allColumnXs,
+      gridX,
+      columnHeaderHeight,
+      fontWidths
+    } = metrics;
+    var {
+      headerHorizontalPadding
+    } = theme;
+    var columnWidth = getOrThrow(allColumnWidths, index, 0);
+    var columnX = getOrThrow(allColumnXs, index) + gridX;
+    var modelColumn = modelColumns.get(index);
+    if (modelColumn == null) {
+      return;
+    }
+    var columnName = (_model$columns$modelC = model.columns[modelColumn]) === null || _model$columns$modelC === void 0 ? void 0 : _model$columns$modelC.name;
+    if (columnName == null) {
+      return;
+    }
+    var sort = TableUtils.getSortForColumn(model.sort, columnName);
+    if (!sort) {
+      return;
+    }
+    var icon = this.getSortIcon(sort);
+    if (!icon) {
+      return;
+    }
+    var text = model.textForColumnHeader(modelColumn);
+    if (text === undefined) {
+      return;
+    }
+    var fontWidth = (_fontWidths$get = fontWidths.get(context.font)) !== null && _fontWidths$get !== void 0 ? _fontWidths$get : DEFAULT_FONT_WIDTH;
+    assertNotNull(fontWidth);
+    var textWidth = text.length * fontWidth;
+    var textRight = gridX + columnX + textWidth + headerHorizontalPadding;
+    var {
+      maxX
+    } = bounds;
+    maxX -= headerHorizontalPadding;
+    var defaultX = gridX + columnX + columnWidth - headerHorizontalPadding - 1;
+    var x = textRight > maxX ? textRight + 1 : Math.min(maxX, defaultX);
+    var yOffset = sort.direction === TableUtils.sortDirection.ascending ? -6 : -12;
+    var y = columnHeaderHeight * 0.5 + yOffset;
+    context.save();
+    context.beginPath();
+    context.rect(columnX, 0, columnWidth, columnHeaderHeight);
+    context.clip();
+    context.fillStyle = theme.headerSortBarColor;
+    context.translate(x, y);
+    context.fill(icon);
+    context.restore();
+  }
+  drawFilterHeaders(context, state) {
+    var {
+      isFilterBarShown,
+      quickFilters,
+      advancedFilters
+    } = state;
+    if (isFilterBarShown) {
+      this.drawExpandedFilterHeaders(context, state);
+    } else if (quickFilters != null && quickFilters.size > 0 || advancedFilters != null && advancedFilters.size > 0) {
+      this.drawCollapsedFilterHeaders(context, state);
+    }
+  }
+  drawExpandedFilterHeaders(context, state) {
+    var {
+      metrics,
+      model,
+      theme,
+      quickFilters,
+      advancedFilters
+    } = state;
+    var {
+      filterBarHeight
+    } = theme;
+    if (filterBarHeight <= 0) {
+      return;
+    }
+    var {
+      gridX,
+      gridY,
+      maxX,
+      modelColumns,
+      visibleColumns,
+      allColumnWidths,
+      allColumnXs
+    } = metrics;
+    var columnHeaderHeight = gridY - filterBarHeight;
+    context.save();
+    context.font = theme.font;
+    context.textAlign = 'left';
+    if (quickFilters != null && quickFilters.size > 0 || advancedFilters != null && advancedFilters.size > 0) {
+      // fill style if a fiter is set on any column
+      context.fillStyle = theme.filterBarExpandedActiveBackgroundColor;
+    } else {
+      // fill style with no filters set
+      context.fillStyle = theme.filterBarExpandedBackgroundColor;
+    }
+
+    // Draw the background
+    context.fillRect(gridX, columnHeaderHeight, maxX, filterBarHeight - 1);
+
+    // Draw the bottom border
+    context.fillStyle = theme.headerBarCasingColor;
+    context.fillRect(gridX, columnHeaderHeight + filterBarHeight - 1, maxX, 1);
+
+    // Draw the filter input boxes
+    var y1 = columnHeaderHeight;
+    context.strokeStyle = theme.filterBarSeparatorColor;
+    context.beginPath();
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+      var modelColumn = getOrThrow(modelColumns, column);
+      var columnX = getOrThrow(allColumnXs, column);
+      var columnWidth = getOrThrow(allColumnWidths, column);
+      if (model.isFilterable(modelColumn) && columnWidth > 0) {
+        var x1 = gridX + (columnX !== null && columnX !== void 0 ? columnX : 0);
+        context.rect(x1 + 0.5, y1 + 0.5, columnWidth, filterBarHeight - 2); // 1 for the border, 1 for the casing
+      }
+    }
+
+    context.stroke();
+    for (var _i = 0; _i < visibleColumns.length; _i += 1) {
+      var _column = visibleColumns[_i];
+      var _columnWidth = getOrThrow(allColumnWidths, _column);
+      var _columnX = getOrThrow(allColumnXs, _column);
+      var x = _columnX + gridX;
+      this.drawExpandedFilterHeader(context, state, _column, x, _columnWidth);
+    }
+    context.restore();
+  }
+  drawExpandedFilterHeader(context, state, column, columnX, columnWidth) {
+    if (columnWidth <= 0) {
+      return;
+    }
+    var {
+      metrics,
+      theme,
+      quickFilters,
+      advancedFilters
+    } = state;
+    var {
+      modelColumns,
+      gridY
+    } = metrics;
+    var {
+      filterBarHeight,
+      filterBarExpandedActiveCellBackgroundColor,
+      filterBarErrorColor,
+      filterBarHorizontalPadding,
+      headerColor
+    } = theme;
+    var columnHeaderHeight = gridY - filterBarHeight;
+    var modelColumn = modelColumns.get(column);
+    if (modelColumn === undefined) return;
+    var quickFilter = quickFilters.get(modelColumn);
+    var advancedFilter = advancedFilters.get(modelColumn);
+    if (quickFilter == null && advancedFilter == null) {
+      return;
+    }
+    var text = null;
+    if (quickFilter != null) {
+      var {
+        text: filterText
+      } = quickFilter;
+      text = filterText;
+      if (!text) {
+        text = TableUtils.getFilterText(quickFilter.filter);
+      }
+      if (text != null) {
+        var {
+          fontWidths
+        } = metrics;
+        var fontWidth = fontWidths.get(context.font);
+        if (fontWidth == null || fontWidth === 0) {
+          fontWidth = context.measureText('8').width;
+          if (!fontWidth) {
+            fontWidth = 10;
+          }
+        }
+        var maxLength = (columnWidth - filterBarHorizontalPadding * 2) / fontWidth;
+        if (maxLength <= 0) {
+          text = '';
+        } else if (text.length > maxLength) {
+          text = "".concat(text.substring(0, maxLength - 1), "\u2026");
+        }
+      }
+    }
+    context.save();
+    var isFilterValid = IrisGridRenderer.isFilterValid(advancedFilter, quickFilter);
+    if (isFilterValid && filterBarExpandedActiveCellBackgroundColor != null) {
+      // draw active filter background inside cell
+      context.fillStyle = filterBarExpandedActiveCellBackgroundColor;
+      context.fillRect(columnX + 1,
+      // +1 left border
+      columnHeaderHeight + 1,
+      // +1 top border
+      columnWidth - 1,
+      // -1 right border
+      filterBarHeight - 3 // -3 top, bottom border and bottom casing
+      );
+    } else if (filterBarErrorColor != null) {
+      // draw error box inside cell
+      context.fillStyle = filterBarErrorColor;
+      context.lineWidth = 2;
+      context.strokeStyle = filterBarErrorColor;
+      // Because this is drawn with a strokeRect, we have to add/subtract half the,
+      // linewidth from each side to make interior, in addition to accounting for any borders/casings
+      var rectLeft = columnX + 2; // 1 for strokeRect, 1 for border
+      var rectTop = columnHeaderHeight + 2; // 1 for strokeRect, 1 for border
+      var rectWidth = columnWidth - 3; // for 2 border and 1 for strokeRect
+      var rectHeight = filterBarHeight - 5; // -2 for strokeRect, -3 for top, bottom border and bottom casing
+      context.strokeRect(rectLeft, rectTop, rectWidth, rectHeight);
+    }
+    if (text != null && text !== '') {
+      var textX = columnX + filterBarHorizontalPadding;
+      var textY = columnHeaderHeight + filterBarHeight * 0.5 + 1; // + 1 for border
+      context.fillStyle = headerColor;
+      context.fillText(text, textX, textY);
+    }
+    context.restore();
+  }
+  drawCollapsedFilterHeaders(context, state) {
+    var {
+      metrics,
+      theme
+    } = state;
+    var {
+      headerSeparatorColor,
+      filterBarCollapsedHeight
+    } = theme;
+    if (filterBarCollapsedHeight <= 0) {
+      return;
+    }
+    var {
+      gridX,
+      gridY,
+      maxX,
+      visibleColumns,
+      allColumnWidths,
+      allColumnXs
+    } = metrics;
+    var columnHeaderHeight = gridY - filterBarCollapsedHeight;
+    context.save();
+
+    // Draw the background of the collapsed filter bar
+    context.fillStyle = headerSeparatorColor;
+    context.fillRect(gridX, columnHeaderHeight, maxX, filterBarCollapsedHeight);
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      var column = visibleColumns[i];
+      var columnWidth = allColumnWidths.get(column);
+      var columnX = allColumnXs.get(column);
+      if (columnX != null && columnWidth != null) {
+        var x = columnX + gridX;
+        // draw the collapsed cells
+        this.drawCollapsedFilterHeader(context, state, column, x, columnWidth);
+      }
+    }
+    context.restore();
+  }
+  drawCollapsedFilterHeader(context, state, column, columnX, columnWidth) {
+    if (columnWidth <= 0) {
+      return;
+    }
+    var {
+      metrics,
+      theme,
+      quickFilters,
+      advancedFilters
+    } = state;
+    var {
+      modelColumns,
+      gridY
+    } = metrics;
+    var modelColumn = modelColumns.get(column);
+    if (modelColumn === undefined) return;
+    var quickFilter = quickFilters.get(modelColumn);
+    var advancedFilter = advancedFilters.get(modelColumn);
+    var {
+      filterBarCollapsedHeight,
+      filterBarActiveColor,
+      filterBarActiveBackgroundColor,
+      filterBarErrorColor
+    } = theme;
+    context.save();
+    var isFilterValid = IrisGridRenderer.isFilterValid(advancedFilter, quickFilter);
+    if (filterBarActiveBackgroundColor != null && quickFilter == null && advancedFilter == null) {
+      context.fillStyle = filterBarActiveBackgroundColor;
+    } else if (filterBarActiveColor != null && isFilterValid) {
+      context.fillStyle = filterBarActiveColor;
+    } else if (filterBarErrorColor != null) {
+      context.fillStyle = filterBarErrorColor;
+    }
+    var x = columnX + 1; // for gap between columns
+    var y = gridY - filterBarCollapsedHeight;
+    var rectWidth = columnWidth - 1; // for gap between columns
+    var rectHeight = filterBarCollapsedHeight - 1; // for casing bottom
+    context.fillRect(x, y, rectWidth, rectHeight);
+    context.restore();
+  }
+  drawRowFooters(context, state) {
+    var {
+      metrics,
+      model,
+      mouseX,
+      mouseY,
+      theme
+    } = state;
+    var {
+      gridY,
+      gridX,
+      maxX,
+      modelRows,
+      floatingTopHeight,
+      floatingBottomHeight,
+      floatingRows,
+      rowFooterWidth,
+      height,
+      horizontalBarHeight,
+      verticalBarWidth,
+      allRowHeights,
+      allRowYs,
+      width
+    } = metrics;
+    // Only draw the footers on the floating rows
+    if (rowFooterWidth <= 0 || floatingRows.length === 0) {
+      return;
+    }
+    var {
+      cellHorizontalPadding,
+      floatingGridRowColor,
+      floatingRowBackgroundColors,
+      headerColor,
+      rowHoverBackgroundColor
+    } = theme;
+    context.translate(gridX, gridY);
+    context.beginPath();
+    var x = Math.min(maxX, width - rowFooterWidth - verticalBarWidth - gridX);
+    context.fillStyle = floatingRowBackgroundColors;
+    if (floatingTopHeight > 0) {
+      context.rect(x, 0, rowFooterWidth, floatingTopHeight);
+    }
+    if (floatingBottomHeight > 0) {
+      context.rect(x, height - gridY - horizontalBarHeight - floatingBottomHeight, rowFooterWidth, floatingBottomHeight);
+    }
+    context.fill();
+    var mouseRow = mouseX != null && mouseY != null && mouseX >= gridX && mouseX <= maxX + rowFooterWidth ? GridUtils.getRowAtY(mouseY, metrics) : null;
+    if (rowHoverBackgroundColor != null && mouseRow !== null && floatingRows.includes(mouseRow)) {
+      context.fillStyle = rowHoverBackgroundColor;
+      var y = allRowYs.get(mouseRow);
+      var rowHeight = allRowHeights.get(mouseRow);
+      assertNotNull(y);
+      assertNotNull(rowHeight);
+      context.fillRect(x, y, rowFooterWidth, rowHeight);
+    }
+    context.beginPath();
+    if (floatingGridRowColor != null) {
+      context.strokeStyle = floatingGridRowColor;
+    }
+    if (floatingTopHeight > 0) {
+      context.moveTo(x + 0.5, 0.5);
+      context.lineTo(x + 0.5, floatingTopHeight - 0.5);
+    }
+    if (floatingBottomHeight > 0) {
+      var _y = height - gridY - horizontalBarHeight - floatingBottomHeight;
+      context.moveTo(x - 0.5, _y + 0.5);
+      context.lineTo(x - 0.5, _y + floatingBottomHeight - 0.5);
+    }
+    context.stroke();
+    context.fillStyle = headerColor;
+    context.textAlign = 'left';
+    var textX = x + cellHorizontalPadding;
+    for (var i = 0; i < floatingRows.length; i += 1) {
+      var row = floatingRows[i];
+      var _rowHeight = allRowHeights.get(row);
+      var rowY = allRowYs.get(row);
+      var modelRow = modelRows.get(row);
+      if (rowY != null && _rowHeight != null && modelRow != null) {
+        var textY = rowY + _rowHeight * 0.5;
+        context.fillText(model.textForRowFooter(modelRow), textX, textY);
+      }
+    }
+    context.translate(-gridX, -gridY);
+  }
+  getExpandButtonPosition(_ref2, depth) {
+    var {
+      mouseX,
+      mouseY,
+      metrics,
+      theme
+    } = _ref2;
+    var NULL_POSITION = {
+      left: null,
+      top: null,
+      width: null,
+      height: null
+    };
+    if (mouseX == null || mouseY == null || depth == null || !metrics) {
+      return NULL_POSITION;
+    }
+    var {
+      rowHeight,
+      left,
+      top
+    } = GridUtils.getCellInfoFromXY(mouseX, mouseY, metrics);
+    assertNotNull(left);
+    assertNotNull(rowHeight);
+    assertNotNull(top);
+    var {
+      cellHorizontalPadding
+    } = theme;
+    var width = EXPAND_ICON_SIZE + 2 * cellHorizontalPadding;
+    var buttonLeft = Math.max(left + EXPAND_ICON_SIZE * depth, metrics.gridX);
+    var buttonTop = metrics.gridY + top;
+    return {
+      left: buttonLeft,
+      top: buttonTop,
+      width,
+      height: rowHeight
+    };
+  }
+}
+export default IrisGridRenderer;
+//# sourceMappingURL=IrisGridRenderer.js.map