Merge remote-tracking branch 'origin/tech/update-jest' into tech/upda…

…te-jest

visualization/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.component.html

@@ -1,4 +1,4 @@
-<md-slider-container class="md-block">
+<md-slider-container class="md-block" title="Amount of space between buildings in percent">
 	<span>Margin</span>
 	<md-slider
 		flex
@@ -26,9 +26,17 @@
 </md-slider-container>
 
 <md-input-container class="md-block">
-	<md-checkbox class="md-primary" ng-model="$ctrl._viewModel.dynamicMargin" ng-change="$ctrl.applyDynamicMargin()">
+	<md-checkbox
+		class="md-primary"
+		ng-model="$ctrl._viewModel.dynamicMargin"
+		ng-change="$ctrl.applyDynamicMargin()"
+		title="Use a fit to width margin to see the whole map"
+	>
 		Dynamic Margin
 	</md-checkbox>
 </md-input-container>
 
-<reset-settings-button-component settings-names="appSettings.dynamicMargin"></reset-settings-button-component>
+<reset-settings-button-component
+	settings-names="appSettings.dynamicMargin"
+	tooltip="Reset area metric settings to their defaults"
+></reset-settings-button-component>

visualization/app/codeCharta/ui/attributeTypeSelector/attributeTypeSelector.component.html

@@ -1,6 +1,6 @@
 <md-menu>
 	<div class="small-action-button transparent">
-		<md-button class="md-fab" ng-click="$mdMenu.open($event)" title="Select Attribute Type">
+		<md-button class="md-fab" ng-click="$mdMenu.open($event)" title="Select attribute type">
 			<span class="symbol">{{ $ctrl._viewModel.aggregationSymbol }}</span>
 		</md-button>
 	</div>

visualization/app/codeCharta/ui/centerMapButton/centerMapButton.component.html

@@ -1,5 +1,5 @@
 <div id="centerMap" ng-show="!$ctrl._viewModel.isMapCentered" ng-class="$ctrl._viewModel.isMapCentered ? 'invisible' : 'visible'">
-	<md-button class="md-fab md-primary cc-shadow" aria-label="Fit Map to View" ng-click="$ctrl.fitMapToView()">
+	<md-button class="md-fab md-primary cc-shadow" aria-label="Fit Map to View" ng-click="$ctrl.fitMapToView()" title="Center map">
 		<i class="fa fa-compass fa-2x"></i>
 	</md-button>
 </div>

visualization/app/codeCharta/ui/centerMapButton/centerMapButton.component.scss

@@ -14,12 +14,12 @@ center-map-button-component {
 	}
 
 	.visible {
-		transition: opacity 0.3s linear;
+		transition: opacity 0.1s linear;
 		opacity: 1;
 	}
 
 	.invisible {
-		transition: opacity 0.3s linear;
+		transition: opacity 0.1s linear;
 		opacity: 0;
 	}
 }

visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.html

@@ -20,4 +20,5 @@
 
 <reset-settings-button-component
 	settings-names="dynamicSettings.colorRange, appSettings.invertColorRange, appSettings.invertDeltaColors, appSettings.whiteColorBuildings, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta"
+	tooltip="Reset color metric settings to their defaults"
 ></reset-settings-button-component>

visualization/app/codeCharta/ui/dialog/dialog.globalSettings.component.html

@@ -55,6 +55,7 @@ <h2 class="md-toolbar-tools">Global Settings</h2>
 			<reset-settings-button-component
 				autofocus="false"
 				settings-names="appSettings.hideFlatBuildings, appSettings.isWhiteBackground, appSettings.resetCameraIfNewFileIsLoaded"
+				tooltip="Reset global settings to their defaults"
 			></reset-settings-button-component>
 		</div>
 	</md-dialog-content>

visualization/app/codeCharta/ui/downloadButton/downloadButton.component.html

@@ -1,3 +1,3 @@
-<md-button class="toolbar-button" ng-click="$ctrl.downloadFile()">
+<md-button class="toolbar-button" ng-click="$ctrl.downloadFile()" title="Download cc.json">
 	<i class="fa fa-download"></i>
 </md-button>

visualization/app/codeCharta/ui/edgeChooser/edgeChooser.component.html

@@ -1,4 +1,4 @@
-<md-input-container>
+<md-input-container title="Edge metric">
 	<i class="fa fa-exchange"></i>
 	<md-tooltip ng-if="$ctrl.noEdgesAvailable()" md-delay="200">
 		Edges indicate relationships between buildings. Use the analysis to create edges.

