react-autoql 7.2.1-alpha.1 → 7.2.1-alpha.3

package/dist/autoql.esm.css

@@ -545,6 +545,8 @@ span.react-autoql-icon {
     color: var(--react-autoql-text-color-accent); }
 
 .react-autoql-table-container {
+  display: flex;
+  flex-direction: column;
   width: 100% !important;
   max-width: 100%;
   max-height: 100%;
@@ -553,20 +555,45 @@ span.react-autoql-icon {
   position: relative;
   box-sizing: border-box;
   flex: 1; }
-  .react-autoql-table-container .react-autoql-tablulator-container {
+  .react-autoql-table-container .table-row-count {
+    flex: 0;
+    width: 100%;
+    font-size: 13px;
+    opacity: 0.6;
+    text-align: center;
+    padding-top: 3px; }
+  .react-autoql-table-container .react-autoql-tabulator-container {
     position: relative;
-    height: calc(100% - 30px);
-    max-height: calc(100% - 30px); }
-    .react-autoql-table-container .react-autoql-tablulator-container .tabulator-cell,
-    .react-autoql-table-container .react-autoql-tablulator-container .tabulator-col {
+    flex: 1;
+    width: 100%;
+    max-height: 100%;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; }
+    .react-autoql-table-container .react-autoql-tabulator-container .tabulator-cell,
+    .react-autoql-table-container .react-autoql-tabulator-container .tabulator-col {
       color: var(--react-autoql-text-color-primary); }
   .react-autoql-table-container.hidden {
     visibility: hidden;
     position: absolute;
     pointer-events: none;
     opacity: 0; }
-  .react-autoql-table-container.infinite:not(.last-page) .tabulator-row:last-child {
-    margin-bottom: 40px; }
+  .react-autoql-table-container.empty:not(.filtering) .tabulator-headers {
+    height: 37px !important; }
+  .react-autoql-table-container.empty .react-autoql-table.tabulator {
+    overflow: auto; }
+    .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-tableholder {
+      overflow: hidden; }
+    .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header {
+      border: none !important;
+      overflow: visible; }
+      .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents {
+        overflow: visible; }
+        .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {
+          border-bottom: 2px solid var(--react-autoql-border-color); }
+          .react-autoql-table-container.empty .react-autoql-table.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers .tabulator-col {
+            background: transparent; }
   .react-autoql-table-container.resizing {
     width: 100vw; }
     .react-autoql-table-container.resizing .react-autoql-table {
@@ -588,21 +615,25 @@ span.react-autoql-icon {
       .react-autoql-table-container.filtering .tabulator-header-contents .tabulator-headers,
       .react-autoql-table-container.filtering .tabulator-header-contents .tabulator-col-resize-handle {
         height: 100% !important; }
-    .react-autoql-table-container.filtering .react-autoql-tablulator-container .tabulator-tableholder {
+    .react-autoql-table-container.filtering .react-autoql-tabulator-container .tabulator-tableholder {
       min-height: calc(100% - 60px) !important;
       height: calc(100% - 60px) !important;
       max-height: calc(100% - 60px) !important; }
     .react-autoql-table-container.filtering .filter-tag {
       display: none; }
+    .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header {
+      border: none; }
+      .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header .tabulator-headers {
+        border-bottom: 2px solid var(--react-autoql-border-color); }
   .react-autoql-table-container:not(.filtering) .tabulator-header-contents {
     height: 35px; }
   .react-autoql-table-container:not(.filtering) .tabulator-header-filter input {
     opacity: 0;
     visibility: hidden; }
-  .react-autoql-table-container:not(.filtering) .react-autoql-tablulator-container .tabulator-tableholder {
-    min-height: calc(100% - 35px) !important;
-    height: calc(100% - 35px) !important;
-    max-height: calc(100% - 35px) !important; }
+  .react-autoql-table-container:not(.filtering) .react-autoql-tabulator-container .tabulator-tableholder {
+    min-height: calc(100% - 37px) !important;
+    height: calc(100% - 37px) !important;
+    max-height: calc(100% - 37px) !important; }
   .react-autoql-table-container .tabulator-header-filter input {
     border: 1px solid var(--react-autoql-border-color);
     border-radius: 4px;
@@ -614,38 +645,6 @@ span.react-autoql-icon {
     opacity: 1; }
     .react-autoql-table-container .tabulator-header-filter input:focus {
       border: 1px solid var(--react-autoql-accent-color); }
-  .react-autoql-table-container .table-loader {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-    background-color: transparent;
-    background-color: inherit;
-    color: var(--react-autoql-accent-color); }
-    .react-autoql-table-container .table-loader.table-page-loader {
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0; }
-      .react-autoql-table-container .table-loader.table-page-loader .page-loader-spinner {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 40px;
-        height: 40px;
-        background-color: var(--react-autoql-background-color-secondary);
-        border: 1px solid var(--react-autoql-border-color);
-        box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px;
-        border-radius: 4px; }
-        .react-autoql-table-container .table-loader.table-page-loader .page-loader-spinner .spinner-loader {
-          margin: 0;
-          height: 17px;
-          width: 17px; }
-    .react-autoql-table-container .table-loader.table-scroll-loader {
-      bottom: 20px;
-      width: 100%;
-      z-index: 0; }
   .react-autoql-table-container.supports-drilldown .tabulator-row .tabulator-cell:not(.pivot-category) {
     transition: color 0.1s ease;
     cursor: pointer; }
@@ -676,7 +675,8 @@ span.react-autoql-icon {
         font-size: 10px;
         margin-right: 5px;
         vertical-align: top;
-        line-height: 21px; }
+        line-height: 21px;
+        margin-left: -11px; }
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row,
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header,
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-headers,
@@ -689,7 +689,8 @@ span.react-autoql-icon {
       background-color: var(--react-autoql-background-color-secondary);
       z-index: 1; }
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row:last-child {
-        border-bottom: none; }
+        border-bottom: none;
+        margin-bottom: 15px; }
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(:first-child) {
         border-left: 1px solid !important;
         border-color: rgba(0, 0, 0, 0.06) !important; }
@@ -700,7 +701,7 @@ span.react-autoql-icon {
       border-color: transparent;
       background-color: var(--react-autoql-background-color-secondary); }
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
-        padding-left: 10px !important;
+        padding-left: 12px !important;
         padding-right: 15px !important; }
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
         padding: 8px 5px; }
@@ -744,6 +745,43 @@ span.react-autoql-icon {
 .tabulator-alert {
   display: none !important; }
 
+.table-loader {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+  background-color: transparent;
+  color: var(--react-autoql-accent-color); }
+  .table-loader.table-placeholder {
+    color: var(--react-autoql-text-color-primary);
+    font-size: 12px;
+    opacity: 0.5;
+    top: 20px; }
+  .table-loader.table-page-loader {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0; }
+    .table-loader.table-page-loader .page-loader-spinner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      background-color: var(--react-autoql-background-color-secondary);
+      border: 1px solid var(--react-autoql-border-color);
+      box-shadow: var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)) 0px 8px 24px;
+      border-radius: 4px; }
+      .table-loader.table-page-loader .page-loader-spinner .spinner-loader {
+        margin: 0;
+        height: 17px;
+        width: 17px; }
+  .table-loader.table-scroll-loader {
+    bottom: 20px;
+    width: 100%;
+    z-index: 0; }
+
 .content {
   margin: 2rem; }
 
