Merge pull request #1751 from merico-dev/1750-infinite-re-rendering-of-charts

GerilLeto · web-flow · commit e0201d0661ff · 2025-08-10T14:22:22.000+08:00
1750 infinite re rendering of charts
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.50.5",
+  "version": "14.50.6",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.50.5",
+  "version": "14.50.6",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/dashboard/src/components/panel/panel-editor/dropdown-menu-items/dropdown-menu-items.tsx b/dashboard/src/components/panel/panel-editor/dropdown-menu-items/dropdown-menu-items.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const PanelDropdownMenuItems = observer(({ view }: Props) => {
-  const { echartsOptions, panel } = useRenderPanelContext();
+  const { getEchartsOptions, panel } = useRenderPanelContext();
   const items = useItems(view);
-  return items.map((item) => item.render({ echartsOptions, inEditMode: true, panelID: panel.id, viewID: view.id }));
+  return items.map((item) => item.render({ getEchartsOptions, inEditMode: true, panelID: panel.id, viewID: view.id }));
 });
diff --git a/dashboard/src/components/panel/panel-editor/dropdown-menu-items/use-items.tsx b/dashboard/src/components/panel/panel-editor/dropdown-menu-items/use-items.tsx
@@ -32,56 +32,56 @@ export const useItems = (view: ViewMetaInstance) => {
     const ret: PanelMenuItem[] = [
       {
         order: 10,
-        render: () => <Refresh />,
+        render: () => <Refresh key="refresh" />,
       },
       {
         order: 100,
-        render: () => <DownloadData />,
+        render: () => <DownloadData key="download-data" />,
       },
       {
         order: 200,
-        render: () => <DownloadSchema />,
+        render: () => <DownloadSchema key="download-schema" />,
       },
       {
         order: 300,
-        render: () => <DownloadScreenshot />,
+        render: () => <DownloadScreenshot key="download-screenshot" />,
       },
       {
         order: 400,
-        render: () => <EnterFullScreen view={view} />,
+        render: () => <EnterFullScreen key="enter-full-screen" view={view} />,
       },
       ...queryItems,
       {
         order: 600,
-        render: () => <Divider label={t('common.actions.edit')} labelPosition="center" />,
+        render: () => <Divider key="edit-divider" label={t('common.actions.edit')} labelPosition="center" />,
       },
       {
         order: 700,
-        render: () => <OpenTabPanel panelID={panelID} viewID={viewID} />,
+        render: () => <OpenTabPanel key="open-tab-panel" panelID={panelID} viewID={viewID} />,
       },
       {
         order: 800,
-        render: () => <OpenTabVariable panelID={panelID} viewID={viewID} />,
+        render: () => <OpenTabVariable key="open-tab-variable" panelID={panelID} viewID={viewID} />,
       },
       {
         order: 900,
-        render: () => <OpenTabVisualization panelID={panelID} viewID={viewID} />,
+        render: () => <OpenTabVisualization key="open-tab-visualization" panelID={panelID} viewID={viewID} />,
       },
       {
         order: 1000,
-        render: () => <OpenTabInteraction panelID={panelID} viewID={viewID} />,
+        render: () => <OpenTabInteraction key="open-tab-interaction" panelID={panelID} viewID={viewID} />,
       },
       {
         order: 1100,
-        render: () => <Divider label={t('common.actions.actions')} labelPosition="center" />,
+        render: () => <Divider key="actions-divider" label={t('common.actions.actions')} labelPosition="center" />,
       },
       {
         order: 1200,
-        render: () => <Duplicate panelID={panelID} viewID={viewID} />,
+        render: () => <Duplicate key="duplicate" panelID={panelID} viewID={viewID} />,
       },
       {
         order: 1300,
-        render: () => <DeletePanel panelID={panelID} viewID={viewID} />,
+        render: () => <DeletePanel key="delete-panel" panelID={panelID} viewID={viewID} />,
       },
 
       ...additionalItems,
diff --git a/dashboard/src/components/panel/panel-render/dropdown-menu-items/dropdown-menu-items.tsx b/dashboard/src/components/panel/panel-render/dropdown-menu-items/dropdown-menu-items.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 export const PanelDropdownMenuItems = observer(({ view }: Props) => {
-  const { echartsOptions, panel } = useRenderPanelContext();
+  const { getEchartsOptions, panel } = useRenderPanelContext();
   const items = useItems(view);
-  return items.map((item) => item.render({ echartsOptions, inEditMode: false, panelID: panel.id, viewID: view.id }));
+  return items.map((item) => item.render({ getEchartsOptions, inEditMode: false, panelID: panel.id, viewID: view.id }));
 });
diff --git a/dashboard/src/components/panel/panel-render/dropdown-menu-items/use-items.tsx b/dashboard/src/components/panel/panel-render/dropdown-menu-items/use-items.tsx
@@ -14,19 +14,19 @@ export const useItems = (view: ViewMetaInstance) => {
     const ret: PanelMenuItem[] = [
       {
         order: 10,
-        render: () => <Refresh />,
+        render: () => <Refresh key="refresh" />,
       },
       {
         order: 100,
-        render: () => <DownloadData />,
+        render: () => <DownloadData key="download-data" />,
       },
       {
         order: 300,
-        render: () => <DownloadScreenshot />,
+        render: () => <DownloadScreenshot key="download-screenshot" />,
       },
       {
         order: 400,
-        render: () => <EnterFullScreen view={view} />,
+        render: () => <EnterFullScreen key="enter-full-screen" view={view} />,
       },
       ...additionalItems,
     ];
diff --git a/dashboard/src/components/panel/panel-render/panel-render-base.tsx b/dashboard/src/components/panel/panel-render/panel-render-base.tsx
@@ -2,7 +2,7 @@ import { Box } from '@mantine/core';
 import { EmotionSx } from '@mantine/emotion';
 import { EChartsOption } from 'echarts';
 import { observer } from 'mobx-react-lite';
-import React, { ReactNode, useContext, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { usePanelVizFeatures } from '~/components/panel/panel-render/panel-viz-features';
 import { PanelAddonProvider } from '~/components/plugins/panel-addon';
 import { PanelContextProvider } from '~/contexts/panel-context';
@@ -17,14 +17,18 @@ import { doesVizRequiresData } from '../utils';
 import { PanelDropdownMenu } from './panel-dropdown-menu';
 
 function useUpdateEchartsOptions(vizType: string) {
-  const [echartsOptions, setEchartsOptions] = useState<EChartsOption | null>(null);
+  const ref = useRef<EChartsOption | null>(null);
+  const setEchartsOptions = useCallback((options: EChartsOption | null) => {
+    ref.current = options;
+  }, []);
+
   useEffect(() => {
-    setEchartsOptions(null);
+    ref.current = null;
   }, [vizType]);
 
   return {
-    echartsOptions,
-    setEchartsOptions,
+    getEchartsOptions: () => ref.current,
+    setEchartsOptions: setEchartsOptions,
   };
 }
 
@@ -40,7 +44,7 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
   const { ref, downloadPanelScreenshot } = useDownloadPanelScreenshot(panel);
   const { withAddon, withPanelTitle } = usePanelVizFeatures();
   const OptionalAddon = withAddon ? PanelAddonProvider : React.Fragment;
-  const { echartsOptions, setEchartsOptions } = useUpdateEchartsOptions(panel.viz.type);
+  const { getEchartsOptions, setEchartsOptions } = useUpdateEchartsOptions(panel.viz.type);
   const { inEditMode } = useContext(LayoutStateContext);
   const showDropdownMenu = inEditMode || doesVizRequiresData(panel.viz.type);
 
@@ -52,12 +56,13 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
         loading: panel.dataLoading,
         errors: panel.queryErrors,
         downloadPanelScreenshot,
-        echartsOptions,
+        getEchartsOptions,
         setEchartsOptions,
       }}
     >
       <Box
         id={panel.id}
+        data-testid="panel-root"
         className={`panel-root ${panel.title.show ? 'panel-root--show-title' : ''}`}
         ref={ref}
         p={0}
diff --git a/dashboard/src/components/panel/panel-render/title-bar/index.tsx b/dashboard/src/components/panel/panel-render/title-bar/index.tsx
@@ -10,7 +10,7 @@ export const PanelTitleBar = observer(function _PanelTitleBar() {
     return null;
   }
   return (
-    <Group grow justify="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>
+    <Group data-testid="panel-title-bar" grow justify="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>
       <Text size="sm" ta="center" lineClamp={1} className="panel-title-text">
         {name}
       </Text>
diff --git a/dashboard/src/contexts/panel-context.ts b/dashboard/src/contexts/panel-context.ts
@@ -9,15 +9,15 @@ const PanelContext = React.createContext<{
   loading: boolean;
   errors: string[];
   downloadPanelScreenshot: () => void;
-  echartsOptions: EChartsOption | null;
+  getEchartsOptions: () => EChartsOption | null;
   setEchartsOptions: (v: EChartsOption | null) => void;
 }>({
   panel: null,
   data: {},
   loading: false,
   errors: [],
   downloadPanelScreenshot: () => {},
-  echartsOptions: null,
+  getEchartsOptions: () => null,
   setEchartsOptions: () => {},
 });
 
@@ -34,7 +34,7 @@ function usePanelContext<T = PanelRenderModelInstance>() {
     loading: boolean;
     errors: string[];
     downloadPanelScreenshot: () => {};
-    echartsOptions: null;
+    getEchartsOptions: () => EChartsOption | null;
     setEchartsOptions: (v: EChartsOption | null) => {};
   };
 }
diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-editor.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/panel-editor.tsx
@@ -126,7 +126,7 @@ export const PanelEditor = observer(({ panel }: { panel: PanelModelInstance }) =
         loading,
         errors: panel.queryErrors,
         downloadPanelScreenshot: () => {},
-        echartsOptions: null,
+        getEchartsOptions: () => null,
         setEchartsOptions: () => {},
       }}
     >
diff --git a/dashboard/src/types/dashboard.ts b/dashboard/src/types/dashboard.ts
@@ -100,7 +100,7 @@ export type DashboardContentDBType = {
 export type PanelMenuItem = {
   order: number;
   render: (props: {
-    echartsOptions: EChartsOption | null;
+    getEchartsOptions: () => EChartsOption | null;
     inEditMode: boolean;
     panelID: string;
     viewID: string;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.50.5",
+  "version": "14.50.6",
   "private": true,
   "workspaces": [
     "api",
diff --git a/settings-form/package.json b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.50.5",
+  "version": "14.50.6",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/website/package.json b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.50.5",
+  "version": "14.50.6",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"
diff --git a/website/src/pages/dashboard-render-page/content.tsx b/website/src/pages/dashboard-render-page/content.tsx
@@ -13,8 +13,12 @@ import './content.css';
 import { DashboardIsEmpty } from './placeholder';
 import { useLanguageContext } from '../../contexts';
 
-const DownloadChartData: PanelMenuItem['render'] = ({ echartsOptions }) => {
-  return <Menu.Item onClick={() => console.log(echartsOptions)}>下载图表数据</Menu.Item>;
+const DownloadChartData: PanelMenuItem['render'] = ({ getEchartsOptions }) => {
+  return (
+    <Menu.Item key="download-echarts-options" onClick={() => console.log(getEchartsOptions())}>
+      下载图表数据
+    </Menu.Item>
+  );
 };
 
 const items = [

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtable/api",`
`3`		`- "version": "14.50.5",`
	`3`	`+ "version": "14.50.6",`
`4`	`4`	`"description": "",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtable/dashboard",`
`3`		`- "version": "14.50.5",`
	`3`	`+ "version": "14.50.6",`
`4`	`4`	`"license": "Apache-2.0",`
`5`	`5`	`"publishConfig": {`
`6`	`6`	`"access": "public",`
Original file line number	Diff line number	Diff line change
`@@ -32,56 +32,56 @@ export const useItems = (view: ViewMetaInstance) => {`
`32`	`32`	`const ret: PanelMenuItem[] = [`
`33`	`33`	`{`
`34`	`34`	`order: 10,`
`35`		`- render: () => <Refresh />,`
	`35`	`+ render: () => <Refresh key="refresh" />,`
`36`	`36`	`},`
`37`	`37`	`{`
`38`	`38`	`order: 100,`
`39`		`- render: () => <DownloadData />,`
	`39`	`+ render: () => <DownloadData key="download-data" />,`
`40`	`40`	`},`
`41`	`41`	`{`
`42`	`42`	`order: 200,`
`43`		`- render: () => <DownloadSchema />,`
	`43`	`+ render: () => <DownloadSchema key="download-schema" />,`
`44`	`44`	`},`
`45`	`45`	`{`
`46`	`46`	`order: 300,`
`47`		`- render: () => <DownloadScreenshot />,`
	`47`	`+ render: () => <DownloadScreenshot key="download-screenshot" />,`
`48`	`48`	`},`
`49`	`49`	`{`
`50`	`50`	`order: 400,`
`51`		`- render: () => <EnterFullScreen view={view} />,`
	`51`	`+ render: () => <EnterFullScreen key="enter-full-screen" view={view} />,`
`52`	`52`	`},`
`53`	`53`	`...queryItems,`
`54`	`54`	`{`
`55`	`55`	`order: 600,`
`56`		`- render: () => <Divider label={t('common.actions.edit')} labelPosition="center" />,`
	`56`	`+ render: () => <Divider key="edit-divider" label={t('common.actions.edit')} labelPosition="center" />,`
`57`	`57`	`},`
`58`	`58`	`{`
`59`	`59`	`order: 700,`
`60`		`- render: () => <OpenTabPanel panelID={panelID} viewID={viewID} />,`
	`60`	`+ render: () => <OpenTabPanel key="open-tab-panel" panelID={panelID} viewID={viewID} />,`
`61`	`61`	`},`
`62`	`62`	`{`
`63`	`63`	`order: 800,`
`64`		`- render: () => <OpenTabVariable panelID={panelID} viewID={viewID} />,`
	`64`	`+ render: () => <OpenTabVariable key="open-tab-variable" panelID={panelID} viewID={viewID} />,`
`65`	`65`	`},`
`66`	`66`	`{`
`67`	`67`	`order: 900,`
`68`		`- render: () => <OpenTabVisualization panelID={panelID} viewID={viewID} />,`
	`68`	`+ render: () => <OpenTabVisualization key="open-tab-visualization" panelID={panelID} viewID={viewID} />,`
`69`	`69`	`},`
`70`	`70`	`{`
`71`	`71`	`order: 1000,`
`72`		`- render: () => <OpenTabInteraction panelID={panelID} viewID={viewID} />,`
	`72`	`+ render: () => <OpenTabInteraction key="open-tab-interaction" panelID={panelID} viewID={viewID} />,`
`73`	`73`	`},`
`74`	`74`	`{`
`75`	`75`	`order: 1100,`
`76`		`- render: () => <Divider label={t('common.actions.actions')} labelPosition="center" />,`
	`76`	`+ render: () => <Divider key="actions-divider" label={t('common.actions.actions')} labelPosition="center" />,`
`77`	`77`	`},`
`78`	`78`	`{`
`79`	`79`	`order: 1200,`
`80`		`- render: () => <Duplicate panelID={panelID} viewID={viewID} />,`
	`80`	`+ render: () => <Duplicate key="duplicate" panelID={panelID} viewID={viewID} />,`
`81`	`81`	`},`
`82`	`82`	`{`
`83`	`83`	`order: 1300,`
`84`		`- render: () => <DeletePanel panelID={panelID} viewID={viewID} />,`
	`84`	`+ render: () => <DeletePanel key="delete-panel" panelID={panelID} viewID={viewID} />,`
`85`	`85`	`},`
`86`	`86`
`87`	`87`	`...additionalItems,`
Original file line number	Diff line number	Diff line change
`@@ -14,19 +14,19 @@ export const useItems = (view: ViewMetaInstance) => {`
`14`	`14`	`const ret: PanelMenuItem[] = [`
`15`	`15`	`{`
`16`	`16`	`order: 10,`
`17`		`- render: () => <Refresh />,`
	`17`	`+ render: () => <Refresh key="refresh" />,`
`18`	`18`	`},`
`19`	`19`	`{`
`20`	`20`	`order: 100,`
`21`		`- render: () => <DownloadData />,`
	`21`	`+ render: () => <DownloadData key="download-data" />,`
`22`	`22`	`},`
`23`	`23`	`{`
`24`	`24`	`order: 300,`
`25`		`- render: () => <DownloadScreenshot />,`
	`25`	`+ render: () => <DownloadScreenshot key="download-screenshot" />,`
`26`	`26`	`},`
`27`	`27`	`{`
`28`	`28`	`order: 400,`
`29`		`- render: () => <EnterFullScreen view={view} />,`
	`29`	`+ render: () => <EnterFullScreen key="enter-full-screen" view={view} />,`
`30`	`30`	`},`
`31`	`31`	`...additionalItems,`
`32`	`32`	`];`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const PanelTitleBar = observer(function _PanelTitleBar() {`
`10`	`10`	`return null;`
`11`	`11`	`}`
`12`	`12`	`return (`
`13`		`- <Group grow justify="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>`
	`13`	`+ <Group data-testid="panel-title-bar" grow justify="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>`
`14`	`14`	`<Text size="sm" ta="center" lineClamp={1} className="panel-title-text">`
`15`	`15`	`{name}`
`16`	`16`	`</Text>`
Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ export const PanelEditor = observer(({ panel }: { panel: PanelModelInstance }) =`
`126`	`126`	`loading,`
`127`	`127`	`errors: panel.queryErrors,`
`128`	`128`	`downloadPanelScreenshot: () => {},`
`129`		`- echartsOptions: null,`
	`129`	`+ getEchartsOptions: () => null,`
`130`	`130`	`setEchartsOptions: () => {},`
`131`	`131`	`}}`
`132`	`132`	`>`