synapse-react-client 3.0.34 → 3.0.37

package/dist/style/base/_core.scss

@@ -145,6 +145,13 @@ svg.SRC-hoverBox {
   }
 }
 
+.SRC-grey-background-hover {
+  &:hover,
+  &[aria-expanded='true'] {
+    background-color: map.get(SRC.$colors, 'gray-400');
+  }
+}
+
 .SRC-facets {
   padding: 4px 12px;
   border-radius: 20px;
@@ -1205,7 +1212,7 @@ hr ~ .SRC-wrapper {
   padding: 0px;
 }
 
-#addAndRemoveColumns ~ div.dropdown-menu {
+#addAndRemoveColumns-dropdown.dropdown-menu {
   max-height: 300px;
   overflow: auto;
 }

package/dist/style/components/_column-selection.scss

@@ -9,19 +9,3 @@
     stroke: white !important;
   }
 }
-
-button {
-  &:hover {
-    @extend %column-theme-dark;
-    .SRC-column-light-theme {
-      .SRC-light-column {
-        fill: SRC.$primary-action-color !important;
-        stroke: white !important;
-      }
-    }
-  }
-}
-
-.show button svg {
-  @extend %column-theme-dark;
-}

package/dist/style/components/_element-with-tooltip.scss

@@ -12,13 +12,6 @@
       fill: SRC.$primary-action-color;
     }
   }
-
-  &:hover {
-    svg,
-    path {
-      fill: #fff;
-    }
-  }
   &.dark-theme {
     svg {
       fill: SRC.$primary-action-color;
@@ -30,27 +23,6 @@
         fill: SRC.$primary-action-color;
       }
     }
-
-    &:hover {
-      svg,
-      path {
-        fill: #fff;
-      }
-    }
-  }
-}
-.show {
-  .ElementWithTooltip {
-    &.dark-theme {
-      svg {
-        fill: SRC.$primary-action-color;
-        color: white !important;
-
-        path {
-          fill: white;
-        }
-      }
-    }
   }
 }
 

package/dist/style/components/_query-filter.scss

@@ -5,8 +5,7 @@
   &__title {
     font-weight: bold;
   }
