template.html

<!--<div class="row">

	<div class="col-lg-9 col-md-9 col-sm-11 col-xs-11 margin-bottom">
		<input type="text" class="form-control" data-ng-model="title" placeholder="Untitled"></input>
	</div>

	<div class="col-lg-3 col-md-3 col-sm-1 col-xs-1 margin-bottom">

		<a data-ng-show="showControls === 'true'"
			class="btn btn-default"
			data-ng-click="filterReset()"
			tooltip-animation="false"
			tooltip-append-to-body="true"
			tooltip="Clear">Clear</a>


		<a data-ng-show="showControls === 'true'"
			 class="text-danger fa fa-trash-o pull-right margin-top"
			 data-ng-click="$parent.removeFilter($event)"
			 tooltip-animation="false"
			 tooltip-append-to-body="true"
			 tooltip="Delete"></a>

		<span class="clearfix"></span>

	</div>
</div>-->

<div class="row" ng-show="collapse" ng-init="collapse=false">
	<div class="col-lg-12">
		{{title}}<span class="text-muted margin-left small">Timeline</span>
		<a class="btn btn-default btn-xs pull-right"
			tooltip-animation="false"
			tooltip-append-to-body="true"
			tooltip-placement="left"
			tooltip="Expand"
			ng-click="collapse=false">
			<i class="fa fa-chevron-up"></i>
		</a>
	</div>
</div>

<div class="row" ng-show="!collapse">

	<div class="main-viz">

		<div data-palladio-timeline-filter
			data-dimension="dateDim"
			data-group-accessor="groupAccessor"
			data-xfilter="xfilter"
			data-type="date"
			data-short="shortVersion"
			data-title="{{title}}"
			data-height="{{timelineHeight}}"
			data-mode="{{mode}}"
			data-count-by="{{countBy}} "
			data-aggregation-type="{{aggregationType}}"
			data-aggregate-key="{{aggregateKey}}"
			data-set-filter="setFilter"
			data-get-filter="getFilter"
			data-extent-override="extentOverride" >
		</div>

		<div class="well well-expand" ng-show="!dateProp">Select a Date dimension on the right</div>

	</div>

	<div class="col-lg-3 timeline-settings" data-ng-show="showSettings">

		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline text-muted">Timeline</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<a class="btn btn-default btn-xs pull-right"
					tooltip-animation="false"
					tooltip-append-to-body="true"
					tooltip-placement="left"
					tooltip="Collapse"
					ng-click="collapse=true">
					<i class="fa fa-chevron-down"></i>
				</a>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Description</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<input type="text" class="form-control" data-ng-model="title" placeholder="Untitled"></input>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Dates</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showDateModal()">
					{{dateProp.description || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Height</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showAggModal()">
					{{getAggDescription(aggDim) || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Group by</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showGroupModal()">
					{{groupProp.description || "Choose"}}
					<span class="caret"></span>
				</span>
        <span data-ng-show="groupProp">
          <i class="fa fa-close" data-ng-click="groupProp = null"></i>
        </span>
			</div>
		</div>

		<div class="row margin-top" data-ng-show="showControls">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">

				<a class="small" data-ng-click="filterReset()">Clear</a>
        <a class="small" data-ng-click="saveAsSVG()"
          tooltip-animation="false"
				 	tooltip-append-to-body="true"
					tooltip-placement="top"
					tooltip="Download as SVG">
          
          <i class="fa fa-download"></i>
        </a>

				<a class="text-danger pull-right"
				 	tooltip-animation="false"
				 	tooltip-append-to-body="true"
					tooltip-placement="left"
					tooltip="Delete filter"
				 	data-ng-click="$parent.removeFilter($event)">
					<i class="fa fa-trash-o"></i>
				</a>
			</div>
		</div>



	</div>

</div>

<div id="{{uniqueModalId}}">
	<div id="date-modal" data-modal dimensions="dateDims" model="dateProp"></div>
	<div id="group-modal" data-modal dimensions="groupDims" model="groupProp"></div>
	<div id="agg-modal" data-modal dimensions="aggDims" model="aggDim"
		description-accessor="getAggDescription"></div>
</div>