Do not refresh color scale on each lookup (#57792) (#58234)

elastic · Feb 21, 2020 · 0d51e6b · 0d51e6b
1 parent 4775d82
commit 0d51e6b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 19 deletions.
diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
@@ -30,10 +30,6 @@ import simpleloadPng from './simpleload.png';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';
 
-const colors = {
-  seedColors,
-};
-
 describe('tag cloud tests', function() {
   const minValue = 1;
   const maxValue = 9;
@@ -102,6 +98,8 @@ describe('tag cloud tests', function() {
   let domNode;
   let tagCloud;
 
+  const colorScale = d3.scale.ordinal().range(seedColors);
+
   function setupDOM() {
     domNode = document.createElement('div');
     domNode.style.top = '0';
@@ -132,7 +130,7 @@ describe('tag cloud tests', function() {
     )}`, function() {
       beforeEach(async function() {
         setupDOM();
-        tagCloud = new TagCloud(domNode, colors);
+        tagCloud = new TagCloud(domNode, colorScale);
         tagCloud.setData(test.data);
         tagCloud.setOptions(test.options);
         await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -164,7 +162,7 @@ describe('tag cloud tests', function() {
 
         //TagCloud takes at least 600ms to complete (due to d3 animation)
         //renderComplete should only notify at the last one
-        tagCloud = new TagCloud(domNode, colors);
+        tagCloud = new TagCloud(domNode, colorScale);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -196,7 +194,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying options multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setOptions(logScaleTest.options);
@@ -223,7 +221,7 @@ describe('tag cloud tests', function() {
   describe('should use the latest state before notifying (when modifying data multiple times)', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       tagCloud.setData(trimDataTest.data);
@@ -253,7 +251,7 @@ describe('tag cloud tests', function() {
       counter = 0;
       setupDOM();
       return new Promise((resolve, reject) => {
-        tagCloud = new TagCloud(domNode, colors);
+        tagCloud = new TagCloud(domNode, colorScale);
         tagCloud.setData(baseTest.data);
         tagCloud.setOptions(baseTest.options);
 
@@ -299,7 +297,7 @@ describe('tag cloud tests', function() {
   describe('should show correct data when state-updates are interleaved with resize event', function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(logScaleTest.data);
       tagCloud.setOptions(logScaleTest.options);
 
@@ -337,7 +335,7 @@ describe('tag cloud tests', function() {
       setupDOM();
       domNode.style.width = '1px';
       domNode.style.height = '1px';
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -363,7 +361,7 @@ describe('tag cloud tests', function() {
       domNode.style.width = '1px';
       domNode.style.height = '1px';
 
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -388,7 +386,7 @@ describe('tag cloud tests', function() {
   describe(`tags should no longer fit after making container smaller`, function() {
     beforeEach(async function() {
       setupDOM();
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
       await fromNode(cb => tagCloud.once('renderComplete', cb));
@@ -420,7 +418,7 @@ describe('tag cloud tests', function() {
     });
 
     it('should render simple image', async function() {
-      tagCloud = new TagCloud(domNode, colors);
+      tagCloud = new TagCloud(domNode, colorScale);
       tagCloud.setData(baseTest.data);
       tagCloud.setOptions(baseTest.options);
 

diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
@@ -37,7 +37,7 @@ const D3_SCALING_FUNCTIONS = {
 };
 
 export class TagCloud extends EventEmitter {
-  constructor(domNode, colors) {
+  constructor(domNode, colorScale) {
     super();
 
     //DOM
@@ -54,7 +54,6 @@ export class TagCloud extends EventEmitter {
     this._spiral = 'archimedean'; //layout shape
     this._timeInterval = 1000; //time allowed for layout algorithm
     this._padding = 5;
-    this._seedColors = colors.seedColors;
 
     //OPTIONS
     this._orientation = 'single';
@@ -67,6 +66,7 @@ export class TagCloud extends EventEmitter {
     this._words = null;
 
     //UTIL
+    this._colorScale = colorScale;
     this._setTimeoutId = null;
     this._pendingJob = null;
     this._layoutIsUpdating = null;
@@ -371,8 +371,7 @@ export class TagCloud extends EventEmitter {
   }
 
   getFill(tag) {
-    const colorScale = d3.scale.ordinal().range(this._seedColors);
-    return colorScale(tag.text);
+    return this._colorScale(tag.text);
   }
 }
 

diff --git a/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js b/src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
@@ -28,10 +28,12 @@ import { getFormat } from '../legacy_imports';
 import { Label } from './label';
 import { TagCloud } from './tag_cloud';
 import { FeedbackMessage } from './feedback_message';
+import d3 from 'd3';
 
 const MAX_TAG_COUNT = 200;
 
 export function createTagCloudVisualization({ colors }) {
+  const colorScale = d3.scale.ordinal().range(colors.seedColors);
   return class TagCloudVisualization {
     constructor(node, vis) {
       this._containerNode = node;
@@ -48,7 +50,7 @@ export function createTagCloudVisualization({ colors }) {
 
       this._vis = vis;
       this._truncated = false;
-      this._tagCloud = new TagCloud(cloudContainer, colors);
+      this._tagCloud = new TagCloud(cloudContainer, colorScale);
       this._tagCloud.on('select', event => {
         if (!this._visParams.bucket) {
           return;

diff --git a/src/legacy/ui/public/new_platform/new_platform.karma_mock.js b/src/legacy/ui/public/new_platform/new_platform.karma_mock.js
@@ -218,6 +218,9 @@ export const npSetup = {
         chartsTheme$: mockObservable,
         useChartsTheme: sinon.fake(),
       },
+      colors: {
+        seedColors: ['white', 'black'],
+      },
     },
     management: {
       sections: {