Time Series Annotation Layers

superset/assets/javascripts/components/AsyncSelect.jsx

@@ -10,7 +10,10 @@ const propTypes = {
   onChange: PropTypes.func.isRequired,
   mutator: PropTypes.func.isRequired,
   onAsyncError: PropTypes.func,
-  value: PropTypes.number,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
   valueRenderer: PropTypes.func,
   placeholder: PropTypes.string,
   autoSelect: PropTypes.bool,
@@ -63,6 +66,7 @@ class AsyncSelect extends React.PureComponent {
           isLoading={this.state.isLoading}
           onChange={this.onChange.bind(this)}
           valueRenderer={this.props.valueRenderer}
+          {...this.props}
         />
       </div>
     );

superset/assets/javascripts/explore/components/Control.jsx

@@ -3,15 +3,16 @@ import PropTypes from 'prop-types';
 
 import BoundsControl from './controls/BoundsControl';
 import CheckboxControl from './controls/CheckboxControl';
+import ColorSchemeControl from './controls/ColorSchemeControl';
 import DatasourceControl from './controls/DatasourceControl';
 import DateFilterControl from './controls/DateFilterControl';
 import FilterControl from './controls/FilterControl';
 import HiddenControl from './controls/HiddenControl';
+import SelectAsyncControl from './controls/SelectAsyncControl';
 import SelectControl from './controls/SelectControl';
 import TextAreaControl from './controls/TextAreaControl';
 import TextControl from './controls/TextControl';
 import VizTypeControl from './controls/VizTypeControl';
-import ColorSchemeControl from './controls/ColorSchemeControl';
 
 const controlMap = {
   BoundsControl,
@@ -25,6 +26,7 @@ const controlMap = {
   TextControl,
   VizTypeControl,
   ColorSchemeControl,
+  SelectAsyncControl,
 };
 const controlTypes = Object.keys(controlMap);
 

superset/assets/javascripts/explore/components/controls/SelectAsyncControl.jsx

@@ -0,0 +1,62 @@
+/* global notify */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from '../../../components/AsyncSelect';
+import { t } from '../../../locales';
+
+const propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(PropTypes.number),
+  ]),
+};
+
+const defaultProps = {
+  onChange: () => {},
+};
+
+class SelectAsyncControl extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: this.props.value,
+    };
+  }
+
+  onChange(options) {
+    const optionValues = options.map(option => option.value);
+    this.setState({ value: optionValues });
+    this.props.onChange(optionValues);
+  }
+
+  mutator(data) {
+    if (!data || !data.result) {
+      return [];
+    }
+
+    return data.result.map(layer => ({ value: layer.id, label: layer.name }));
+  }
+
+  render() {
+    return (
+      <Select
+        dataEndpoint={'/annotationlayermodelview/api/read?'}
+        onChange={this.onChange.bind(this)}
+        onAsyncError={() => notify.error(t('Error while fetching annotation layers'))}
+        mutator={this.mutator}
+        multi
+        value={this.state.value}
+        placeholder={t('Select a annotation layer')}
+        valueRenderer={v => (<div>{v.label}</div>)}
+      />
+    );
+  }
+}
+
+SelectAsyncControl.propTypes = propTypes;
+SelectAsyncControl.defaultProps = defaultProps;
+
+export default SelectAsyncControl;

superset/assets/javascripts/explore/main.css

@@ -28,9 +28,12 @@
 }
 
 .control-panel-section {
-  margin-bottom: 0px;
+  margin-bottom: 0;
   box-shadow: none;
 }
+.control-panel-section:last-child {
+  padding-bottom: 40px;
+ }
 
 .control-panel-section .Select-multi-value-wrapper .Select-input > input {
   width: 100px;

superset/assets/javascripts/explore/stores/controls.jsx

@@ -119,6 +119,14 @@ export const controls = {
     }),
   },
 
