You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/05/17 01:40:17 UTC
(superset) branch optimize_tooltip created (now 5a30a41858)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a change to branch optimize_tooltip
in repository https://gitbox.apache.org/repos/asf/superset.git
at 5a30a41858 fix: optimize Explore popovers rendering
This branch includes the following new commits:
new 5a30a41858 fix: optimize Explore popovers rendering
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: fix: optimize Explore popovers rendering
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch optimize_tooltip
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 5a30a418584d68153e1e1d25edbe01b4ca7cb2cd
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Fri May 16 18:39:32 2025 -0700
fix: optimize Explore popovers rendering
---
superset-frontend/package-lock.json | 3 +-
superset-frontend/package.json | 1 +
.../src/components/AsyncAceEditor/Tooltip.test.tsx | 43 +++++++++++++---------
.../src/components/AsyncAceEditor/Tooltip.tsx | 31 +++++++++++++---
.../src/explore/controlUtils/getColumnKeywords.tsx | 4 +-
5 files changed, 55 insertions(+), 27 deletions(-)
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 161f200a10..0baf6962e3 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -83,6 +83,7 @@
"geostyler-style": "^7.5.0",
"geostyler-wfs-parser": "^2.0.3",
"googleapis": "^130.0.0",
+ "handlebars": "^4.7.8",
"immer": "^10.1.1",
"interweave": "^13.1.0",
"jquery": "^3.7.1",
@@ -49924,7 +49925,7 @@
"@storybook/react-webpack5": "8.2.9",
"babel-loader": "^9.1.3",
"fork-ts-checker-webpack-plugin": "^9.0.2",
- "ts-loader": "^9.5.1",
+ "ts-loader": "^9.5.2",
"typescript": "^5.7.2"
},
"peerDependencies": {
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
index cde8fad394..c05b82b4a0 100644
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -150,6 +150,7 @@
"geostyler-style": "^7.5.0",
"geostyler-wfs-parser": "^2.0.3",
"googleapis": "^130.0.0",
+ "handlebars": "^4.7.8",
"immer": "^10.1.1",
"interweave": "^13.1.0",
"jquery": "^3.7.1",
diff --git a/superset-frontend/src/components/AsyncAceEditor/Tooltip.test.tsx b/superset-frontend/src/components/AsyncAceEditor/Tooltip.test.tsx
index 8365bd6b59..cecfdb2272 100644
--- a/superset-frontend/src/components/AsyncAceEditor/Tooltip.test.tsx
+++ b/superset-frontend/src/components/AsyncAceEditor/Tooltip.test.tsx
@@ -11,37 +11,46 @@
*
* 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
+ * "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 { render, screen } from 'spec/helpers/testing-library';
import Tooltip, { getTooltipHTML } from './Tooltip';
-test('should render a tooltip', () => {
- const expected = {
+test('should render a tooltip (React)', () => {
+ const props = {
title: 'tooltip title',
icon: <div>icon</div>,
- body: <div>body</div>,
- meta: 'meta',
- footer: <div>footer</div>,
+ body: 'body text',
+ meta: 'meta info',
+ footer: 'footer note',
};
- render(<Tooltip {...expected} />);
- expect(screen.getByText(expected.title)).toBeInTheDocument();
- expect(screen.getByText(expected.meta)).toBeInTheDocument();
+
+ render(<Tooltip {...props} />);
+
+ expect(screen.getByText('tooltip title')).toBeInTheDocument();
+ expect(screen.getByText('meta info')).toBeInTheDocument();
expect(screen.getByText('icon')).toBeInTheDocument();
- expect(screen.getByText('body')).toBeInTheDocument();
+ expect(screen.getByText('body text')).toBeInTheDocument();
+ expect(screen.getByText('footer note')).toBeInTheDocument();
});
-test('returns the tooltip HTML', () => {
+test('getTooltipHTML returns the expected HTML (string inputs)', () => {
const html = getTooltipHTML({
title: 'tooltip title',
- icon: <div>icon</div>,
- body: <div>body</div>,
- meta: 'meta',
- footer: <div>footer</div>,
+ icon: '🔥',
+ body: 'body text',
+ meta: 'meta info',
+ footer: 'footer note',
});
+
+ expect(html).toContain('tooltip-detail');
expect(html).toContain('tooltip title');
+ expect(html).toContain('🔥');
+ expect(html).toContain('body text');
+ expect(html).toContain('meta info');
+ expect(html).toContain('footer note');
});
diff --git a/superset-frontend/src/components/AsyncAceEditor/Tooltip.tsx b/superset-frontend/src/components/AsyncAceEditor/Tooltip.tsx
index bc504587a6..0148a70140 100644
--- a/superset-frontend/src/components/AsyncAceEditor/Tooltip.tsx
+++ b/superset-frontend/src/components/AsyncAceEditor/Tooltip.tsx
@@ -16,15 +16,16 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { renderToStaticMarkup } from 'react-dom/server';
+
+import Handlebars from 'handlebars';
import { Tag } from 'src/components';
type Props = {
title: string;
- icon?: React.ReactNode;
- body?: React.ReactNode;
+ icon?: string; // Pass in string if needed, or drop icon entirely
+ body?: string;
meta?: string;
- footer?: React.ReactNode;
+ footer?: string;
};
export const Tooltip: React.FC<Props> = ({
@@ -51,7 +52,25 @@ export const Tooltip: React.FC<Props> = ({
</div>
);
-export const getTooltipHTML = (props: Props) =>
- `${renderToStaticMarkup(<Tooltip {...props} />)}`;
+const tooltipTemplate = Handlebars.compile(`
+ <div class="tooltip-detail">
+ <div class="tooltip-detail-head">
+ <div class="tooltip-detail-title">
+ {{#if icon}}<span class="tooltip-icon">{{icon}}</span>{{/if}}{{title}}
+ </div>
+ {{#if meta}}
+ <span class="tooltip-detail-meta"><span class="ant-tag">{{meta}}</span></span>
+ {{/if}}
+ </div>
+ {{#if body}}
+ <div class="tooltip-detail-body">{{body}}</div>
+ {{/if}}
+ {{#if footer}}
+ <div class="tooltip-detail-footer">{{footer}}</div>
+ {{/if}}
+ </div>
+`);
+
+export const getTooltipHTML = (props: Props): string => tooltipTemplate(props);
export default Tooltip;
diff --git a/superset-frontend/src/explore/controlUtils/getColumnKeywords.tsx b/superset-frontend/src/explore/controlUtils/getColumnKeywords.tsx
index 0ef134b1a2..d4c123f8a9 100644
--- a/superset-frontend/src/explore/controlUtils/getColumnKeywords.tsx
+++ b/superset-frontend/src/explore/controlUtils/getColumnKeywords.tsx
@@ -38,9 +38,7 @@ export function getColumnKeywords(columns: ColumnMeta[]) {
title: column_name,
meta: type ? `column: ${type}` : 'column',
body: `${description ?? ''}`,
- footer: is_certified ? (
- <>{t('Certified by %s', certified_by)}</>
- ) : undefined,
+ footer: is_certified ? t('Certified by %s', certified_by) : undefined,
}),
score: COLUMN_AUTOCOMPLETE_SCORE,
meta: 'column',