<commit_before><div class="header-container" ng-show="!(hideHeader)">
    <span class="header-text pull-left" ng-bind="options.table.prettyName"></span>

    <h4 class="pull-left">
        <span class="count text-primary" ng-bind="recordCount | number"></span> valid records
    </h4>

    <h4 class="invalid-record-count pull-left" ng-click="sendInvalidDates()">
        <span class="count text-primary" ng-bind="invalidRecordCount | number"></span> invalid records
    </h4>

    <options-menu parent-element="element" export-function="makeTimelineSelectorExportObject">
        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Database</label>
            <select class="form-control" ng-model="options.database" ng-options="database.prettyName for database in databases" ng-required="true" ng-disabled="(databases.length < 2)" ng-change="updateTables()">
            </select>
        </div>

        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Table</label>
            <select class="form-control" ng-model="options.table" ng-options="table.prettyName for table in tables" ng-required="true" ng-disabled="(tables.length < 2)" ng-change="updateFields()">
            </select>
        </div>

        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Date Field</label>
            <select class="form-control" ng-model="options.dateField" ng-options="field.prettyName for field in fields" ng-required="true" ng-disabled="(fields.length == 0)" ng-change="updateDateField()">
            </select>
        </div>

        <div class="form-group pull-right timeseries-selector-form-group" ng-hide="!(data.length > 1)">
          <div class="input-group timeseries-selector">
            <select class="form-control" ng-model="options.primarySeries" ng-options="series.name for series in data">
            </select>
            <span class="input-group-btn">
              <button class="btn" type="button" ng-class="{true: 'btn-primary', false: 'btn-danger'}[options.collapsed]" ng-click="options.collapsed = !options.collapsed">
                <span class="glyphicon" ng-class="{true: 'glyphicon-plus', false: 'glyphicon-minus'}[options.collapsed]"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="form-group">
            <label>Date Granularity</label>
            <div class="btn-group">
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'year']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="year"> Year
              </label>
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'month']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="month"> Month
              </label>
              <label class="btn btn-default active" ng-class="{true: 'active', false: ''}[options.granularity === 'day']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="day"> Day
              </label>
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'hour']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="hour"> Hour
              </label>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="form-group">
            <label>Show Focus</label>
            <div class="btn-group">
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'on_filter']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="on_filter"> On Filter
                </label>
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'always']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="always"> Always
                </label>
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'never']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="never"> Never
                </label>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <label>Animation Controls</label>
            <div class="btn-group">
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showAnimationControls]">
                    <input type="radio" style="display:none" ng-model="options.showAnimationControls" value="true"> Show 
                </label>
                <label class="btn btn-default" ng-class="{true: '', false: 'active'}[options.showAnimationControls]">
                    <input type="radio" style="display:none" ng-model="options.showAnimationControls" value="false"> Hide
                </label>
            </div>
            <div class="clearfix"></div>
        </div>
    </options-menu>
</div>

<div class="clearfix"></div>

