Improving reports in narrow terminals with a more responsive design

[ryneeverett]

I've been kicking around some ideas for how to improve both the default behavior and the configurability of taskwarrior's reports on narrow terminals.

For reference, this seems to be the most relevant code in ViewTask.cpp:

Details

  // Determine minimal, ideal column widths.
  std::vector<int> minimal;
  std::vector<int> ideal;

  for (unsigned int i = 0; i < _columns.size(); ++i) {
    // Headers factor in to width calculations.
    unsigned int global_min = 0;
    unsigned int global_ideal = global_min;

    for (unsigned int s = 0; s < sequence.size(); ++s) {
      if ((int)s >= _truncate_lines && _truncate_lines != 0) break;

      if ((int)s >= _truncate_rows && _truncate_rows != 0) break;

      // Determine minimum and ideal width for this column.
      unsigned int min = 0;
      unsigned int ideal = 0;
      _columns[i]->measure(data[sequence[s]], min, ideal);

      if (min > global_min) global_min = min;
      if (ideal > global_ideal) global_ideal = ideal;

      // If a fixed-width column was just measured, there is no point repeating
      // the measurement for all tasks.
      if (_columns[i]->is_fixed_width()) break;
    }

    if (print_empty_columns || global_min != 0) {
      unsigned int label_length = utf8_width(_columns[i]->label());
      if (label_length > global_min) global_min = label_length;
      if (label_length > global_ideal) global_ideal = label_length;
      minimal.push_back(global_min);
      ideal.push_back(global_ideal);
    }

    if (!print_empty_columns) {
      if (global_min != 0)  // Column is nonempty
      {
        nonempty_columns.push_back(_columns[i]);
        nonempty_sort.push_back(_sort[i]);
      } else  // Column is empty, drop it
      {
        // Note: This is safe to do because we set _columns = nonempty_columns
        // after iteration over _columns is finished.
        delete _columns[i];
      }
    }
  }

  if (!print_empty_columns) {
    _columns = nonempty_columns;
    _sort = nonempty_sort;
  }

  int all_extra = _left_margin + (2 * _extra_padding) + ((_columns.size() - 1) * _intra_padding);

  // Sum the widths.
  int sum_minimal = std::accumulate(minimal.begin(), minimal.end(), 0);
  int sum_ideal = std::accumulate(ideal.begin(), ideal.end(), 0);

  // Calculate final column widths.
  int overage = _width - sum_minimal - all_extra;
  Context::getContext().debug(format("ViewTask::render min={1} ideal={2} overage={3} width={4}",
                                     sum_minimal + all_extra, sum_ideal + all_extra, overage,
                                     _width));

  std::vector<int> widths;

  // Ideal case.  Everything fits.
  if (_width == 0 || sum_ideal + all_extra <= _width) {
    widths = ideal;
  }

  // Not enough for minimum. Decrease certain columns.
  else if (overage < 0) {
    // Determine which columns are the longest.
    unsigned int longest = 0;
    unsigned int second_longest = 0;
    for (unsigned int j = 0; j < minimal.size(); j++) {
      if (minimal[j] > minimal[longest]) {
        second_longest = longest;
        longest = j;
      } else if (minimal[j] > minimal[second_longest]) {
        second_longest = j;
      }
    }

    // Case 1: Shortening longest column still keeps it longest. Let it bear
    //         all the shortening.
    widths = minimal;
    if (minimal[longest] + overage >= minimal[second_longest]) widths[longest] += overage;

    // Case 2: Shorten the longest column to second longest length. Try to
    //         split shortening them evenly.
    else {
      int decrease = minimal[second_longest] - minimal[longest];
      widths[longest] += decrease;
      overage = overage - decrease;

      // Attempt to decrease the two longest columns (at most to two characters)
      if (-overage <= widths[longest] + widths[second_longest] - 4) {
        // Compute half of the overage, rounding up
        int half_overage = overage / 2 + overage % 2;

        // Decrease both larges columns by this amount
        widths[longest] += half_overage;
        widths[second_longest] += half_overage;
      } else
        // If reducing two of the longest solumns to 2 characters is not sufficient, then give up.
        Context::getContext().error(format(
            "The report has a minimum width of {1} and does not fit in the available width of {2}.",
            sum_minimal + all_extra, _width));
    }
  }

  // Perfect minimal width.
  else if (overage == 0) {
    widths = minimal;
  }

  // Extra space to share.
  else if (overage > 0) {
    widths = minimal;

    // Spread 'overage' among columns where width[i] < ideal[i]
    bool needed = true;
    while (overage && needed) {
      needed = false;
      for (unsigned int i = 0; i < _columns.size() && overage; ++i) {
        if (widths[i] < ideal[i]) {
          ++widths[i];
          --overage;
          needed = true;
        }
      }
    }
  }