+  annotation_layers: {
+    type: 'SelectAsyncControl',
+    multi: true,
+    label: t('Annotation Layers'),
+    default: [],
+    description: t('Annotation layers to overlay on the visualization'),
+  },
+
   metric: {
     type: 'SelectControl',
     label: t('Metric'),

superset/assets/javascripts/explore/stores/visTypes.js

@@ -44,6 +44,13 @@ export const sections = {
     ],
     description: t('This section exposes ways to include snippets of SQL in your query'),
   },
+  annotations: {
+    label: t('Annotations'),
+    expanded: true,
+    controlSetRows: [
+      ['annotation_layers'],
+    ],
+  },
   NVD3TimeSeries: [
     {
       label: t('Query'),
@@ -177,6 +184,7 @@ export const visTypes = {
         ],
       },
       sections.NVD3TimeSeries[1],
+      sections.annotations,
     ],
     controlOverrides: {
       x_axis_format: {
@@ -209,6 +217,7 @@ export const visTypes = {
           ['metric_2', 'y_axis_2_format'],
         ],
       },
+      sections.annotations,
     ],
     controlOverrides: {
       metric: {
@@ -251,6 +260,7 @@ export const visTypes = {
         ],
       },
       sections.NVD3TimeSeries[1],
+      sections.annotations,
     ],
     controlOverrides: {
       x_axis_format: {
@@ -273,6 +283,7 @@ export const visTypes = {
         ],
       },
       sections.NVD3TimeSeries[1],
+      sections.annotations,
     ],
     controlOverrides: {
       x_axis_format: {
@@ -306,6 +317,7 @@ export const visTypes = {
         ],
       },
       sections.NVD3TimeSeries[1],
+      sections.annotations,
     ],
     controlOverrides: {
       x_axis_format: {

superset/assets/visualizations/nvd3_vis.js

@@ -3,6 +3,7 @@ import $ from 'jquery';
 import throttle from 'lodash.throttle';
 import d3 from 'd3';
 import nv from 'nvd3';
+import d3tip from 'd3-tip';
 
 import { getColorFromScheme } from '../javascripts/modules/colors';
 import { customizeToolTip, d3TimeFormatPreset, d3FormatPreset, tryNumify } from '../javascripts/modules/utils';
@@ -476,6 +477,71 @@ function nvd3Vis(slice, payload) {
       .attr('height', height)
       .attr('width', width)
       .call(chart);
+
+      // add annotation_layer
+      if (isTimeSeries && payload.annotations.length) {
+        const tip = d3tip()
+          .attr('class', 'd3-tip')
+          .direction('n')
+          .offset([-5, 0])
+          .html(d => (d && d.layer ? d.layer : ''));
+
+        const hh = chart.yAxis.scale().range()[0];
+
+        let annotationLayer;
+        let xScale;
+        let minStep;
+        if (vizType === 'bar') {
+          const xMax = d3.max(payload.data[0].values, d => (d.x));
+          const xMin = d3.min(payload.data[0].values, d => (d.x));
+          minStep = chart.xAxis.range()[1] - chart.xAxis.range()[0];
+          annotationLayer = svg.select('.nv-barsWrap')
+            .insert('g', ':first-child');
+          xScale = d3.scale.quantile()
+            .domain([xMin, xMax])
+            .range(chart.xAxis.range());
+        } else {
+          minStep = 1;
+          annotationLayer = svg.select('.nv-background')
+            .append('g');
+          xScale = chart.xScale();
+        }
+
+        annotationLayer
+          .attr('class', 'annotation-container')
+          .append('defs')
+          .append('pattern')
+          .attr('id', 'diagonal')
+          .attr('patternUnits', 'userSpaceOnUse')
+          .attr('width', 8)
+          .attr('height', 10)
+          .attr('patternTransform', 'rotate(45 50 50)')
+          .append('line')
+          .attr('stroke', '#00A699')
+          .attr('stroke-width', 7)
+          .attr('y2', 10);
+
+        annotationLayer.selectAll('rect')
+          .data(payload.annotations)
+          .enter()
+          .append('rect')
+          .attr('class', 'annotation')
+          .attr('x', d => (xScale(d.start_dttm)))
+          .attr('y', 0)
+          .attr('width', (d) => {
+            const w = xScale(d.end_dttm) - xScale(d.start_dttm);
+            return w === 0 ? minStep : w;
+          })
+          .attr('height', hh)
+          .attr('fill', 'url(#diagonal)')
+          .attr('fill-opacity', 0.1)
+          .attr('stroke-width', 1)
+          .attr('stroke', '#00A699')
+          .on('mouseover', tip.show)
+          .on('mouseout', tip.hide);
+
+        annotationLayer.selectAll('rect').call(tip);
+      }
     }
 
     // on scroll, hide tooltips. throttle to only 4x/second.

superset/migrations/versions/d39b1e37131d_.py

@@ -0,0 +1,22 @@
+"""empty message
+
+Revision ID: d39b1e37131d
+Revises: ('a9c47e2c1547', 'ddd6ebdd853b')
+Create Date: 2017-09-19 15:09:14.292633
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = 'd39b1e37131d'
+down_revision = ('a9c47e2c1547', 'ddd6ebdd853b')
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    pass
+
+
+def downgrade():
+    pass

superset/migrations/versions/ddd6ebdd853b_annotations.py

@@ -0,0 +1,56 @@
+"""annotations
+
+Revision ID: ddd6ebdd853b
+Revises: ca69c70ec99b
+Create Date: 2017-09-13 16:36:39.144489
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = 'ddd6ebdd853b'
+down_revision = 'ca69c70ec99b'
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        'annotation_layer',
+        sa.Column('created_on', sa.DateTime(), nullable=True),
+        sa.Column('changed_on', sa.DateTime(), nullable=True),
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('name', sa.String(length=250), nullable=True),
+        sa.Column('descr', sa.Text(), nullable=True),
+        sa.Column('changed_by_fk', sa.Integer(), nullable=True),
+        sa.Column('created_by_fk', sa.Integer(), nullable=True),
+        sa.ForeignKeyConstraint(['changed_by_fk'], ['ab_user.id'], ),
+        sa.ForeignKeyConstraint(['created_by_fk'], ['ab_user.id'], ),
+        sa.PrimaryKeyConstraint('id')
+    )
+    op.create_table(
+        'annotation',
+        sa.Column('created_on', sa.DateTime(), nullable=True),
+        sa.Column('changed_on', sa.DateTime(), nullable=True),
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('start_dttm', sa.DateTime(), nullable=True),
+        sa.Column('end_dttm', sa.DateTime(), nullable=True),
+        sa.Column('layer_id', sa.Integer(), nullable=True),
+        sa.Column('short_descr', sa.String(length=500), nullable=True),
+        sa.Column('long_descr', sa.Text(), nullable=True),
+        sa.Column('changed_by_fk', sa.Integer(), nullable=True),
+        sa.Column('created_by_fk', sa.Integer(), nullable=True),
+        sa.ForeignKeyConstraint(['changed_by_fk'], ['ab_user.id'], ),
+        sa.ForeignKeyConstraint(['created_by_fk'], ['ab_user.id'], ),
+        sa.ForeignKeyConstraint(['layer_id'], [u'annotation_layer.id'], ),
+        sa.PrimaryKeyConstraint('id')
+    )
+    op.create_index(
+        'ti_dag_state',
+        'annotation', ['layer_id', 'start_dttm', 'end_dttm'], unique=False)
+
+
+def downgrade():
+    op.drop_index('ti_dag_state', table_name='annotation')
+    op.drop_table('annotation')
+    op.drop_table('annotation_layer')

superset/migrations/versions/f959a6652acd_.py

@@ -0,0 +1,22 @@
+"""empty message
+
+Revision ID: f959a6652acd
+Revises: ('472d2f73dfd4', 'd39b1e37131d')
+Create Date: 2017-09-24 20:18:35.791707
+
+"""
+
+# revision identifiers, used by Alembic.
+revision = 'f959a6652acd'
+down_revision = ('472d2f73dfd4', 'd39b1e37131d')
+
+from alembic import op
+import sqlalchemy as sa
+
+
+def upgrade():
+    pass
+
+
+def downgrade():
+    pass