synapse-react-client 2.1.16 → 2.1.17

package/dist/style/components/_query-wrapper-plot-nav.scss

@@ -4,14 +4,22 @@
   @media (min-width: map-get(SRC.$breakpoints, 'medium')) {
     .SRC-wrapper {
       display: grid;
-      grid-template-columns: 60px 10px 25% 10px 75%;
-      padding-right: 120px;
-
+      grid-template-columns: 25% 10px 75%;
+      padding-right: 15px;
+      
       // by default, children take up the full row
       > * {
-        grid-column: 3 / span 3;
+        grid-column: 1 / span 3;
       }
-
+      &.has-facets{
+        padding-right: 120px;
+        grid-template-columns: 60px 10px 25% 10px 75%;
+        > * {
+          grid-column: 3 / span 3;
+        }
+      }
+    }
+    .SRC-wrapper {
       .QueryFilterToggleButton {
         position: relative;
         left: -23px;
@@ -44,20 +52,22 @@
       .download-confirmation {
         grid-row: 2 / span 1;
       }
-      .SearchV2 {
+      .QueryWrapperTextInput {
         grid-row: 3 / span 1;
         margin-bottom: 10px;
       }
       .TotalQueryResults {
         grid-row: 4 / span 1;
       }
-
-      .FacetNav {
+      .ErrorBannerWrapper {
         grid-row: 5 / span 1;
       }
-      .FilterAndView {
+      .FacetNav {
         grid-row: 6 / span 1;
       }
+      .FilterAndView {
+        grid-row: 7 / span 1;
+      }
 
       // column (depends on if we are showing facet filters)
       .isShowingFacetFilters {
@@ -75,7 +85,8 @@
         &.TotalQueryResults,
         &.FilterAndView,
         &.TopLevelControls,
-        &.SearchV2 {
+        &.QueryWrapperTextInput,
+        &.ErrorBannerWrapper {
           grid-column: 5 / span 1;
         }
       }
@@ -96,7 +107,8 @@
     .FacetNav,
     .FilterAndView,
     .TopLevelControls,
-    .SearchV2 {
+    .QueryWrapperTextInput,
+    .ErrorBannerWrapper {
       margin-left: 30px;
     }
   }
@@ -109,7 +121,7 @@
     }
   }
 
-  .SearchV2 {
+  .QueryWrapperTextInput {
     // PORTALS-1856: z-index greater than the Show All Graphs button (500)
     z-index: 600;
   }

package/dist/style/components/{_searchv2.scss → _query-wrapper-text-input.scss}

@@ -1,6 +1,6 @@
 @use '../abstracts/variables' as SRC;
 
-.SearchV2 {
+.QueryWrapperTextInput {
   &__searchbar {
     height: 50px;
     background: #f9f9f9;
@@ -78,7 +78,7 @@
     width: 100%;
   }
 
-  &__column-select.SearchV2__animate_height {
+  &__column-select.QueryWrapperTextInput__animate_height {
     overflow: scroll;
   }
 

package/dist/style/main.css

@@ -17863,10 +17863,17 @@ img.iconImg.SRC-datasetIcon {
 @media (min-width: 768px) {
   .QueryWrapperPlotNav .SRC-wrapper {
     display: grid;
-    grid-template-columns: 60px 10px 25% 10px 75%;
-    padding-right: 120px;
+    grid-template-columns: 25% 10px 75%;
+    padding-right: 15px;
   }
   .QueryWrapperPlotNav .SRC-wrapper > * {
+    grid-column: 1/span 3;
+  }
+  .QueryWrapperPlotNav .SRC-wrapper.has-facets {
+    padding-right: 120px;
+    grid-template-columns: 60px 10px 25% 10px 75%;
+  }
+  .QueryWrapperPlotNav .SRC-wrapper.has-facets > * {
     grid-column: 3/span 3;
   }
   .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton {
@@ -17900,19 +17907,22 @@ img.iconImg.SRC-datasetIcon {
   .QueryWrapperPlotNav .SRC-wrapper .download-confirmation {
     grid-row: 2/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .SearchV2 {
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperTextInput {
     grid-row: 3/span 1;
     margin-bottom: 10px;
   }
   .QueryWrapperPlotNav .SRC-wrapper .TotalQueryResults {
     grid-row: 4/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .FacetNav {
+  .QueryWrapperPlotNav .SRC-wrapper .ErrorBannerWrapper {
     grid-row: 5/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .FilterAndView {
+  .QueryWrapperPlotNav .SRC-wrapper .FacetNav {
     grid-row: 6/span 1;
   }
+  .QueryWrapperPlotNav .SRC-wrapper .FilterAndView {
+    grid-row: 7/span 1;
+  }
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilter {
     grid-column: 1/span 3;
   }
@@ -17922,7 +17932,7 @@ img.iconImg.SRC-datasetIcon {
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilterToggleButton svg {
     margin-left: 2px;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.download-confirmation, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FacetNav, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TotalQueryResults, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FilterAndView, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TopLevelControls, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.SearchV2 {
+  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.download-confirmation, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FacetNav, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TotalQueryResults, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FilterAndView, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TopLevelControls, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryWrapperTextInput, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.ErrorBannerWrapper {
     grid-column: 5/span 1;
   }
   .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.QueryFilter {
@@ -17939,7 +17949,8 @@ img.iconImg.SRC-datasetIcon {
 .QueryWrapperPlotNav .FacetNav,
 .QueryWrapperPlotNav .FilterAndView,
 .QueryWrapperPlotNav .TopLevelControls,
-.QueryWrapperPlotNav .SearchV2 {
+.QueryWrapperPlotNav .QueryWrapperTextInput,
+.QueryWrapperPlotNav .ErrorBannerWrapper {
     margin-left: 30px;
   }
 }
@@ -17948,7 +17959,7 @@ img.iconImg.SRC-datasetIcon {
     display: none;
   }
 }
-.QueryWrapperPlotNav .SearchV2 {
+.QueryWrapperPlotNav .QueryWrapperTextInput {
   z-index: 600;
 }
 .QueryWrapperPlotNav .TotalQueryResults {
@@ -18017,19 +18028,19 @@ img.iconImg.SRC-datasetIcon {
   border-radius: 2px;
 }
 
-.SearchV2__searchbar {
+.QueryWrapperTextInput__searchbar {
   height: 50px;
   background: #f9f9f9;
   border: 1px solid #dddddf;
   display: flex;
   align-items: center;
 }
-.SearchV2__searchbar:focus-within {
+.QueryWrapperTextInput__searchbar:focus-within {
   outline-color: #407ba0;
   outline-style: auto;
   outline-width: 5px;
 }
-.SearchV2__searchbar__searchicon {
+.QueryWrapperTextInput__searchbar__searchicon {
   color: #dcdcdc;
   margin-left: 10px;
   font-size: 17px;
@@ -18037,7 +18048,7 @@ img.iconImg.SRC-datasetIcon {
   flex-grow: 0;
   flex-shrink: 0;
 }
-.SearchV2__searchbar input {
+.QueryWrapperTextInput__searchbar input {
   flex: 1;
   margin-left: 10px;
   width: fit-content;
@@ -18046,21 +18057,21 @@ img.iconImg.SRC-datasetIcon {
   border: none;
   background: #f9f9f9;
 }
-.SearchV2__searchbar input:focus {
+.QueryWrapperTextInput__searchbar input:focus {
   outline-width: 0px;
   outline: none;
 }
-.SearchV2__searchbar__clearbutton {
+.QueryWrapperTextInput__searchbar__clearbutton {
   flex: 1;
   flex-grow: 0;
   flex-shrink: 0;
 }
-.SearchV2__form-container {
+.QueryWrapperTextInput__form-container {
   position: relative;
   width: 100%;
   margin-top: 5px;
 }
-.SearchV2__column-select {
+.QueryWrapperTextInput__column-select {
   background: #ffffff;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   color: #515359;
@@ -18070,7 +18081,7 @@ img.iconImg.SRC-datasetIcon {
   z-index: 5;
   width: inherit;
 }
-.SearchV2__animate_height {
+.QueryWrapperTextInput__animate_height {
   max-height: 0;
   overflow-y: hidden;
   -webkit-transition: max-height 0.3s ease-in-out;
@@ -18078,28 +18089,28 @@ img.iconImg.SRC-datasetIcon {
   -o-transition: max-height 0.3s ease-in-out;
   transition: max-height 0.3s ease-in-out;
 }
-.SearchV2__animate_dropdown-enter-done {
+.QueryWrapperTextInput__animate_dropdown-enter-done {
   max-height: 300px;
 }
-.SearchV2__animate_dropdown-exit-done {
+.QueryWrapperTextInput__animate_dropdown-exit-done {
   max-height: 0;
 }
-.SearchV2__dropdown_pos {
+.QueryWrapperTextInput__dropdown_pos {
   position: relative;
   width: 100%;
 }
-.SearchV2__column-select.SearchV2__animate_height {
+.QueryWrapperTextInput__column-select.QueryWrapperTextInput__animate_height {
   overflow: scroll;
 }
-.SearchV2__animate_dropdown-exit-active, .SearchV2__animate_dropdown-enter-done {
+.QueryWrapperTextInput__animate_dropdown-exit-active, .QueryWrapperTextInput__animate_dropdown-enter-done {
   padding-left: 30px;
   padding-top: 15px;
   padding-bottom: 5px;
 }
-.SearchV2__animate_dropdown-exit-done {
+.QueryWrapperTextInput__animate_dropdown-exit-done {
   padding: 0;
 }
-.SearchV2 .radio {
+.QueryWrapperTextInput .radio {
   padding: 4px 0;
 }
 

package/dist/umd/synapse-react-client.development.css

@@ -18119,10 +18119,17 @@ img.iconImg.SRC-datasetIcon {
 @media (min-width: 768px) {
   .QueryWrapperPlotNav .SRC-wrapper {
     display: grid;
-    grid-template-columns: 60px 10px 25% 10px 75%;
-    padding-right: 120px;
+    grid-template-columns: 25% 10px 75%;
+    padding-right: 15px;
   }
   .QueryWrapperPlotNav .SRC-wrapper > * {
+    grid-column: 1/span 3;
+  }
+  .QueryWrapperPlotNav .SRC-wrapper.has-facets {
+    padding-right: 120px;
+    grid-template-columns: 60px 10px 25% 10px 75%;
+  }
+  .QueryWrapperPlotNav .SRC-wrapper.has-facets > * {
     grid-column: 3/span 3;
   }
   .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton {
@@ -18156,19 +18163,22 @@ img.iconImg.SRC-datasetIcon {
   .QueryWrapperPlotNav .SRC-wrapper .download-confirmation {
     grid-row: 2/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .SearchV2 {
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperTextInput {
     grid-row: 3/span 1;
     margin-bottom: 10px;
   }
   .QueryWrapperPlotNav .SRC-wrapper .TotalQueryResults {
     grid-row: 4/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .FacetNav {
+  .QueryWrapperPlotNav .SRC-wrapper .ErrorBannerWrapper {
     grid-row: 5/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .FilterAndView {
+  .QueryWrapperPlotNav .SRC-wrapper .FacetNav {
     grid-row: 6/span 1;
   }
+  .QueryWrapperPlotNav .SRC-wrapper .FilterAndView {
+    grid-row: 7/span 1;
+  }
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilter {
     grid-column: 1/span 3;
   }
@@ -18183,7 +18193,8 @@ img.iconImg.SRC-datasetIcon {
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TotalQueryResults,
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FilterAndView,
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TopLevelControls,
-  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.SearchV2 {
+  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryWrapperTextInput,
+  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.ErrorBannerWrapper {
     grid-column: 5/span 1;
   }
   .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.QueryFilter {
@@ -18200,7 +18211,8 @@ img.iconImg.SRC-datasetIcon {
   .QueryWrapperPlotNav .FacetNav,
   .QueryWrapperPlotNav .FilterAndView,
   .QueryWrapperPlotNav .TopLevelControls,
-  .QueryWrapperPlotNav .SearchV2 {
+  .QueryWrapperPlotNav .QueryWrapperTextInput,
+  .QueryWrapperPlotNav .ErrorBannerWrapper {
     margin-left: 30px;
   }
 }
@@ -18209,7 +18221,7 @@ img.iconImg.SRC-datasetIcon {
     display: none;
   }
 }
-.QueryWrapperPlotNav .SearchV2 {
+.QueryWrapperPlotNav .QueryWrapperTextInput {
   z-index: 600;
 }
 .QueryWrapperPlotNav .TotalQueryResults {
@@ -18277,19 +18289,19 @@ img.iconImg.SRC-datasetIcon {
   box-shadow: none;
   border-radius: 2px;
 }
-.SearchV2__searchbar {
+.QueryWrapperTextInput__searchbar {
   height: 50px;
   background: #f9f9f9;
   border: 1px solid #dddddf;
   display: flex;
   align-items: center;
 }
-.SearchV2__searchbar:focus-within {
+.QueryWrapperTextInput__searchbar:focus-within {
   outline-color: #407ba0;
   outline-style: auto;
   outline-width: 5px;
 }
-.SearchV2__searchbar__searchicon {
+.QueryWrapperTextInput__searchbar__searchicon {
   color: #dcdcdc;
   margin-left: 10px;
   font-size: 17px;
@@ -18297,7 +18309,7 @@ img.iconImg.SRC-datasetIcon {
   flex-grow: 0;
   flex-shrink: 0;
 }
-.SearchV2__searchbar input {
+.QueryWrapperTextInput__searchbar input {
   flex: 1;
   margin-left: 10px;
   width: fit-content;
@@ -18306,21 +18318,21 @@ img.iconImg.SRC-datasetIcon {
   border: none;
   background: #f9f9f9;
 }
-.SearchV2__searchbar input:focus {
+.QueryWrapperTextInput__searchbar input:focus {
   outline-width: 0px;
   outline: none;
 }
-.SearchV2__searchbar__clearbutton {
+.QueryWrapperTextInput__searchbar__clearbutton {
   flex: 1;
   flex-grow: 0;
   flex-shrink: 0;
 }
-.SearchV2__form-container {
+.QueryWrapperTextInput__form-container {
   position: relative;
   width: 100%;
   margin-top: 5px;
 }
-.SearchV2__column-select {
+.QueryWrapperTextInput__column-select {
   background: #ffffff;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   color: #515359;
@@ -18330,7 +18342,7 @@ img.iconImg.SRC-datasetIcon {
   z-index: 5;
   width: inherit;
 }
-.SearchV2__animate_height {
+.QueryWrapperTextInput__animate_height {
   max-height: 0;
   overflow-y: hidden;
   -webkit-transition: max-height 0.3s ease-in-out;
@@ -18338,29 +18350,29 @@ img.iconImg.SRC-datasetIcon {
   -o-transition: max-height 0.3s ease-in-out;
   transition: max-height 0.3s ease-in-out;
 }
-.SearchV2__animate_dropdown-enter-done {
+.QueryWrapperTextInput__animate_dropdown-enter-done {
   max-height: 300px;
 }
-.SearchV2__animate_dropdown-exit-done {
+.QueryWrapperTextInput__animate_dropdown-exit-done {
   max-height: 0;
 }
-.SearchV2__dropdown_pos {
+.QueryWrapperTextInput__dropdown_pos {
   position: relative;
   width: 100%;
 }
-.SearchV2__column-select.SearchV2__animate_height {
+.QueryWrapperTextInput__column-select.QueryWrapperTextInput__animate_height {
   overflow: scroll;
 }
-.SearchV2__animate_dropdown-exit-active,
-.SearchV2__animate_dropdown-enter-done {
+.QueryWrapperTextInput__animate_dropdown-exit-active,
+.QueryWrapperTextInput__animate_dropdown-enter-done {
   padding-left: 30px;
   padding-top: 15px;
   padding-bottom: 5px;
 }
-.SearchV2__animate_dropdown-exit-done {
+.QueryWrapperTextInput__animate_dropdown-exit-done {
   padding: 0;
 }
-.SearchV2 .radio {
+.QueryWrapperTextInput .radio {
   padding: 4px 0;
 }
 .page-progress button,
@@ -23479,6 +23491,33 @@ body.reflex-row-resize {
   border-right: 8px solid #e4e4e4;
   border-left: 8px solid #e4e4e4;
 }
+
+/* sass-plugin-0:/home/runner/work/Synapse-React-Client/Synapse-React-Client/src/lib/style/components/query_filter/_facet-filter-header.scss */
+.FacetFilterHeader {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #dcdcdc;
+}
+.FacetFilterHeader__label {
+  font-weight: bold;
+}
+.FacetFilterHeader__collapseToggleBtn {
+  margin: 0;
+  padding: 0;
+  line-height: 14px;
+  font-size: 18px;
+  color: #407ba0 !important;
+}
+.FacetFilterHeader__collapseToggleBtn:hover {
+  color: #407ba0 !important;
+  text-decoration: underline;
+}
+.FacetFilterHeader__collapseToggleBtn .icon-plus,
+.FacetFilterHeader__collapseToggleBtn .icon-minus {
+  width: 14px;
+  height: 14px;
+  vertical-align: text-top;
+}
 /*!
  * https://github.com/arqex/react-datetime
  */