You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2021/02/09 00:43:43 UTC
[superset] branch master updated: feat: Save datapanel state in
local storage (#12996)
This is an automated email from the ASF dual-hosted git repository.
rusackas 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 2ce7982 feat: Save datapanel state in local storage (#12996)
2ce7982 is described below
commit 2ce79823dfad61bce6196fcacd56a844f44818c0
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Tue Feb 9 01:42:59 2021 +0100
feat: Save datapanel state in local storage (#12996)
* Save datapanel state in local storage
* Export string to a constant
* Move local storage helpers to separate file
* Use helper functions in ExploreViewContainer
---
.../src/explore/components/DataTablesPane.tsx | 21 +++++++++++--
.../src/explore/components/ExploreChartPanel.jsx | 16 +++++++++-
.../explore/components/ExploreViewContainer.jsx | 18 +++++------
superset-frontend/src/utils/localStorageHelpers.ts | 35 ++++++++++++++++++++++
4 files changed, 76 insertions(+), 14 deletions(-)
diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
index f4a7b1b..24ddf14 100644
--- a/superset-frontend/src/explore/components/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -25,6 +25,10 @@ import TableView, { EmptyWrapperType } from 'src/components/TableView';
import { getChartDataRequest } from 'src/chart/chartAction';
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import {
+ getFromLocalStorage,
+ setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
+import {
CopyToClipboardButton,
FilterInput,
RowCount,
@@ -44,6 +48,12 @@ const NULLISH_RESULTS_STATE = {
const DATA_TABLE_PAGE_SIZE = 50;
+const STORAGE_KEYS = {
+ isOpen: 'is_datapanel_open',
+};
+
+const DATAPANEL_KEY = 'data';
+
const TableControlsWrapper = styled.div`
display: flex;
align-items: center;
@@ -98,7 +108,9 @@ export const DataTablesPane = ({
[RESULT_TYPES.results]?: boolean;
[RESULT_TYPES.samples]?: boolean;
}>(NULLISH_RESULTS_STATE);
- const [panelOpen, setPanelOpen] = useState(false);
+ const [panelOpen, setPanelOpen] = useState(
+ getFromLocalStorage(STORAGE_KEYS.isOpen, false),
+ );
const getData = useCallback(
(resultType: string) => {
@@ -141,6 +153,10 @@ export const DataTablesPane = ({
);
useEffect(() => {
+ setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
+ }, [panelOpen]);
+
+ useEffect(() => {
setIsRequestPending(prevState => ({
...prevState,
[RESULT_TYPES.results]: true,
@@ -244,11 +260,12 @@ export const DataTablesPane = ({
<Collapse
accordion
bordered={false}
+ defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
onChange={handleCollapseChange}
bold
ghost
>
- <Collapse.Panel header={t('Data')} key="data">
+ <Collapse.Panel header={t('Data')} key={DATAPANEL_KEY}>
<Tabs
fullWidth={false}
tabBarExtraContent={TableControls}
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index e89dc58..17c7d0f 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -23,6 +23,10 @@ import { styled, useTheme } from '@superset-ui/core';
import { useResizeDetector } from 'react-resize-detector';
import { chartPropShape } from 'src/dashboard/util/propShapes';
import ChartContainer from 'src/chart/ChartContainer';
+import {
+ getFromLocalStorage,
+ setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
import ConnectedExploreChartHeader from './ExploreChartHeader';
import { DataTablesPane } from './DataTablesPane';
@@ -56,6 +60,10 @@ const GUTTER_SIZE_FACTOR = 1.25;
const CHART_PANEL_PADDING = 30;
const HEADER_PADDING = 15;
+const STORAGE_KEYS = {
+ sizes: 'chart_split_sizes',
+};
+
const INITIAL_SIZES = [90, 10];
const MIN_SIZES = [300, 50];
const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
@@ -114,7 +122,9 @@ const ExploreChartPanel = props => {
refreshMode: 'debounce',
refreshRate: 300,
});
- const [splitSizes, setSplitSizes] = useState(INITIAL_SIZES);
+ const [splitSizes, setSplitSizes] = useState(
+ getFromLocalStorage(STORAGE_KEYS.sizes, INITIAL_SIZES),
+ );
const calcSectionHeight = useCallback(
percent => {
@@ -149,6 +159,10 @@ const ExploreChartPanel = props => {
recalcPanelSizes(splitSizes);
}, [recalcPanelSizes, splitSizes]);
+ useEffect(() => {
+ setInLocalStorage(STORAGE_KEYS.sizes, splitSizes);
+ }, [splitSizes]);
+
const onDragEnd = sizes => {
setSplitSizes(sizes);
};
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 990373a..11be78b 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -30,6 +30,10 @@ import { Global } from '@emotion/core';
import { Tooltip } from 'src/common/components/Tooltip';
import { usePrevious } from 'src/common/hooks/usePrevious';
import Icon from 'src/components/Icon';
+import {
+ getFromLocalStorage,
+ setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
import ExploreChartPanel from './ExploreChartPanel';
import ConnectedControlPanelsContainer from './ControlPanelsContainer';
import SaveModal from './SaveModal';
@@ -379,20 +383,12 @@ function ExploreViewContainer(props) {
}
function getSidebarWidths(key) {
- try {
- return localStorage.getItem(key) || defaultSidebarsWidth[key];
- } catch {
- return defaultSidebarsWidth[key];
- }
+ return getFromLocalStorage(key, defaultSidebarsWidth[key]);
}
function setSidebarWidths(key, dimension) {
- try {
- const newDimension = Number(getSidebarWidths(key)) + dimension.width;
- localStorage.setItem(key, newDimension);
- } catch {
- // Catch in case localStorage is unavailable
- }
+ const newDimension = Number(getSidebarWidths(key)) + dimension.width;
+ setInLocalStorage(key, newDimension);
}
if (props.standalone) {
diff --git a/superset-frontend/src/utils/localStorageHelpers.ts b/superset-frontend/src/utils/localStorageHelpers.ts
new file mode 100644
index 0000000..28f5dfc
--- /dev/null
+++ b/superset-frontend/src/utils/localStorageHelpers.ts
@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+export const getFromLocalStorage = (key: string, defaultValue: any) => {
+ try {
+ const value = localStorage.getItem(key);
+ return JSON.parse(value || 'null') || defaultValue;
+ } catch {
+ return defaultValue;
+ }
+};
+
+export const setInLocalStorage = (key: string, value: any) => {
+ try {
+ localStorage.setItem(key, JSON.stringify(value));
+ } catch {
+ // Catch in case localStorage is unavailable
+ }
+};