Facet within facet (#2545)

* honor the new reference.maxFacetDepth API and deprecate chaise-config showFaceting prop

* Add the concept of uiContextTitles to recordset and recordset-modal

* refactor processFacet and preProcessFacet functions to use promises

*  force los angeles timezone in playwright

Makefile

@@ -66,6 +66,7 @@ E2EDrecordsetEdit=test/e2e/specs/default-config/recordset/edit.config.ts
 E2ErecordsetAdd=test/e2e/specs/default-config/recordset/add.config.ts
 E2EDrecordsetIndFacet=test/e2e/specs/delete-prohibited/recordset/facet.config.ts
 E2EDrecordsetHistFacet=test/e2e/specs/delete-prohibited/recordset/histogram-facet.config.ts
+E2EDrecordsetFacetWithinFacet=test/e2e/specs/default-config/recordset/facet-within-facet.config.ts
 E2ErecordsetSavedQuery=test/e2e/specs/all-features/recordset/saved-query.config.ts
 
 # misc tests
@@ -88,7 +89,7 @@ Manualrecordset=test/manual/specs/recordset.config.ts
 # playwright tests
 NAVBAR_TESTS=$(E2Enavbar) $(E2EnavbarHeadTitle) $(E2EnavbarCatalogConfig)
 RECORD_TESTS=$(E2EDrecord) $(E2ErecordNoDeleteBtn) $(E2EDrecordRelatedTable) $(E2EDrecordCopy) $(E2EDrecordLinks)
-RECORDSET_TESTS=$(E2EDrecordset) $(E2ErecordsetAdd) $(E2EDrecordsetEdit) $(E2ErecordsetSavedQuery) $(E2EDrecordsetIndFacet) $(E2EDrecordsetHistFacet)
+RECORDSET_TESTS=$(E2EDrecordset) $(E2ErecordsetAdd) $(E2EDrecordsetEdit) $(E2ErecordsetSavedQuery) $(E2EDrecordsetIndFacet) $(E2EDrecordsetHistFacet) $(E2EDrecordsetFacetWithinFacet)
 RECORDADD_TESTS=$(E2EDIrecordAdd) $(E2EDIrecordImmutable) $(E2EDIrecordMultiFormInput) $(E2ErecordEditForeignKeyDropdown) $(E2EDrecordEditCompositeKey)
 RECORDEDIT_TESTS=$(E2EDIrecordEdit) $(E2EDrecordEditNullValues) $(E2ErecordEditInputIframe) $(E2EDrecordEditDomainFilter)
 PERMISSIONS_TESTS=$(E2EmultiPermissionsVisibility)

config/chaise-config-sample.js

@@ -25,7 +25,6 @@ var chaiseConfig = {
     editRecord: true,
     deleteRecord: true,
     maxRecordsetRowHeight: 160,
-    showFaceting: true,
     navbarBanner: [
         {
             markdown_pattern: "This is a development version of Chaise",

docs/dev-docs/e2e-test-writing.md

@@ -262,6 +262,11 @@ In here we've listed all the actions that we encountered and we found useful. Pl
 - Useful links
   - https://playwright.dev/docs/pages
 
+- Use `generateChaiseURL` for creating a chaise url:
+  ```ts
+  await page.goto(generateChaiseURL(APP_NAMES.RECORD, 'schema', 'table', testInfo, baseURL) + '/id=12');
+  ```
+
 - Use `clickNewTabLink` function in `page-utils.ts` for testing buttons that open a new tab:
   ```ts
   const newPage = await PageLocators.clickNewTabLink(someButton, context);

docs/user-docs/chaise-config-change-logs.md

@@ -2,6 +2,17 @@ The file contains changes made to chaise-config parameters.
 - Refer to [chaise-config.d](chaise-config.md) for currently supported parameters
 - Refer to [chaise-config-deprecated.md](chaise-config-deprecated.md) for deprecated parameters
 
+#### 09/25/2024 ####
+
+###### PR Link
+  - [chaise](https://github.com/informatics-isi-edu/chaise/pull/2545)
+
+###### Removed
+  - `showFaceting` has been removed in favor of the new `maxFacetDepth` property of `facetPanelDisplay`.
+
+###### Added
+  - `maxFacetDepth` was added to `facetPanelDisplay`.
+
 #### 03/15/2024 ####
 
 ###### PR Link

docs/user-docs/chaise-config-deprecated.md

@@ -11,6 +11,7 @@ This document contains deprecated chaise-config parameters.
    * [profileURL](#profileURL)
 * [Display Configuration:](#display-configuration)
    * [maxRelatedTablesOpen](#maxrelatedtablesopen)
+   * [showFaceting](#showfaceting)
 * [Share and Cite Configuration:](#share-and-cite-configuration)
    * [shareCiteAcls](#shareciteacls)
 * [Search Application](#search-application)
@@ -72,6 +73,20 @@ This document contains deprecated chaise-config parameters.
      maxRelatedTablesOpen: 5
      ```
 
+#### showFaceting
+
+ If `true`, shows the faceting panel on the recordset app.
+
+> Now faceting panel is displayed by default. If you would like to disable it use the new `maxFacetDepth` property of [`facetPanelDisplay`](chaise-config.md#facetpaneldisplay).
+
+
+   - Type: Boolean
+   - Default behavior: the faceting panel will not be available on recordset page
+   - Sample syntax:
+     ```
+     showFaceting: true
+     ```
+
 ### Share and Cite Configuration:
 
  #### shareCiteAcls

docs/user-docs/chaise-config.md

@@ -444,15 +444,6 @@ If a property appears in the same configuration twice, the property defined late
      showWriterEmptyRelatedOnLoad: false
      ```
 
- #### showFaceting
- If `true`, shows the faceting panel on the recordset app.
-   - Type: Boolean
-   - Default behavior: the faceting panel will not be available on recordset page
-   - Sample syntax:
-     ```
-     showFaceting: true
-     ```
-
  #### hideTableOfContents
  If true, hides the table of contents panel on the record app.
    - Type: Boolean
@@ -481,24 +472,31 @@ If a property appears in the same configuration twice, the property defined late
      ```
 
  #### facetPanelDisplay
- Use this property to change the visibility of the facet panel on load. Currently the supported properties are `open` and `closed`. Both properties expect an array of
- contexts and subcontexts associated with `compact` displays. `*` may be used but will be treated the same as `compact`. If a context is present in both open and closed, open will take priority. If the current context is not mentioned in either `open` or `closed`, it will try to inherit its value from a parent context. Defining only one array, `open` or `closed`, will assume the other property is equal to `[]`.
+ Use this property to change the settings related to the facet panel.
+
    - Type: Object
-   - Default behavior: The facet panel will be open in the `compact` display and closed in all others.
+   - Default behavior: The facet panel will be displayed for all tables. It will be opened in the `compact` context (recordset app) and closed in all other subcontexts.
    - General syntax:
      ```
      facetPanelDisplay: {
          open: [_context_],
-         closed: [_context_]
+         closed: [_context_],
+         maxFacetDepth: number
      }
      ```
-   - `facetPanelDisplay` attributes:
-     - `open`: An array of contexts that the facet panel should be open for on page load.
+   - Attributes:
+     - `open`: An array of contexts that the facet panel should be open for on page load. Since facet panels are displayed on context and subcontexts associated with `compact`, only these annotations would be appropriate here. `*` may be used but will be treated the same as `compact`. If a context is present in both open and closed, open will take priority. If the current context is not mentioned in either `open` or `closed`, it will try to inherit its value from a parent context. Defining only one array, `open` or `closed`, will assume the other property is equal to `[]`.
      - `closed`: An array of contexts that the facet panel should be closed for on page load.
+     - `maxFacetDepth`: A number indicating how many levels of facets we should allow. The following are the acceptable values:
+       - 0: disable the faceting feature.
+       - 1: The default behavior. Facet panel is displayed on the initial recordset page or recordset popups. But it's not offered on the facet popups.
+       - 2: Facet panel is displayed on the initial recordset page or recordset popups. It's also displayed on the facet popups.
+       - 2+: Not allowed for now, as we think allowing more facets would confuse the users. When we encounter this value, we will use the maximum we support (2).
    - Sample syntax:
      ```
      facetPanelDisplay: {
-         open: ["compact/select/association"]
+         open: ["compact/select/association"],
+         maxFacetDepth: 2
      }
      ```
 

src/assets/scss/_faceting.scss

@@ -64,6 +64,8 @@
         border: 0;
         border-radius: 0;
         padding: 10px 5px;
+        // reserve enough space for the spinner and drag icons:
+        padding-right: 40px;
         text-transform: none;
         position: relative;
         // Overriding accordian-button css to align right angle bracket icon to left

src/assets/scss/_modal.scss

@@ -245,8 +245,22 @@ div.modal-title {
     .modal-header {
       padding: 0;
       padding-top: 20px;
+      &.modal-header-reduced-top-padding {
+        padding-top: 10px;
+      }
+
       // we don't want it to be flex, since we're doing flex ourselves
       display: block;
+
+      /**
+       * we have to make sure we're setting the min-width here as well,
+       * because the modal-header is outside of the recordset-container, so the _recordset.scss rule is not applied here
+       * (written the same way as app.scss and _recordset.scss)
+       */
+      .top-panel-container .top-flex-panel .top-left-panel.open-panel,
+      .bottom-panel-container .side-panel-resizable.open-panel {
+        min-width: variables.$recordset-facet-panel-min-width;
+      }
     }
 
     .modal-body {

src/assets/scss/_recordset.scss

@@ -3,11 +3,10 @@
 
 .chaise-body {
   .recordset-container {
-    // override the minimum width of side-panel (written the same way as app.scss
-    // this is done to fit the more-filters message
+    // override the minimum width of side-panel (written the same way as app.scss)
     .top-panel-container .top-flex-panel .top-left-panel.open-panel,
     .bottom-panel-container .side-panel-resizable.open-panel {
-      min-width: 305px;
+      min-width: variables.$recordset-facet-panel-min-width;
     }
 
     .top-panel-container {
@@ -159,6 +158,18 @@
     }
   }
 
+  .modal-header-context {
+    color: map-get(variables.$color-map, 'modal-header-context');
+
+    .modal-header-context-separator {
+      padding: 0 0.3em;
+      font-size: 0.8em;
+    }
+    .modal-header-context-colon {
+      padding-left: 1px;
+    }
+  }
+
   .side-panel-container {
     overflow-y: auto;
     overflow-x: hidden;

src/assets/scss/_variables.scss

@@ -32,6 +32,13 @@ $chaise-checkbox-height: 20px;
 // currently only used in recordedit. content/input shouldn't be wider than this
 $re-max-allowed-input-width: 1200px;
 
+/**
+ * the value is set this so it would:
+ * - fit the more-filters message
+ * - have enough space for the drag icon and the rest of items on the header.
+ */
+$recordset-facet-panel-min-width: 305px;
+
 // fonts
 $font-size: 14px;
 $h1-font-size: 2.5rem;

src/assets/scss/maps/_color-map.scss

@@ -18,6 +18,7 @@ $color-map: (
   'input-error-message-danger': #dc3545,
   'input-error-message-warning': #c48d3e,
   'link': #0366d6,
+  'modal-header-context': #666,
   'navbar-banner': #f9e3a1,
   'navbar-collapsed-submenu': #d0e0f0,
   'navbar-dropdown-submenu': #777,