react-autoql 4.7.1 → 4.8.1

package/dist/autoql.esm.css

@@ -1,3 +1,10 @@
+.react-autoql-spinner-centered {
+  width: 100%;
+  text-align: center;
+  padding-top: 10px; }
+
+.react-autosuggest__suggestions-container--open::-webkit-scrollbar {
+  visibility: visible !important; }
 
 .react-autoql-icon {
   position: relative;
@@ -23,6 +30,7 @@ span.react-autoql-icon {
     padding: 0;
     opacity: 1;
     height: 1em;
+    width: 1em;
     margin-bottom: -0.15em; }
 
 .slack-logo {
@@ -229,7 +237,7 @@ span.react-autoql-icon {
   display: block;
   width: calc(100% - 20px);
   height: unset;
-  border-radius: 24px;
+  border-radius: 15px;
   font-family: inherit;
   font-size: 15px;
   font-weight: normal;
@@ -238,7 +246,7 @@ span.react-autoql-icon {
   box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
   /* Default styles outside of data messenger */
   background-color: var(--react-autoql-background-color-primary);
-  color: #5d5d5d; }
+  color: var(--react-autoql-text-color-primary); }
 
 .react-autoql-bar-container.autosuggest-top
 .react-autosuggest__suggestions-container--open {
@@ -287,7 +295,7 @@ span.react-autoql-icon {
 .react-autoql-bar-container .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: 12px;
-  color: #777; }
+  color: var(--react-autoql-text-color-placeholder); }
 
 .input-response-loading-container {
   position: absolute;
@@ -311,7 +319,8 @@ span.react-autoql-icon {
   max-width: 100%;
   width: 100%;
   background-color: inherit;
-  position: relative; }
+  position: relative;
+  display: flex; }
   .react-autoql-table-container.infinite:not(.last-page) .tabulator-row:last-child {
     margin-bottom: 40px; }
   .react-autoql-table-container .table-loader {
@@ -323,7 +332,7 @@ span.react-autoql-icon {
     background-color: transparent;
     color: var(--react-autoql-accent-color); }
     .react-autoql-table-container .table-loader.table-page-loader {
-      top: 0;
+      top: 50px;
       bottom: 0;
       right: 0;
       left: 0; }
@@ -333,7 +342,7 @@ span.react-autoql-icon {
       z-index: 0; }
 
 .react-autoql-table {
-  margin-bottom: 0; }
+  margin-bottom: 0 !important; }
 
 /* tabulator */
 .react-autoql-table.tabulator,
@@ -344,10 +353,32 @@ span.react-autoql-icon {
 .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
   background-color: inherit; }
 
+.react-autoql-table-container:not(.supports-drilldown)
+.react-autoql-table.tabulator
+.tabulator-row
+.tabulator-cell {
+  cursor: text; }
+
 .react-autoql-table-container.supports-drilldown
 .react-autoql-table.tabulator
-.tabulator-row.tabulator-unselectable:hover {
-  cursor: pointer !important; }
+.tabulator-row
+.tabulator-cell.pivot-category {
+  font-weight: 600; }
+
+.react-autoql-table-container.supports-drilldown
+.react-autoql-table.tabulator
+.tabulator-row
+.tabulator-cell:not(.pivot-category) {
+  transition: color 0.1s ease;
+  cursor: pointer; }
+
+.react-autoql-table-container.supports-drilldown.pivot .react-autoql-table.tabulator
+.tabulator-row
+.tabulator-cell:not(.pivot-category):hover,
+.react-autoql-table-container.supports-drilldown:not(.pivot) .react-autoql-table.tabulator
+.tabulator-row:hover
+.tabulator-cell {
+  color: var(--react-autoql-accent-color); }
 
 .react-autoql-table.tabulator
 .tabulator-header
@@ -364,13 +395,15 @@ span.react-autoql-icon {
 
 .react-autoql-table.tabulator {
   background-color: inherit;
-  height: 100%; }
+  flex: 1; }
 
 .react-autoql-table .tabulator-row {
   /* user-select: none; This breaks copy/paste */
   border-bottom: 1px solid var(--react-autoql-border-color);
   background-color: var(--react-autoql-background-color-primary);
   z-index: 1; }
+  .react-autoql-table .tabulator-row:last-child {
+    border-bottom: none; }
 
 .tabulator-cell:not(:first-child) {
   border-left: 1px solid !important;
@@ -382,7 +415,7 @@ span.react-autoql-icon {
 .react-autoql-table-container.resizing {
   width: 100vw; }
   .react-autoql-table-container.resizing .react-autoql-table {
-    display: none; }
+    visibility: hidden; }
 
 .react-autoql-table-container.filtering {
   min-height: 125px; }
@@ -409,9 +442,9 @@ span.react-autoql-icon {
   .react-autoql-table-container:not(.filtering) .react-autoql-table .tabulator-header-filter {
     display: none; }
   .react-autoql-table-container:not(.filtering) .react-autoql-table .tabulator-tableHolder {
-    min-height: calc(100% - 40px) !important;
-    height: calc(100% - 40px) !important;
-    max-height: calc(100% - 40px) !important; }
+    min-height: calc(100% - 34px) !important;
+    height: calc(100% - 34px) !important;
+    max-height: calc(100% - 34px) !important; }
 
 .react-autoql-table.tabulator
 .tabulator-header
@@ -465,9 +498,12 @@ span.react-autoql-icon {
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease; }
 
+.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
+  background-color: transparent; }
+
 .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
 .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
-.react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
+.react-autoql-table .tabulator-tableHolder::-webkit-scrollbar-corner {
   background-color: transparent; }
 
 .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
@@ -486,7 +522,7 @@ span.react-autoql-icon {
   border: 1px solid #28a8e0; }
 
 .tabulator-table .tabulator-row .tabulator-cell {
-  min-height: 38px; }
+  min-height: 32px; }
 
 /* Center header titles */
 .react-autoql-table .tabulator-header .tabulator-col {
@@ -773,51 +809,58 @@ g.legendOrdinal .legendTitle tspan {
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
-  transition: opacity 0.2s ease; }
+  transition: opacity 0.2s ease;
+  /* These are not inline styles since they do not apply to saved PNG charts */ }
   .react-autoql-chart-container svg {
     background: transparent !important; }
   .react-autoql-chart-container.loading {
     opacity: 0;
     transition: none; }
-
-/* These are not inline styles since they do not apply to saved PNG charts */
-.react-autoql-chart-container .square {
-  transition: fill-opacity 0.3s ease; }
-
-.react-autoql-chart-container .bar,
-.react-autoql-chart-container .stacked-bar,
-.react-autoql-chart-container .circle {
-  transition: fill-opacity 0.3s ease;
-  fill-opacity: 0.7 !important; }
-
-.react-autoql-chart-container .bar:hover,
-.react-autoql-chart-container .stacked-bar:hover,
-.react-autoql-chart-container .circle:hover,
-.react-autoql-chart-container .square:hover {
-  fill-opacity: 1 !important; }
-
-.react-autoql-chart-container .vertex-dot:hover,
-.react-autoql-chart-container .line-dot:hover,
-.react-autoql-chart-container .line-dot.active {
-  opacity: 1 !important; }
-
-.react-autoql-chart-container .bar.active,
-.react-autoql-chart-container .stacked-bar.active {
-  fill-opacity: 1 !important; }
-
-.axis {
-  font-family: inherit; }
-
-.pie-chart .labels {
-  font-size: 12px;
-  font-weight: 600; }
-
-.react-autoql-chart-container g.tick {
-  transition: opacity 0.3s ease; }
-
-.react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
-.react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
-  opacity: 0 !important; }
+  .react-autoql-chart-container .bar,
+  .react-autoql-chart-container .stacked-bar,
+  .react-autoql-chart-container .stacked-column,
+  .react-autoql-chart-container .circle,
+  .react-autoql-chart-container .stacked-area {
+    transition: fill-opacity 0.3s ease;
+    fill-opacity: 0.7 !important;
+    outline: none !important; }
+    .react-autoql-chart-container .bar:hover, .react-autoql-chart-container .bar.active,
+    .react-autoql-chart-container .stacked-bar:hover,
+    .react-autoql-chart-container .stacked-bar.active,
+    .react-autoql-chart-container .stacked-column:hover,
+    .react-autoql-chart-container .stacked-column.active,
+    .react-autoql-chart-container .circle:hover,
+    .react-autoql-chart-container .circle.active,
+    .react-autoql-chart-container .stacked-area:hover,
+    .react-autoql-chart-container .stacked-area.active {
+      fill-opacity: 1 !important; }
+  .react-autoql-chart-container .line-dot,
+  .react-autoql-chart-container .vertex-dot {
+    transition: opacity 0.3s ease;
+    opacity: 0 !important;
+    outline: none !important; }
+    .react-autoql-chart-container .line-dot:hover, .react-autoql-chart-container .line-dot.active,
+    .react-autoql-chart-container .vertex-dot:hover,
+    .react-autoql-chart-container .vertex-dot.active {
+      opacity: 1 !important; }
+  .react-autoql-chart-container .square {
+    transition: fill 0.2s ease;
+    outline: none !important; }
+    .react-autoql-chart-container .square:hover, .react-autoql-chart-container .square.active {
+      stroke-opacity: 0.5;
+      stroke: currentColor;
+      stroke-width: 1px;
+      fill: currentColor; }
+  .react-autoql-chart-container g.tick {
+    transition: opacity 0.3s ease; }
+  .react-autoql-chart-container .react-autoql-heatmap-chart g.tick line,
+  .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
+    opacity: 0 !important; }
+  .react-autoql-chart-container .axis {
+    font-family: inherit; }
+  .react-autoql-chart-container .pie-chart .labels {
+    font-size: 12px;
+    font-weight: 600; }
 
 .axis-selector-container {
   background: var(--react-autoql-background-color-primary);
@@ -828,7 +871,8 @@ g.legendOrdinal .legendTitle tspan {
   min-width: 150px;
   overflow-y: auto; }
   .axis-selector-container .axis-select-option.active {
-    background: var(--react-autoql-hover-color); }
+    background: var(--react-autoql-hover-color);
+    outline: none !important; }
   .axis-selector-container .react-autoql-checkbox {
     margin-left: 20px; }
     .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
@@ -1023,6 +1067,8 @@ g.legendOrdinal .legendTitle tspan {
   max-height: 150px;
   width: 100%;
   margin-top: 10px; }
+  .query-output-footer.no-margin {
+    margin: 0; }
 
 .dashboard-data-limit-warning-icon {
   color: var(--react-autoql-warning-color) !important;
@@ -1498,7 +1544,6 @@ g.legendOrdinal .legendTitle tspan {
   display: flex;
   flex-direction: column;
   flex-basis: auto;
-  --accent-color: #26a7df;
   position: relative;
   overflow: hidden;
   background: var(--react-autoql-background-color-primary, #fff);
@@ -1942,6 +1987,21 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-danger-color);
   display: 'inline-block'; }
 
+::-webkit-scrollbar {
+  visibility: hidden;
+  width: 6px;
+  height: 6px; }
+
+.scrollbar-content-container {
+  position: absolute;
+  height: 100%;
+  width: 100%; }
+
+.thumb-vertical,
+.thumb-horizontal {
+  border-radius: 3px;
+  background-color: var(--react-autoql-highlight-color);
+  opacity: 0.2; }
 
 .notification-list-loading-container {
   text-align: center;
@@ -1972,9 +2032,6 @@ g.legendOrdinal .legendTitle tspan {
   .react-autoql-notification-list-container .notification-feed-list {
     padding: 0 20px;
     padding-top: 0; }
-  .react-autoql-notification-list-container .loader {
-    text-align: center;
-    margin: 10px; }
 
 .react-autoql-notification-dismiss-all {
   flex: 0;
@@ -2568,7 +2625,7 @@ g.legendOrdinal .legendTitle tspan {
       width: 100%;
       top: -31px;
       right: 0;
-      z-index: 1;
+      z-index: 3;
       pointer-events: none;
       visibility: hidden;
       opacity: 0; }
@@ -2615,23 +2672,8 @@ g.legendOrdinal .legendTitle tspan {
     transform: scale(1);
     transform-origin: 0% 100%; } }
 
-.react-autoql-drawer .chat-message-container {
-  scroll-behavior: smooth !important;
-  max-height: calc(100% - 140px);
-  overflow-y: auto;
-  overflow-x: hidden;
-  flex: 1; }
-  .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
-    overflow-x: hidden !important;
-    margin-bottom: 0 !important; }
-
-/* custom scrollbar */
-.react-autoql-drawer .chat-message-container > div:last-child {
-  opacity: 0;
-  transition: opacity 200ms ease; }
-
-.react-autoql-drawer .chat-message-container:hover > div:last-child {
-  opacity: 1; }
+.chat-content-scroll-container {
+  flex: 1 0 0px; }
 
 .react-autoql-drawer .response-loading-container {
   position: absolute;
@@ -2639,6 +2681,7 @@ g.legendOrdinal .legendTitle tspan {
   left: 20px; }
 
 .react-autoql-drawer .chat-bar-container {
+  flex: 0 0 auto;
   position: relative;
   padding: 10px; }
 
@@ -2695,7 +2738,8 @@ g.legendOrdinal .legendTitle tspan {
       display: flex;
       justify-content: space-between;
       border-radius: 2px;
-      padding-left: 10px; }
+      padding-left: 10px;
+      transition: color 0.1s ease, background-color 0.2s ease; }
       .react-autoql-cascader .options-container .option .option-arrow {
         opacity: 0.7; }
       .react-autoql-cascader .options-container .option .option-execute-icon {
@@ -2711,6 +2755,10 @@ g.legendOrdinal .legendTitle tspan {
     .react-autoql-cascader .options-container:not(:last-child) {
       border-right: 1px solid #d3d3d352; }
 
+.react-autoql-infinite-scroll-container {
+  height: 100%;
+  overflow: hidden; }
+
 .query-tips-page-container {
   height: 100%;
   padding: 10px;
@@ -2837,6 +2885,378 @@ g.legendOrdinal .legendTitle tspan {
   100% {
     opacity: 1; } }
 
+.react-autoql-chatbar-input-container.data-explorer {
+  flex: 0;
+  padding: 10px;
+  margin: 10px;
+  margin-bottom: 0; }
+  .react-autoql-chatbar-input-container.data-explorer.no-suggestions .react-autosuggest__suggestions-container--open
+.react-autosuggest__section-container:last-child
+ul {
+    pointer-events: none;
+    visibility: hidden;
+    background: transparent !important;
+    opacity: 0; }
+  .react-autoql-chatbar-input-container.data-explorer.data-explorer {
+    -webkit-animation: slideDown 0.5s ease;
+            animation: slideDown 0.5s ease; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autoql-chatbar-input {
+    margin: 0;
+    width: 100%;
+    padding-left: 46px;
+    padding-right: 46px; }
+  .react-autoql-chatbar-input-container.data-explorer .data-explorer-no-suggestions {
+    padding-left: 10px;
+    font-size: 14px; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__container {
+    position: relative; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-container--open {
+    position: absolute;
+    margin: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    display: block;
+    width: 100%;
+    height: unset;
+    max-height: 250px;
+    border-radius: 15px;
+    font-family: inherit;
+    font-size: 15px;
+    font-weight: normal;
+    z-index: 2;
+    overflow: auto;
+    margin-top: 3px;
+    border: 1px solid var(--react-autoql-border-color);
+    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+    background-color: var(--react-autoql-background-color-primary);
+    color: var(--react-autoql-text-color-primary); }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input--focused {
+    outline: none; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input::-ms-clear,
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-container {
+    display: none; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 2px;
+    padding-left: 18px;
+    letter-spacing: 0.05em;
+    line-height: 22.5px; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion--highlighted {
+    background-color: rgba(0, 0, 0, 0.1) !important; }
+  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__section-title {
+    padding: 10px 0 0 10px;
+    font-size: 12px;
+    color: var(--react-autoql-text-color-placeholder); }
+
+.data-explorer-section {
+  flex: 0 1 auto;
+  max-height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin: 0 10px; }
+  .data-explorer-section.collapsed, .data-explorer-section.data-preview-section,
+  .data-explorer-section.data-preview-section .react-autoql-card-content,
+  .data-explorer-section.data-preview-section .react-autoql-card-user-content {
+    flex: 0 0 auto !important; }
+  .data-explorer-section .data-preview-scroll-container,
+  .data-explorer-section .custom-scrollbar-view {
+    scroll-behavior: smooth !important;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: auto; }
+  .data-explorer-section .data-explorer-data-preview {
+    flex: 0 0 auto;
+    overflow: hidden;
+    min-height: 0;
+    display: flex;
+    flex-direction: column; }
+    .data-explorer-section .data-explorer-data-preview .data-preview-loading-container {
+      height: 200px;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center; }
+    .data-explorer-section .data-explorer-data-preview .tabulator-col-content,
+    .data-explorer-section .data-explorer-data-preview .tabulator-cell {
+      cursor: pointer !important;
+      transition: color 0.2s ease; }
+      .data-explorer-section .data-explorer-data-preview .tabulator-col-content:hover,
+      .data-explorer-section .data-explorer-data-preview .tabulator-cell:hover {
+        color: var(--react-autoql-accent-color);
+        font-weight: 600; }
+    .data-explorer-section .data-explorer-data-preview .data-preview {
+      max-height: 100%;
+      padding: 0 5px; }
+    .data-explorer-section .data-explorer-data-preview table {
+      table-layout: fixed;
+      border-collapse: collapse; }
+    .data-explorer-section .data-explorer-data-preview thead th {
+      top: 0;
+      padding: 0 6px;
+      height: 35px;
+      position: -webkit-sticky;
+      position: sticky;
+      background: var(--react-autoql-background-color-primary);
+      box-shadow: inset 0 -2px 0 var(--react-autoql-border-color);
+      transition: color 0.2s ease;
+      cursor: pointer;
+      color: var(--react-autoql-accent-color); }
+      .data-explorer-section .data-explorer-data-preview thead th .data-preview-col-header {
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center; }
+    .data-explorer-section .data-explorer-data-preview tbody tr {
+      height: 27px; }
+      .data-explorer-section .data-explorer-data-preview tbody tr:not(:last-child) {
+        border-bottom: 1px solid var(--react-autoql-border-color); }
+      .data-explorer-section .data-explorer-data-preview tbody tr td {
+        padding: 0 10px; }
+        .data-explorer-section .data-explorer-data-preview tbody tr td:not(:last-child) {
+          border-right: 1px solid var(--react-autoql-border-color); }
+
+.data-explorer-page-container .data-preview-tooltip {
+  --border-color: var(--react-autoql-border-color);
+  --bg-color: var(--react-autoql-background-color-primary);
+  opacity: 1 !important;
+  padding: 15px 25px !important;
+  font-size: 0.875rem !important;
+  background: var(--bg-color);
+  border: 2px solid var(--border-color);
+  color: var(--react-autoql-text-color);
+  box-shadow: rgba(102, 105, 109, 0.2) 0px 8px 24px; }
+  .data-explorer-page-container .data-preview-tooltip.place-bottom::before {
+    border-bottom-color: var(--border-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-bottom::after {
+    border-bottom-color: var(--bg-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-top::before {
+    border-top-color: var(--border-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-top::after {
+    border-top-color: var(--bg-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-right::before {
+    border-right-color: var(--border-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-right::after {
+    border-right-color: var(--bg-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-left::before {
+    border-left-color: var(--border-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip.place-left::after {
+    border-left-color: var(--bg-color) !important; }
+  .data-explorer-page-container .data-preview-tooltip p {
+    margin-bottom: 0; }
+  .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-section:not(:last-child) {
+    margin-bottom: 5px; }
+  .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-title {
+    font-weight: 600; }
+  .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-query {
+    cursor: pointer;
+    color: var(--react-autoql-accent-color);
+    font-weight: 600; }
+    .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-query:hover {
+      text-decoration: underline; }
+    .data-explorer-page-container .data-preview-tooltip .data-explorer-tooltip-query .react-autoql-icon svg {
+      stroke-width: 1px;
+      stroke: currentColor; }
+
+.react-autoql-card {
+  background: var(--react-autoql-background-color-primary);
+  border-radius: 6px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+  padding: 15px;
+  margin: 10px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap; }
+  .react-autoql-card .react-autoql-card-content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    opacity: 1;
+    flex: 0 1 auto;
+    min-height: 0;
+    overflow: hidden; }
+    .react-autoql-card .react-autoql-card-content .react-autoql-card-user-content {
+      flex: 0 1 auto;
+      min-height: 100px;
+      max-height: 100%;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap; }
+  .react-autoql-card.collapsed .react-autoql-card-content {
+    pointer-events: none;
+    opacity: 0; }
+  .react-autoql-card .react-autoql-card-title {
+    cursor: pointer;
+    padding: 0 10px;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    font-size: 18px;
+    margin: 4px 0px;
+    font-weight: 600; }
+  .react-autoql-card .react-autoql-card-subtitle {
+    padding: 0px 10px 5px 10px;
+    flex: 0 0 auto; }
+
+.react-autoql-chip {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  border-radius: 5px;
+  padding: 5px 8px;
+  border: 1px solid transparent;
+  background-color: var(--react-autoql-background-color-primary);
+  color: var(--react-autoql-text-color-primary);
+  transition: all 0.2s ease;
+  margin-right: 10px;
+  margin-top: 5px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  cursor: pointer; }
+  .react-autoql-chip:hover {
+    border: 1px solid var(--react-autoql-accent-color); }
+  .react-autoql-chip.selected {
+    background-color: var(--react-autoql-accent-color);
+    color: var(--react-autoql-accent-text-color); }
+  .react-autoql-chip .react-autoql-chip-content {
+    font-weight: 600; }
+  .react-autoql-chip .react-autoql-chip-delete-btn {
+    margin-left: 8px;
+    transition: opacity 0.2s ease;
+    opacity: 0.7; }
+    .react-autoql-chip .react-autoql-chip-delete-btn:hover {
+      opacity: 1; }
+
+.data-explorer-page-container {
+  height: 100%;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  flex: 1 1;
+  min-height: 0;
+  color: var(--react-autoql-text-color-primary); }
+  .data-explorer-page-container .data-explorer-intro-message {
+    color: var(--react-autoql-text-color-primary);
+    text-align: center;
+    margin: 50px auto;
+    padding: 0 40px;
+    font-size: 15px; }
+    .data-explorer-page-container .data-explorer-intro-message .intro-message-list-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: left; }
+  .data-explorer-page-container .data-explorer-topic-icon {
+    margin-right: 5px; }
+  .data-explorer-page-container .exploring-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    align-items: flex-end;
+    font-size: 16px;
+    margin-bottom: 10px;
+    padding: 0px 30px; }
+    .data-explorer-page-container .exploring-title .clear-explorer-content-btn {
+      cursor: pointer;
+      font-size: 14px; }
+      .data-explorer-page-container .exploring-title .clear-explorer-content-btn:hover {
+        color: var(--react-autoql-accent-color); }
+  .data-explorer-page-container .data-explorer-result-container {
+    color: var(--react-autoql-text-color-primary);
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+    padding-left: 5px;
+    min-height: 0; }
+    .data-explorer-page-container .data-explorer-result-container .data-explorer-sections-container {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      overflow: hidden; }
+    .data-explorer-page-container .data-explorer-result-container .data-explorer-section:last-of-type {
+      padding-bottom: 10px; }
+    .data-explorer-page-container .data-explorer-result-container .data-explorer-selected-text {
+      opacity: 0.8;
+      font-weight: 600; }
+    .data-explorer-page-container .data-explorer-result-container .data-explorer-query-suggestion-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      height: 100%;
+      padding-left: 8px; }
+  .data-explorer-page-container .data-preview-scroll-component {
+    flex: 1; }
+  .data-explorer-page-container .data-explorer-card-placeholder {
+    min-height: 90px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+  .data-explorer-page-container .query-suggestion-list-scroll-component {
+    color: var(--react-autoql-text-color-primary);
+    flex: 1; }
+    .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item {
+      cursor: pointer;
+      position: relative;
+      padding: 3px;
+      color: var(--react-autoql-accent-color);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      align-items: center;
+      font-weight: 600; }
+      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item:hover {
+        text-decoration: underline; }
+      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-suggestion-text svg {
+        stroke-width: 1px;
+        stroke: currentColor; }
+      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .animated-item {
+        -webkit-animation: fadeIn 0.3s linear;
+                animation: fadeIn 0.3s linear;
+        -webkit-animation-fill-mode: both;
+                animation-fill-mode: both; }
+      .data-explorer-page-container .query-suggestion-list-scroll-component .query-tip-item .query-tips-result-placeholder {
+        margin-top: 50px; }
+  .data-explorer-page-container .chat-bar-clear-btn {
+    position: absolute;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    right: 0;
+    top: 0;
+    width: 50px;
+    height: 100%;
+    font-size: 20px;
+    visibility: hidden;
+    color: var(--react-autoql-text-color-placeholder);
+    cursor: pointer; }
+    .data-explorer-page-container .chat-bar-clear-btn:hover {
+      color: var(--react-autoql-accent-color); }
+    .data-explorer-page-container .chat-bar-clear-btn.visible {
+      visibility: visible; }
+
 .filter-lock-menu {
   z-index: 99999 !important;
   transition: opacity 0.1s ease 0s !important;
@@ -3015,7 +3435,7 @@ g.legendOrdinal .legendTitle tspan {
       .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__section-title {
         padding: 10px 0 0 10px;
         font-size: 12px;
-        color: #777; }
+        color: var(--react-autoql-text-color-placeholder); }
 
 @-webkit-keyframes highlightOut {
   100% {
@@ -3065,8 +3485,7 @@ g.legendOrdinal .legendTitle tspan {
   background: var(--react-autoql-background-color-secondary);
   overflow: hidden;
   border-radius: 4px;
-  flex-direction: column;
-  justify-content: stretch; }
+  flex-direction: column; }
 
 .react-autoql-drawer .chat-header-container {
   display: flex;
@@ -3076,8 +3495,7 @@ g.legendOrdinal .legendTitle tspan {
   background: var(--react-autoql-accent-color);
   color: var(--react-autoql-accent-text-color);
   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
-  flex-grow: 0;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   z-index: 1; }
 
 .react-autoql-drawer .react-autoql-header-left-container {
@@ -3369,6 +3787,9 @@ g.legendOrdinal .legendTitle tspan {
     .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
       height: 22px;
       width: 23px; }
+    .page-switcher-container .tab .react-autoql-icon.data-search svg {
+      stroke: var(--react-autoql-accent-color);
+      stroke-width: 0.3px; }
   .page-switcher-container.right {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
@@ -3432,6 +3853,9 @@ g.legendOrdinal .legendTitle tspan {
 .page-switcher-container.bottom .tab {
   background: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary); }
+  .page-switcher-container.bottom .tab .react-autoql-icon.data-search svg {
+    stroke: var(--react-autoql-background-color-secondary);
+    stroke-width: 0.3px; }
 
 .page-switcher-container .tab.active {
   background: var(--react-autoql-background-color-secondary);
@@ -3440,11 +3864,17 @@ g.legendOrdinal .legendTitle tspan {
   font-weight: bold;
   position: relative;
   z-index: 2; }
+  .page-switcher-container .tab.active .react-autoql-icon.data-search svg {
+    stroke: var(--react-autoql-background-color-secondary);
+    stroke-width: 0.3px; }
 
 .page-switcher-container.bottom .tab.active {
   background: var(--react-autoql-accent-color);
   color: var(--react-autoql-accent-text-color);
   font-weight: bold; }
+  .page-switcher-container.bottom .tab.active .react-autoql-icon.data-search svg {
+    stroke: var(--react-autoql-accent-color);
+    stroke-width: 0.3px; }
 
 /* animations */
 @-webkit-keyframes response-loading1 {
@@ -3897,7 +4327,7 @@ g.legendOrdinal .legendTitle tspan {
   padding-bottom: 5px;
   display: block;
   height: unset;
-  border-radius: 24px;
+  border-radius: 15px;
   font-family: inherit;
   font-size: 15px;
   font-weight: normal;
@@ -3928,7 +4358,7 @@ g.legendOrdinal .legendTitle tspan {
 .dashboard-tile-input-container .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
   font-size: 12px;
-  color: #777; }
+  color: var(--react-autoql-text-color-placeholder); }
 
 /* Dragging placeholder styles */
 .react-autoql-db-dragging-placeholder-container {