datajunction-ui 0.0.1-a1 → 0.0.1-a100

package/src/styles/index.css

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Jost');
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Lato');
+@import url('https://fonts.googleapis.com/css?family=Consolas');
 
 body {
   margin: 0;
@@ -50,6 +51,7 @@ button.nav-link {
   font: inherit;
   cursor: pointer;
   outline: inherit;
+  width: max-content;
 }
 code {
   font-family: Consolas, source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
@@ -240,7 +242,7 @@ table {
 }
 tr {
   display: table-row;
-  vertical-align: inherit;
+  vertical-align: top;
   border-color: inherit;
 }
 .card-table {
@@ -287,6 +289,10 @@ tr {
   grid-gap: 8px;
   padding: 8px;
 }
+.table-responsive {
+  width: auto;
+  grid-template-columns: 200px auto;
+}
 .table-vertical {
   display: contents;
 }
@@ -338,7 +344,7 @@ tr {
 .table thead th,
 td,
 tbody th {
-  vertical-align: middle;
+  vertical-align: top;
   text-align: left;
 }
 .table [data-sort],
@@ -370,6 +376,7 @@ tbody th {
   border-bottom: 0;
   padding: 1rem;
   max-width: 25rem;
+  vertical-align: top;
 }
 .card-inner-table td,
 .card-inner-table th {
@@ -453,6 +460,12 @@ tbody th {
   color: #580076;
 }
 
+.node_type__tag {
+  font-family: 'Jost';
+  color: #5c3b8f;
+  background-color: #5c3b8f25 !important;
+}
+
 .node_type__blank {
   font-family: 'Jost';
   background-color: #ffffff !important;
@@ -537,6 +550,10 @@ tbody th {
   font-size: 12px;
 }
 
+.dimension_option_subheading:empty {
+  display: none;
+}
+
 .upstreams {
   width: 260px;
   display: flex;
@@ -581,6 +598,12 @@ tbody th {
   color: #777777;
 }
 
+.strategy {
+  background-color: rgb(255, 239, 215) !important;
+  color: #6c3b21;
+  font-size: 1rem;
+}
+
 .status__valid {
   color: #00b368;
 }
@@ -711,6 +734,11 @@ pre {
   margin: 0;
   list-style: none;
 }
+.menu-link {
+  display: inline-grid;
+  margin: 0;
+  float: right;
+}
 .menu-item .menu-link {
   cursor: pointer;
   align-items: center;
@@ -754,6 +782,7 @@ pre {
 
 .card-header h2 {
   font-family: 'Jost';
+  display: inline-block;
 }
 
 .text-gray-400 {
@@ -910,7 +939,7 @@ pre {
 }
 
 .centerPopover {
-  position: absolute !important;
+  position: fixed !important;
   top: 1%;
   left: 25%;
 
@@ -1006,17 +1035,45 @@ pre {
 }
 
 .add_button {
-  background-color: #f0f8ff !important;
-  color: #24518f;
-  text-transform: uppercase;
+  background-color: #2f7986 !important;
+  color: #fff;
+  text-transform: none;
   vertical-align: middle;
-  padding: 0.2rem 0.5rem 0.1rem 0.5rem;
-  border: 1px solid #819bc0;
-  font-size: 1.2rem;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.5rem !important;
+  font-size: 1rem;
   border-radius: 0.5rem;
   word-wrap: break-word;
   white-space: break-spaces;
-  margin-left: 1rem;
+}
+
+.pagination {
+  background-color: #fff !important;
+  color: #74b7c3;
+  border: 1px solid #74b7c3;
+  text-transform: none;
+  vertical-align: middle;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-left: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  font-size: 1rem;
+  border-radius: 0.2rem;
+  word-wrap: break-word;
+  white-space: break-spaces;
+  text-decoration: none;
+}
+.pagination:hover {
+  background-color: #b6dae0 !important;
+  color: #436e76;
+  text-transform: none;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .edit_button {
@@ -1044,6 +1101,15 @@ pre {
 .tag_value:hover {
   background-color: #5c3b8f50;
 }
+.download_notebook {
+  color: #5c3b8f;
+  background-color: #ffefd0;
+  margin: 0.25rem;
+  font-size: 100%;
+}
+.download_notebook:hover {
+  background-color: #fedda1 !important;
+}
 
 .modal-backdrop.in {
   filter: alpha(opacity=50);
@@ -1078,6 +1144,404 @@ pre {
   transition: opacity 0.15s linear;
 }
 
+.dimensionsList {
+  padding: 12px;
+  opacity: 1;
+  border-radius: 0.5rem;
+  line-height: 1.55rem;
+  font-size: 0.95rem;
+}
+
+.DimensionAttribute {
+  background: #effcff;
+  padding: 5px;
+  font-family: Consolas, serif;
+}
+
+.PrimaryKey {
+  margin-right: 10px;
+  font-size: 100%;
+  margin-bottom: 5px;
+}
+
+.history {
+  padding: 20px;
+  list-style: none;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: #748f7c75;
+  display: grid;
+
+  position: relative;
+  min-height: 2rem;
+  font-size: 14px;
+  grid-template-rows: repeat(3, auto);
+  grid-template-areas:
+    'description description details'
+    'description description details'
+    'metadata metadata details';
+  grid-template-columns: min-content minmax(30%, 1fr);
+  gap: 4px;
+}
+
+.history-border {
+  display: block;
+  list-style-type: disc;
+  padding-inline-start: 0;
+  unicode-bidi: isolate;
+  border-radius: 6px !important;
+  border: 1px solid #748f7c75;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+.history-left {
+  grid-area: description;
+  -webkit-box-flex: 2;
+  flex-grow: 2;
+  display: inline;
+  font-size: 16px;
+}
+.history-small {
+  display: flex;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  gap: 5px;
+  padding-right: 8px;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  grid-area: metadata;
+  font-size: 12px;
+}
+.history-right {
+  display: flex;
+  flex-flow: wrap;
+  padding-top: 10px;
+  gap: 19px;
+  grid-area: details;
+  -webkit-box-flex: 2;
+}
+
+.version {
+  color: #055d20;
+  font-weight: bold;
+  font-size: 13px;
+  border: solid #055d20 1px;
+  background-color: #ccf7e545;
+  margin: 0.25rem;
+}
+
+.highlight-svg:hover {
+  filter: invert(56%) sepia(68%) saturate(4415%) hue-rotate(162deg)
+    brightness(96%) contrast(101%);
+  text-decoration: none;
+}
+.no-change {
+  padding: 10px;
+  display: inline-block;
+  margin-top: -25px;
+}
+
+.no-change-banner {
+  color: #055d20;
+  text-transform: uppercase;
+  padding-left: 10px;
+}
+
+.validation_error {
+  border: #b34b0025 1px solid;
+  border-left: #b34b00 5px solid;
+  padding-left: 20px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-size: small;
+  width: 600px;
+  word-wrap: break-word;
+  margin-top: 3px;
+  background-color: #ffffff;
+  margin-bottom: 3px;
+  margin-left: -20px;
+}
+
+.partitionLink {
+  /*border: 1px solid #ccc4d5;*/
+  padding: 12px;
+  margin: 5px;
+  border-radius: 0.375rem;
+  background-color: #ccc4d525;
+}
 .partitionLink:hover {
+  background-color: rgba(157, 147, 168, 0.15);
+}
+.partitionLink a:hover {
   text-decoration: none;
 }
+
+.backfills {
+  margin-left: -4rem;
+  --spacing: 1.5rem;
+  --radius: 10px;
+}
+
+.backfills li {
+  display: block;
+  position: relative;
+  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
+}
+
+.backfills ul {
+  margin-left: calc(var(--radius) - var(--spacing));
+  padding-left: 2rem;
+}
+
+.backfills ul li {
+  border-left: 2px solid #ddd;
+}
+
+.backfills ul li:last-child {
+  border-color: transparent;
+}
+
+.backfills ul li::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(var(--spacing) / -2);
+  left: -2px;
+  width: calc(var(--spacing) + 2px);
+  height: calc(var(--spacing) + 1px);
+  border: solid #ddd;
+  border-width: 0 0 2px 2px;
+}
+
+.backfills summary {
+  display: block;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+
+.backfills summary::marker,
+.backfills summary::-webkit-details-marker {
+  display: none;
+}
+
+.backfills summary:focus {
+  outline: none;
+}
+
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
+}
+
+.backfills summary::before {
+  z-index: 1;
+  /*background : #696 url('expand-collapse.svg') 0 0;*/
+}
+
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
+}
+
+.backfills_header {
+  font-size: 16px;
+  margin-left: 18px;
+  border-left: 2px solid #ddd;
+  padding-left: 40px;
+  margin-bottom: 10px;
+}
+
+.tr {
+  display: inline-flex;
+}
+.tr li {
+  padding-right: 10px;
+}
+.td {
+  display: table-cell;
+  padding: 8px;
+}
+
+.operator {
+  background-color: #efefef;
+  border-radius: 2px;
+  border-style: none;
+  padding: 0.4rem;
+  font-family: Lato, 'sans-serif';
+  font-size: 110%;
+  border-right: 16px solid transparent;
+  margin-left: 0.4rem;
+}
+
+.backfills summary::marker,
+.backfills summary::-webkit-details-marker {
+  display: none;
+}
+
+.backfills summary:focus {
+  outline: none;
+}
+
+.backfills summary:focus-visible {
+  outline: 1px dotted #000;
+}
+
+.backfills summary::before {
+  z-index: 1;
+  /*background : #696 url('expand-collapse.svg') 0 0;*/
+}
+
+.backfills details[open] > summary::before {
+  background-position: calc(-2 * var(--radius)) 0;
+}
+
+.backfills_header {
+  font-size: 16px;
+  margin-left: 18px;
+  border-left: 2px solid #ddd;
+  padding-left: 40px;
+  margin-bottom: 10px;
+}
+
+.tr {
+  display: inline-flex;
+}
+.tr li {
+  padding-right: 10px;
+}
+.td {
+  display: table-cell;
+  padding: 8px;
+}
+
+table {
+  width: 100%;
+  height: min-content;
+}
+
+.queryrunner-filters {
+  background-color: #fff;
+  padding-right: 20px;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 15px;
+  position: absolute;
+  z-index: 1;
+
+  top: -5px;
+  left: 125%;
+  /*bottom: 125%;*/
+  /*left: 50%;*/
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
+.queryrunner {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 250px 1fr;
+  gap: 20px;
+  grid-template-areas:
+    'left righttop'
+    'left rightbottom';
+  margin-top: 1rem;
+}
+.left {
+  grid-area: left;
+}
+.righttop {
+  grid-area: righttop;
+}
+.rightbottom {
+  grid-area: rightbottom;
+}
+
+.queryrunner-query pre {
+  border-radius: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 1rem !important;
+}
+
+.tab-item {
+  align-items: center;
+  background: #0000;
+  border: 0;
+  cursor: pointer;
+  margin: 0 32px 0 0;
+  outline: none;
+  padding: 12px 0;
+  text-transform: uppercase;
+  user-select: none;
+  width: fit-content !important;
+}
+.query-info {
+  list-style-type: none;
+  padding-bottom: 10px;
+}
+.query-info label {
+  margin-left: -10px;
+}
+.active {
+  border-bottom: 2px solid #007acc;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  min-width: 15rem;
+  padding: 0.5rem;
+  margin: 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+}
+.dropdown {
+  position: relative;
+}
+.dropdown:hover .dropdown-menu {
+  display: block;
+}

package/src/styles/loading.css

@@ -13,7 +13,7 @@
   border: 8px solid #fff;
   border-radius: 50%;
   animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
+  border-color: #bfbfbf transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
   animation-delay: -0.45s;