visualization/app/codeCharta/ui/edgeSettingsPanel/edgeSettingsPanel.component.html

@@ -1,4 +1,9 @@
-<md-slider-container class="md-block">
+<md-slider-container
+	class="md-block"
+	title="Preview the edges of up to {{
+		$ctrl._viewModel.totalAffectedBuildings
+	}} buildings with the highest amount of incoming and outgoing edges"
+>
 	<span>Preview</span>
 	<md-slider
 		flex
@@ -27,7 +32,7 @@
 	</md-input-container>
 </md-slider-container>
 
-<md-slider-container class="md-block">
+<md-slider-container class="md-block" title="Adjust the curve height">
 	<span>Height</span>
 	<md-slider
 		flex
@@ -69,4 +74,5 @@
 
 <reset-settings-button-component
 	settings-names="appSettings.showOnlyBuildingsWithEdges, appSettings.amountOfEdgePreviews, appSettings.edgeHeight"
+	tooltip="Reset edge metric settings to their defaults"
 ></reset-settings-button-component>

visualization/app/codeCharta/ui/fileChooser/fileChooser.component.html

@@ -1,4 +1,4 @@
-<md-button class="toolbar-button" onclick="document.getElementById('input-file-id').click();">
+<md-button class="toolbar-button" onclick="document.getElementById('input-file-id').click()" title="Load cc.json files">
 	<i class="fa fa-folder-open folder-icon"></i>
 </md-button>
 

visualization/app/codeCharta/ui/filePanel/filePanel.component.html

@@ -19,7 +19,7 @@
 	>
 </section>
 
-<md-input-container class="input-container" ng-show="$ctrl._viewModel.isSingleState">
+<md-input-container class="input-container" ng-show="$ctrl._viewModel.isSingleState" title="Select a file">
 	<md-select
 		ng-model="$ctrl._viewModel.selectedFileNames.single"
 		ng-change="$ctrl.onSingleFileChange($ctrl._viewModel.selectedFileNames.single)"
@@ -33,7 +33,7 @@
 	</md-select>
 </md-input-container>
 
-<md-input-container class="input-container" ng-show="$ctrl._viewModel.isPartialState">
+<md-input-container class="input-container" ng-show="$ctrl._viewModel.isPartialState" title="Select files">
 	<md-select
 		ng-model="$ctrl._viewModel.selectedFileNames.partial"
 		multiple="{{ true }}"
@@ -55,7 +55,7 @@
 
 <div class="input-container delta-chooser" ng-show="$ctrl._viewModel.isDeltaState">
 	<div class="pictogram" ng-style="{ background: $ctrl._viewModel.pictogramFirstFileColor }"></div>
-	<md-input-container class="delta-select input-container">
+	<md-input-container class="delta-select input-container" title="Select reference file">
 		<md-select
 			ng-model="$ctrl._viewModel.selectedFileNames.delta.reference"
 			ng-change="$ctrl.onDeltaReferenceFileChange($ctrl._viewModel.selectedFileNames.delta.reference)"
@@ -76,7 +76,7 @@
 				'linear-gradient(' + $ctrl._viewModel.pictogramUpperColor + ' 50%, ' + $ctrl._viewModel.pictogramLowerColor + ' 50%)'
 		}"
 	></div>
-	<md-input-container class="input-container delta-select">
+	<md-input-container class="input-container delta-select" title="Select comparison file">
 		<md-select
 			ng-model="$ctrl._viewModel.selectedFileNames.delta.comparison"
 			ng-change="$ctrl.onDeltaComparisonFileChange($ctrl._viewModel.selectedFileNames.delta.comparison)"

visualization/app/codeCharta/ui/globalSettingsButton/globalSettingsButton.component.html

@@ -1,3 +1,3 @@
-<md-button class="toolbar-button cc-shadow" ng-click="$ctrl.showGlobalSettings()">
+<md-button class="toolbar-button cc-shadow" ng-click="$ctrl.showGlobalSettings()" title="Global settings">
 	<i class="fa fa-cog"></i>
 </md-button>

visualization/app/codeCharta/ui/heightSettingsPanel/heightSettingsPanel.component.html

@@ -1,4 +1,4 @@
-<md-slider-container class="md-block">
+<md-slider-container class="md-block" title="Display the labels of the {{ $ctrl._viewModel.amountOfTopLabels }} highest buildings">
 	<span>Labels</span>
 	<md-slider
 		flex
@@ -25,7 +25,7 @@
 	</md-input-container>
 </md-slider-container>
 
