Migrate Word Cloud visualization to React

client/app/directives/resize-event.js

@@ -1,48 +1,13 @@
-import { findIndex } from 'lodash';
-
-const items = new Map();
-
-function checkItems() {
-  items.forEach((item, node) => {
-    const bounds = node.getBoundingClientRect();
-    // convert to int (because these numbers needed for comparisons), but preserve 1 decimal point
-    const width = Math.round(bounds.width * 10);
-    const height = Math.round(bounds.height * 10);
-
-    if (
-      (item.width !== width) ||
-      (item.height !== height)
-    ) {
-      item.width = width;
-      item.height = height;
-      item.callback(node);
-    }
-  });
-
-  setTimeout(checkItems, 100);
-}
-
-checkItems(); // ensure it was called only once!
+import resizeObserver from '@/services/resizeObserver';
 
 function resizeEvent() {
   return {
     restrict: 'A',
     link($scope, $element, attrs) {
-      const node = $element[0];
-      if (!items.has(node)) {
-        items.set(node, {
-          callback: () => {
-            $scope.$evalAsync(attrs.resizeEvent);
-          },
-        });
-
-        $scope.$on('$destroy', () => {
-          const index = findIndex(items, item => item.node === node);
-          if (index >= 0) {
-            items.splice(index, 1); // remove item
-          }
-        });
-      }
+      const unwatch = resizeObserver($element[0], () => {
+        $scope.$evalAsync(attrs.resizeEvent);
+      });
+      $scope.$on('$destroy', unwatch);
     },
   };
 }

client/app/lib/hooks/useQueryResult.js

@@ -2,9 +2,9 @@ import { useState, useEffect } from 'react';
 
 function getQueryResultData(queryResult) {
   return {
-    columns: queryResult ? queryResult.getColumns() : [],
-    rows: queryResult ? queryResult.getData() : [],
-    filters: queryResult ? queryResult.getFilters() : [],
+    columns: (queryResult && queryResult.getColumns()) || [],
+    rows: (queryResult && queryResult.getData()) || [],
+    filters: (queryResult && queryResult.getFilters()) || [],
   };
 }
 

client/app/pages/dashboards/dashboard.less

@@ -83,6 +83,7 @@
     .sunburst-visualization-container,
     .sankey-visualization-container,
     .map-visualization-container,
