Background

Based on the feature request KEIKAI-396

Similar to Excel feature:

• Trace Precedents
• Trace Dependents
  

User story

• As an end-user, I want to see those precedents and dependents of a cell with a formula, so that I can identify data sources and check values easily.
• As an app developer, I want to show/clear precedents and dependents of a cell programmatically, so that I can implement a precedent and dependent trace feature for end-users

Proposed Specification

1. App developer can call methods to show the precedents and dependents of a cell in a browser e.g.

   spreadsheet.tracePrecedents(A1);
   spreadsheet.traceDependents(A1);
   

   1. keikai will highlight the specified cell, precedents, and dependents on a sheet in a browser like the simulated screenshots below:
      Just highlight cells without arrows.
      
      C3, C4 (blue box) are precedents, A1 (green box) is the specified cell
      
      A6 (yellow box) is dependent
2. App developers can call a method to clear those cell highlights

   spreadsheet.clearTrace()
   

3. The highlight doesn't change when an end-user clicks a cell or interacts with the spreadsheet unless App developers call the above methods again.
   So when keikai highlights precedents/dependents, an end-user can scroll to any cell to check values without worrying about changing the highlights.
4. keikai highlights the specified cell, precedents, and dependents with obviously different colors
   So an end-users can differentiate them by color.
5. keikai only shows either precedents or dependents only (one of them)
   Since those precedents and dependents might overlap, the highlight cannot display 2 colors on 1 cell at the same time. Showing precedents/dependents at the same time will confuse users since they don't know which cell is overlapped. For example,
   call spreadsheet.tracePrecedents(A1) first, then spreadsheet.traceDependents(B1) will clear the previous highlights and show dependents of B1.

Not in Scope

• Excel shows arrows between the cells, but that's out of scope
• This feature is API only ( no UI controls)
• Keikai doesn't apply different colors to the formula itself

Technical Details

• Highlight those cells by showing an extra thick border on them.
• Highlight cells by covering an extra DOM element on a cell instead of modifying a cell's border in a Book. It's a component-scope, client-side effect, independent of a Book model.
• apply unique CSS classes for highlights of the specified cell, precedents, and dependents, so that app developers can override highlight style in CSS including color and border