From 1981c84c4fe0de106ca4b7d6d05766d6bc57b4a5 Mon Sep 17 00:00:00 2001 From: Pieter Verschaffelt Date: Fri, 12 Mar 2021 09:18:21 +0100 Subject: [PATCH 1/3] Only set element id if not specified --- src/visualizations/heatmap/Heatmap.ts | 4 +++- src/visualizations/sunburst/Sunburst.ts | 4 +++- src/visualizations/treemap/Treemap.ts | 5 +++-- src/visualizations/treeview/Treeview.ts | 4 +++- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/visualizations/heatmap/Heatmap.ts b/src/visualizations/heatmap/Heatmap.ts index f2053ee..e66ea04 100644 --- a/src/visualizations/heatmap/Heatmap.ts +++ b/src/visualizations/heatmap/Heatmap.ts @@ -77,7 +77,9 @@ export default class Heatmap { this.settings = this.fillOptions(options); this.element = elementIdentifier; - this.element.id = "U_HEATMAP_" + Math.floor(Math.random() * 2**16); + if (!this.element.id) { + this.element.id = "U_HEATMAP_" + Math.floor(Math.random() * 2**16); + } const preprocessor = new Preprocessor(); this.rows = preprocessor.preprocessFeatures(rowLabels); diff --git a/src/visualizations/sunburst/Sunburst.ts b/src/visualizations/sunburst/Sunburst.ts index 338cba5..2d7399b 100644 --- a/src/visualizations/sunburst/Sunburst.ts +++ b/src/visualizations/sunburst/Sunburst.ts @@ -45,7 +45,9 @@ export default class Sunburst { ) { this.settings = this.fillOptions(options); - this.element.id = "U_SUNBURST_" + Math.floor(Math.random() * 2**16); + if (!this.element.id) { + this.element.id = "U_SUNBURST_" + Math.floor(Math.random() * 2**16); + } const preprocessor = new SunburstPreprocessor(); const processedData = preprocessor.preprocessData(data); diff --git a/src/visualizations/treemap/Treemap.ts b/src/visualizations/treemap/Treemap.ts index 2d7c2b8..8ce8ecb 100644 --- a/src/visualizations/treemap/Treemap.ts +++ b/src/visualizations/treemap/Treemap.ts @@ -33,8 +33,9 @@ export default class Treemap { ) { this.settings = this.fillOptions(options); - - this.element.id = "U_TREEMAP_" + Math.floor(Math.random() * 2**16); + if (!this.element.id) { + this.element.id = "U_TREEMAP_" + Math.floor(Math.random() * 2**16); + } if (this.settings.enableTooltips) { this.tooltip = TooltipUtilities.initTooltip(this.element.id); diff --git a/src/visualizations/treeview/Treeview.ts b/src/visualizations/treeview/Treeview.ts index f0d036c..42cacc8 100644 --- a/src/visualizations/treeview/Treeview.ts +++ b/src/visualizations/treeview/Treeview.ts @@ -38,7 +38,9 @@ export default class Treeview { ) { this.settings = this.fillOptions(options); - this.element.id = "U_TREEVIEW_" + Math.floor(Math.random() * 2**16); + if (!this.element.id) { + this.element.id = "U_TREEVIEW_" + Math.floor(Math.random() * 2**16); + } if (this.settings.enableTooltips) { this.tooltip = TooltipUtilities.initTooltip(this.element.id); From 2de4d0b78461976c60733eb2bc1905a80558f084 Mon Sep 17 00:00:00 2001 From: Pieter Verschaffelt Date: Mon, 15 Mar 2021 13:42:51 +0100 Subject: [PATCH 2/3] Ids are no longer required --- src/visualizations/heatmap/Heatmap.ts | 5 +---- src/visualizations/sunburst/Sunburst.ts | 8 ++------ src/visualizations/treemap/Treemap.ts | 6 +----- src/visualizations/treeview/Treeview.ts | 6 +----- 4 files changed, 5 insertions(+), 20 deletions(-) diff --git a/src/visualizations/heatmap/Heatmap.ts b/src/visualizations/heatmap/Heatmap.ts index e66ea04..2d367c6 100644 --- a/src/visualizations/heatmap/Heatmap.ts +++ b/src/visualizations/heatmap/Heatmap.ts @@ -77,9 +77,6 @@ export default class Heatmap { this.settings = this.fillOptions(options); this.element = elementIdentifier; - if (!this.element.id) { - this.element.id = "U_HEATMAP_" + Math.floor(Math.random() * 2**16); - } const preprocessor = new Preprocessor(); this.rows = preprocessor.preprocessFeatures(rowLabels); @@ -952,7 +949,7 @@ export default class Heatmap { private initTooltip() { return d3.select("body") .append("div") - .attr("id", this.element.id + "-tooltip") + .attr("id", Math.floor(Math.random() * 2**16) + "-tooltip") .attr("class", "tip") .style("position", "absolute") .style("z-index", "10") diff --git a/src/visualizations/sunburst/Sunburst.ts b/src/visualizations/sunburst/Sunburst.ts index 2d7399b..b01e690 100644 --- a/src/visualizations/sunburst/Sunburst.ts +++ b/src/visualizations/sunburst/Sunburst.ts @@ -45,15 +45,11 @@ export default class Sunburst { ) { this.settings = this.fillOptions(options); - if (!this.element.id) { - this.element.id = "U_SUNBURST_" + Math.floor(Math.random() * 2**16); - } - const preprocessor = new SunburstPreprocessor(); const processedData = preprocessor.preprocessData(data); if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(this.element.id); + this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); } this.currentMaxLevel = this.settings.levels; @@ -82,7 +78,7 @@ export default class Sunburst { // @ts-ignore this.breadCrumbs = d3.select(this.element) .append("div") - .attr("id", this.element.id + "-breadcrumbs") + .attr("id", Math.floor(Math.random() * 2**16) + "-breadcrumbs") .attr("class", "sunburst-breadcrumbs") .append("ul"); diff --git a/src/visualizations/treemap/Treemap.ts b/src/visualizations/treemap/Treemap.ts index 8ce8ecb..19399bf 100644 --- a/src/visualizations/treemap/Treemap.ts +++ b/src/visualizations/treemap/Treemap.ts @@ -33,12 +33,8 @@ export default class Treemap { ) { this.settings = this.fillOptions(options); - if (!this.element.id) { - this.element.id = "U_TREEMAP_" + Math.floor(Math.random() * 2**16); - } - if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(this.element.id); + this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); } this.initCss(); diff --git a/src/visualizations/treeview/Treeview.ts b/src/visualizations/treeview/Treeview.ts index 42cacc8..113ed68 100644 --- a/src/visualizations/treeview/Treeview.ts +++ b/src/visualizations/treeview/Treeview.ts @@ -38,12 +38,8 @@ export default class Treeview { ) { this.settings = this.fillOptions(options); - if (!this.element.id) { - this.element.id = "U_TREEVIEW_" + Math.floor(Math.random() * 2**16); - } - if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(this.element.id); + this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); } const dataProcessor = new TreeviewPreprocessor(); From 100f6675874e83b29a95280f3c583c64a7250c55 Mon Sep 17 00:00:00 2001 From: Pieter Verschaffelt Date: Fri, 30 Apr 2021 11:26:24 +0200 Subject: [PATCH 3/3] Remove id's from tooltips --- src/utilities/TooltipUtilities.ts | 3 +-- src/utilities/__tests__/TooltipUtilities.spec.ts | 3 +-- src/visualizations/heatmap/Heatmap.ts | 1 - src/visualizations/sunburst/Sunburst.ts | 2 +- src/visualizations/treemap/Treemap.ts | 2 +- src/visualizations/treeview/Treeview.ts | 2 +- 6 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/utilities/TooltipUtilities.ts b/src/utilities/TooltipUtilities.ts index 78896b2..e17e5a1 100644 --- a/src/utilities/TooltipUtilities.ts +++ b/src/utilities/TooltipUtilities.ts @@ -1,10 +1,9 @@ import * as d3 from "d3"; export default class TooltipUtilities { - public static initTooltip(elementId: string): d3.Selection { + public static initTooltip(): d3.Selection { return d3.select("body") .append("div") - .attr("id", elementId + "-tooltip") .attr("class", "tip") .style("position", "absolute") .style("z-index", "10") diff --git a/src/utilities/__tests__/TooltipUtilities.spec.ts b/src/utilities/__tests__/TooltipUtilities.spec.ts index 44a9c4c..b15dc54 100644 --- a/src/utilities/__tests__/TooltipUtilities.spec.ts +++ b/src/utilities/__tests__/TooltipUtilities.spec.ts @@ -2,9 +2,8 @@ import TooltipUtilities from "./../TooltipUtilities"; describe("TooltipUtilities.initTooltip", () => { it("should produce a tooltip that satisfies the requirements", () => { - const tooltip = TooltipUtilities.initTooltip("unique-identifier"); + const tooltip = TooltipUtilities.initTooltip(); - expect(tooltip.attr("id")).toContain("unique-identifier"); expect(tooltip.attr("class")).toEqual("tip"); }); }); diff --git a/src/visualizations/heatmap/Heatmap.ts b/src/visualizations/heatmap/Heatmap.ts index 2d367c6..ada7115 100644 --- a/src/visualizations/heatmap/Heatmap.ts +++ b/src/visualizations/heatmap/Heatmap.ts @@ -949,7 +949,6 @@ export default class Heatmap { private initTooltip() { return d3.select("body") .append("div") - .attr("id", Math.floor(Math.random() * 2**16) + "-tooltip") .attr("class", "tip") .style("position", "absolute") .style("z-index", "10") diff --git a/src/visualizations/sunburst/Sunburst.ts b/src/visualizations/sunburst/Sunburst.ts index b01e690..64b768a 100644 --- a/src/visualizations/sunburst/Sunburst.ts +++ b/src/visualizations/sunburst/Sunburst.ts @@ -49,7 +49,7 @@ export default class Sunburst { const processedData = preprocessor.preprocessData(data); if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); + this.tooltip = TooltipUtilities.initTooltip(); } this.currentMaxLevel = this.settings.levels; diff --git a/src/visualizations/treemap/Treemap.ts b/src/visualizations/treemap/Treemap.ts index 19399bf..5e787f3 100644 --- a/src/visualizations/treemap/Treemap.ts +++ b/src/visualizations/treemap/Treemap.ts @@ -34,7 +34,7 @@ export default class Treemap { this.settings = this.fillOptions(options); if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); + this.tooltip = TooltipUtilities.initTooltip(); } this.initCss(); diff --git a/src/visualizations/treeview/Treeview.ts b/src/visualizations/treeview/Treeview.ts index 3ba83f3..cc96eec 100644 --- a/src/visualizations/treeview/Treeview.ts +++ b/src/visualizations/treeview/Treeview.ts @@ -39,7 +39,7 @@ export default class Treeview { this.settings = this.fillOptions(options); if (this.settings.enableTooltips) { - this.tooltip = TooltipUtilities.initTooltip(Math.floor(Math.random() * 2**16).toString()); + this.tooltip = TooltipUtilities.initTooltip(); } const dataProcessor = new TreeviewPreprocessor();