codecharta-visualization 1.114.0 → 1.115.0

package/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.ts

@@ -1,6 +1,5 @@
-import "./attributeSideBar.component.scss"
 import { map } from "rxjs"
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 
 import { Store } from "../../state/angular-redux/store"
 import { selectedNodeSelector } from "../../state/selectors/selectedNode.selector"
@@ -9,14 +8,13 @@ import { IsAttributeSideBarVisibleService } from "../../services/isAttributeSide
 
 @Component({
 	selector: "cc-attribute-side-bar",
-	template: require("./attributeSideBar.component.html")
+	templateUrl: "./attributeSideBar.component.html",
+	styleUrls: ["./attributeSideBar.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarComponent {
 	selectedNode$ = this.store.select(selectedNodeSelector)
 	fileName$ = this.store.select(accumulatedDataSelector).pipe(map(accumulatedData => accumulatedData.unifiedFileMeta?.fileName ?? ""))
 
-	constructor(
-		@Inject(IsAttributeSideBarVisibleService) public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService,
-		@Inject(Store) private store: Store
-	) {}
+	constructor(public isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService, private store: Store) {}
 }

package/app/codeCharta/ui/attributeSideBar/attributeSideBar.module.ts

@@ -10,10 +10,10 @@ import { AttributeSideBarPrimaryMetricComponent } from "./attributeSideBarPrimar
 import { AttributeSideBarHeaderSectionComponent } from "./attributeSideBarHeaderSection/attributeSideBarHeaderSection.component"
 import { NodePathComponent } from "./attributeSideBarHeaderSection/nodePath/nodePath.component"
 import { MaterialModule } from "../../../material/material.module"
-import { RemoveExtensionModule } from "../../util/removeExtensionModule"
+import { SimplePipesModule } from "../../util/simplePipes/SimplePipesModule"
 
 @NgModule({
-	imports: [CommonModule, MaterialModule, AttributeTypeSelectorModule, MetricDeltaSelectedModule, RemoveExtensionModule],
+	imports: [CommonModule, MaterialModule, AttributeTypeSelectorModule, MetricDeltaSelectedModule, SimplePipesModule],
 	declarations: [
 		AttributeSideBarComponent,
 		AttributeSideBarHeaderSectionComponent,

package/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/attributeSideBarHeaderSection.component.ts

@@ -1,18 +1,19 @@
-import "./attributeSideBarHeaderSection.component.scss"
-import { Component, Input, Inject } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 
 import { CodeMapNode } from "../../../codeCharta.model"
 import { IsAttributeSideBarVisibleService } from "../../../services/isAttributeSideBarVisible.service"
 
 @Component({
 	selector: "cc-attribute-side-bar-header-section",
-	template: require("./attributeSideBarHeaderSection.component.html")
+	templateUrl: "./attributeSideBarHeaderSection.component.html",
+	styleUrls: ["./attributeSideBarHeaderSection.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarHeaderSectionComponent {
 	@Input() node: Pick<CodeMapNode, "children" | "name" | "link" | "path">
 	@Input() fileName: string
 
-	constructor(@Inject(IsAttributeSideBarVisibleService) private isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService) {}
+	constructor(private isAttributeSideBarVisibleService: IsAttributeSideBarVisibleService) {}
 
 	closeSideBar() {
 		this.isAttributeSideBarVisibleService.isOpen = false

package/app/codeCharta/ui/attributeSideBar/attributeSideBarHeaderSection/nodePath/nodePath.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../../state/angular-redux/store"
 import { CodeMapNode, FileCount } from "../../../../codeCharta.model"
@@ -7,14 +7,15 @@ import { fileCountSelector } from "./fileCountSelector"
 
 @Component({
 	selector: "cc-node-path",
-	template: require("./nodePath.component.html")
+	templateUrl: "./nodePath.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class NodePathComponent {
 	@Input() node?: Pick<CodeMapNode, "path" | "children">
 	fileCount$: Observable<FileCount | undefined>
 	isDeltaMode$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.fileCount$ = store.select(fileCountSelector)
 		this.isDeltaMode$ = store.select(isDeltaStateSelector)
 	}

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 import { Store } from "../../../../state/angular-redux/store"
 
@@ -7,14 +7,15 @@ import { showAttributeTypeSelectorSelector } from "../../util/showAttributeTypeS
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metric",
-	template: require("./attributeSideBarPrimaryMetric.component.html")
+	templateUrl: "./attributeSideBarPrimaryMetric.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarPrimaryMetricComponent {
 	@Input() iconName: string
 	@Input() metric: Metric
 	showAttributeTypeSelector$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html

@@ -3,13 +3,13 @@
 		<th scope="col">Primary Metrics</th>
 
 		<tr>
-			<td>
+			<td [title]="primaryMetrics.area.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-alt'"
 					[metric]="primaryMetrics.area"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
-			<td>
+			<td [title]="primaryMetrics.height.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-arrows-v'"
 					[metric]="primaryMetrics.height"
@@ -18,14 +18,14 @@
 		</tr>
 
 		<tr>
-			<td>
+			<td [title]="primaryMetrics.color.descriptors | metricDescriptorTitle">
 				<cc-attribute-side-bar-primary-metric
 					[iconName]="'fa fa-paint-brush'"
 					[metric]="primaryMetrics.color"
 				></cc-attribute-side-bar-primary-metric>
 			</td>
-			<ng-container *ngIf="primaryMetrics.edge; let edge">
-				<td *ngIf="edge.name !== 'None'">
+			<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
+				<td [title]="edge.descriptors | metricDescriptorTitle">
 					<i class="fa fa-exchange"></i>
 					<div class="metric-value">
 						<cc-attribute-type-selector
@@ -43,6 +43,11 @@
 					<p class="metric-name">{{ edge.name }} (in/out)</p>
 				</td>
 			</ng-container>
+			<ng-template #sidebarPrimaryMetricsEdgeElse>
+				<td>
+					<p class="metric-name">No edge metric available</p>
+				</td>
+			</ng-template>
 		</tr>
 	</table>
 </div>

package/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -7,13 +7,14 @@ import { PrimaryMetrics, primaryMetricsSelector } from "../../../state/selectors
 
 @Component({
 	selector: "cc-attribute-side-bar-primary-metrics",
-	template: require("./attributeSideBarPrimaryMetrics.component.html")
+	templateUrl: "./attributeSideBarPrimaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarPrimaryMetricsComponent {
 	primaryMetrics$: Observable<PrimaryMetrics>
 	showAttributeTypeSelector$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.primaryMetrics$ = store.select(primaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 	}

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html

@@ -5,7 +5,11 @@
 				<tr>
 					<th scope="col" colspan="2">Secondary Metrics</th>
 				</tr>
-				<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" class="metric-row">
+				<tr
+					*ngFor="let secondaryMetric of secondaryMetrics$ | async"
+					class="metric-row"
+					[title]="secondaryMetric.descriptors | metricDescriptorTitle"
+				>
 					<td class="metric-summary">
 						<span class="metric-type">
 							<cc-attribute-type-selector

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from "@angular/core"
+import { Component, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { Store } from "../../../state/angular-redux/store"
@@ -9,14 +9,15 @@ import { secondaryMetricsSelector } from "./secondaryMetrics.selector"
 
 @Component({
 	selector: "cc-attribute-side-bar-secondary-metrics",
-	template: require("./attributeSideBarSecondaryMetrics.component.html")
+	templateUrl: "./attributeSideBarSecondaryMetrics.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeSideBarSecondaryMetricsComponent {
 	secondaryMetrics$: Observable<Metric[]>
 	showAttributeTypeSelector$: Observable<boolean>
 	showDeltaValue$: Observable<boolean>
 
-	constructor(@Inject(Store) store: Store) {
+	constructor(store: Store) {
 		this.secondaryMetrics$ = store.select(secondaryMetricsSelector)
 		this.showAttributeTypeSelector$ = store.select(showAttributeTypeSelectorSelector)
 		this.showDeltaValue$ = store.select(showDeltaValueSelector)

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.spec.ts

@@ -1,5 +1,6 @@
 import { DIFFERENT_NODE } from "../../../util/dataMocks"
 import { _calculateSecondaryMetrics } from "./secondaryMetrics.selector"
+import { AttributeDescriptors } from "../../../codeCharta.model"
 
 const primaryMetricNames = {
 	areaMetric: "a",
@@ -8,15 +9,39 @@ const primaryMetricNames = {
 	edgeMetric: "None"
 }
 
+const attributeDescriptors: AttributeDescriptors = {}
+
 describe("secondaryMetricsSelector", () => {
 	it("should return an empty list if there is no selectedNode", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames)).toEqual([])
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors)).toEqual([])
 	})
 
 	it("should return a by name sorted list of metrics without primary metrics", () => {
-		expect(_calculateSecondaryMetrics(primaryMetricNames, DIFFERENT_NODE)).toEqual([
-			{ name: "b", value: 15 },
-			{ name: "mcc", value: 14 }
+		expect(_calculateSecondaryMetrics(primaryMetricNames, attributeDescriptors, DIFFERENT_NODE)).toEqual([
+			{
+				name: "b",
+				value: 15,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "b",
+					link: undefined,
+					title: undefined
+				}
+			},
+			{
+				name: "mcc",
+				value: 14,
+				descriptors: {
+					description: undefined,
+					hintHighValue: undefined,
+					hintLowValue: undefined,
+					key: "mcc",
+					link: undefined,
+					title: "Cyclomatic Complexity"
+				}
+			}
 		])
 	})
 })

package/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/secondaryMetrics.selector.ts

@@ -1,11 +1,17 @@
-import { CodeMapNode, PrimaryMetrics } from "../../../codeCharta.model"
+import { CodeMapNode, PrimaryMetrics, AttributeDescriptors } from "../../../codeCharta.model"
 import { createSelector } from "../../../state/angular-redux/createSelector"
 import { primaryMetricNamesSelector } from "../../../state/selectors/primaryMetrics/primaryMetricNames.selector"
 import { selectedNodeSelector } from "../../../state/selectors/selectedNode.selector"
 import { CcState } from "../../../state/store/store"
 import { Metric } from "../util/metric"
+import { attributeDescriptorsSelector } from "../../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
+import { getMetricDescriptors } from "../util/metricDescriptors"
 
-export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?: Pick<CodeMapNode, "attributes">) => {
+export const _calculateSecondaryMetrics = (
+	primaryMetrics: PrimaryMetrics,
+	attributeDescriptors: AttributeDescriptors,
+	node?: Pick<CodeMapNode, "attributes">
+) => {
 	if (!node) {
 		return [] as Metric[]
 	}
@@ -17,11 +23,12 @@ export const _calculateSecondaryMetrics = (primaryMetrics: PrimaryMetrics, node?
 
 	return secondaryMetricNames.map(secondaryMetricName => ({
 		name: secondaryMetricName,
-		value: node.attributes[secondaryMetricName]
+		value: node.attributes[secondaryMetricName],
+		descriptors: getMetricDescriptors(secondaryMetricName, attributeDescriptors)
 	}))
 }
 
 export const secondaryMetricsSelector: (state: CcState) => Metric[] = createSelector(
-	[primaryMetricNamesSelector, selectedNodeSelector],
+	[primaryMetricNamesSelector, attributeDescriptorsSelector, selectedNodeSelector],
 	_calculateSecondaryMetrics
 )

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss

@@ -1,16 +1,14 @@
 cc-attribute-type-selector {
-	.mat-button-toggle-group {
+	.mat-mdc-button-toggle-group {
 		height: 18px;
 		align-items: center;
 		justify-content: space-evenly;
 	}
-
-	.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+	.mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content {
 		padding: 0 7px 0 7px;
 	}
-
-	.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
-	.mat-button-toggle-group-appearance-standard {
+	.mat-mdc-button-toggle-standalone.mat-button-toggle-appearance-standard,
+	.mat-mdc-button-toggle-group-appearance-standard {
 		border: 0.1px solid darkgrey;
 	}
 }

package/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.ts

@@ -1,5 +1,4 @@
-import "./attributeTypeSelector.component.scss"
-import { Component, Inject, Input } from "@angular/core"
+import { Component, Input, ViewEncapsulation } from "@angular/core"
 import { AttributeTypes, AttributeTypeValue } from "../../../codeCharta.model"
 import { updateAttributeType } from "../../../state/store/fileSettings/attributeTypes/attributeTypes.actions"
 import { Store } from "../../../state/angular-redux/store"
@@ -7,7 +6,9 @@ import { attributeTypesSelector } from "../../../state/store/fileSettings/attrib
 
 @Component({
 	selector: "cc-attribute-type-selector",
-	template: require("./attributeTypeSelector.component.html")
+	templateUrl: "./attributeTypeSelector.component.html",
+	styleUrls: ["./attributeTypeSelector.component.scss"],
+	encapsulation: ViewEncapsulation.None
 })
 export class AttributeTypeSelectorComponent {
 	@Input() metricName: string
@@ -15,7 +16,7 @@ export class AttributeTypeSelectorComponent {
 
 	attributeTypes$ = this.store.select(attributeTypesSelector)
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	setToAbsolute() {
 		this.setAttributeType(AttributeTypeValue.absolute)

package/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.spec.ts

@@ -56,12 +56,12 @@ describe("MetricDeltaSelectedComponent", () => {
 	it("should update when its metricName changes", async () => {
 		mockIdToNodeSelector({ rloc: 2, mcc: 4 })
 
-		const { rerender } = await render(MetricDeltaSelectedComponent, {
+		const { change } = await render(MetricDeltaSelectedComponent, {
 			componentProperties: { metricName: "rloc" }
 		})
 		expect(screen.queryByText(/Δ2/)).toBeTruthy()
 
-		await rerender({ metricName: "mcc" })
+		await change({ metricName: "mcc" })
 		expect(screen.queryByText(/Δ4/)).toBeTruthy()
 	})
 

package/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from "@angular/core"
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core"
 import { Observable } from "rxjs"
 
 import { MapColors, CodeMapNode } from "../../../codeCharta.model"
@@ -8,7 +8,8 @@ import { mapColorsSelector } from "../../../state/store/appSettings/mapColors/ma
 
 @Component({
 	selector: "cc-metric-delta-selected",
-	template: require("./metricDeltaSelected.component.html")
+	templateUrl: "./metricDeltaSelected.component.html",
+	encapsulation: ViewEncapsulation.None
 })
 export class MetricDeltaSelectedComponent implements OnInit {
 	@Input() metricName: string
@@ -16,7 +17,7 @@ export class MetricDeltaSelectedComponent implements OnInit {
 	selectedNode$: Observable<CodeMapNode>
 	mapColors$: Observable<MapColors>
 
-	constructor(@Inject(Store) private store: Store) {}
+	constructor(private store: Store) {}
 
 	ngOnInit(): void {
 		this.selectedNode$ = this.store.select(selectedNodeSelector)

package/app/codeCharta/ui/attributeSideBar/util/edge.ts

@@ -0,0 +1,7 @@
+import { MetricDescriptors } from "./metricDescriptors"
+export type Edge = {
+	name: string
+	incoming: number | undefined
+	outgoing: number | undefined
+	descriptors: MetricDescriptors
+}

package/app/codeCharta/ui/attributeSideBar/util/metric.ts

@@ -1,4 +1,6 @@
+import { MetricDescriptors } from "./metricDescriptors"
 export type Metric = {
 	name: string
 	value: number
+	descriptors: MetricDescriptors
 }

package/app/codeCharta/ui/{legendPanel/selectors/legendMetric.ts → attributeSideBar/util/metricDescriptors.ts}

@@ -1,17 +1,23 @@
 import { AttributeDescriptors } from "../../../codeCharta.model"
 import { metricTitles } from "../../../util/metric/metricTitles"
 
-export type LegendMetric = {
+export type MetricDescriptors = {
 	key: string
 	title: string
 	description: string
+	hintLowValue: string
+	hintHighValue: string
+	link: string
 }
 
-export function getLegendMetric(metricKey: string, attributeDescriptors: AttributeDescriptors): LegendMetric {
+export function getMetricDescriptors(metricKey: string, attributeDescriptors: AttributeDescriptors): MetricDescriptors {
 	return {
 		key: metricKey,
 		title: getMetricTitle(metricKey, attributeDescriptors),
-		description: attributeDescriptors?.[metricKey]?.description
+		description: attributeDescriptors?.[metricKey]?.description,
+		hintLowValue: attributeDescriptors?.[metricKey]?.hintLowValue,
+		hintHighValue: attributeDescriptors?.[metricKey]?.hintHighValue,
+		link: attributeDescriptors?.[metricKey]?.link
 	}
 }
 
@@ -19,6 +25,6 @@ function getMetricTitle(metric: string, attributeDescriptors: AttributeDescripto
 	if (attributeDescriptors?.[metric]?.title !== undefined && attributeDescriptors[metric].title !== "") {
 		return attributeDescriptors[metric].title
 	}
-	//Fallback Description can still return null
+	//Fallback Description can still return undefined
 	return metricTitles.get(metric)
 }

package/app/codeCharta/ui/codeMap/__snapshots__/codeMap.arrow.service.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeMapArrowService Arrow Behaviour when selecting and hovering a building should only highlight small leaf when big leaf is selected 1`] = `
-Array [
+[
   CodeMapBuilding {
     "_boundingBox": Box3 {
       "max": Vector3 {
@@ -20,20 +20,20 @@ Array [
     "_defaultDeltaColor": "#000000",
     "_deltaColor": "#000000",
     "_id": 1,
-    "_node": Object {
-      "attributes": Object {
+    "_node": {
+      "attributes": {
         "a": 20,
         "b": 15,
         "mcc": 100,
       },
       "color": "#820E0E",
-      "deltas": Object {
+      "deltas": {
         "a": 1,
         "b": 2,
       },
       "depth": 4,
-      "edgeAttributes": Object {
-        "a": Object {
+      "edgeAttributes": {
+        "a": {
           "incoming": 2,
           "outgoing": 666,
         },
@@ -84,20 +84,20 @@ Array [
     "_defaultDeltaColor": "#000000",
     "_deltaColor": "#000000",
     "_id": 1,
-    "_node": Object {
-      "attributes": Object {
+    "_node": {
+      "attributes": {
         "a": 20,
         "b": 15,
         "mcc": 100,
       },
       "color": "#820E0E",
-      "deltas": Object {
+      "deltas": {
         "a": 1,
         "b": 2,
       },
       "depth": 4,
-      "edgeAttributes": Object {
-        "a": Object {
+      "edgeAttributes": {
+        "a": {
           "incoming": 2,
           "outgoing": 666,
         },
@@ -152,20 +152,20 @@ CodeMapBuilding {
   "_defaultDeltaColor": "#EB8319",
   "_deltaColor": "#EB8319",
   "_id": 1,
-  "_node": Object {
-    "attributes": Object {
+  "_node": {
+    "attributes": {
       "a": 20,
       "b": 15,
       "mcc": 14,
     },
     "color": "#AABBCC",
-    "deltas": Object {
+    "deltas": {
       "a": 1,
       "b": 2,
     },
     "depth": 4,
-    "edgeAttributes": Object {
-      "a": Object {
+    "edgeAttributes": {
+      "a": {
         "incoming": 2,
         "outgoing": 666,
       },

package/app/codeCharta/ui/codeMap/__snapshots__/codeMap.render.service.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`codeMapRenderService getNodes should get Nodes as array 1`] = `
-Array [
-  Object {
-    "attributes": Object {
+[
+  {
+    "attributes": {
       "mcc": 111,
       "rloc": 200,
       "unary": 4,
@@ -11,7 +11,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 0,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -39,8 +39,8 @@ Array [
     "y0": 0,
     "z0": 0,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 10,
       "mcc": 1,
       "rloc": 100,
@@ -49,7 +49,7 @@ Array [
     "color": "#69AE40",
     "deltas": undefined,
     "depth": 1,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -77,8 +77,8 @@ Array [
     "y0": 19.200000000000003,
     "z0": 2,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "mcc": 110,
       "rloc": 100,
       "unary": 3,
@@ -86,7 +86,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 1,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -114,8 +114,8 @@ Array [
     "y0": 19.200000000000003,
     "z0": 2,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 100,
       "mcc": 100,
       "rloc": 30,
@@ -124,7 +124,7 @@ Array [
     "color": "#820E0E",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -152,8 +152,8 @@ Array [
     "y0": 38.400000000000006,
     "z0": 4,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "functions": 1000,
       "mcc": 10,
       "rloc": 70,
@@ -162,7 +162,7 @@ Array [
     "color": "#6caf3e",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 2,
     "heightDelta": 0,
@@ -190,8 +190,8 @@ Array [
     "y0": 306.16530459215556,
     "z0": 4,
   },
-  Object {
-    "attributes": Object {
+  {
+    "attributes": {
       "mcc": 0,
       "rloc": 0,
       "unary": 1,
@@ -199,7 +199,7 @@ Array [
     "color": "#69AE40",
     "deltas": undefined,
     "depth": 2,
-    "edgeAttributes": Object {},
+    "edgeAttributes": {},
     "flat": false,
     "height": 500,
     "heightDelta": 0,