Grouped Related Tables

[jrchudy]

On record pages, it's possible to have many related tables. An example of this can be seen in the pdb deployment on the Entry page. We want to improve the UX of the Table of Contents and the list of related tables first reported in pdb repo (issue #156 and issue #157).

To support this, we will have to make changes to annotations to configure this and have appropriate changes in chaise for both sections.

Configuration changes

Changes to the tag:isrd.isi.edu,2016:visible-foreign-keys annotation will be made to support this. This annotation is a list of the foreign that are shown in the related tables section of the record page.

Details about configuration changes

• A new property is added to column-directive called children
  • this property is only supported in column-directive when used in visible-foreign-keys annnotation
  • this will only support one level deep nesting
    • no groups within groups
  • if a source is defined alongside children, source is ignored and the column-directive entry is treated as a group
• add open as well so related tables and groups can be configured to open/closed on load overriding heuristics
  • default mode for each group or related table relies on the users permissions

Sample configuration changes:

"tag:isrd.isi.edu,2016:visible-foreign-keys": {
  "detailed": [
    {
      open: true | false,
      children: [
        {
          "source": [
            {"outbound": ["schema", "fkey1"]},
            "RID"
          ],
          "entity": true
        }, {
          "source": [...],
          "entity": true
        }
      ]
    }, {
      
    }
  ]
}

UX changes

Changes have to be done for both the table of contents and the related tables section

Table of Contents

• change the ToC to have a treeview like structure
  • should the summary section change to be a collapsable treeview?
    • this section won't apply other group styles in the main section
    • allows for collapsible sections
• Add icons or other way to communicate actions needed
  • currently using * in the table name for tables with data that needs to be attached
  • relevant issue: Frontend enhancement: Categorizing different sections pdb-ihm#157
  • what do these actions imply?
    • related tables that need to have entities attached to them for the data to be valid?
    • tables have content and don't have content?
• Bold group and related tables text that are currently in the viewport
• Colors in groups
  • something similar should be done with the same colors used in the related tables section
  • a colored in square next to each group that matches the color used in the related tables section

Related Tables Section

• The groups should be collapsable
• related tables that are in a group will have the header slightly indented
  • the displayed table or custom mode won't be indented
• Do we use the same "header" style?
  • with a slightly different color?
  • should the color change from group to group?
  • maybe modify the opacity on the group header or each header within the group
• Colors within the group
  • should the whole background color change for the whole group?
  • a color stripe along the indented headers of each related table in the group?
  • how is this configured?
    • allow colors to be defined by user
    • we define our own color pallette of 12-20 colors for this?
    • discussed using pastel colors
• headers won't "stick"
  • consistent with current headers not sticking
• add an html element attribute id to each "group" that is consistent with the id used on each related table header
  • allows for CSS customization
  • support scroll to the top of a group
• how are groups hidden?
  • does this follow the same rules as record app for each individual related table?
  • hide the whole group on load if there are no rows and user can't create/update any of the contents of the related tables in that group
  • for writers, follow same rules defined by showWriterEmptyRelatedOnLoad
    • https://github.com/informatics-isi-edu/chaise/blob/master/docs/user-docs/chaise-config.md#showwriteremptyrelatedonload
• should each related table header have the group title in it as well
  • in the format of group name > related table heading
  • add this path as a comment on the related table header if there isn't already a comment attached

Features to consider

• ACLs similar to how they are done in chaiseConfig.navbarMenu
  • each group and each individual related table can have acl: {show: [...], enable: [...]}
• support nested groups
• Should groups be used to imply the order related tables need to have entities added to?
  • for example, we have a group with 3 related tables
  • on load, the first related table has no rows and an "Add Records" button, but the other 2 have no button visible
  • once a record is added to the first related table, "Add Records" button for table 2 shows up
  • same thing happens with table 3 once a row is added to table 2