Control visualization row emptyState from Renderer

Author: gabrieldutra

client/app/pages/queries/components/QueryVisualizationTabs.jsx

@@ -142,17 +142,20 @@ export default function QueryVisualizationTabs({
               onDelete={() => onDeleteVisualization(visualization.id)}
             />
           }>
-          {queryResult && !(queryResult.isEmpty && queryResult.isEmpty()) && (
-            <VisualizationRenderer visualization={visualization} queryResult={queryResult} context="query" />
-          )}
-          {queryResult && queryResult.isEmpty && queryResult.isEmpty() && (
-            <EmptyState
-              title="No rows returned"
-              message="Please update your query or refresh the results using the button below."
-              refreshButton={refreshButton}
+          {queryResult ? (
+            <VisualizationRenderer
+              visualization={visualization}
+              queryResult={queryResult}
+              context="query"
+              emptyState={
+                <EmptyState
+                  title="No rows returned"
+                  message="Please update your query or refresh the results using the button below."
+                  refreshButton={refreshButton}
+                />
+              }
             />
-          )}
-          {!queryResult && (
+          ) : (
             <EmptyState
               title="No results found!"
               message="Please update your query or refresh the results using the button below."

client/app/visualizations/components/VisualizationRenderer.jsx

@@ -1,4 +1,4 @@
-import { isEqual, map, find } from "lodash";
+import { isEqual, isEmpty, map, find } from "lodash";
 import React, { useState, useMemo, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import getQueryResultData from "@/lib/getQueryResultData";
@@ -55,7 +55,9 @@ export default function VisualizationRenderer(props) {
   );
 
   const { showFilters, visualization } = props;
-  const { Renderer, getOptions } = registeredVisualizations[visualization.type];
+  const { Renderer, getOptions, isVisualizationEmpty = data => isEmpty(data.rows) } = registeredVisualizations[
+    visualization.type
+  ];
 
   // Avoid unnecessary updates (which may be expensive or cause issues with
   // internal state of some visualizations like Table) - compare options deeply
@@ -78,16 +80,22 @@ export default function VisualizationRenderer(props) {
       <ErrorBoundary
         ref={errorHandlerRef}
         renderError={() => <ErrorMessage>Error while rendering visualization.</ErrorMessage>}>
-        {showFilters && <Filters filters={filters} onChange={setFilters} />}
-        <div className="visualization-renderer-wrapper">
-          <Renderer
-            key={`visualization${visualization.id}`}
-            options={options}
-            data={filteredData}
-            visualizationName={visualization.name}
-            context={props.context}
-          />
-        </div>
+        {!isVisualizationEmpty(data, options) ? (
+          <>
+            {showFilters && <Filters filters={filters} onChange={setFilters} />}
+            <div className="visualization-renderer-wrapper">
+              <Renderer
+                key={`visualization${visualization.id}`}
+                options={options}
+                data={filteredData}
+                visualizationName={visualization.name}
+                context={props.context}
+              />
+            </div>
+          </>
+        ) : (
+          props.emptyState
+        )}
       </ErrorBoundary>
     </div>
   );
@@ -99,9 +107,11 @@ VisualizationRenderer.propTypes = {
   filters: FiltersType,
   showFilters: PropTypes.bool,
   context: PropTypes.oneOf(["query", "widget"]).isRequired,
+  emptyState: PropTypes.node,
 };
 
 VisualizationRenderer.defaultProps = {
   filters: [],
   showFilters: true,
+  emptyState: null,
 };

client/app/visualizations/counter/index.js

@@ -1,3 +1,4 @@
+import { get, isEmpty } from "lodash";
 import Renderer from "./Renderer";
 import Editor from "./Editor";
 
@@ -16,6 +17,7 @@ export default {
   type: "COUNTER",
   name: "Counter",
   getOptions: options => ({ ...DEFAULT_OPTIONS, ...options }),
+  isVisualizationEmpty: (data, options) => !get(options, "countRow") && isEmpty(data.rows),
   Renderer,
   Editor,