Add "tree" structure design to IFQL schema explorer

ui/src/ifql/components/DatabaseListItem.tsx

@@ -26,8 +26,9 @@ class DatabaseListItem extends PureComponent<Props, State> {
     return (
       <div className={this.className} onClick={this.handleChooseDatabase}>
         <div className="ifql-schema-item">
-          <span className="icon caret-right" />
+          <div className="ifql-schema-item-toggle" />
           {db}
+          <span className="ifql-schema-type">Bucket</span>
         </div>
         {this.state.isOpen && <TagList db={db} />}
       </div>

ui/src/ifql/components/TagListItem.tsx

@@ -26,8 +26,9 @@ class TagListItem extends PureComponent<Props, State> {
     return (
       <div className={this.className}>
         <div className="ifql-schema-item" onClick={this.handleClick}>
-          <span className="icon caret-right" />
+          <div className="ifql-schema-item-toggle" />
           {this.tagItemLabel}
+          <span className="ifql-schema-type">Tag Key</span>
         </div>
         {isOpen && this.renderTagValues}
       </div>
@@ -40,8 +41,8 @@ class TagListItem extends PureComponent<Props, State> {
   }
 
   private get tagItemLabel(): string {
-    const {tagKey, tagValues} = this.props
-    return `${tagKey} — ${tagValues.length}`
+    const {tagKey} = this.props
+    return `${tagKey}`
   }
 
   private get renderTagValues(): JSX.Element[] | JSX.Element {
@@ -52,7 +53,7 @@ class TagListItem extends PureComponent<Props, State> {
 
     return tagValues.map(v => {
       return (
-        <div key={v} className="ifql-schema-item readonly">
+        <div key={v} className="ifql-schema-item readonly ifql-tree-node">
           {v}
         </div>
       )
@@ -61,7 +62,7 @@ class TagListItem extends PureComponent<Props, State> {
 
   private get className(): string {
     const {isOpen} = this.state
-    return classnames('ifql-schema-tree', {expanded: isOpen})
+    return classnames('ifql-schema-tree ifql-tree-node', {expanded: isOpen})
   }
 }
 

ui/src/style/components/time-machine/ifql-explorer.scss

@@ -3,15 +3,18 @@
     ----------------------------------------------------------------------------
 */
 
-$ifql-tree-indent: 28px;
+$ifql-tree-indent: 26px;
+$ifql-tree-line: 2px;
 
 .ifql-schema-explorer {
   width: 100%;
   height: 100%;
   background-color: $g2-kevlar;
+  min-width: 200px;
 }
 
 .ifql-schema-tree {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -33,6 +36,30 @@ $ifql-tree-indent: 28px;
   font-style: italic;
 }
 
+.ifql-schema-item-toggle {
+  width: $ifql-tree-indent;
+  height: $ifql-tree-indent;
+  position: relative;
+
+  // Plus Sign
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: $g11-sidewalk;
+    width: $ifql-tree-indent / 3;
+    height: $ifql-tree-line;
+    transition: transform 0.25s ease, background-color 0.25s ease;
+  }
+  // Vertical Line
+  &:after {
+    transform: translate(-50%, -50%) rotate(90deg);
+  }
+}
+
 .ifql-schema-item {
   @include no-user-select();
   position: relative;
@@ -40,10 +67,11 @@ $ifql-tree-indent: 28px;
   display: flex;
   align-items: center;
   padding: 0 11px;
-  padding-left: $ifql-tree-indent;
+  padding-left: 0;
   font-size: 12px;
   font-weight: 600;
   color: $g11-sidewalk;
+  white-space: nowrap;
   transition: color 0.25s ease, background-color 0.25s ease;
 
   > span.icon {
@@ -51,32 +79,80 @@ $ifql-tree-indent: 28px;
     top: 50%;
     left: $ifql-tree-indent / 2;
     transform: translate(-50%, -50%);
-    transition: transform 0.25s ease;
   }
 
   &:hover {
-    color: $g15-platinum;
+    color: $g17-whisper;
     cursor: pointer;
     background-color: $g4-onyx;
+
+    .ifql-schema-item-toggle:before,
+    .ifql-schema-item-toggle:after {
+      background-color: $g17-whisper;
+    }
   }
 
   .expanded > & {
     color: $c-pool;
-    background-color: $g3-castle;
 
-    > span.icon {
-      transform: translate(-50%, -50%) rotate(90deg);
+    .ifql-schema-item-toggle:before,
+    .ifql-schema-item-toggle:after {
+      background-color: $c-pool;
+    }
+    .ifql-schema-item-toggle:before {
+      transform: translate(-50%, -50%) rotate(-90deg);
+      width: $ifql-tree-line;
+    }
+    .ifql-schema-item-toggle:after {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    &:hover {
+      color: $c-laser;
+
+      .ifql-schema-item-toggle:before,
+      .ifql-schema-item-toggle:after {
+        background-color: $c-laser;
+      }
     }
   }
 
   &.readonly,
   &.readonly:hover {
+    padding-left: $ifql-tree-indent + 8px;
     background-color: transparent;
     color: $g11-sidewalk;
     cursor: default;
   }
 }
 
+/* Tree Node Lines */
+.ifql-tree-node:before,
+.ifql-tree-node:after {
+  content: '';
+  background-color: $g4-onyx;
+  position: absolute;
+}
+
+// Vertical Line
+.ifql-tree-node:before {
+  top: 0;
+  left: $ifql-tree-indent / 2;
+  width: $ifql-tree-line;
+  height: 100%;
+}
+.ifql-tree-node:last-child:before {
+  height: $ifql-tree-indent / 2;
+}
+
+// Horizontal Line
+.ifql-tree-node:after {
+  top: $ifql-tree-indent / 2;
+  left: $ifql-tree-indent / 2;
+  width: $ifql-tree-indent / 2;
+  height: $ifql-tree-line;
+}
+
 /*
     Controls
     ----------------------------------------------------------------------------
@@ -92,3 +168,18 @@ $ifql-tree-indent: 28px;
   flex: 1 0 0;
   margin-right: 4px;
 }
+
+
+
+// Hints
+.ifql-schema-type {
+  color: $g11-sidewalk;
+  display: inline-block;
+  margin-left: 8px;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+
+  .ifql-schema-item:hover  & {
+    opacity: 1;
+  }
+}