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,50 @@
+/* global ResizeObserver */
+
+function observeNative(node, callback) {
+  if ((typeof ResizeObserver === 'function') && node) {
+    const observer = new ResizeObserver(() => callback()); // eslint-disable-line compat/compat
+    observer.observe(node);
+    return () => observer.disconnect();
+  }
+  return null;
+}
+
+const items = new Map();
+
+function checkItems() {
+  if (items.size > 0) {
+    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);
+  }
+}
+
+function observeFallback(node, callback) {
+  if (node && !items.has(node)) {
+    const shouldTrigger = items.size === 0;
+    items.set(node, { callback });
+    if (shouldTrigger) {
+      checkItems();
+    }
+    return () => items.delete(node);
+  }
+  return null;
+}
+
+export default function observe(node, callback) {
+  return observeNative(node, callback) || observeFallback(node, callback) || (() => {});
+}

client/app/visualizations/EditVisualizationDialog.jsx

@@ -1,4 +1,4 @@
-import { extend, map, findIndex, isEqual } from 'lodash';
+import { extend, map, sortBy, findIndex, isEqual } from 'lodash';
 import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Modal from 'antd/lib/modal';
@@ -158,7 +158,7 @@ function EditVisualizationDialog({ dialog, visualization, query, queryResult })
               onChange={onTypeChanged}
             >
               {map(
-                registeredVisualizations,
+                sortBy(registeredVisualizations, ['type']),
                 vis => <Select.Option key={vis.type} data-test={'VisualizationType.' + vis.type}>{vis.name}</Select.Option>,
               )}
             </Select>

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>
   );
 }