-<md-slider-container class="md-block">
+<md-slider-container class="md-block" title="Adjust buildings height">
 	<span>Height</span>
 	<md-slider
 		flex
@@ -60,4 +60,5 @@
 
 <reset-settings-button-component
 	settings-names="appSettings.amountOfTopLabels, appSettings.scaling.y, appSettings.invertHeight"
+	tooltip="Reset height metric settings to their defaults"
 ></reset-settings-button-component>

visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html

@@ -66,5 +66,6 @@
 	class="panel-button md-raised md-primary cc-shadow"
 	ng-click="$ctrl.toggle()"
 	ng-class="{ sideBarVisible: $ctrl._viewModel.isSideBarVisible }"
+	ng-attr-title="{{ $ctrl._viewModel.isLegendVisible ? 'Hide panel' : 'Show panel' }}"
 	>Legend</md-button
 >

visualization/app/codeCharta/ui/loadingGif/loadingGif.map.component.html

@@ -3,4 +3,5 @@
 	ng-show="$ctrl._viewModel.isLoadingMap"
 	md-mode="indeterminate"
 	md-diameter="22"
+	title="Rendering map"
 ></md-progress-circular>

visualization/app/codeCharta/ui/mapTreeView/mapTreeView.level.component.html

@@ -44,7 +44,7 @@
 			<i class="flattened fa fa-eye-slash" ng-if="$ctrl.node.isFlattened" title="Flattened"></i>
 
 			<div class="small-action-button transparent">
-				<md-button class="md-fab" ng-click="$ctrl.openNodeContextMenu($event)">
+				<md-button class="md-fab" ng-click="$ctrl.openNodeContextMenu($event)" title="Open Node-Context-Menu">
 					<i class="fa fa-ellipsis-h"></i>
 				</md-button>
 			</div>

visualization/app/codeCharta/ui/matchingFilesCounter/matchingFilesCounter.component.html

@@ -1,6 +1,6 @@
-<span class="box-rounded node-count">{{ $ctrl._viewModel.fileCount }}<i class="fa fa-file"></i></span>
-<span class="box-rounded node-count">{{ $ctrl._viewModel.flattenCount }}<i class="fa fa-eye-slash"></i></span>
-<span class="box-rounded node-count">{{ $ctrl._viewModel.excludeCount }}<i class="fa fa-ban"></i></span>
+<span class="box-rounded node-count" title="Files matching search pattern">{{ $ctrl._viewModel.fileCount }}<i class="fa fa-file"></i></span>
+<span class="box-rounded node-count" title="Files flattened">{{ $ctrl._viewModel.flattenCount }}<i class="fa fa-eye-slash"></i></span>
+<span class="box-rounded node-count" title="Files excluded">{{ $ctrl._viewModel.excludeCount }}<i class="fa fa-ban"></i></span>
 <div id="sort-component">
 	<sorting-button-component id="sort-component-button"></sorting-button-component>
 	<sorting-option-component id="sort-component-dialog"></sorting-option-component>

visualization/app/codeCharta/ui/metricChooser/metricChooser.area.component.html

@@ -1,4 +1,4 @@
-<md-input-container>
+<md-input-container title="Area metric">
 	<i class="fa fa-arrows-alt"></i>
 
 	<label></label>

visualization/app/codeCharta/ui/metricChooser/metricChooser.color.component.html

@@ -1,4 +1,4 @@
-<md-input-container>
+<md-input-container title="Color metric">
 	<i class="fa fa-paint-brush"></i>
 
 	<label></label>

visualization/app/codeCharta/ui/metricChooser/metricChooser.distribution.component.html

@@ -1,4 +1,4 @@
-<md-input-container>
+<md-input-container title="Distribution metric">
 	<i class="fa fa-pie-chart"></i>
 
 	<label></label>

visualization/app/codeCharta/ui/metricChooser/metricChooser.height.component.html

@@ -1,4 +1,4 @@
-<md-input-container>
+<md-input-container title="Height metric">
 	<i class="fa fa-arrows-v"></i>
 
 	<label></label>

visualization/app/codeCharta/ui/nodeContextMenu/nodeContextMenu.component.html

@@ -7,6 +7,7 @@
 				ng-disabled="primary === color && !isPrimary"
 				ng-click="$ctrl.clickColor(color)"
 				class="colorButton"
+				title="Colorize folder"
 			>
 				<i class="fa fa-times" ng-if="$ctrl.isNodeOrParentMarked(color)"></i>
 			</md-button>

visualization/app/codeCharta/ui/presentationModeButton/presentationModeButton.component.html