-  padding: 2rem;
-  background-color: rgba(map.get(SRC.$primary-color-palette, 500), 0.05);
+  padding-top: 18px;
   &__facet {
     margin: 2rem 0;
     &:first-child {

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

@@ -1,77 +1,48 @@
 @use '../abstracts/variables' as SRC;
+@use 'sass:map';
 
 .QueryWrapperPlotNav {
   @media (min-width: map-get(SRC.$breakpoints, 'medium')) {
     .SRC-wrapper {
       display: grid;
-      grid-template-columns: 25% 10px 75%;
-      padding-right: 15px;
+      grid-template-columns: 25% 75%;
 
       // by default, children take up the full row
       > * {
-        grid-column: 1 / span 3;
+        grid-column: 1 / span 2;
       }
       &.has-facets {
-        padding-right: 120px;
-        grid-template-columns: 60px 10px 25% 10px 75%;
+        grid-template-columns: 25% 75%;
         > * {
-          grid-column: 3 / span 3;
-        }
-        .download-confirmation,
-        .TotalQueryResults,
-        .FacetNav,
-        .FilterAndView,
-        .TopLevelControls,
-        .QueryWrapperSearchInput,
-        .QueryWrapperSqlEditorInput,
-        .ErrorBannerWrapper {
-          margin-left: 30px;
+          grid-column: 1 / span 2;
         }
       }
     }
     .SRC-wrapper {
-      .QueryFilterToggleButton {
-        position: relative;
-        left: -23px;
-        top: 20px;
-        button.btn.btn-outline-primary {
-          border-radius: 50% !important;
-          background-color: white;
-          box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25) !important; // bootstrap-4-backport specifies "none !important" :(
-          border: none;
-          width: 45px;
-          height: 45px;
-          &:hover {
-            background-color: SRC.$primary-action-color;
-          }
-        }
-      }
       // row
       .QueryFilter {
-        grid-row: 1 / span 100;
-      }
-      .QueryFilterToggleButton {
-        grid-row: 1 / span 1;
-        svg {
-          margin-bottom: 2px;
-        }
+        grid-row: 3 / span 100;
       }
       .TopLevelControls {
         grid-row: 1 / span 1;
       }
-      .download-confirmation {
+      .TotalQueryResults {
         grid-row: 2 / span 1;
       }
-      .QueryWrapperSearchInput {
+      .download-confirmation {
         grid-row: 3 / span 1;
-        margin-bottom: 10px;
       }
-      .QueryWrapperSqlEditorInput {
+      .QueryWrapperSearchInput {
         grid-row: 4 / span 1;
-        margin-bottom: 10px;
+        .MuiCollapse-entered {
+          margin: 5px 0px;
+        }
       }
-      .TotalQueryResults {
+      .QueryWrapperSqlEditorInput {
         grid-row: 5 / span 1;
+        .MuiCollapse-entered {
+          margin: 5px 0px;
+        }
       }
       .ErrorBannerWrapper {
         grid-row: 6 / span 1;
@@ -86,23 +57,20 @@
       // column (depends on if we are showing facet filters)
       .isShowingFacetFilters {
         &.QueryFilter {
-          grid-column: 1 / span 3;
-        }
-        &.QueryFilterToggleButton {
-          grid-column: 4 / span 1;
-          svg {
-            margin-left: 2px;
-          }
+          grid-column: 1 / span 1;
         }
         &.download-confirmation,
         &.FacetNav,
-        &.TotalQueryResults,
-        &.FilterAndView,
-        &.TopLevelControls,
         &.QueryWrapperSearchInput,
         &.QueryWrapperSqlEditorInput,
-        &.ErrorBannerWrapper {
-          grid-column: 5 / span 1;
+        &.ErrorBannerWrapper,
+        &.FilterAndView {
+          grid-column: 2 / span 1;
+        }
+
+        &.TopLevelControls,
+        &.TotalQueryResults {
+          grid-column: 1 / span 2;
         }
       }
       .isHidingFacetFilters {
@@ -112,18 +80,23 @@
             display: none;
           }
         }
-        &.QueryFilterToggleButton {
-          grid-column: 2 / span 1;
+        &.FilterAndView {
+          margin-top: 10px;
         }
       }
     }
   }
 
-  @media (max-width: map-get(SRC.$breakpoints, 'medium')) {
-    .SRC-wrapper {
-      .QueryFilterToggleButton {
-        display: none;
-      }
+  .SRC-wrapper {
+    > .QueryFilter,
+    > .download-confirmation,
+    > .FacetNav,
+    > .TotalQueryResults,
+    > .QueryWrapperSearchInput,
+    > .QueryWrapperSqlEditorInput,
+    > .ErrorBannerWrapper,
+    > .FilterAndView {
+      margin-left: 15px;
     }
   }
 
@@ -155,22 +128,38 @@
 }
 
 .TopLevelControls {
-  h3 {
+  > * {
     display: flex;
     justify-content: space-between;
     font-weight: bold;
-    margin-top: 0px;
+    margin: 0px 0px 0px 15px;
+    p {
+      margin-top: 0px;
+    }
   }
-  padding-top: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  margin-bottom: 15px;
+  background-color: rgba(map.get(SRC.$primary-color-palette, 500), 0.05);
   &__showhidefacetfilters {
     display: none;
   }
   &__querycount {
     display: inline-flex;
     align-items: center;
+    &__facetFilterLink {
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: stretch;
+      margin-left: 15px;
+      font-weight: 400 !important;
+      &__text {
+        margin-top: 4px;
+      }
+      svg {
+        margin-right: 7px;
+        margin-top: 8px;
+      }
+    }
   }
   &__actions {
     display: inline-flex;

package/dist/style/components/_total-query-results.scss

@@ -26,6 +26,7 @@
     border-radius: 2px;
     white-space: nowrap;
     height: fit-content;
+    margin-top: 8px;
   }
 }
 
@@ -55,34 +56,3 @@
     }
   }
 }
-
-.notch-down {
-  position: relative;
-  &:after,
-  &::after {
-    position: absolute;
-    left: 2.4rem;
-    bottom: -10px;
-    content: '';
-    width: 0;
-    height: 0;
-    border-top: solid 10px;
-    border-top-color: #f9f9f9;
-    border-left: solid 10px transparent;
-    border-right: solid 10px transparent;
-  }
-  // https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color
-  &:before,
-  &::before {
-    position: absolute;
-    left: calc(2.4rem - 2px);
-    bottom: -12px;
-    content: '';
-    width: 0;
-    height: 0;
-    border-top: solid 12px;
-    border-top-color: inherit;
-    border-left: solid 12px transparent;
-    border-right: solid 12px transparent;
-  }
-}

package/dist/style/main.css

@@ -14333,6 +14333,10 @@ svg.SRC-hoverBox:hover:after {
   fill: #fff;
 }
 
+.SRC-grey-background-hover:hover, .SRC-grey-background-hover[aria-expanded=true] {
+  background-color: #dfe2e6;
+}
+
 .SRC-facets {
   padding: 4px 12px;
   border-radius: 20px;
@@ -15382,7 +15386,7 @@ hr ~ .SRC-wrapper .SRC-marginTopMinusTen {
   padding: 0px;
 }
 
-#addAndRemoveColumns ~ div.dropdown-menu {
+#addAndRemoveColumns-dropdown.dropdown-menu {
   max-height: 300px;
   overflow: auto;
 }
@@ -17406,8 +17410,7 @@ svg.HelpButton {
 }
 
 .QueryFilter {
-  padding: 2rem;
-  background-color: rgba(64, 123, 160, 0.05);
+  padding-top: 18px;
 }
 .QueryFilter__title {
   font-weight: bold;
@@ -17991,6 +17994,7 @@ svg.HelpButton {
   border-radius: 2px;
   white-space: nowrap;
   height: fit-content;
+  margin-top: 8px;
 }
 
 .SelectionCriteriaPill {
@@ -18019,34 +18023,6 @@ svg.HelpButton {
   font-size: 1.25rem;
 }
 
-.notch-down {
-  position: relative;
-}
-.notch-down:after, .notch-down::after {
-  position: absolute;
-  left: 2.4rem;
-  bottom: -10px;
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: solid 10px;
-  border-top-color: #f9f9f9;
-  border-left: solid 10px transparent;
-  border-right: solid 10px transparent;
-}
-.notch-down:before, .notch-down::before {
-  position: absolute;
-  left: calc(2.4rem - 2px);
-  bottom: -12px;
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: solid 12px;
-  border-top-color: inherit;
-  border-left: solid 12px transparent;
-  border-right: solid 12px transparent;
-}
-
 .page-progress button,
 .page-progress button:active,
 .page-progress button:focus,
@@ -18223,71 +18199,41 @@ svg.HelpButton {
 @media (min-width: 768px) {
   .QueryWrapperPlotNav .SRC-wrapper {
     display: grid;
-    grid-template-columns: 25% 10px 75%;
-    padding-right: 15px;
+    grid-template-columns: 25% 75%;
   }
   .QueryWrapperPlotNav .SRC-wrapper > * {
-    grid-column: 1/span 3;
+    grid-column: 1/span 2;
   }
   .QueryWrapperPlotNav .SRC-wrapper.has-facets {
-    padding-right: 120px;
-    grid-template-columns: 60px 10px 25% 10px 75%;
+    grid-template-columns: 25% 75%;
   }
   .QueryWrapperPlotNav .SRC-wrapper.has-facets > * {
-    grid-column: 3/span 3;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper.has-facets .download-confirmation,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .TotalQueryResults,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .FacetNav,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .FilterAndView,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .TopLevelControls,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .QueryWrapperSearchInput,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .QueryWrapperSqlEditorInput,
-.QueryWrapperPlotNav .SRC-wrapper.has-facets .ErrorBannerWrapper {
-    margin-left: 30px;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton {
-    position: relative;
-    left: -23px;
-    top: 20px;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton button.btn.btn-outline-primary {
-    border-radius: 50% !important;
-    background-color: white;
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25) !important;
-    border: none;
-    width: 45px;
-    height: 45px;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton button.btn.btn-outline-primary:hover {
-    background-color: rgb(64, 123, 160);
+    grid-column: 1/span 2;
   }
   .QueryWrapperPlotNav .SRC-wrapper .QueryFilter {
-    grid-row: 1/span 100;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton {
-    grid-row: 1/span 1;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton svg {
-    margin-bottom: 2px;
+    grid-row: 3/span 100;
   }
   .QueryWrapperPlotNav .SRC-wrapper .TopLevelControls {
     grid-row: 1/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .download-confirmation {
+  .QueryWrapperPlotNav .SRC-wrapper .TotalQueryResults {
     grid-row: 2/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSearchInput {
+  .QueryWrapperPlotNav .SRC-wrapper .download-confirmation {
     grid-row: 3/span 1;
-    margin-bottom: 10px;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSqlEditorInput {
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSearchInput {
     grid-row: 4/span 1;
-    margin-bottom: 10px;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .TotalQueryResults {
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSearchInput .MuiCollapse-entered {
+    margin: 5px 0px;
+  }
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSqlEditorInput {
     grid-row: 5/span 1;
   }
+  .QueryWrapperPlotNav .SRC-wrapper .QueryWrapperSqlEditorInput .MuiCollapse-entered {
+    margin: 5px 0px;
+  }
   .QueryWrapperPlotNav .SRC-wrapper .ErrorBannerWrapper {
     grid-row: 6/span 1;
   }
@@ -18298,16 +18244,13 @@ svg.HelpButton {
     grid-row: 8/span 1;
   }
   .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilter {
-    grid-column: 1/span 3;
-  }
-  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilterToggleButton {
-    grid-column: 4/span 1;
+    grid-column: 1/span 1;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryFilterToggleButton svg {
-    margin-left: 2px;
+  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.download-confirmation, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FacetNav, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryWrapperSearchInput, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryWrapperSqlEditorInput, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.ErrorBannerWrapper, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.FilterAndView {
+    grid-column: 2/span 1;
   }
-  .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.QueryWrapperSearchInput, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.QueryWrapperSqlEditorInput, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.ErrorBannerWrapper {
-    grid-column: 5/span 1;
+  .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TopLevelControls, .QueryWrapperPlotNav .SRC-wrapper .isShowingFacetFilters.TotalQueryResults {
+    grid-column: 1/span 2;
   }
   .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.QueryFilter {
     grid-column: 1/span 1;
@@ -18315,14 +18258,19 @@ svg.HelpButton {
   .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.QueryFilter > * {
     display: none;
   }
-  .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.QueryFilterToggleButton {
-    grid-column: 2/span 1;
+  .QueryWrapperPlotNav .SRC-wrapper .isHidingFacetFilters.FilterAndView {
+    margin-top: 10px;
   }
 }
-@media (max-width: 768px) {
-  .QueryWrapperPlotNav .SRC-wrapper .QueryFilterToggleButton {
-    display: none;
-  }
+.QueryWrapperPlotNav .SRC-wrapper > .QueryFilter,
+.QueryWrapperPlotNav .SRC-wrapper > .download-confirmation,
+.QueryWrapperPlotNav .SRC-wrapper > .FacetNav,
+.QueryWrapperPlotNav .SRC-wrapper > .TotalQueryResults,
+.QueryWrapperPlotNav .SRC-wrapper > .QueryWrapperSearchInput,
+.QueryWrapperPlotNav .SRC-wrapper > .QueryWrapperSqlEditorInput,
+.QueryWrapperPlotNav .SRC-wrapper > .ErrorBannerWrapper,
+.QueryWrapperPlotNav .SRC-wrapper > .FilterAndView {
+  margin-left: 15px;
 }
 .QueryWrapperPlotNav .QueryWrapperTextInput {
   z-index: 600;
@@ -18346,15 +18294,15 @@ svg.HelpButton {
 }
 
 .TopLevelControls {
-  padding-top: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  margin-bottom: 15px;
+  background-color: rgba(64, 123, 160, 0.05);
 }
-.TopLevelControls h3 {
+.TopLevelControls > * {
   display: flex;
   justify-content: space-between;
   font-weight: bold;
+  margin: 0px 0px 0px 15px;
+}
+.TopLevelControls > * p {
   margin-top: 0px;
 }
 .TopLevelControls__showhidefacetfilters {
@@ -18364,6 +18312,22 @@ svg.HelpButton {
   display: inline-flex;
   align-items: center;
 }
+.TopLevelControls__querycount__facetFilterLink {
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  margin-left: 15px;
+  font-weight: 400 !important;
+}
+.TopLevelControls__querycount__facetFilterLink__text {
+  margin-top: 4px;
+}
+.TopLevelControls__querycount__facetFilterLink svg {
+  margin-right: 7px;
+  margin-top: 8px;
+}
 .TopLevelControls__actions {
   display: inline-flex;
   align-items: center;
@@ -18526,10 +18490,6 @@ svg.HelpButton {
 .ElementWithTooltip svg path {
   fill: rgb(64, 123, 160);
 }
-.ElementWithTooltip:hover svg,
-.ElementWithTooltip:hover path {
-  fill: #fff;
-}
 .ElementWithTooltip.dark-theme svg {
   fill: rgb(64, 123, 160);
   color: rgb(64, 123, 160) !important;
@@ -18539,18 +18499,6 @@ svg.HelpButton {
 .ElementWithTooltip.dark-theme svg path {
   fill: rgb(64, 123, 160);
 }
-.ElementWithTooltip.dark-theme:hover svg,
-.ElementWithTooltip.dark-theme:hover path {
-  fill: #fff;
-}
-
-.show .ElementWithTooltip.dark-theme svg {
-  fill: rgb(64, 123, 160);
-  color: white !important;
-}
-.show .ElementWithTooltip.dark-theme svg path {
-  fill: white;
-}
 
 button.ElementWithTooltip:active:focus, button.ElementWithTooltip:focus {
   outline: none;
@@ -18567,19 +18515,6 @@ button.ElementWithTooltip:active:focus, button.ElementWithTooltip:focus {
   border-radius: 2px;
 }
 
-.show button svg .SRC-primary-fill-color, button:hover .SRC-primary-fill-color {
-  fill: white;
-}
-.show button svg .SRC-primary-stroke-color, button:hover .SRC-primary-stroke-color {
-  fill: rgb(64, 123, 160) !important;
-  stroke: white !important;
-}
-
-button:hover .SRC-column-light-theme .SRC-light-column {
-  fill: rgb(64, 123, 160) !important;
-  stroke: white !important;
-}
-
 .page-progress button,
 .page-progress button:active,
 .page-progress button:focus,