This is an automated email from the ASF dual-hosted git repository.
kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 03d3eaacaf feat(explore): Move timer, row counter and cached pills to
chart container (#19458)
03d3eaacaf is described below
commit 03d3eaacafc6ebdad7fdbcef6efa4df553468ba1
Author: Kamil Gabryjelski <[email protected]>
AuthorDate: Tue Apr 5 18:03:23 2022 +0200
feat(explore): Move timer, row counter and cached pills to chart container
(#19458)
* feat(explore): Move timer, row counter and cached pills to chart container
* Hide pills in standalone mode
* Take pills out of chart-container
---
.../src/explore/components/ChartPills.tsx | 88 ++++++++++++++++++++++
.../components/ExploreChartHeader/index.jsx | 49 +-----------
.../src/explore/components/ExploreChartPanel.jsx | 39 +++++++++-
.../{ => RowCountLabel}/RowCountLabel.stories.tsx | 2 +-
.../{ => RowCountLabel}/RowCountLabel.test.jsx | 2 +-
.../{RowCountLabel.tsx => RowCountLabel/index.tsx} | 0
6 files changed, 128 insertions(+), 52 deletions(-)
diff --git a/superset-frontend/src/explore/components/ChartPills.tsx
b/superset-frontend/src/explore/components/ChartPills.tsx
new file mode 100644
index 0000000000..09595576dd
--- /dev/null
+++ b/superset-frontend/src/explore/components/ChartPills.tsx
@@ -0,0 +1,88 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { forwardRef, RefObject } from 'react';
+import { css, QueryData, SupersetTheme } from '@superset-ui/core';
+import RowCountLabel from 'src/explore/components/RowCountLabel';
+import CachedLabel from 'src/components/CachedLabel';
+import Timer from 'src/components/Timer';
+
+enum CHART_STATUS_MAP {
+ failed = 'danger',
+ loading = 'warning',
+ success = 'success',
+}
+
+export type ChartPillsProps = {
+ queriesResponse: QueryData[];
+ chartStatus: keyof typeof CHART_STATUS_MAP;
+ chartUpdateStartTime: number;
+ chartUpdateEndTime: number;
+ refreshCachedQuery: () => void;
+ rowLimit: string | number;
+};
+
+export const ChartPills = forwardRef(
+ (
+ {
+ queriesResponse,
+ chartStatus,
+ chartUpdateStartTime,
+ chartUpdateEndTime,
+ refreshCachedQuery,
+ rowLimit,
+ }: ChartPillsProps,
+ ref: RefObject<HTMLDivElement>,
+ ) => {
+ const isLoading = chartStatus === 'loading';
+ const firstQueryResponse = queriesResponse?.[0];
+ return (
+ <div ref={ref}>
+ <div
+ css={(theme: SupersetTheme) => css`
+ display: flex;
+ justify-content: flex-end;
+ padding-bottom: ${theme.gridUnit * 4}px;
+ & .ant-tag:last-of-type {
+ margin: 0;
+ }
+ `}
+ >
+ {!isLoading && firstQueryResponse && (
+ <RowCountLabel
+ rowcount={Number(firstQueryResponse.rowcount) || 0}
+ limit={Number(rowLimit) || 0}
+ />
+ )}
+ {!isLoading && firstQueryResponse?.is_cached && (
+ <CachedLabel
+ onClick={refreshCachedQuery}
+ cachedTimestamp={firstQueryResponse.cached_dttm}
+ />
+ )}
+ <Timer
+ startTime={chartUpdateStartTime}
+ endTime={chartUpdateEndTime}
+ isRunning={isLoading}
+ status={CHART_STATUS_MAP[chartStatus]}
+ />
+ </div>
+ </div>
+ );
+ },
+);
diff --git
a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index d9d615dc1f..6c8d3cb799 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -36,22 +36,12 @@ import { isFeatureEnabled, FeatureFlag } from
'src/featureFlags';
import { chartPropShape } from 'src/dashboard/util/propShapes';
import AlteredSliceTag from 'src/components/AlteredSliceTag';
import FaveStar from 'src/components/FaveStar';
-import Timer from 'src/components/Timer';
-import CachedLabel from 'src/components/CachedLabel';
import PropertiesModal from 'src/explore/components/PropertiesModal';
import { sliceUpdated } from 'src/explore/actions/exploreActions';
import CertifiedBadge from 'src/components/CertifiedBadge';
-import withToasts from 'src/components/MessageToasts/withToasts';
-import RowCountLabel from '../RowCountLabel';
import ExploreAdditionalActionsMenu from '../ExploreAdditionalActionsMenu';
import { ChartEditableTitle } from './ChartEditableTitle';
-const CHART_STATUS_MAP = {
- failed: 'danger',
- loading: 'warning',
- success: 'success',
-};
-
const propTypes = {
actions: PropTypes.object.isRequired,
canOverwrite: PropTypes.bool.isRequired,
@@ -85,7 +75,7 @@ const StyledHeader = styled.div`
display: flex;
align-items: center;
min-width: 0;
- margin-right: ${theme.gridUnit * 6}px;
+ margin-right: ${theme.gridUnit * 12}px;
}
.right-button-panel {
@@ -231,20 +221,8 @@ export class ExploreChartHeader extends
React.PureComponent {
sliceUpdated,
sliceName,
} = this.props;
- const {
- chartStatus,
- chartUpdateEndTime,
- chartUpdateStartTime,
- latestQueryFormData,
- queriesResponse,
- sliceFormData,
- } = chart;
- // TODO: when will get appropriate design for multi queries use all
results and not first only
- const queryResponse = queriesResponse?.[0];
+ const { latestQueryFormData, sliceFormData } = chart;
const oldSliceName = slice?.slice_name;
- const chartFinished = ['failed', 'rendered', 'success'].includes(
- chartStatus,
- );
return (
<StyledHeader id="slice-header">
<div className="title-panel">
@@ -296,24 +274,6 @@ export class ExploreChartHeader extends
React.PureComponent {
)}
</div>
<div className="right-button-panel">
- {chartFinished && queryResponse && (
- <RowCountLabel
- rowcount={Number(queryResponse.rowcount) || 0}
- limit={Number(formData.row_limit) || 0}
- />
- )}
- {chartFinished && queryResponse && queryResponse.is_cached && (
- <CachedLabel
- onClick={this.postChartFormData.bind(this)}
- cachedTimestamp={queryResponse.cached_dttm}
- />
- )}
- <Timer
- startTime={chartUpdateStartTime}
- endTime={chartUpdateEndTime}
- isRunning={chartStatus === 'loading'}
- status={CHART_STATUS_MAP[chartStatus]}
- />
<ExploreAdditionalActionsMenu
onOpenInEditor={actions.redirectSQLLab}
onOpenPropertiesModal={this.openPropertiesModal}
@@ -337,7 +297,4 @@ function mapDispatchToProps(dispatch) {
);
}
-export default connect(
- null,
- mapDispatchToProps,
-)(withToasts(ExploreChartHeader));
+export default connect(null, mapDispatchToProps)(ExploreChartHeader);
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 61d03101bf..8fb1c3ef07 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -30,6 +30,7 @@ import {
} from 'src/utils/localStorageHelpers';
import { DataTablesPane } from './DataTablesPane';
import { buildV1ChartDataPayload } from '../exploreUtils';
+import { ChartPills } from './ChartPills';
const propTypes = {
actions: PropTypes.object.isRequired,
@@ -116,6 +117,10 @@ const ExploreChartPanel = props => {
refreshMode: 'debounce',
refreshRate: 300,
});
+ const { height: pillsHeight, ref: pillsRef } = useResizeDetector({
+ refreshMode: 'debounce',
+ refreshRate: 1000,
+ });
const [splitSizes, setSplitSizes] = useState(
getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
);
@@ -150,10 +155,16 @@ const ExploreChartPanel = props => {
}, [updateQueryContext]);
const calcSectionHeight = useCallback(
- percent =>
- (parseInt(props.height, 10) * percent) / 100 -
- (gutterHeight / 2 + gutterMargin),
- [gutterHeight, gutterMargin, props.height, props.standalone],
+ percent => {
+ let containerHeight = parseInt(props.height, 10);
+ if (pillsHeight) {
+ containerHeight -= pillsHeight;
+ }
+ return (
+ (containerHeight * percent) / 100 - (gutterHeight / 2 + gutterMargin)
+ );
+ },
+ [gutterHeight, gutterMargin, pillsHeight, props.height, props.standalone],
);
const [tableSectionHeight, setTableSectionHeight] = useState(
@@ -179,6 +190,17 @@ const ExploreChartPanel = props => {
setSplitSizes(sizes);
};
+ const refreshCachedQuery = () => {
+ props.actions.postChartFormData(
+ props.form_data,
+ true,
+ props.timeout,
+ props.chart.id,
+ undefined,
+ props.ownState,
+ );
+ };
+
const onCollapseChange = openPanelName => {
let splitSizes;
if (!openPanelName) {
@@ -229,6 +251,15 @@ const ExploreChartPanel = props => {
const panelBody = useMemo(
() => (
<div className="panel-body" ref={chartPanelRef}>
+ <ChartPills
+ queriesResponse={props.chart.queriesResponse}
+ chartStatus={props.chart.chartStatus}
+ chartUpdateStartTime={props.chart.chartUpdateStartTime}
+ chartUpdateEndTime={props.chart.chartUpdateEndTime}
+ refreshCachedQuery={refreshCachedQuery}
+ rowLimit={props.form_data?.row_limit}
+ ref={pillsRef}
+ />
{renderChart()}
</div>
),
diff --git a/superset-frontend/src/explore/components/RowCountLabel.stories.tsx
b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.stories.tsx
similarity index 97%
rename from superset-frontend/src/explore/components/RowCountLabel.stories.tsx
rename to
superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.stories.tsx
index 9030b828d8..716830f9ca 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.stories.tsx
+++
b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.stories.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import RowCountLabel from './RowCountLabel';
+import RowCountLabel from '.';
export default {
title: 'RowCountLabel',
diff --git a/superset-frontend/src/explore/components/RowCountLabel.test.jsx
b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.jsx
similarity index 96%
rename from superset-frontend/src/explore/components/RowCountLabel.test.jsx
rename to
superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.jsx
index 128a0329c2..452f68a745 100644
--- a/superset-frontend/src/explore/components/RowCountLabel.test.jsx
+++
b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.jsx
@@ -21,7 +21,7 @@ import { shallow } from 'enzyme';
import Label from 'src/components/Label';
import { Tooltip } from 'src/components/Tooltip';
-import RowCountLabel from 'src/explore/components/RowCountLabel';
+import RowCountLabel from '.';
describe('RowCountLabel', () => {
const defaultProps = {
diff --git a/superset-frontend/src/explore/components/RowCountLabel.tsx
b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
similarity index 100%
rename from superset-frontend/src/explore/components/RowCountLabel.tsx
rename to superset-frontend/src/explore/components/RowCountLabel/index.tsx
