feat: auto refresh dashboard

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

@@ -40,6 +40,9 @@ import {
   CaretLeftOutlined,
   CaretRightOutlined,
   CaretRightFilled,
+  PauseOutlined,
+  PauseCircleOutlined,
+  PlayCircleOutlined,
   CalendarOutlined,
   CheckOutlined,
   CheckCircleOutlined,
@@ -179,6 +182,9 @@ const AntdIcons = {
   CaretLeftOutlined,
   CaretRightOutlined,
   CaretRightFilled,
+  PauseOutlined,
+  PauseCircleOutlined,
+  PlayCircleOutlined,
   CalendarOutlined,
   CheckOutlined,
   CheckCircleOutlined,

superset-frontend/packages/superset-ui-core/src/components/PageHeaderWithActions/index.tsx

@@ -86,7 +86,6 @@ const headerStyles = (theme: SupersetTheme) => css`
 const buttonsStyles = (theme: SupersetTheme) => css`
   display: flex;
   align-items: center;
-  padding-left: ${theme.sizeUnit * 2}px;
 
   & .anticon-star {
     padding: 0 ${theme.sizeUnit}px;

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

@@ -83,6 +83,7 @@ export default function transformProps(chartProps: ChartProps) {
     formData,
     queriesData,
     datasource: { currencyFormats = {}, columnFormats = {} },
+    isRefreshing,
   } = chartProps;
   const {
     boldText,
@@ -100,13 +101,14 @@ export default function transformProps(chartProps: ChartProps) {
     subtitleFontSize,
     columnConfig = {},
   } = formData;
-  const { data: dataA = [] } = queriesData[0];
+  const [queryData] = queriesData;
+  const { data: dataA = [] } = queryData;
   const data = dataA;
   const metricName = metric ? getMetricLabel(metric) : '';
   const metrics = chartProps.datasource?.metrics || [];
   const originalLabel = getOriginalLabel(metric, metrics);
   const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
-  const timeComparison = ensureIsArray(chartProps.rawFormData?.time_compare)[0];
+  const [timeComparison] = ensureIsArray(chartProps.rawFormData?.time_compare);
   const startDateOffset = chartProps.rawFormData?.start_date_offset;
   const currentTimeRangeFilter = chartProps.rawFormData?.adhoc_filters?.filter(
     (adhoc_filter: SimpleAdhocFilter) =>
@@ -218,5 +220,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

@@ -44,6 +44,7 @@ export default function transformProps(
     hooks,
     datasource: { currencyFormats = {}, columnFormats = {} },
     theme,
+    isRefreshing,
   } = chartProps;
   const {
     metricNameFontSize,
@@ -123,5 +124,6 @@ export default function transformProps(
     metricName: originalLabel,
     showMetricName,
     metricNameFontSize,
+    isRefreshing,
   };
 }

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

@@ -23,7 +23,6 @@ import {
   getTimeFormatter,
   SMART_DATE_VERBOSE_ID,
   computeMaxFontSize,
-  BRAND_COLOR,
   BinaryQueryObjectFilterClause,
 } from '@superset-ui/core';
 import { styled, useTheme } from '@apache-superset/core/ui';
@@ -51,14 +50,11 @@ function BigNumberVis({
   kickerFontSize = PROPORTION.KICKER,
   metricNameFontSize = PROPORTION.METRIC_NAME,
   showMetricName = true,
-  mainColor = BRAND_COLOR,
   showTimestamp = false,
   showTrendLine = false,
-  startYAxisAtZero = true,
   subheader = '',
   subheaderFontSize = PROPORTION.SUBHEADER,
   subtitleFontSize = PROPORTION.SUBHEADER,
-  timeRangeFixed = false,
   ...props
 }: BigNumberVizProps) {
   const theme = useTheme();
@@ -341,6 +337,7 @@ function BigNumberVis({
       onContextMenu,
       formData,
       xValueFormatter,
+      isRefreshing,
     } = props;
 
     // if can't find any non-null values, no point rendering the trendline
@@ -380,6 +377,7 @@ function BigNumberVis({
           echartOptions={echartOptions}
           eventHandlers={eventHandlers}
           vizType={formData?.vizType}
+          isRefreshing={isRefreshing}
         />
       )
     );

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

@@ -84,6 +84,7 @@ export default function transformProps(
     inContextMenu,
     theme,
     datasource: { currencyFormats = {}, columnFormats = {} },
+    isRefreshing,
   } = chartProps;
   const {
     colorPicker,
@@ -111,13 +112,14 @@ export default function transformProps(
     showYAxisMinMaxLabels = false,
   } = formData;
   const granularity = extractTimegrain(rawFormData);
+  const [primaryQueryData] = queriesData;
   const {
     data = [],
     colnames = [],
     coltypes = [],
     from_dttm: fromDatetime,
     to_dttm: toDatetime,
-  } = queriesData[0];
+  } = primaryQueryData;
 
   const aggregatedQueryData = queriesData.length > 1 ? queriesData[1] : null;
 
@@ -145,6 +147,7 @@ export default function transformProps(
   let timestamp = data.length === 0 ? null : data[0][xAxisLabel];
   let bigNumberFallback = null;
   let sortedData: [number | null, number | null][] = [];
+  let latestDatum: [number | null, number | null] | undefined;
 
   if (data.length > 0) {
     sortedData = (data as BigNumberDatum[])
@@ -159,7 +162,9 @@ export default function transformProps(
       .sort((a, b) => (a[0] !== null && b[0] !== null ? b[0] - a[0] : 0));
   }
   if (sortedData.length > 0) {
-    timestamp = sortedData[0][0];
+    [latestDatum] = sortedData;
+    const [latestTimestamp] = latestDatum;
+    timestamp = latestTimestamp;
 
     // Raw aggregation uses server-side data, all others use client-side
     if (aggregation === 'raw' && hasAggregatedData && aggregatedData) {
@@ -192,11 +197,12 @@ export default function transformProps(
     }
   }
 
-  if (compareLag > 0 && sortedData.length > 0) {
+  if (compareLag > 0 && sortedData.length > 0 && latestDatum) {
     const compareIndex = compareLag;
     if (compareIndex < sortedData.length) {
-      const compareFromValue = sortedData[compareIndex][1];
-      const compareToValue = sortedData[0][1];
+      const compareDatum = sortedData[compareIndex];
+      const [, compareFromValue] = compareDatum;
+      const [, compareToValue] = latestDatum;
       // compare values must both be non-nulls
       if (compareToValue !== null && compareFromValue !== null) {
         percentChange = compareFromValue
@@ -394,5 +400,6 @@ export default function transformProps(
     onContextMenu,
     xValueFormatter: formatTime,
     refs,
+    isRefreshing,
   };
 }

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

@@ -96,6 +96,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,8 +55,10 @@ export default function transformProps(
     queriesData,
     inContextMenu,
     emitCrossFilters,
+    isRefreshing,
   } = chartProps;
-  const { data = [] } = queriesData[0];
+  const [queryData] = queriesData;
+  const { data = [] } = queryData;
   const { setDataMask = () => {}, onContextMenu } = hooks;
   const coltypeMapping = getColtypesMapping(queriesData[0]);
   const {
@@ -320,5 +322,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,10 +95,19 @@ 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 [queryData] = queriesData;
+  const { data = [] } = queryData;
   const {
     x,
     y,
@@ -263,5 +272,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 coltypeMapping = getColtypesMapping(queriesData[0]);
@@ -312,5 +313,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 {
@@ -148,7 +149,8 @@ export default function transformProps(chartProps: EchartsGanttChartProps) {
 
   const { setControlValue, onLegendStateChanged } = hooks;
 
-  const { data = [], colnames = [], coltypes = [] } = queriesData[0];
+  const [queryData] = queriesData;
+  const { data = [], colnames = [], coltypes = [] } = queryData;
   const refs: Refs = {};
 
   const startTimeLabel = getColumnLabel(startTime);
@@ -453,5 +455,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}
     />
   );
 }