gristlabs_grist-core/app/client/components/SelectionSummary.ts

import {CellSelector, COL, ROW} from 'app/client/components/CellSelector';
import {copyToClipboard} from 'app/client/lib/copyToClipboard';
import {Delay} from "app/client/lib/Delay";
import {KoArray} from 'app/client/lib/koArray';
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
import {UserError} from 'app/client/models/errors';
import {ALL, RowsChanged, SortedRowSet} from "app/client/models/rowset";
import {showTransientTooltip} from 'app/client/ui/tooltips';
import {colors, isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {CellValue} from 'app/common/DocActions';
import {isEmptyList, isListType, isRefListType} from "app/common/gristTypes";
import {TableData} from "app/common/TableData";
import {BaseFormatter} from 'app/common/ValueFormatter';
import ko from 'knockout';
import {Computed, Disposable, dom, makeTestId, Observable, styled, subscribe} from 'grainjs';

/**
 * A beginning and end index for a range of columns or rows.
 */
interface Range {
  begin: number;
  end: number;
}

/**
 * A single part of the cell selection summary.
 */
interface SummaryPart {
  /** Identifier for the summary part. */
  id: 'sum' | 'count' | 'dimensions';
  /** Label that's shown to the left of `value`. */
  label: string;
  /** Value of the summary part. */
  value: string;
  /** If true, displays a copy button on hover. Defaults to false. */
  clickToCopy?: boolean;
}

const testId = makeTestId('test-selection-summary-');

// We can handle a million cells in under 60ms on a good laptop. Much beyond that, and we'll break
// selection with the bad performance. Instead, skip the counting and summing for too many cells.
const MAX_CELLS_TO_SCAN = 1_000_000;

export class SelectionSummary extends Disposable {
  private _colTotalCount = Computed.create(this, (use) =>
    use(use(this._viewFields).getObservable()).length);

  private _rowTotalCount = Computed.create(this, (use) => {
    const rowIds = use(this._sortedRows.getKoArray().getObservable());
    const includesNewRow = (rowIds.length > 0 && rowIds[rowIds.length - 1] === 'new');
    return rowIds.length - (includesNewRow ? 1 : 0);
  });

  // In CellSelector, start and end are 0-based, inclusive, and not necessarily in order.
  // It's not good for representing an empty range. Here, we convert ranges as [begin, end),
  // with end >= begin.
  private _rowRange = Computed.create<Range>(this, (use) => {
    const type = use(this._cellSelector.currentSelectType);
    if (type === COL) {
      return {begin: 0, end: use(this._rowTotalCount)};
    } else {
      const start = use(this._cellSelector.row.start);
      const end = use(this._cellSelector.row.end);
      return {
        begin: Math.min(start, end),
        end: Math.max(start, end) + 1,
      };
    }
  });

  private _colRange = Computed.create<Range>(this, (use) => {
    const type = use(this._cellSelector.currentSelectType);
    if (type === ROW) {
      return {begin: 0, end: use(this._colTotalCount)};
    } else {
      const start = use(this._cellSelector.col.start);
      const end = use(this._cellSelector.col.end);
      return {
        begin: Math.min(start, end),
        end: Math.max(start, end) + 1,
      };
    }
  });

  private _summary = Observable.create<SummaryPart[]>(this, []);
  private _delayedRecalc = this.autoDispose(Delay.create());

  constructor(
    private _cellSelector: CellSelector,
    private _tableData: TableData,
    private _sortedRows: SortedRowSet,
    private _viewFields: ko.Computed<KoArray<ViewFieldRec>>,
  ) {
    super();

    this.autoDispose(this._sortedRows.getKoArray().subscribe(this._onSpliceChange, this, 'spliceChange'));
    const onRowNotify = this._onRowNotify.bind(this);
    this._sortedRows.on('rowNotify', onRowNotify);
    this.onDispose(() => this._sortedRows.off('rowNotify', onRowNotify));
    this.autoDispose(subscribe(this._rowRange, this._colRange,
      () => this._scheduleRecalc()));
    this.autoDispose(isNarrowScreenObs().addListener((isNarrow) => {
      if (isNarrow) { return; }
      // No calculations occur while the screen is narrow, so we need to schedule one.
      this._scheduleRecalc();
    }));
  }

  public buildDom() {
    return cssSummary(
      dom.forEach(this._summary, ({id, label, value, clickToCopy}) =>
        cssSummaryPart(
          label ? dom('span', cssLabelText(label), cssCopyIcon('Copy')) : null,
          value,
          cssSummaryPart.cls('-copyable', Boolean(clickToCopy)),
          (clickToCopy ? dom.on('click', (ev, elem) => doCopy(value, elem)) : null),
          testId(id),
        )
      ),
    );
  }

  private _onSpliceChange(splice: {start: number}) {
    const rowRange = this._rowRange.get();
    const rowCount = rowRange.end - rowRange.begin;
    if (rowCount === 1) { return; }
    if (splice.start >= rowRange.end) { return; }
    // We could be smart here and only recalculate when the splice affects our selection. But for
    // that to make sense, the selection itself needs to be smart. Currently, the selection is
    // lost whenever the cursor is affected. For example, when you have a selection and another
    // user adds/removes columns or rows before the selection, the selection won't be shifted
    // with the cursor, and will instead be cleared. Since we can't always rely on the selection
    // being there, we'll err on the safe side and always schedule a recalc.
    this._scheduleRecalc();
  }

  private _onRowNotify(rows: RowsChanged) {
    const rowRange = this._rowRange.get();
    if (rows === ALL) {
      this._scheduleRecalc();
    } else {
      const rowArray = this._sortedRows.getKoArray().peek();
      const rowIdSet = new Set(rows);
      for (let r = rowRange.begin; r < rowRange.end; r++) {
        if (rowIdSet.has(rowArray[r])) {
          this._scheduleRecalc();
          break;
        }
      }
    }
  }

  /**
   * Schedules a re-calculation to occur in the immediate future.
   *
   * May be called repeatedly, but only a single re-calculation will be scheduled, to
   * avoid queueing unnecessary amounts of work.
   */
  private _scheduleRecalc() {
    // `_recalc` may take a non-trivial amount of time, so we defer until the stack is clear.
    this._delayedRecalc.schedule(0, () => this._recalc());
  }

  private _recalc() {
    const rowRange = this._rowRange.get();
    const colRange = this._colRange.get();
    let rowCount = rowRange.end - rowRange.begin;
    let colCount = colRange.end - colRange.begin;
    const cellCount = rowCount * colCount;
    const summary: SummaryPart[] = [];
    // Do nothing on narrow screens, because we haven't come up with a place to render sum anyway.
    if (cellCount > 1 && !isNarrowScreen()) {
      if (cellCount <= MAX_CELLS_TO_SCAN) {
        const rowArray = this._sortedRows.getKoArray().peek();
        const fields = this._viewFields.peek().peek();
        let countNumeric = 0;
        let countNonEmpty = 0;
        let sum = 0;
        let sumFormatter: BaseFormatter|null = null;
        const rowIndices: number[] = [];
        for (let r = rowRange.begin; r < rowRange.end; r++) {
          const rowId = rowArray[r];
          if (rowId === undefined || rowId === 'new') {
            // We can run into this whenever the selection gets out of sync due to external
            // changes, like another user removing some rows. For now, we'll skip rows that are
            // still selected and no longer exist, but the real TODO is to better update the
            // selection so that it doesn't have out-of-date and invalid ranges.
            rowCount -= 1;
            continue;
          }
          rowIndices.push(this._tableData.getRowIdIndex(rowId)!);
        }
        for (let c = colRange.begin; c < colRange.end; c++) {
          const field = fields[c];
          if (field === undefined) {
            // Like with rows (see comment above), we need to watch out for out-of-date ranges.
            colCount -= 1;
            continue;
          }
          const col = fields[c].column.peek();
          const displayCol = fields[c].displayColModel.peek();
          const colType = col.type.peek();
          const visibleColType = fields[c].visibleColModel.peek().type.peek();
          const effectiveColType = visibleColType ?? colType;
          const displayColId = displayCol.colId.peek();
          // Note: we get values from the display column so that reference columns displaying
          // numbers are included in the computed sum. Unfortunately, that also means we can't
          // show a count of non-empty references. For now, that's a trade-off we'll have to make,
          // but in the future it should be possible to allow showing multiple summary parts with
          // some level of configurability.
          const values = this._tableData.getColValues(displayColId);
          if (!values) {
            throw new UserError(`Invalid column ${this._tableData.tableId}.${displayColId}`);
          }
          const isNumeric = ['Numeric', 'Int', 'Any'].includes(effectiveColType);
          const isEmpty: undefined | ((value: CellValue) => boolean) = (
            colType.startsWith('Ref:') && !visibleColType ? value => (value === 0) :
            isRefListType(colType) || isListType(effectiveColType) ? isEmptyList :
            undefined
          );
          // The loops below are optimized, minimizing the amount of work done per row. For
          // example, column values are retrieved in bulk above instead of once per row. In one
          // unscientific test, they take 30-60ms per million numeric cells.
          //
          // TODO: Add a benchmark test suite that automates checking for performance regressions.
          if (isNumeric) {
            if (!sumFormatter) {
              sumFormatter = fields[c].formatter.peek();
            }
            for (const i of rowIndices) {
              const value = values[i];
              if (typeof value === 'number') {
                countNumeric++;
                sum += value;
              } else if (value !== null && value !== undefined && value !== '' && !isEmpty?.(value)) {
                countNonEmpty++;
              }
            }
          } else {
            for (const i of rowIndices) {
              const value = values[i];
              if (value !== null && value !== undefined && value !== '' && !isEmpty?.(value)) {
                countNonEmpty++;
              }
            }
          }
        }

        if (countNumeric > 0) {
          const sumValue = sumFormatter ? sumFormatter.formatAny(sum) : String(sum);
          summary.push({id: 'sum', label: 'Sum ', value: sumValue, clickToCopy: true});
        } else {
          summary.push({id: 'count', label: 'Count ', value: String(countNonEmpty), clickToCopy: true});
        }
      }
      summary.push({id: 'dimensions', label: '', value: `${rowCount}⨯${colCount}`});
    }
    this._summary.set(summary);
  }
}

async function doCopy(value: string, elem: Element) {
  await copyToClipboard(value);
  showTransientTooltip(elem, 'Copied to clipboard', {key: 'copy-selection-summary'});
}

const cssSummary = styled('div', `
  position: absolute;
  bottom: -18px;
  height: 18px;
  line-height: 18px;
  display: flex;
  column-gap: 8px;
  width: 100%;
  justify-content: end;
  color: ${theme.text};
  font-family: ${vars.fontFamilyData};

  @media print {
    & {
      display: none;
    }
  }
`);

// Note: the use of an extra element for the background is to set its opacity, to make it a bit
// lighter (or darker, in dark-mode) than actual mediumGrey, without defining a special color.
const cssSummaryPart = styled('div', `
  padding: 0 8px;
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top: none;
  z-index: 100;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Set explicit backdrop to improve visibility in raw data views. */
  background-color: ${theme.mainPanelBg};

  &-copyable:hover {
    cursor: pointer;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: ${colors.mediumGrey};
    opacity: 0.8;
    z-index: -1;
  }
`);

const cssLabelText = styled('span', `
  font-size: ${vars.xsmallFontSize};
  text-transform: uppercase;
  position: relative;
  margin-right: 4px;
  .${cssSummaryPart.className}-copyable:hover & {
    visibility: hidden;
  }
`);

const cssCopyIcon = styled(icon, `
  position: absolute;
  top: 0;
  margin: 1px 0 0 4px;
  --icon-color: ${theme.controlFg};
  display: none;
  .${cssSummaryPart.className}-copyable:hover & {
    display: block;
  }
`);