@@ -1,6 +1,11 @@
-<i class="presentation-mode-icon fa fa-television"></i>
+<div title="Enabling presentation mode will change the hovering effect so that it simulates a flashlight">
+	<i class="presentation-mode-icon fa fa-television"></i>
 
-<label class="presentation-mode-button" title="Enable Presentation Mode">
-	<input type="checkbox" />
-	<span class="slider round" ng-click="$ctrl.toggleMode()"></span>
-</label>
+	<label
+		class="presentation-mode-button"
+		ng-attr-title="{{ $ctrl._viewModel.isEnabled ? 'Disable presentation mode' : 'Enable presentation mode' }}"
+	>
+		<input type="checkbox" />
+		<span class="slider round" ng-click="$ctrl.toggleMode()"></span>
+	</label>
+</div>

visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.html

@@ -1 +1,3 @@
-<md-button class="md-primary" ng-click="$ctrl.applyDefaultSettings()"><i class="fa fa-undo"></i></md-button>
+<md-button class="md-primary" ng-click="$ctrl.applyDefaultSettings()" ng-attr-title="{{ $ctrl.tooltip }}"
+	><i class="fa fa-undo"></i
+></md-button>

visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.ts

@@ -47,6 +47,7 @@ export const resetSettingsButtonComponent = {
 	template: require("./resetSettingsButton.component.html"),
 	controller: ResetSettingsButtonController,
 	bindings: {
-		settingsNames: "@"
+		settingsNames: "@",
+		tooltip: "@"
 	}
 }

visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.html

@@ -14,7 +14,9 @@
 		<div class="section-header">
 			<area-metric-chooser-component></area-metric-chooser-component>
 		</div>
-		<span class="section-title" ng-click="$ctrl.toggle($event)">Size <i class="fa fa-angle-down"></i></span>
+		<span class="section-title" ng-click="$ctrl.toggle($event)" title="Show area metric settings"
+			>Size <i class="fa fa-angle-down"></i
+		></span>
 		<div class="section-body">
 			<area-settings-panel-component></area-settings-panel-component>
 		</div>
@@ -26,7 +28,9 @@
 		<div class="section-header">
 			<height-metric-chooser-component></height-metric-chooser-component>
 		</div>
-		<span class="section-title" ng-click="$ctrl.toggle($event)">Height <i class="fa fa-angle-down"></i></span>
+		<span class="section-title" ng-click="$ctrl.toggle($event)" title="Show height metric settings"
+			>Height <i class="fa fa-angle-down"></i
+		></span>
 		<div class="section-body">
 			<height-settings-panel-component></height-settings-panel-component>
 		</div>
@@ -38,7 +42,9 @@
 		<div class="section-header">
 			<color-metric-chooser-component></color-metric-chooser-component>
 		</div>
-		<span class="section-title" ng-click="$ctrl.toggle($event)">Color <i class="fa fa-angle-down"></i></span>
+		<span class="section-title" ng-click="$ctrl.toggle($event)" title="Show color metric settings"
+			>Color <i class="fa fa-angle-down"></i
+		></span>
 		<div class="section-body">
 			<color-settings-panel-component></color-settings-panel-component>
 		</div>
@@ -50,7 +56,9 @@
 		<div class="section-header">
 			<edge-chooser-component></edge-chooser-component>
 		</div>
-		<span class="section-title" ng-click="$ctrl.toggle($event)"> Edges <i class="fa fa-angle-down"></i> </span>
+		<span class="section-title" ng-click="$ctrl.toggle($event)" title="Show edge metric settings">
+			Edges <i class="fa fa-angle-down"></i>
+		</span>
 		<div class="section-body">
 			<edge-settings-panel-component></edge-settings-panel-component>
 		</div>

visualization/app/codeCharta/ui/scenarioDropDown/scenarioDropDown.component.html

@@ -1,12 +1,12 @@
 <md-menu class="scenario-component">
-	<md-button class="scenario-button" ng-click="$ctrl.loadScenarios(); $mdMenu.open($event)">
+	<md-button class="scenario-button" ng-click="$ctrl.loadScenarios(); $mdMenu.open($event)" title="Open the scenario list">
 		<i class="fa fa-star"></i>
 	</md-button>
 
 	<md-menu-content class="scenario-drop-down" width="2">
 		<md-menu-item class="scenario-item">
 			<md-button class="scenario-name" ng-disabled="true">Metric Scenarios</md-button>
