Foreign key dropdown instead of modal picker

[jrchudy]

This feature request came from a discussion in slack:
https://usc-isi.slack.com/archives/G26GW934G/p1684792540256319

In recordedit app, we want to have a way to configure foreign key columns to show as a dropdown instead of a modal picker when there is a small set of terms (can be the case for vocabularies or small sets of related entities).

How to configure this:

Configuration for this "display mode" should be available contextualized to the recordedit app and allow for being defined at different levels of the model document. This display mode might be defined for a whole catalog or a single selector.

1. Add option to display of tag:isrd.isi.edu,2016:foreign-key

Adding the property directly on the foreign key relationship allows for direct configuration of each foreign key relationship. This would be defined where another similar property is defined, show_foreign_key_link. Doesn't allow for this to be bulk defined at the table, schema, or catalog level.

'From' is a pointer from A 'to' B (A -> B)
think about (A -> B -> C)

Name for the property to add:

• selector_ux_mode

related to "To field":

• entity_set_selector_ux_mode
• selector_set_ux_mode
• selector_domain_ux_mode
• selection_source_ux_mode

related to "From field":

• selector_field_ux_mode
• selector_input_ux_mode
• selector_form_ux_mode

Property values to consider:

• "facet-search-popup"
  • other options we considered
  • "popup", "facet-search-picker", "picker", "fk-picker", "fk-dialog", "modal-picker"
• "simple-search-dropdown"
  • other options we considered
  • "search-dropdown", "typeahead-dropdown", "fk-dropdown", "inline-picker"

Other names for other contexts that we have:

• "simple-dropdown"
  • not allowed for foreign key inputs in entry context
• "pb-facet-search-popup"
• "facet-facet-search-popup"

Example:

'tag:isrd.isi.edu,2016:foreign-key': {
  'display': {
    'entry': {
      'selector_ux_mode': 'dropdown' | 'popup',
      'show_foreign_key_link',
      'column_order'
    }
  }
}

2. Add option to tag:misd.isi.edu,2016:table-display

When selector_ux_mode is defined on a leaf table in a foreign key constraint, this controls the display mode of the foreign key inputs that end on this table.

Example:

'tag:misd.isi.edu,2016:table-display': {
  "entry": {
    "selector_ux_mode": 'dropdown' | 'popup'
  }
}

3. Add property to display property in column-directive

This allows for a different way to configure this property. This could be used for defining a display mode for a selector in one specific place instead of everywhere that column/foreign key relationship is defined. This allows for future support in visible-foreign-keys if we want to allow for a ux mode change in detailed context.

Example:

'tag:isrd.isi.edu,2016:visible-columns': {
  "entry": [
    {
      "source": [
        {"outbound": ["schema", "fkey1"]},
        "RID"
      ],
      "display": {
        "selector_ux_mode": 'dropdown' | 'popup',
        "show_foreign_key_link": true | false
      }
    }
  ]
}

annotation inheritance

Inheritance for this property should be checking the most specific defined annotation to the last specific in the following order:

1. visible-columns (entry only)
2. foreign-key
3. table-display
   • when defined on a table that is treated as the "leaf" table in a foreign key relationship
4. default display mode (popup)

UX features to implement:

• Use the current page size that is used for the foreign key popup
  • pagination will be done with a option at the end of the dropdown called ... load more
• Allow for search in the dropdown to search table based on the search-box definition in the model
  • works the same way as search box in foreign key popup
• Support only single select for now