<div class="header-container filter-container">
    <div class="header-item filter-reset pull-right" ng-class="{true: '', false: 'hidden'}[brush.length > 0]" title="Date from {{startDateForDisplay}} to {{endDateForDisplay}}">
        <span class="filter-label">Date Filter</span>
        <span class="glyphicon glyphicon-remove" ng-click="clearBrush()"></span>
    </div>

    <div class="header-item filter-reset pull-right" ng-class="{true: '', false: 'hidden'}[invalidDatesFilter]">
        <span class="filter-lg-label">Invalid Date Filter</span>
        <span class="glyphicon glyphicon-remove" ng-click="clearInvalidDatesFilter()"></span>
    </div>

    <h4 class="pull-left">
        <span class="count text-primary" ng-bind="recordCount | number"></span>
        <span ng-hide="(brush.length > 0 && width < 500) || (width < 400)">records</span>
    </h4>

    <div class="neon-datetimepicker dropdown pull-left">
        <button class="btn btn-default header-item dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#" title="{{'From ' + (startDateForDisplay || '?') + ' to ' + (endDateForDisplay || '?')}}">
            <span class="glyphicon glyphicon-calendar"></span>
            <span ng-hide="(brush.length > 0 && width < 700) || (width < 600)" ng-bind="(startDateForDisplay || '?') + ' to ' + (endDateForDisplay || '?')"></span>
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <div>
                <label class="start-date pull-left">Start Date</label>
                <label class="end-date pull-left">End Date</label>
                <button class="btn btn-default header-item pull-left save-button disabled" ng-click="handleDateTimePickSave()">Save</button>
                <button class="btn btn-default header-item pull-left" ng-click="handleDateTimePickCancel()">Cancel</button>
            </div>
            <!-- Create a datetimepicker for each granularity because you can't change the configuration dynamically. -->
            <datetimepicker ng-show="(options.granularity === 'hour')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'hour', minView: 'hour' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'day')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'day', minView: 'day' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'month')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'month', minView: 'month' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'year')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'year', minView: 'year' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'hour')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'hour', minView: 'hour' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'day')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'day', minView: 'day' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'month')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'month', minView: 'month' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'year')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'year', minView: 'year' }" ng-change="handleDateTimePickChange()"/>
        </ul>

        <span class="form-group" ng-if="options.showAnimationControls">
            <span class="btn-group">
                <label class="btn btn-default header-item" role="button" title="{{(options.animatingTime) ? 'Pause' : ((options.animationFrame > getAnimationStartFrame()) ? 'Resume' : 'Play')}}"
                    ng-click="(options.animatingTime) ? pauseTimeAnimation() : playTimeAnimation()">
                    <span class="glyphicon" ng-class="{true: 'glyphicon-pause', false: 'glyphicon-play-circle'}[options.animatingTime]"></span> 
                    <span ng-hide="(brush.length > 0 && width < 800) || (width < 700)" ng-bind="(options.animatingTime) ? 'Pause' : ((options.animationFrame > getAnimationStartFrame()) ? 'Resume' : 'Play')"></span>
                </label>
                <label class="btn btn-default header-item" role="button" title="Step" ng-click="stepTimeAnimation()">
                    <span class="glyphicon glyphicon-step-forward"></span>
                    <span ng-hide="(brush.length > 0 && width < 800) || (width < 700)">Step</span>
                </label>
                <label class="btn btn-default header-item" role="button" title="Stop" ng-click="stopTimeAnimation()">
                    <span class="glyphicon glyphicon-stop"></span>
                    <span ng-hide="(brush.length > 0 && width < 800) || (width < 700)">Stop</span>
                </label>
            </span>
        </span>
    </div>
</div>

<div class="collapsed" ng-class="{true: 'collapsed', false: ''}[options.collapsed]" ng-hide="noData">
    <div timeline-selector-chart timeline-data='data' timeline-brush='brush' collapsed='options.collapsed' extent-dirty='extentDirty'
        primary-series='options.primarySeries' granularity='options.granularity' show-focus='options.showFocus'></div>
</div>

<span class="no-data pull-left" ng-show="noData">No data for current filters.</span>