-			<md-button ng-click="$ctrl.showAddScenarioSettings()" class="action-button add">
+			<md-button ng-click="$ctrl.showAddScenarioSettings()" class="action-button add" title="Create a custom scenario">
 				<i class="fa fa-plus" aria-hidden="true"></i>
 			</md-button>
 		</md-menu-item>
@@ -18,12 +18,17 @@
 				class="button-hovering"
 				ng-click="$ctrl.applyScenario(scenario.scenarioName)"
 				ng-disabled="!scenario.isScenarioAppliable"
+				title="Apply scenario"
 				>{{ scenario.scenarioName }}</md-button
 			>
 			<span class="content-icons" ng-repeat="icon in scenario.icons track by $index">
-				<i class="fa {{ icon.faIconClass }}" ng-class="{ 'is-saved': icon.isSaved }"></i>
+				<i class="fa {{ icon.faIconClass }}" ng-class="{ 'is-saved': icon.isSaved }" ng-attr-title="{{ icon.tooltip }}"></i>
 			</span>
-			<md-button ng-click="$ctrl.removeScenario(scenario.scenarioName)" class="action-button remove button-hovering">
+			<md-button
+				ng-click="$ctrl.removeScenario(scenario.scenarioName)"
+				class="action-button remove button-hovering"
+				title="Remove custom scenario"
+			>
 				<i class="fa fa-minus-square"></i>
 			</md-button>
 		</md-menu-item>

visualization/app/codeCharta/ui/scenarioDropDown/scenarioDropDown.component.ts

@@ -14,7 +14,7 @@ import { ThreeOrbitControlsService } from "../codeMap/threeViewer/threeOrbitCont
 export interface ScenarioItem {
 	scenarioName: string
 	isScenarioAppliable: boolean
-	icons: { faIconClass: string; isSaved: boolean }[]
+	icons: { faIconClass: string; isSaved: boolean; tooltip: string }[]
 }
 
 export class ScenarioDropDownController implements MetricServiceSubscriber {

visualization/app/codeCharta/ui/searchBar/searchBar.component.html

@@ -11,7 +11,7 @@
 
 <md-menu>
 	<div class="small-action-button transparent">
-		<md-button class="md-fab" ng-click="$mdMenu.open($event)" title="Add to Blacklist...">
+		<md-button class="md-fab" ng-click="$mdMenu.open($event)" title="Add to Blacklist">
 			<i class="fa fa-ellipsis-h"></i>
 		</md-button>
 	</div>

visualization/app/codeCharta/ui/searchPanel/searchPanel.component.html

@@ -4,7 +4,7 @@
 			<search-bar-component ng-click="$ctrl.openSearchPanel()"></search-bar-component>
 			<search-panel-mode-selector-component></search-panel-mode-selector-component>
 		</div>
-		<span class="section-title" ng-click="$ctrl.toggle()"> Search <i class="fa fa-angle-down"></i> </span>
+		<span class="section-title" ng-click="$ctrl.toggle()"> Search <i class="fa fa-angle-down" title="Show folder structure"></i> </span>
 		<div class="section-body">
 			<blacklist-panel-flatten-component ng-show="$ctrl._viewModel.searchPanelMode === 'flatten'"></blacklist-panel-flatten-component>
 			<blacklist-panel-exclude-component ng-show="$ctrl._viewModel.searchPanelMode === 'exclude'"></blacklist-panel-exclude-component>

visualization/app/codeCharta/ui/searchPanelModeSelector/searchPanelModeSelector.component.html

@@ -4,19 +4,22 @@
 		id="tree-view"
 		ng-class="{ current: $ctrl._viewModel.searchPanelMode == 'treeView' }"
 		ng-click="$ctrl.onToggleSearchPanelMode('treeView')"
+		title="Folder structure"
 		><i class="fa fa-sitemap"></i
 	></md-button>
 	<md-button
 		class="state-selector-button middle"
 		ng-class="{ current: $ctrl._viewModel.searchPanelMode == 'flatten' }"
 		ng-click="$ctrl.onToggleSearchPanelMode('flatten')"
+		title="Flattened buildings"
 		><i class="fa fa-eye-slash"></i>
 		<div class="list-length-count" ng-show="$ctrl._viewModel.flattenListLength > 0"></div
 	></md-button>
 	<md-button
 		class="state-selector-button right"
 		ng-class="{ current: $ctrl._viewModel.searchPanelMode == 'exclude' }"
 		ng-click="$ctrl.onToggleSearchPanelMode('exclude')"
+		title="Excluded buildings"
 		><i class="fa fa-ban"></i>
 		<div class="list-length-count" ng-show="$ctrl._viewModel.excludeListLength > 0"></div
 	></md-button>