urth-viz-query.html

<!--
# Copyright (c) Jupyter Development Team.
# Distributed under the terms of the Modified BSD License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../urth-core-dataframe/urth-core-dataframe.html">
<link rel="import" href="../urth-core-behaviors/jupyter-persist-behavior.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="multi-select-menu.html">

<!--
This element provides UI to execute a query executed against an `urth-core-dataframe` element. The `urth-core-dataframe` is placed as a child to this element.

Example:

Let the user choose a query and display the results in an `urth-viz-table`

    <template is="dom-bind">
      <urth-viz-table datarows="{{df.data}}" columns="{{ df.columns }}" rows-visible=6 selection-as-object>
      </urth-viz-table>
      <urth-viz-query>
        <urth-core-dataframe ref="aDataFrame" value="{{df}}" auto ></urth-core-dataframe>
      </urth-viz-query>
    </template>

@group Urth Viz
@element urth-viz-query
-->

<dom-module id="urth-viz-query">
    <style>
        multi-select-menu,
        paper-dropdown-menu,
        paper-input {
            display: inline-block;

            /* TODO make this configurable using --urth-viz-query-row-width */
            width: 200px;
        }
        .query-add-btns {
            display: flex;
            justify-content: center;
        }
        .query-add-btns paper-button {
            width: 50%;
        }
        .query-remove-btn {
            position: absolute;
            top: 0;
            right: 0;
        }
        .query-remove-btn,
        .agg-remove-btn {
            width: 2.5em;
            height: 2.5em;
        }
        .query-item {
            position: relative;
            padding: 0 1em 1em;
        }
        .query-item,
        .query-add-btns.group-filter {
            border-bottom: 1px solid #eee;
        }
        .query-item:hover {
            background-color: #eee;
        }
        .query-item:not(.sort-item) > * {
            display: block;
        }
        .query-label {
            font-variant: small-caps;
            margin-bottom: 0;
        }
        .agg-list {
            padding-left: 1em;
        }
        .add-agg {
            padding: 0.4em 0 0 0.4em;
        }
        .sort-item .query-remove-btn {
            top: 1em;
        }
        .sort-item .sort-direction-btn {
            padding: 0;
            width: 1.7em;
            height: 1.7em;
            margin-left: 1em;
        }
        .sort-item .sort-direction-btn[active] {
            transform: rotateX(180deg);
        }
        .clear-group-btn {
            color: #9b9b9b;
            padding: 0;
            width: 1.3em;
            height: 1.3em;
        }
        :host {
            display: flex;
            flex-direction: column;

            --paper-item-min-height: 24px;
            --paper-font-subhead: {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                -webkit-font-smoothing: antialiased;
            };
            --paper-item: {
                font-size: 1em;
            };
            --paper-button: {
                min-width: 40px;
                text-transform: none;
            };
            --paper-input-container: {
                padding: 0;
            };
            --paper-input-container-label: {
                font-size: 14px;
            };
        }
    </style>
    <template>
        <template is="dom-repeat" items={{queries}} as="query" index-as="query-index">
            <div class="query-item">
                <paper-icon-button class="query-remove-btn" noink icon="clear"
                    on-tap="_removeQuery"></paper-icon-button>

                <!-- group -->
                <template is="dom-if" if="{{query.group}}">
                    <div class="group-select">
                        <multi-select-menu label="group by" selected="{{query.col}}"
                            items="{{query.columns}}" item-type="columns"
                            invalid="{{!_arrayContains(query.columns,query.col)}}"></multi-select-menu>
                        <paper-icon-button class="clear-group-btn"
                            on-tap="_clearGroup" icon="cancel"
                            data-query-index$="{{query-index}}"></paper-icon-button>
                    </div>
                    <div class="agg-list">
                        <template is="dom-repeat" items="{{query.aggregators}}" as="agg">
                            <div class="query-agg">
                                <paper-dropdown-menu class="agg-op"
                                    invalid="{{!_isNotEmptyString(agg.op)}}"
                                    label="operation" noink>
                                    <paper-listbox class="dropdown-content"
                                        selected="{{agg.op}}" attr-for-selected="value">
                                        <paper-item value="sum">sum</paper-item>
                                        <paper-item value="mean">mean</paper-item>
                                    </paper-listbox>
                                </paper-dropdown-menu>
                                <div class="agg-delete-row">
                                    <paper-dropdown-menu class="agg-col" noink
                                        invalid="{{!_arrayContains(query.columns,agg.col)}}"
                                        label="column">
                                        <paper-listbox class="dropdown-content"
                                            selected="{{agg.col}}" attr-for-selected="value">
                                            <template is="dom-repeat"
                                                items="{{query.columns}}"
                                                filter="{{_filterItemsByNumberType(query.columns, query.columnTypes)}}">
                                                <paper-item value="{{item}}">{{item}}</paper-item>
                                            </template>
                                        </paper-listbox>
                                    </paper-dropdown-menu>
                                    <paper-icon-button class="agg-remove-btn" noink
                                        on-tap="_removeAgg" icon="clear" data-query-index$="{{query-index}}">
                                    </paper-icon-button>
                                </div>
                            </div>
                        </template>
                    </div>

                    <paper-button class="add-agg" on-tap="_addAgg" noink data-query-index$="{{query-index}}">
                        <iron-icon icon="icons:add"></iron-icon>aggregation</paper-button>
                </template>

                <!-- filter -->
                <template is="dom-if" if="{{query.filter}}">
                    <paper-dropdown-menu label="filter column" noink
                        invalid="{{!_arrayContains(query.columns,query.col)}}">
                        <paper-listbox class="dropdown-content"
                            selected="{{query.col}}" attr-for-selected="value">
                            <template is="dom-repeat" items="{{query.columns}}">
                                <paper-item value="{{item}}">{{item}}</paper-item>
                            </template>
                        </paper-listbox>
                    </paper-dropdown-menu>
                    <paper-dropdown-menu label="to be" noink
                        invalid="{{!_isNotEmptyString(query.op)}}">
                        <paper-listbox class="dropdown-content"
                            selected="{{query.op}}" attr-for-selected="value">
                            <template is="dom-repeat"
                                items="{{_filterOpSet(query.col, query.columns, query.columnTypes)}}">
                                <paper-item value="{{item.op}}">{{item.desc}}</paper-item>
                            </template>
                        </paper-listbox>
                    </paper-dropdown-menu>
                    <paper-input invalid="{{!_isNotEmptyString(query.val)}}"
                        label="value" value="{{query.val}}"></paper-input>
                </template>
            </div>
        </template>

        <div class="query-add-btns group-filter">
            <paper-button on-tap="_addGroup" noink>
                <iron-icon icon="icons:add"></iron-icon>group-by</paper-button>
            <paper-button class="add-filter" on-tap="_addFilter" noink>
                <iron-icon icon="icons:add"></iron-icon>filter</paper-button>
        </div>

        <template is="dom-repeat" items={{sorts}} as="sort">
            <div class="query-item sort-item">
                <paper-dropdown-menu class="sort-col" label="sort column"
                    invalid="{{!_isNotEmptyString(sort.col)}}" noink>
                    <paper-listbox class="dropdown-content" selected="{{sort.col}}" attr-for-selected="value">
                        <template is="dom-repeat" items="{{sort.columns}}">
                            <paper-item value="{{item}}">{{item}}</paper-item>
                        </template>
                    </paper-listbox>
                </paper-dropdown-menu>
                <paper-icon-button class="sort-direction-btn" toggles noink
                    icon="sort" active="{{sort.dir}}"></paper-icon-button>
                <paper-icon-button class="query-remove-btn" on-tap="_removeSort"
                    icon="clear" noink></paper-button>
            </div>
        </template>

        <div class="query-add-btns">
            <paper-button on-tap="_addSort" noink>
                <iron-icon icon="icons:add"></iron-icon>sort</paper-button>
        </div>


        <!-- repeating urth-core-query elements to be stamped as children of myDataframe -->
        <template id="queries" is="dom-repeat" items="{{queries}}" as="query"
            filter="_isQueryValid" observe="col op val">
            <!-- group -->
            <template is="dom-if" if="{{query.group}}">
                <urth-core-query-group by="{{_arrayToString(query.col)}}">
                    <template is="dom-repeat" items="{{query.aggregators}}" as="agg">
                        <urth-core-query-agg op="{{agg.op}}" col="{{agg.col}}"
                            disabled="{{!agg.col}}"></urth-core-query-agg>
                    </template>
                </urth-core-query-group>
            </template>

            <!-- filter -->
            <template is="dom-if" if="{{query.filter}}">
                <urth-core-query-filter>{{_filterExpression(query.col, query.op, query.val)}}</urth-core-query-filter>
            </template>
        </template>

        <!-- sort -->
        <template id="sort" is="dom-if" if="{{sortAttrs.by}}">
            <urth-core-query-sort by="{{sortAttrs.by}}"
                direction="{{sortAttrs.direction}}"></urth-core-query-sort>
        </template>

        <!-- user declares dataframe here -->
        <content id="myDataframe" select="urth-core-dataframe"></content>
    </template>