Proposals

report.<report>.priorities

This would address the pain of having to configure either different custom reports or different taskrc's to take advantage of different terminal widths. A new setting could be added that lets the user tune the order in which columns get dropped in narrower terminals. For example:

report.next.priorities = description,id,urgency,entry.age,depends,priority,project,tags,due.relative,<bonus>,scheduled.countdown,until.remaining,recur,start.age

I would imagine the logic being altered as follows:

1. Rather than starting by shortening the longest columns when there is insufficient width, we'd start by looping through starting at the end of the priority list, deleting columns until we have the ideal width. If we encounter the <bonus> sentinel value first, we stop and go on to the longest column shortening logic we currently have.
2. If the column shortening logic is insufficient to achieve the minimum width, we resume loop over priorities, dropping columns until the minimum width is achieved. This would effectively eliminate the error condition. ("This report has a minimum width...")

Minimize Wasted (Blank) Space

On smaller terminals, the thing I find dissatisfying which cannot be satisfactorily addressed with configuration is the amount of whitespace shown. Sometimes the description will be truncated more than necessary because one anomalously long project or tag name is hogging the width. Assuming it were computationally practical, I think an ideal behavior would be to truncate on the basis of which columns actually make use of their width.

From an implementation standpoint, while we're iterating through all the values to build the minimum and ideal vectors, we could also build a std::vector<std::vector<std::int>> lengths where the outer vector has an vector for each column and the inner vector an integer length for each row. We could then sort the inner vectors by size in ascending order and then truncate the columns one character at a time until the overage is eliminated. Pseudocode:

while (overage < 0) {
  int max_length = 0;
  std::vector<std::int> max_columns = [];
  for (int c in columns) {
    if (columns[c][-1] == max_length) {
      max_columns.push_back(c);
    } else if (columns[c][-1] > max_length} {
      max_length = columns[c][-1];
      max_columns = [c];
    }
  }
  for (d in max_columns) {
    while (lengths[d][-1] == max_length) {
      lengths[d].pop();
    }
    widths[d]--;
    if (overage++ >= 0) {
      break;
    }
  }
}

Alternatively, maybe we could calculate this optimum with calculus or use a statistical approach to estimate a vector of practical_width for each column (maybe set to the 80th percentile of content-length in the column) to shorten to before shortening the longest column, but I'm doubtful these approaches would result in leaner or more performant code than the "dumb" approach (which also might be too expensive).

[djmitche]

Would it be worth looking at some of the approaches used in layout of web pages? Could we do something along the lines of CSS, including a min-width media query which can cause rules to be applied or not depending on width of some element. https://docs.rs/dioxus-tui/latest/dioxus_tui/ seems like an interesting idea! (I have only looked at its README, so this is not an endorsement!)

[ryneeverett]

I've been out of the web development game a long time so I might be way off here but it seems like media queries have static break points, meaning they apply at a given width regardless of the content width. The current table layout is responsive to the content width too, so I'm not sure a CSS based solution would be satisfactory.

Put another way -- I'm not sure CSS does any heavy lifting if you're trying to display a table of unconstrained user-defined content in an html table with no horizontal scrolling or wrapping. I suspect you'd be in much the same position we are.

[djmitche]

Good point about media queries! Maybe this is a dead-end, but I appreciate your giving it some thought!