[Backport 1.9] COMPASS 1763 Geo query circle does not show at first after query is executed (#1218) (#1220)

* 🎨 Rename usage of <UniqueMinichart> to <UniqueMiniChart>

* 🎨 Make QueryStore listener reusable

* 🐛 Populate query initially

* 🎨 Rename query to queryValue within the <UniqueMinichart> hierarchy

Note: I'm skipping over the <D3Component> hierarchy as it's not currently affected.

* 🎨 Extract <ValueBubble> into its own component file

* 🔨 Rename unique.jsx to unique-minichart.jsx

Author: pzrq

src/internal-packages/schema/lib/component/minichart.jsx

@@ -1,7 +1,7 @@
 const app = require('hadron-app');
 const React = require('react');
 const PropTypes = require('prop-types');
-const UniqueMinichart = require('./unique');
+const UniqueMiniChart = require('./unique-minichart');
 const _ = require('lodash');
 const DocumentMinichart = require('./document');
 const ArrayMinichart = require('./array');
@@ -33,14 +33,18 @@ class MiniChart extends React.Component {
     window.addEventListener('resize', this.resizeListener);
 
     const QueryStore = app.appRegistry.getStore('Query.Store');
-    this.unsubscribeQueryStore = QueryStore.listen((store) => {
+    const onQueryChanged = (store) => {
       this.setState({
         filter: store.filter,
         valid: store.valid,
         userTyping: store.userTyping
       });
-    });
+    };
+
+    // Also populate initial values
+    onQueryChanged(QueryStore.state);
 
+    this.unsubscribeQueryStore = QueryStore.listen(onQueryChanged);
     this.unsubscribeMiniChartResize = Actions.resizeMiniCharts.listen(this.resizeListener);
   }
 
@@ -73,17 +77,17 @@ class MiniChart extends React.Component {
       this.props.type.name) ? NUMBER : this.props.type.name;
 
     const fieldName = this.props.fieldName;
-    const queryClause = this.state.filter[fieldName];
+    const queryValue = this.state.filter[fieldName];
     const hasDuplicates = this.props.type.has_duplicates;
     const fn = vizFns[typeName.toLowerCase()];
     const width = this.state.containerWidth;
 
     if (_.includes([ STRING, NUMBER ], typeName) && !hasDuplicates) {
       return (
-        <UniqueMinichart
+        <UniqueMiniChart
           key={typeName}
           fieldName={fieldName}
-          query={queryClause}
+          queryValue={queryValue}
           type={this.props.type}
           width={width}
         />
@@ -96,7 +100,7 @@ class MiniChart extends React.Component {
           fieldName={fieldName}
           type={this.props.type}
           renderMode="div"
-          query={queryClause}
+          query={queryValue}
           width={width}
           height={height}
           fn={vizFns.coordinates}
@@ -129,7 +133,7 @@ class MiniChart extends React.Component {
         fieldName={this.props.fieldName}
         type={this.props.type}
         renderMode="svg"
-        query={queryClause}
+        query={queryValue}
         width={width}
         height={100}
         fn={fn}

src/internal-packages/schema/lib/component/unique-minichart.jsx

@@ -0,0 +1,72 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const ValueBubble = require('./value-bubble');
+const _ = require('lodash');
+
+// const debug = require('debug')('mongodb-compass:minichart:unique');
+
+class UniqueMiniChart extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { sample: _.sample(this.props.type.values, 20) };
+  }
+
+  onRefresh(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.setState({
+      sample: _.sample(this.props.type.values, 20)
+    });
+  }
+
+  /**
+   * Render a single field;
+   *
+   * @returns {React.Component} A react component for a single field
+   */
+  render() {
+    if (!this.props.type.values) {
+      return <div></div>;
+    }
+    const sample = this.state.sample || [];
+    const fieldName = this.props.fieldName.toLowerCase();
+    const typeName = this.props.type.name.toLowerCase();
+    const randomValueList = sample.map((value, i) => {
+      return (
+        <ValueBubble
+          key={`${fieldName}-${typeName}-${i}`}
+          value={value}
+          queryValue={this.props.queryValue}
+          fieldName={this.props.fieldName}
+        />
+      );
+    });
+    const style = {
+      width: this.props.width
+    };
+
+    return (
+      <div className="minichart unique" style={style}>
+        <dl className="dl-horizontal">
+          <dt>
+            <i onClick={this.onRefresh.bind(this)} className="mms-icon-continuous" />
+          </dt>
+          <dd>
+            <ul className="list-inline">
+              {randomValueList}
+            </ul>
+          </dd>
+        </dl>
+      </div>
+    );
+  }
+}
+
+UniqueMiniChart.propTypes = {
+  fieldName: PropTypes.string.isRequired,
+  queryValue: PropTypes.string,
+  type: PropTypes.object.isRequired,
+  width: PropTypes.number
+};
+
+module.exports = UniqueMiniChart;

src/internal-packages/schema/lib/component/unique.jsx

@@ -0,0 +1,63 @@
+const app = require('hadron-app');
+const React = require('react');
+const PropTypes = require('prop-types');
+const _ = require('lodash');
+const hasDistinctValue = require('../../../query/lib/util').hasDistinctValue;
+
+const { DECIMAL_128, DOUBLE, LONG, INT_32 } = require('../helpers');
+
+class ValueBubble extends React.Component {
+  onBubbleClicked(e) {
+    const QueryAction = app.appRegistry.getAction('Query.Actions');
+    const action = e.shiftKey ?
+      QueryAction.toggleDistinctValue : QueryAction.setValue;
+    action({
+      field: this.props.fieldName,
+      value: this.props.value,
+      unsetIfSet: true
+    });
+  }
+
+  /**
+   * converts the passed in value into a string, supports the 4 numeric
+   * BSON types as well.
+   *
+   * @param {Any} value     value to be converted to a string
+   * @return {String}       converted value
+   */
+  _extractStringValue(value) {
+    if (_.has(value, '_bsontype')) {
+      if (_.includes([ DECIMAL_128, LONG ], value._bsontype)) {
+        return value.toString();
+      }
+      if (_.includes([ DOUBLE, INT_32 ], value._bsontype)) {
+        return String(value.value);
+      }
+    }
+    if (_.isString(value)) {
+      return value;
+    }
+    return String(value);
+  }
+
+  render() {
+    const value = this._extractStringValue(this.props.value);
+    const selectedClass = hasDistinctValue(this.props.queryValue, this.props.value) ?
+      'selected' : 'unselected';
+    return (
+      <li className="bubble">
+        <code className={`selectable ${selectedClass}`} onClick={this.onBubbleClicked.bind(this)}>
+          {value}
+        </code>
+      </li>
+    );
+  }
+}
+
+ValueBubble.propTypes = {
+  fieldName: PropTypes.string.isRequired,
+  queryValue: PropTypes.string,
+  value: PropTypes.any.isRequired
+};
+
+module.exports = ValueBubble;