@@ -991,7 +1029,8 @@ g.legendOrdinal tspan {
   background: var(--react-autoql-background-color-secondary);
   color: var(--react-autoql-text-color-primary);
   padding: 10px;
-  z-index: 9999; }
+  z-index: 9999;
+  flex: 1; }
   .number-axis-selector-popover .number-axis-selector-popover-content h4 {
     margin: 0;
     margin-top: 5px;
@@ -1117,14 +1156,18 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-chart-container {
   position: relative;
   width: 100%;
+  height: 100%;
+  max-height: 100%;
   flex-grow: 1;
   flex-shrink: 1;
+  flex-basis: 100vh;
   overflow: hidden;
   color: var(--react-autoql-text-color-primary);
   background: var(--react-autoql-background-color-secondary);
   transition: opacity 0.2s ease;
   /* These are not inline styles since they do not apply to saved PNG charts */ }
   .react-autoql-chart-container.hidden {
+    position: absolute;
     visibility: hidden;
     flex: 0 0 0;
     opacity: 0;
@@ -1137,6 +1180,8 @@ g.legendOrdinal .legendTitle tspan {
     transition: none; }
   .react-autoql-chart-container.loading-rows {
     pointer-events: none; }
+  .react-autoql-chart-container .legend-hidden-field-arrow {
+    outline: none !important; }
   .react-autoql-chart-container .legendCells .cell.hidden text {
     color: var(--react-autoql-background-disabled);
     opacity: 0.4 !important; }
@@ -1165,7 +1210,9 @@ g.legendOrdinal .legendTitle tspan {
   .react-autoql-chart-container .slice,
   .react-autoql-chart-container .stacked-bar,
   .react-autoql-chart-container .stacked-column {
-    cursor: pointer; }
+    cursor: pointer;
+    stroke: transparent;
+    stroke-width: 10px; }
   .react-autoql-chart-container .bar,
   .react-autoql-chart-container .column,
   .react-autoql-chart-container .line,
@@ -1296,6 +1343,7 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-response-content-container.chart {
   width: 100vw;
   max-width: 100%;
+  flex: 1 1 100vh;
   overflow: hidden; }
 
 .react-autoql-suggestion-btn {
@@ -1386,15 +1434,6 @@ g.legendOrdinal .legendTitle tspan {
   .query-output-footer.bottom {
     justify-content: space-between; }
 
-.query-output-table-row-count {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  padding-top: 3px;
-  font-size: 13px;
-  opacity: 0.6;
-  text-align: center; }
-
 .dashboard-data-limit-warning-icon {
   color: var(--react-autoql-warning-color) !important;
   margin-left: 10px;
@@ -1593,6 +1632,8 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-primary);
   cursor: pointer;
   outline: none !important; }
+  .react-autoql-toolbar-btn.filter-btn {
+    line-height: 24px; }
   .react-autoql-toolbar-btn.selected {
     color: var(--react-autoql-accent-color); }
 
@@ -1690,6 +1731,10 @@ g.legendOrdinal .legendTitle tspan {
 .ReactModal__Overlay--before-close .ReactModal__Content {
   transform: scale(0); }
 
+.react-autoql-modal-content {
+  height: 100%;
+  width: 100%; }
+
 .react-autoql-modal-header {
   position: relative;
   text-align: center;
@@ -2342,8 +2387,8 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-notification-list-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  background: var(--react-autoql-background-color-primary); }
+  background: var(--react-autoql-background-color-primary);
+  height: 100%; }
   .react-autoql-notification-list-container .notification-feed-list {
     padding: 0 20px;
     padding-top: 0; }
@@ -3235,11 +3280,11 @@ g.legendOrdinal .legendTitle tspan {
     margin-right: 5px; }
   .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; }
+    min-height: 0;
+    height: calc(100% - 130px); }
     .data-explorer-page-container .data-explorer-result-container .data-explorer-sections-container {
       position: relative;
       height: 100%;
@@ -3604,6 +3649,8 @@ g.legendOrdinal .legendTitle tspan {
   font-family: var(--react-autoql-font-family), sans-serif;
   line-height: 22px;
   outline: none !important; }
+  .react-autoql-drawer .react-autoql-notification-list-container {
+    height: calc(100% - 60px); }
 
 .react-autoql-drawer.disable-selection {
   -webkit-user-select: none;
@@ -4187,13 +4234,10 @@ g.legendOrdinal .legendTitle tspan {
   height: 55px !important; }
 
 .react-autoql-dashboard-tile-inner-div .react-autoql-table,
-.react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
+.react-autoql-dashboard-tile-inner-div .table-row-count {
   color: var(--react-autoql-text-color-primary);
   font-size: 11px; }
 
-.react-autoql-dashboard-tile-inner-div .query-output-table-row-count {
-  padding: 0; }
-
 .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
   flex: 1;
   width: 100%;