Add tooltips to the visualization wrapper

cockroachdb · Apr 12, 2016 · 30e0b52 · 30e0b52
1 parent e605957
commit 30e0b52
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 5 deletions.
diff --git a/ui/embedded.go b/ui/embedded.go
diff --git a/ui/styl/modules/layout-vars.styl b/ui/styl/modules/layout-vars.styl
@@ -21,3 +21,6 @@ $top-bar-height = 95px
 $subnav-height  = 60px
 $chart-width    = 1300px
 $footer-height  = 73px
+
+// Z-INDEXES
+$tooltip-layer = 100
diff --git a/ui/styl/modules/palette.styl b/ui/styl/modules/palette.styl
@@ -59,6 +59,8 @@ $secondary-gray-11 = #5D5D5D // skull icon background
 $secondary-gray-12 = #ECECEC // cancel button background
 $secondary-gray-13 = #8D8D8D // cancel button foreground
 $secondary-gray-14 = #D6D6D6 // cancel button hover
+$secondary-gray-15 = rgba(67, 84, 109, .22) // tooltip shadow
+$secondary-gray-16 = #6D6F74 // tooltip text
 
 $secondary-green-1 = #66AA26 // subnav active
 

diff --git a/ui/styl/partials/layout.styl b/ui/styl/partials/layout.styl
@@ -563,3 +563,50 @@ table
       text-decoration none
       color $main-gray
 
+.tooltip
+  position absolute
+  z-index $tooltip-layer
+  padding 35px
+  border 1px solid $secondary-gray-1
+  box-shadow 2px 2px 0 $secondary-gray-15
+  border-radius 4px
+  display none
+  background-color white
+  top 20px
+  &.right
+    left 95%
+    right auto
+  &.left
+    right 15%
+    left auto
+    bottom 100%
+    top auto
+  .content
+    font-size 11px
+    color $secondary-gray-16
+    font-family Lato-Regular
+  .title
+    font-size 13px
+    color $main-navy
+    font-family Lato-Heavy
+    text-align center
+    width 100%
+    padding-bottom 5px
+
+&.viz-tooltip
+    width 250px
+
+
+*:hover + .tooltip
+  display block
+
+div.charts
+  div:last-child .visualization-wrapper .tooltip
+    right 15%
+    left auto
+    bottom 100%
+    top auto
+
+  div:first-child .visualization-wrapper .tooltip
+    left 95%
+    right auto
diff --git a/ui/ts/components/metrics.ts b/ui/ts/components/metrics.ts
@@ -4,6 +4,7 @@
 /// <reference path="../util/types.ts" />
 /// <reference path="../util/querycache.ts" />
 /// <reference path="../models/metrics.ts" />
+/// <reference path="tooltip.ts" />
 
 /**
  * Components defines reusable components which may be used on multiple pages,
@@ -228,7 +229,10 @@ module Components {
           ".visualization-wrapper" + warningClass,
           [
             // TODO: pass in and display info icon tooltip
-            m(".viz-top", m(".viz-info-icon", icon)),
+            m(".viz-top", ctrl.vm.axis.tooltip() ? [
+              m(".viz-info-icon", icon),
+              m.component(Components.Tooltip, {tooltipClass: ".viz-tooltip", title: ctrl.vm.axis.title(), content: ctrl.vm.axis.tooltip()}),
+            ] : []),
             g,
             m(".viz-bottom", m(".viz-title", ctrl.vm.axis.title())),
           ]

diff --git a/ui/ts/components/tooltip.ts b/ui/ts/components/tooltip.ts
@@ -0,0 +1,32 @@
+// source: component/tooltip.ts
+/// <reference path="../../bower_components/mithriljs/mithril.d.ts" />
+
+module Components {
+  "use strict";
+
+  /**
+   * Tooltip is a component that creates a configureable tooltip
+   */
+  export module Tooltip {
+    import MithrilVirtualElement = _mithril.MithrilVirtualElement;
+
+    interface TooltipConfig {
+      // Class applied to the tooltip
+      tooltipClass?: string;
+      title?: string;
+      content: (string|MithrilVirtualElement|MithrilVirtualElement[]|(MithrilVirtualElement|string)[]);
+      icon?: string;
+      position?: string;
+    }
+
+    export function controller(): any {}
+
+    export function view(ctrl: any, tooltipConfig: TooltipConfig): _mithril.MithrilVirtualElement {
+      return m(".tooltip" + (tooltipConfig.position || ".right") + (tooltipConfig.tooltipClass || ""), [
+        tooltipConfig.icon ? m(tooltipConfig.icon) : m(""),
+        m(".title", tooltipConfig.title ? tooltipConfig.title : ""),
+        m(".content", tooltipConfig.content),
+      ]);
+    }
+  }
+}
diff --git a/ui/ts/components/visualizations/visualizations.ts b/ui/ts/components/visualizations/visualizations.ts
@@ -19,6 +19,7 @@ module Visualizations {
     virtualVisualizationElement: MithrilVirtualElement;
     visualizationArguments?: any;
     warning?: () => string;
+    tooltip?: string;
   }
 
   export module VisualizationWrapper {
@@ -40,7 +41,10 @@ module Visualizations {
         ".visualization-wrapper" + warningClass,
         [
           // TODO: pass in and display info icon tooltip
-          m(".viz-top", m(".viz-info-icon", icon)),
+          m(".viz-top", (info.tooltip) ? [
+            m(".viz-info-icon", icon),
+            m.component(Components.Tooltip, {tooltipClass: ".viz-tooltip", title: info.title, content: info.tooltip}),
+          ] : []),
           info.virtualVisualizationElement,
           m(".viz-bottom", m(".viz-title", info.title)),
         ]

diff --git a/ui/ts/models/metrics.ts b/ui/ts/models/metrics.ts
@@ -270,6 +270,11 @@ module Models {
        */
       yHigh: Utils.ChainProperty<number, Axis> = Utils.ChainProp(this, 1);
 
+      /**
+       *  tooltip is the informational tooltip for the chart
+       */
+      tooltip: Utils.ChainProperty<string, Axis> = Utils.ChainProp(this, null);
+
       // Stores the hard-coded title if one is set.
       private _title: string;
 
@@ -282,7 +287,7 @@ module Models {
       title(t: string): Axis;
 
       // TODO: allow computed chain props and move this code there
-      title(t?: string): any {
+      title(t?: string): (Axis|string) {
         if (typeof t === "string") {
           this._title = t;
           return this;

diff --git a/ui/ts/pages/cluster.ts b/ui/ts/pages/cluster.ts
@@ -97,6 +97,7 @@ module AdminViews {
               format: "s",
               dataFn: function (allStats: Models.Proto.NodeStatus[]): { value: number; } { return {value: allStats && allStats.length || 0 }; },
             },
+            tooltip: "Current number of nodes in the cluster.",
           });
 
           this.axesSmall.push({
@@ -138,6 +139,7 @@ module AdminViews {
               Metrics.Select.Avg(_sysMetric("cpu.sys.percent"))
                 .title("CPU Sys %")
             ).format(d3.format(".2%")).title("CPU Usage").stacked(true)
+              .tooltip("CPU usage is the average CPU usage across all nodes. Note that if you have more than one CPU or core, the value may go over 100%.")
           );
 
           // TODO: get total/average memory from all machines
@@ -146,6 +148,8 @@ module AdminViews {
               Metrics.Select.Avg(_sysMetric("allocbytes"))
                 .title("Memory")
             ).format(Utils.Format.Bytes).title("Memory Usage")
+              .tooltip("Memory usage is the average memory used per node.")
+
           );
 
           this._addChart(