<div class="text-center mmpp" ng-class="{true: '', false: 'hidden'}[opencpu.enableMmpp === true && options.granularity === 'hour' && !eventProbabilitiesDisplayed && !options.collapsed]" ng-hide="noData"><commit_msg>Fixed responsive behavior for new styling in timeline.<commit_after><div class="header-container" ng-show="!(hideHeader)">
    <span class="header-text pull-left" ng-bind="options.table.prettyName"></span>

    <h4 class="pull-left">
        <span class="count text-primary" ng-bind="recordCount | number"></span>
        <span>valid</span>
        <span ng-hide="(width < 600)">records</span>
    </h4>

    <h4 class="invalid-record-count pull-left" ng-click="sendInvalidDates()">
        <span class="count text-primary" ng-bind="invalidRecordCount | number"></span>
        <span>invalid</span>
        <span ng-hide="(width < 600)">records</span>
    </h4>

    <options-menu parent-element="element" export-function="makeTimelineSelectorExportObject">
        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Database</label>
            <select class="form-control" ng-model="options.database" ng-options="database.prettyName for database in databases" ng-required="true" ng-disabled="(databases.length < 2)" ng-change="updateTables()">
            </select>
        </div>

        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Table</label>
            <select class="form-control" ng-model="options.table" ng-options="table.prettyName for table in tables" ng-required="true" ng-disabled="(tables.length < 2)" ng-change="updateFields()">
            </select>
        </div>

        <div class="form-group" ng-show="!(hideAdvancedOptions)">
            <label>Date Field</label>
            <select class="form-control" ng-model="options.dateField" ng-options="field.prettyName for field in fields" ng-required="true" ng-disabled="(fields.length == 0)" ng-change="updateDateField()">
            </select>
        </div>

        <div class="form-group pull-right timeseries-selector-form-group" ng-hide="!(data.length > 1)">
          <div class="input-group timeseries-selector">
            <select class="form-control" ng-model="options.primarySeries" ng-options="series.name for series in data">
            </select>
            <span class="input-group-btn">
              <button class="btn" type="button" ng-class="{true: 'btn-primary', false: 'btn-danger'}[options.collapsed]" ng-click="options.collapsed = !options.collapsed">
                <span class="glyphicon" ng-class="{true: 'glyphicon-plus', false: 'glyphicon-minus'}[options.collapsed]"></span>
              </button>
            </span>
          </div>
        </div>

        <div class="form-group">
            <label>Date Granularity</label>
            <div class="btn-group">
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'year']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="year"> Year
              </label>
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'month']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="month"> Month
              </label>
              <label class="btn btn-default active" ng-class="{true: 'active', false: ''}[options.granularity === 'day']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="day"> Day
              </label>
              <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.granularity === 'hour']">
                <input type="radio" style="display:none" ng-model="options.granularity" value="hour"> Hour
              </label>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="form-group">
            <label>Show Focus</label>
            <div class="btn-group">
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'on_filter']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="on_filter"> On Filter
                </label>
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'always']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="always"> Always
                </label>
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showFocus === 'never']">
                    <input type="radio" style="display:none" ng-model="options.showFocus" value="never"> Never
                </label>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="form-group">
            <label>Animation Controls</label>
            <div class="btn-group">
                <label class="btn btn-default" ng-class="{true: 'active', false: ''}[options.showAnimationControls]">
                    <input type="radio" style="display:none" ng-model="options.showAnimationControls" value="true"> Show 
                </label>
                <label class="btn btn-default" ng-class="{true: '', false: 'active'}[options.showAnimationControls]">
                    <input type="radio" style="display:none" ng-model="options.showAnimationControls" value="false"> Hide
                </label>
            </div>
            <div class="clearfix"></div>
        </div>
    </options-menu>
</div>

<div class="clearfix"></div>