</dom-module>
<script>
(function() {
    'use strict';

    var FILTERS = [
        { op: '==', desc: 'equals'},
        { op: '!=', desc: 'not equals'}
    ];
    var NUMERIC_FILTERS = FILTERS.concat([
        { op: '<',  desc: 'less than'},
        { op: '<=', desc: 'less than or equal'},
        { op: '>',  desc: 'greater than'},
        { op: '>=', desc: 'greater than or equal'}
    ]);

    window.Urth = window.Urth || {};
    window.Urth['urth-viz-query'] = Polymer({
        is: 'urth-viz-query',

        properties: {
            /**
             * An array of queries containing either filter or group operations
             */
            queries: {
                type: Array,
                persist: true,
                value: function() { return []; }
            },
            /**
             * An array of instructions to sort, each containing a column and sort direction
             */
            sorts: {
                type: Array,
                persist: true,
                value: function() { return []; }
            },
            /**
             * Computed attributes for `urth-core-query-sort` based on `sorts` Array
             * @private
             */
            sortAttrs: {
                type: Object,
                computed: '_flattenSort(sorts.*)'
            },
            /**
             * @private
             */
            lastModifiedQueryIndex: {
                type: Number,
                value: NaN
            }
        },

        behaviors: [
            Urth.JupyterPersistBehavior,
        ],

        observers: [
            '_queriesChanged(queries.*,sorts.*)',
            'saveState(queries.*,sorts.*)'
        ],

        _addAgg: function(event) {
            var i = event.currentTarget.getAttribute("data-query-index");
            this.push('queries.'+i+'.aggregators', { op: null, col: null });
        },

        _addFilter: function() {
            this.push('queries', this._newQuery({ filter: true, op: null, val: null }));
        },

        _addGroup: function() {
            this.push('queries', this._newQuery({ group: true, aggregators: [] }));
        },

        _addSort: function() {
            // true == asc, false == desc
            this.push('sorts', this._newQuery({ col: null, dir: false }));
        },

        _arrayContains: function(arr, values) {
            values = [].concat(values);
            return values.length === 0 ? false :
                values.every(function(value) {
                    return arr.indexOf(value) !== -1;
                });
        },

        _arrayToString: function(arr) {
            return (arr || []).join(',');
        },

        _clearGroup: function(event) {
            var i = event.currentTarget.getAttribute("data-query-index");
            this.set(['queries', i, 'col'], null);
        },

        _filterExpression: function(col, op, val) {
            if (Number.isNaN(+val)) {
                val = "'" + val + "'";
            }
            return col + ' ' + op + ' ' + val;
        },

        _filterItemsByNumberType: function(columns, columnTypes) {
            return function(item) {
                return columnTypes[columns.indexOf(item)] === 'Number';
            };
        },

        _filterOpSet: function(column, columns, columnTypes) {
            if (!column || !columns) { return []; }
            var datatype = columnTypes[columns.indexOf(column)];
            return datatype === 'Number' ? NUMERIC_FILTERS : FILTERS;
        },

        _flattenSort: function() {
            var validSorts = this.sorts.filter(function(s) { return s.col; });
            return {
                by: validSorts.map(function(s) { return s.col; }).join(','),
                direction: validSorts.map(function(s) {
                    return s.dir ? 'asc' : 'desc';
                }).join(',')
            };
        },

        _isNotEmptyString: function(value) {
            return typeof value === 'string' && value.length > 0;
        },

        _isQueryValid: function(query) {
            if (query.filter) {
                return query.col && query.op && query.val &&
                    this._arrayContains(query.columns, query.col);
            } else {
                return query.col;
            }
        },

        _newQuery: function(opts) {
            return Object.assign({
                col: null,
                columns: this.columns,
                columnTypes: this.columnTypes
            }, opts);
        },

        _queriesChanged: function(change) {
            var match = /^(queries\.#\d+)/.exec(change.path);
            if (match) {
                var query = this.get(match[1]);
                this.lastModifiedQueryIndex = this.queries.indexOf(query);
            } else if (change.path === 'queries.splices' &&
                change.value.indexSplices.length === 1 &&
                change.value.indexSplices[0].removed.length === 1 &&
                change.value.indexSplices[0].index === 0 &&
                change.value.indexSplices[0].removed[0].group) {

                this.lastModifiedQueryIndex = -1; // -1 will update all
                this.columns = change.value.indexSplices[0].removed[0].columns;
                this.columnTypes = change.value.indexSplices[0].removed[0].columnTypes;
                this._updateQueryColumns('columns-changed');
                this._updateQueryColumns('column-types-changed');
            }
        },

        _removeAgg: function(event) {
            var i = event.currentTarget.getAttribute("data-query-index");
            this.splice('queries.'+i+'.aggregators', event.model.index, 1);
        },

        _removeQuery: function(event) {
            this.splice('queries', event.model['query-index'], 1);
        },

        _removeSort: function(event) {
            this.splice('sorts', event.model.index, 1);
        },

        _updateQueryColumns: function(eventName) {
            var lastModified = Number(this.lastModifiedQueryIndex);
            var breakLoop = false;
            for (var i = lastModified+1; i < this.queries.length; i++) {
                var query = this.queries[i];
                if (eventName === 'column-types-changed') {
                    // update query column types
                    this.set(['queries',i,'columnTypes'], this.columnTypes);

                    // exit the loop if a groupby remained valid
                    breakLoop = query.group && this._isQueryValid(query);
                } else if (eventName === 'columns-changed') {
                    var clearColumn;

                    // check query based on type
                    if (query.group) {
                        // check group and agg cols, clear if not in current cols
                        clearColumn = !(query.col || []).every(function(col) {
                            return this.columns.indexOf(col) !== -1;
                        }, this);
                        query.aggregators.forEach(function(agg, j) {
                            if (this.columns.indexOf(agg.col) === -1) {
                                this.set(['queries',i,'aggregators',j,'col'], null);
                            };
                        }, this);

                        // if group is still valid stop this loop
                        // a new update loop will start with this query
                        breakLoop = this._isQueryValid(query);
                    } else if (query.filter) {
                        // check filter col, clear if not in current cols
                        clearColumn = this.columns.indexOf(query.col) === -1;
                    }

                    // update query columns
                    if (clearColumn) {
                        this.set(['queries',i,'col'], null);
                        this.set(['queries',i,'op'], null);
                    }
                    this.set(['queries',i,'columns'], this.columns);

                }

                // exit the loop if a groupby remained valid
                if (breakLoop) { break; }
            }
        },

        attached: function() {
            this.restoreState();
        },

        ready: function() {
            // move filters template to user-supplied urth-core-dataframe in light DOM
            var dataframe = Polymer.dom(this.$.myDataframe).getDistributedNodes()[0];
            dataframe.appendChild(this.$.queries);
            dataframe.appendChild(this.$.sort);

            // ignore the first one or two occurrances of an event since they
            // are related to instantiation and will corrupt the queries if a
            // query update occurs during an instantiation update
            var init = {};
            var getInitHandler = function(eventName) {
                init[eventName] = {
                    count: 0,
                    done: false,
                    fn: function() {
                        init[eventName].count++;
                        // 1 update for the event if no queries, else 2
                        if (this.queries.length === 0 && init[eventName].count === 1 ||
                            this.queries.length > 0 && init[eventName].count === 2) {
                            init[eventName].done = true;
                            dataframe.removeEventListener(eventName, init[eventName].fn);
                        }
                    }.bind(this)
                };
                return init[eventName].fn;
            }.bind(this);

            ['columns-changed', 'column-types-changed'].forEach(function(eventName) {
                dataframe.addEventListener(eventName, getInitHandler(eventName));
                dataframe.addEventListener(eventName, function() {
                    var camelCase = eventName.slice(0,eventName.length-8).replace(/-(.)/g, function(m) { return m[1].toUpperCase() });
                    this[camelCase] = dataframe[camelCase];
                    if (init[eventName].done && !Number.isNaN(this.lastModifiedQueryIndex)) {
                        this._updateQueryColumns(eventName);
                    }
                }.bind(this));
            }, this);
        }
    });
})();
</script>