+    .word-cloud-visualization-container,
     .plotly-chart-container {
       position: absolute;
       left: 0;

client/app/services/resizeObserver.js

@@ -0,0 +1,31 @@
+const items = new Map();
+
+function checkItems() {
+  items.forEach((item, node) => {
+    const bounds = node.getBoundingClientRect();
+    // convert to int (because these numbers needed for comparisons), but preserve 1 decimal point
+    const width = Math.round(bounds.width * 10);
+    const height = Math.round(bounds.height * 10);
+
+    if (
+      (item.width !== width) ||
+      (item.height !== height)
+    ) {
+      item.width = width;
+      item.height = height;
+      item.callback(node);
+    }
+  });
+
+  setTimeout(checkItems, 100);
+}
+
+checkItems(); // ensure it was called only once!
+
+export default function observe(node, callback) {
+  if (!items.has(node)) {
+    items.set(node, { callback });
+    return () => items.delete(node);
+  }
+  return () => {};
+}

client/app/visualizations/word-cloud/Editor.jsx

@@ -1,30 +1,101 @@
-import { map } from 'lodash';
+import { map, merge } from 'lodash';
 import React from 'react';
 import Select from 'antd/lib/select';
+import InputNumber from 'antd/lib/input-number';
+import * as Grid from 'antd/lib/grid';
 import { EditorPropTypes } from '@/visualizations';
 
-const { Option } = Select;
-
 export default function Editor({ options, data, onOptionsChange }) {
-  const onColumnChanged = (column) => {
-    const newOptions = { ...options, column };
-    onOptionsChange(newOptions);
+  const optionsChanged = (newOptions) => {
+    onOptionsChange(merge({}, options, newOptions));
   };
 
   return (
-    <div className="form-group">
-      <label className="control-label" htmlFor="word-cloud-column">Word Cloud Column Name</label>
-      <Select
-        id="word-cloud-column"
-        className="w-100"
-        value={options.column}
-        onChange={onColumnChanged}
-      >
-        {map(data.columns, ({ name }) => (
-          <Option key={name}>{name}</Option>
-        ))}
-      </Select>
-    </div>
+    <React.Fragment>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-words-column">Words Column</label>
+        <Select
+          data-test="WordCloud.WordsColumn"
+          id="word-cloud-words-column"
+          className="w-100"
+          value={options.column}
+          onChange={column => optionsChanged({ column })}
+        >
+          {map(data.columns, ({ name }) => (
+            <Select.Option key={name} data-test={'WordCloud.WordsColumn.' + name}>{name}</Select.Option>
+          ))}
+        </Select>
+      </div>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-frequencies-column">Frequencies Column</label>
+        <Select
+          data-test="WordCloud.FrequenciesColumn"
+          id="word-cloud-frequencies-column"
+          className="w-100"
+          value={options.frequenciesColumn}
+          onChange={frequenciesColumn => optionsChanged({ frequenciesColumn })}
+        >
+          <Select.Option key="none" value=""><i>(count word frequencies automatically)</i></Select.Option>
+          {map(data.columns, ({ name }) => (
+            <Select.Option key={'column-' + name} value={name} data-test={'WordCloud.FrequenciesColumn.' + name}>{name}</Select.Option>
+          ))}
+        </Select>
+      </div>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-word-length-limit">
+          Words Length Limit
+        </label>
+        <Grid.Row gutter={15} type="flex">
+          <Grid.Col span={12}>
+            <InputNumber
+              data-test="WordCloud.WordLengthLimit.Min"
+              className="w-100"
+              placeholder="Min"
+              min={0}
+              value={options.wordLengthLimit.min}
+              onChange={value => optionsChanged({ wordLengthLimit: { min: value > 0 ? value : null } })}
+            />
+          </Grid.Col>
+          <Grid.Col span={12}>
+            <InputNumber
+              data-test="WordCloud.WordLengthLimit.Max"
+              className="w-100"
+              placeholder="Max"
+              min={0}
+              value={options.wordLengthLimit.max}
+              onChange={value => optionsChanged({ wordLengthLimit: { max: value > 0 ? value : null } })}
+            />
+          </Grid.Col>
+        </Grid.Row>
+      </div>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-word-length-limit">
+          Frequencies Limit
+        </label>
+        <Grid.Row gutter={15} type="flex">
+          <Grid.Col span={12}>
+            <InputNumber
+              data-test="WordCloud.WordCountLimit.Min"
+              className="w-100"
+              placeholder="Min"
+              min={0}
+              value={options.wordCountLimit.min}
+              onChange={value => optionsChanged({ wordCountLimit: { min: value > 0 ? value : null } })}
+            />
+          </Grid.Col>
+          <Grid.Col span={12}>
+            <InputNumber
+              data-test="WordCloud.WordCountLimit.Max"
+              className="w-100"
+              placeholder="Max"
+              min={0}
+              value={options.wordCountLimit.max}
+              onChange={value => optionsChanged({ wordCountLimit: { max: value > 0 ? value : null } })}
+            />
+          </Grid.Col>
+        </Grid.Row>
+      </div>
+    </React.Fragment>
   );
 }
 

client/app/visualizations/word-cloud/Renderer.jsx

@@ -0,0 +1,170 @@
+import d3 from 'd3';
+import cloud from 'd3-cloud';
+import { each, filter, map, min, max, sortBy, toString } from 'lodash';
+import React, { useMemo, useState, useEffect } from 'react';
+import resizeObserver from '@/services/resizeObserver';
+import { RendererPropTypes } from '@/visualizations';
+
+import './renderer.less';
+
+function computeWordFrequencies(rows, column) {
+  const result = {};
+
+  each(rows, (row) => {
+    const wordsList = toString(row[column]).split(/\s/g);
+    each(wordsList, (d) => {
+      result[d] = (result[d] || 0) + 1;
+    });
+  });
+
+  return result;
+}
+
+function getWordsWithFrequencies(rows, wordColumn, frequencyColumn) {
+  const result = {};
+
+  each(rows, (row) => {
+    const count = parseFloat(row[frequencyColumn]);
+    if (Number.isFinite(count) && (count > 0)) {
+      const word = toString(row[wordColumn]);
+      result[word] = count;
+    }
+  });
+
+  return result;
+}
+
+function applyLimitsToWords(words, { wordLength, wordCount }) {
+  wordLength.min = Number.isFinite(wordLength.min) ? wordLength.min : null;
+  wordLength.max = Number.isFinite(wordLength.max) ? wordLength.max : null;
+
+  wordCount.min = Number.isFinite(wordCount.min) ? wordCount.min : null;
+  wordCount.max = Number.isFinite(wordCount.max) ? wordCount.max : null;
+
+  return filter(words, ({ text, count }) => {
+    const wordLengthFits = (
+      (!wordLength.min || (text.length >= wordLength.min)) &&
+      (!wordLength.max || (text.length <= wordLength.max))
+    );
+    const wordCountFits = (
+      (!wordCount.min || (count >= wordCount.min)) &&
+      (!wordCount.max || (count <= wordCount.max))
+    );
+    return wordLengthFits && wordCountFits;
+  });
+}
+
+function prepareWords(rows, options) {
+  let result = [];
+
+  if (options.column) {
+    if (options.frequenciesColumn) {
+      result = getWordsWithFrequencies(rows, options.column, options.frequenciesColumn);
+    } else {
+      result = computeWordFrequencies(rows, options.column);
+    }
+    result = sortBy(
+      map(result, (count, text) => ({ text, count })),
+      [({ count }) => -count, ({ text }) => -text.length], // "count" desc, length("text") desc
+    );
+  }
+
+  // Add additional attributes
+  const counts = map(result, item => item.count);
+  const wordSize = d3.scale.linear()
+    .domain([min(counts), max(counts)])
+    .range([10, 100]); // min/max word size
+  const color = d3.scale.category20();
+
+  each(result, (item, index) => {
+    item.size = wordSize(item.count);
+    item.color = color(index);
+    item.angle = index % 2 * 90; // make it stable between renderings
+  });
+
+  return applyLimitsToWords(result, {
+    wordLength: options.wordLengthLimit,
+    wordCount: options.wordCountLimit,
+  });
+}
+
+function scaleElement(node, container) {
+  node.style.transform = null;
+  const { width: nodeWidth, height: nodeHeight } = node.getBoundingClientRect();
+  const { width: containerWidth, height: containerHeight } = container.getBoundingClientRect();
+
+  const scaleX = containerWidth / nodeWidth;
+  const scaleY = containerHeight / nodeHeight;
+
+  node.style.transform = `scale(${Math.min(scaleX, scaleY)})`;
+}
+
+function createLayout() {
+  return cloud()
+    // make the area large enough to contain even very long words; word cloud will be placed in the center of the area
+    // TODO: dimensions probably should be larger, but `d3-cloud` has some performance issues related to these values
+    .size([5000, 5000])
+    .padding(3)
+    .font('Impact')
+    .rotate(d => d.angle)
+    .fontSize(d => d.size)
+    .random(() => 0.5); // do not place words randomly - use compact layout
+}
+
+function render(container, words) {
+  container = d3.select(container);
+  container.selectAll('*').remove();
+
+  const svg = container.append('svg');
+  const g = svg.append('g');
+  g.selectAll('text')
+    .data(words)
+    .enter()
+    .append('text')
+    .style('font-size', d => `${d.size}px`)
+    .style('font-family', d => d.font)
+    .style('fill', d => d.color)
+    .attr('text-anchor', 'middle')
+    .attr('transform', d => `translate(${[d.x, d.y]}) rotate(${d.rotate})`)
+    .text(d => d.text);
+
+  const svgBounds = svg.node().getBoundingClientRect();
+  const gBounds = g.node().getBoundingClientRect();
+
+  svg.attr('width', Math.ceil(gBounds.width)).attr('height', Math.ceil(gBounds.height));
+  g.attr('transform', `translate(${svgBounds.left - gBounds.left},${svgBounds.top - gBounds.top})`);
+
+  scaleElement(svg.node(), container.node());
+}
+
+export default function Renderer({ data, options }) {
+  const [container, setContainer] = useState(null);
+  const [words, setWords] = useState([]);
+  const layout = useMemo(createLayout, []);
+
+  useEffect(() => {
+    layout.words(prepareWords(data.rows, options)).on('end', w => setWords(w)).start();
+    return () => layout.on('end', null).stop();
+  }, [layout, data, options, setWords]);
+
+  useEffect(() => {
+    if (container) {
+      render(container, words);
+    }
+  }, [container, words]);
+
+  useEffect(() => {
+    if (container) {
+      return resizeObserver(container, () => {
+        const svg = container.querySelector('svg');
+        if (svg) {
+          scaleElement(svg, container);
+        }
+      });
+    }
+  }, [container]);
+
+  return (<div className="word-cloud-visualization-container" ref={setContainer} />);
+}
+
+Renderer.propTypes = RendererPropTypes;