<div class="header-container filter-container">
    <div class="header-item filter-reset pull-right" ng-class="{true: '', false: 'hidden'}[brush.length > 0]" title="Date from {{startDateForDisplay}} to {{endDateForDisplay}}">
        <span class="filter-label">Date Filter</span>
        <span class="glyphicon glyphicon-remove" ng-click="clearBrush()"></span>
    </div>

    <div class="header-item filter-reset pull-right" ng-class="{true: '', false: 'hidden'}[invalidDatesFilter]" title="Invalid Date">
        <span class="filter-lg-label">Invalid Date Filter</span>
        <span class="glyphicon glyphicon-remove" ng-click="clearInvalidDatesFilter()"></span>
    </div>

    <div class="neon-datetimepicker dropdown pull-left">
        <button class="btn btn-default header-item dropdown-toggle" role="button" data-toggle="dropdown" data-target="#" href="#" title="{{'From ' + (startDateForDisplay || '?') + ' to ' + (endDateForDisplay || '?')}}">
            <span class="glyphicon glyphicon-calendar"></span>
            <span ng-hide="(brush.length > 0 && width < 525) || (width < 400)" ng-bind="(startDateForDisplay || '?') + ' to ' + (endDateForDisplay || '?')"></span>
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu">
            <div>
                <label class="start-date pull-left">Start Date</label>
                <label class="end-date pull-left">End Date</label>
                <button class="btn btn-default header-item pull-left save-button disabled" ng-click="handleDateTimePickSave()">Save</button>
                <button class="btn btn-default header-item pull-left" ng-click="handleDateTimePickCancel()">Cancel</button>
            </div>
            <!-- Create a datetimepicker for each granularity because you can't change the configuration dynamically. -->
            <datetimepicker ng-show="(options.granularity === 'hour')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'hour', minView: 'hour' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'day')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'day', minView: 'day' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'month')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'month', minView: 'month' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'year')" data-ng-model="filter.start" data-datetimepicker-config="{ startView: 'year', minView: 'year' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'hour')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'hour', minView: 'hour' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'day')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'day', minView: 'day' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'month')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'month', minView: 'month' }" ng-change="handleDateTimePickChange()"/>
            <datetimepicker ng-show="(options.granularity === 'year')" data-ng-model="filter.end" data-datetimepicker-config="{ startView: 'year', minView: 'year' }" ng-change="handleDateTimePickChange()"/>
        </ul>

        <span class="form-group" ng-if="options.showAnimationControls">
            <span class="btn-group">
                <label class="btn btn-default header-item" role="button" title="{{(options.animatingTime) ? 'Pause' : ((options.animationFrame > getAnimationStartFrame()) ? 'Resume' : 'Play')}}"
                    ng-click="(options.animatingTime) ? pauseTimeAnimation() : playTimeAnimation()">
                    <span class="glyphicon" ng-class="{true: 'glyphicon-pause', false: 'glyphicon-play-circle'}[options.animatingTime]"></span> 
                    <span ng-hide="(brush.length > 0 && width < 625) || (width < 500)" ng-bind="(options.animatingTime) ? 'Pause' : ((options.animationFrame > getAnimationStartFrame()) ? 'Resume' : 'Play')"></span>
                </label>
                <label class="btn btn-default header-item" role="button" title="Step" ng-click="stepTimeAnimation()">
                    <span class="glyphicon glyphicon-step-forward"></span>
                    <span ng-hide="(brush.length > 0 && width < 625) || (width < 500)">Step</span>
                </label>
                <label class="btn btn-default header-item" role="button" title="Stop" ng-click="stopTimeAnimation()">
                    <span class="glyphicon glyphicon-stop"></span>
                    <span ng-hide="(brush.length > 0 && width < 625) || (width < 500)">Stop</span>
                </label>
            </span>
        </span>
    </div>
</div>

<div class="collapsed" ng-class="{true: 'collapsed', false: ''}[options.collapsed]" ng-hide="noData">
    <div timeline-selector-chart timeline-data='data' timeline-brush='brush' collapsed='options.collapsed' extent-dirty='extentDirty'
        primary-series='options.primarySeries' granularity='options.granularity' show-focus='options.showFocus'></div>
</div>

<span class="no-data pull-left" ng-show="noData">No data for current filters.</span>

<div class="text-center mmpp" ng-class="{true: '', false: 'hidden'}[opencpu.enableMmpp === true && options.granularity === 'hour' && !eventProbabilitiesDisplayed && !options.collapsed]" ng-hide="noData">
{'fraction_non_alphanumeric': 0.17984314432525017, 'fraction_numerical': 0.0040115388082574595, 'mean_word_length': 3.0837474691698876, 'pattern_counts': {'":': 0, '<': 383, '<?xml version=': 0, '>': 376, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2970187', 'n_tokens_mistral': 6627, 'n_tokens_neox': 6198, 'n_words': 1237}