Facet reoder: Add explicit save and allow reseting to default (#2558)

* change how facet reorder works by adding more controls

help-docs/chaise/facet-panel.md

@@ -0,0 +1,56 @@
+# Filter panel
+
+Filters are the data constraints or restrictions that are applied during search operations. For example, search for "mouse" data, or data submitted by certain "principal investigators".
+
+The filter panel (displayed on the left under "Refine search") contains a list of filter controls used to set these constraints. This page provides details on how the filter panel works. Please find the topics discussed in the table of contents below:
+
+- [Customizing the order of filters](#customizing-the-order-of-filters)
+  - [How to move filters](#how-to-move-filters)
+  - [How to save the order](#how-to-save-the-order)
+  - [How to apply the default order](#how-to-apply-the-default-order)
+  - [How to apply the saved order](#how-to-apply-the-saved-order)
+
+
+## Customizing the order of filters {id=customizing-the-order-of-filters}
+
+You can change the order of filters in the filter panel. This section goes over how you could move filters, save the customized order, and, if needed, discard the customized order.
+
+### How to move filters {id=how-to-move-filters}
+
+To move the filters,
+
+  1. Left click on the grab ( :span::/span:{.fa-solid .fa-grip-vertical .help-page-icon} ) icon.
+  2. While holding the left click, move your mouse to the desired location.
+  3. Release the left click to finish the drag movement.
+
+Keep in mind that this order is not going to be persistent and will change back after refreshing the page. To save the order, please refer to the [How to save the order](#how-to-save-the-order) section.
+
+### How to save the order {id=how-to-save-the-order}
+
+If you would like to save the order in your browser,
+
+  1. Click on the menu icon (:span::/span:{.fa-solid .fa-bars .help-page-icon}) besides the "Refine search".
+
+  2. In the opened menu, select the ":span::/span:{.fa-solid .fa-check-to-slot .help-page-icon} Save filter order" option.
+
+This will ensure your customized order is saved in your browser. If you would like to apply the default order, please refer to the [How to discard the saved order](#how-to-apply-the-default-order) section.
+
+### How to apply the default order {id=how-to-apply-the-default-order}
+
+If you've customized the order, or applied the saved state, you may go back to the default order by following these steps:
+
+  1. Click on the menu icon ( :span::/span:{.fa-solid .fa-bars .help-page-icon} ) besides the "Refine search".
+
+  2. In the opened menu, select the ":span::/span:{.fa-solid .fa-undo .help-page-icon} Reset to default" option.
+
+With this, the filter panel will reset to the default order. Some filters move, and some might get opened/closed depending on the current state of the page. If you want to return to your saved order, please follow the steps described [here](#how-to-apply-the-saved-order).
+
+### How to apply the saved order {id=how-to-apply-the-saved-order}
+
+If you have saved the filter order before, we will apply this order when you load the page. If you made some modifications to this order, follow these steps to go back to the saved order:
+
+  1. Click on the menu icon ( :span::/span:{.fa-solid .fa-bars .help-page-icon} ) besides the "Refine search".
+
+  2. In the opened menu, select the ":span::/span:{.fa-solid .fa-check .help-page-icon} Apply saved state" option.
+
+With this, the filter panel will reset to the saved order. Some filters move, and some might get opened/closed depending on the current state of the page.

src/assets/scss/_buttons.scss

@@ -95,6 +95,18 @@
   &.chaise-btn-no-padding {
     padding: 0;
   }
+
+  // this is currently designed mostly for 
+  &.chaise-btn-with-indicator:before {
+    content: '';
+    background-color: map-get(variables.$color-map, 'primary');
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
 }
 
 //TODO
@@ -113,8 +125,3 @@
 .dropdown-item:active {
   background-color: unset;
 }
-
-// override the default behavior of dropdown toggle btn in bootstrap
-.show > button.chaise-btn.btn.dropdown-toggle {
-  @include helpers.chaise-btn-primary();
-}

src/assets/scss/_dropdown.scss

@@ -1,5 +1,10 @@
 @use 'sass:map';
 @use 'variables';
+@use 'helpers';
+
+.dropdown.chaise-dropdown-no-icon .dropdown-toggle::after{
+  display: none;
+}
 
 // the .dropdown selector is neede to ensure overriding default bootstrap and chaise styles
 .chaise-dropdown.dropdown {
@@ -111,6 +116,7 @@
   // style to override react-bootstrap
   .dropdown-item {
     padding: 0;
+
   }
 
   // change the default link behaviors to not show the underline
@@ -132,6 +138,13 @@
     padding: 3px 15px 3px 15px;
     line-height: 1.4;
 
+    &.dropdown-item-w-icon {
+      padding: 3px 15px 3px 8px;
+      .dropdown-item-icon {
+        margin-right: 7px;
+      }
+    }
+
     &:focus,
     &:hover {
       color: lighten(map-get(variables.$color-map, 'black'), 10%);
@@ -166,7 +179,7 @@
     right: unset;
   }
 
-  .disable-link {
+  .disable-link, .disabled {
     pointer-events: none !important;
     cursor: default !important;
     color: map-get(variables.$color-map, 'disabled') !important;
@@ -177,3 +190,18 @@
     }
   }
 }
+
+// override the default behavior of dropdown toggle btn in bootstrap
+.dropdown.show > button.chaise-btn.dropdown-toggle {
+  &.chaise-btn-primary {
+    @include helpers.chaise-btn-primary();
+  }
+
+  &.chaise-btn-secondary, &.chaise-btn-tertiary {
+    @include helpers.chaise-btn-secondary();
+
+    &:focus {
+      background-color: none;
+    }
+  }
+}

src/assets/scss/_faceting.scss

@@ -1,6 +1,14 @@
 @use 'sass:map';
 @use 'variables';
 
+.side-panel-container {
+  .side-panel-heading-menu {
+    position: absolute;
+    top: -37px;
+    left: 125px;
+  }
+}
+
 .faceting-columns-container {
   // disable the animation from the accordion
   .accordion-collapse.collapsing {

src/assets/scss/app.scss

@@ -596,6 +596,10 @@ html {
             padding: 0;
             padding-bottom: 3px;
           }
+
+          .pull-left {
+            display: flex;
+          }
         }
       }
 
@@ -1076,6 +1080,10 @@ html {
       padding-top: 20px;
       padding-bottom: 20px;
     }
+
+    .help-page-icon {
+      margin: 0 5px;
+    }
   }
 
   /****** switch user accounts help page *******/