feat: auto refresh dashboard

superset-frontend/packages/superset-ui-core/src/components/Icons/AntdEnhanced.tsx

@@ -106,8 +106,11 @@ import {
   MoreOutlined,
   OrderedListOutlined,
   PartitionOutlined,
-  PieChartOutlined,
+  PauseCircleOutlined,
+  PauseOutlined,
   PicCenterOutlined,
+  PieChartOutlined,
+  PlayCircleOutlined,
   PlusCircleOutlined,
   PlusSquareOutlined,
   PlusOutlined,
@@ -258,8 +261,11 @@ const AntdIcons = {
   MoreOutlined,
   OrderedListOutlined,
   PartitionOutlined,
-  PieChartOutlined,
+  PauseCircleOutlined,
+  PauseOutlined,
   PicCenterOutlined,
+  PieChartOutlined,
+  PlayCircleOutlined,
   PlusCircleOutlined,
   PlusSquareOutlined,
   PlusOutlined,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberPeriodOverPeriod/transformProps.ts

@@ -87,6 +87,7 @@ export default function transformProps(chartProps: ChartProps) {
       columnFormats = {},
       currencyCodeColumn,
     },
+    isRefreshing,
   } = chartProps;
   const {
     boldText,
@@ -227,5 +228,6 @@ export default function transformProps(chartProps: ChartProps) {
     shift: timeComparison,
     dashboardTimeRange: formData?.extraFormData?.time_range,
     columnConfig,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts

@@ -48,6 +48,7 @@ export default function transformProps(
       currencyCodeColumn,
     },
     theme,
+    isRefreshing,
   } = chartProps;
   const {
     metricNameFontSize,
@@ -135,5 +136,6 @@ export default function transformProps(
     metricName: originalLabel,
     showMetricName,
     metricNameFontSize,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx

@@ -353,6 +353,7 @@ function BigNumberVis({
       onContextMenu,
       formData,
       xValueFormatter,
+      isRefreshing,
     } = props;
 
     // if can't find any non-null values, no point rendering the trendline
@@ -395,6 +396,7 @@ function BigNumberVis({
           echartOptions={echartOptions}
           eventHandlers={eventHandlers}
           vizType={formData?.vizType}
+          isRefreshing={isRefreshing}
         />
       )
     );

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -88,6 +88,7 @@ export default function transformProps(
       columnFormats = {},
       currencyCodeColumn,
     },
+    isRefreshing,
   } = chartProps;
   const {
     colorPicker,
@@ -406,5 +407,6 @@ export default function transformProps(
     onContextMenu,
     xValueFormatter: formatTime,
     refs,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/types.ts

@@ -97,6 +97,7 @@ export type BigNumberVizProps = {
   trendLineData?: TimeSeriesDatum[];
   mainColor?: string;
   echartOptions?: EChartsCoreOption;
+  isRefreshing?: boolean;
   onContextMenu?: (
     clientX: number,
     clientY: number,

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx

@@ -21,8 +21,15 @@ import { allEventHandlers } from '../utils/eventHandlers';
 import { BoxPlotChartTransformedProps } from './types';
 
 export default function EchartsBoxPlot(props: BoxPlotChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs, formData } =
-    props;
+  const {
+    height,
+    width,
+    echartOptions,
+    selectedValues,
+    refs,
+    formData,
+    isRefreshing,
+  } = props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -35,6 +42,7 @@ export default function EchartsBoxPlot(props: BoxPlotChartTransformedProps) {
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts

@@ -55,6 +55,7 @@ export default function transformProps(
     queriesData,
     inContextMenu,
     emitCrossFilters,
+    isRefreshing,
   } = chartProps;
   const { data = [] } = queriesData[0];
   const { setDataMask = () => {}, onContextMenu } = hooks;
@@ -322,5 +323,6 @@ export default function transformProps(
     onContextMenu,
     refs,
     coltypeMapping,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/EchartsBubble.tsx

@@ -20,14 +20,15 @@ import { BubbleChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 
 export default function EchartsBubble(props: BubbleChartTransformedProps) {
-  const { height, width, echartOptions, refs, formData } = props;
+  const { height, width, echartOptions, refs, formData, isRefreshing } = props;
   return (
     <Echart
       height={height}
       width={width}
       echartOptions={echartOptions}
       refs={refs}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts

@@ -95,8 +95,16 @@ export function formatTooltip(
 }
 
 export default function transformProps(chartProps: EchartsBubbleChartProps) {
-  const { height, width, hooks, queriesData, formData, inContextMenu, theme } =
-    chartProps;
+  const {
+    height,
+    width,
+    hooks,
+    queriesData,
+    formData,
+    inContextMenu,
+    theme,
+    isRefreshing,
+  } = chartProps;
 
   const { data = [] } = queriesData[0];
   const {
@@ -263,5 +271,6 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
     onContextMenu,
     setDataMask,
     formData,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx

@@ -21,8 +21,15 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsFunnel(props: FunnelChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs, formData } =
-    props;
+  const {
+    height,
+    width,
+    echartOptions,
+    selectedValues,
+    refs,
+    formData,
+    isRefreshing,
+  } = props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -35,6 +42,7 @@ export default function EchartsFunnel(props: FunnelChartTransformedProps) {
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -97,6 +97,7 @@ export default function transformProps(
     theme,
     emitCrossFilters,
     datasource,
+    isRefreshing,
   } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
   const detectedCurrency = queriesData[0]?.detected_currency;
@@ -320,5 +321,6 @@ export default function transformProps(
     onContextMenu,
     refs,
     coltypeMapping,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Gantt/EchartsGantt.tsx

@@ -35,6 +35,7 @@ export default function EchartsGantt(props: EchartsGanttChartTransformedProps) {
     formData,
     setControlValue,
     onLegendStateChanged,
+    isRefreshing,
   } = props;
   const extraControlRef = useRef<HTMLDivElement>(null);
   const [extraHeight, setExtraHeight] = useState(0);
@@ -84,6 +85,7 @@ export default function EchartsGantt(props: EchartsGanttChartTransformedProps) {
         selectedValues={selectedValues}
         eventHandlers={eventHandlers}
         vizType={formData.vizType}
+        isRefreshing={isRefreshing}
       />
     </>
   );

superset-frontend/plugins/plugin-chart-echarts/src/Gantt/transformProps.ts

@@ -115,6 +115,7 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
     emitCrossFilters,
     datasource,
     legendState,
+    isRefreshing,
   } = chartProps;
 
   const {
@@ -453,5 +454,6 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
     refs,
     setControlValue,
     onLegendStateChanged,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx

@@ -21,8 +21,15 @@ import Echart from '../components/Echart';
 import { allEventHandlers } from '../utils/eventHandlers';
 
 export default function EchartsGauge(props: GaugeChartTransformedProps) {
-  const { height, width, echartOptions, selectedValues, refs, formData } =
-    props;
+  const {
+    height,
+    width,
+    echartOptions,
+    selectedValues,
+    refs,
+    formData,
+    isRefreshing,
+  } = props;
 
   const eventHandlers = allEventHandlers(props);
 
@@ -35,6 +42,7 @@ export default function EchartsGauge(props: GaugeChartTransformedProps) {
       eventHandlers={eventHandlers}
       selectedValues={selectedValues}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -105,6 +105,7 @@ export default function transformProps(
     theme,
     emitCrossFilters,
     datasource,
+    isRefreshing,
   } = chartProps;
 
   const gaugeSeriesOptions = defaultGaugeSeriesOption(theme);
@@ -379,5 +380,6 @@ export default function transformProps(
     onContextMenu,
     refs,
     coltypeMapping,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx

@@ -52,6 +52,7 @@ export default function EchartsGraph({
   emitCrossFilters,
   refs,
   coltypeMapping,
+  isRefreshing,
 }: GraphChartTransformedProps) {
   const getCrossFilterDataMask = (node: DataRow | undefined) => {
     if (!node?.name || !node?.col) {
@@ -176,6 +177,7 @@ export default function EchartsGraph({
       echartOptions={echartOptions}
       eventHandlers={eventHandlers}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/buildQuery.ts

@@ -16,15 +16,32 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { buildQueryContext, QueryFormData } from '@superset-ui/core';
+import { buildQueryContext } from '@superset-ui/core';
+import { EchartsGraphFormData } from './types';
+import { buildColumnsOrderBy, applyOrderBy } from '../utils/orderby';
+
+export default function buildQuery(formData: EchartsGraphFormData) {
+  const { source, target, source_category, target_category, row_limit } =
+    formData;
+  const orderby = buildColumnsOrderBy([
+    source,
+    target,
+    source_category,
+    target_category,
+  ]);
 
-export default function buildQuery(formData: QueryFormData) {
   return buildQueryContext(formData, {
     queryFields: {
       source: 'columns',
       target: 'columns',
       source_category: 'columns',
       target_category: 'columns',
     },
+    buildQuery: baseQueryObject => [
+      {
+        ...baseQueryObject,
+        ...applyOrderBy(orderby, row_limit),
+      },
+    ],
   });
 }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts

@@ -166,6 +166,7 @@ export default function transformProps(
     filterState,
     emitCrossFilters,
     theme,
+    isRefreshing,
   } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
   const coltypeMapping = getColtypesMapping(queriesData[0]);
@@ -375,5 +376,6 @@ export default function transformProps(
     refs,
     emitCrossFilters,
     coltypeMapping,
+    isRefreshing,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/Heatmap.tsx

@@ -20,14 +20,15 @@ import { HeatmapTransformedProps } from './types';
 import Echart from '../components/Echart';
 
 export default function Heatmap(props: HeatmapTransformedProps) {
-  const { height, width, echartOptions, refs, formData } = props;
+  const { height, width, echartOptions, refs, formData, isRefreshing } = props;
   return (
     <Echart
       refs={refs}
       height={height}
       width={width}
       echartOptions={echartOptions}
       vizType={formData.vizType}
+      isRefreshing={isRefreshing}
     />
   );
 }

superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts

@@ -176,8 +176,15 @@ export default function transformProps(
   chartProps: HeatmapChartProps,
 ): HeatmapTransformedProps {
   const refs: Refs = {};
-  const { width, height, formData, queriesData, datasource, theme } =
-    chartProps;
+  const {
+    width,
+    height,
+    formData,
+    queriesData,
+    datasource,
+    theme,
+    isRefreshing,
+  } = chartProps;
   const {
     bottomMargin,
     xAxis,
@@ -440,5 +447,6 @@ export default function transformProps(
     width,
     height,
     formData,
+    isRefreshing,
   };
 }