Merge pull request #1223 from Cuiyansong/master

refactor(chart): refactor chart drill path style

Author: scottsut

frontend/src/app/components/ChartEditor.tsx

@@ -297,7 +297,7 @@ export const ChartEditor: FC<ChartEditorProps> = ({
       }),
     );
     drillOptionRef.current = getChartDrillOption(
-      chartConfig?.datas,
+      finalChartConfig?.datas,
       drillOptionRef.current,
     );
     if (!expensiveQuery) {

frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/ChartPresentPanel.tsx

@@ -45,7 +45,7 @@ import ChartTypeSelector, {
 } from './components/ChartTypeSelector';
 
 const CHART_TYPE_SELECTOR_HEIGHT_OFFSET = 50;
-const CHART_DRILL_PATH_HEIGHT = 24;
+const CHART_DRILL_PATH_HEIGHT = 40;
 
 const ChartPresentPanel: FC<{
   containerHeight?: number;

frontend/src/app/pages/MainPage/pages/VizPage/ChartPreview/ChartPreview.tsx

@@ -418,7 +418,10 @@ const ChartPreviewBoard: FC<{
                 </ChartDrillContextMenu>
               </Spin>
             </ChartWrapper>
-            <ChartDrillPaths />
+            <StyledChartDrillPathsContainer>
+              <ChartDrillPaths />
+            </StyledChartDrillPathsContainer>
+            <StyledChartDrillPathsContainer />
           </ChartDrillContext.Provider>
         </PreviewBlock>
       </StyledChartPreviewBoard>
@@ -464,3 +467,7 @@ const ChartWrapper = styled.div`
     }
   }
 `;
+
+const StyledChartDrillPathsContainer = styled.div`
+  background-color: ${p => p.theme.componentBackground};
+`;

frontend/src/app/pages/SharePage/ChartForShare.tsx

@@ -176,7 +176,6 @@ const ChartForShare: FC<{
         </div>
         <ChartDrillPaths />
       </ChartDrillContext.Provider>
-      <ChartDrillPaths />
       <HeadlessBrowserIdentifier
         renderSign={headlessBrowserRenderSign}
         width={Number(width) || 0}