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

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);
   };