From 852ddc274a7cc0986580a3b14a98cbb19d5221fd Mon Sep 17 00:00:00 2001
From: Phoomparin Mano <poom@metabase.com>
Date: Fri, 23 Aug 2024 18:56:35 +0700
Subject: [PATCH] fix(sdk): apply the default viz height only in visualization
view (#47169)
* only use viz height for visualization view
* move the default viz height fallback
* default to full-height if height is zero or unavailable
* remove test wrapper
---
.../InteractiveQuestion/components/Visualization.tsx | 3 ++-
.../components/private/InteractiveQuestionResult.tsx | 9 ++-------
.../embedding-sdk/hooks/private/use-sdk-element-size.ts | 6 ++++--
3 files changed, 8 insertions(+), 10 deletions(-)
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
index cd8a6d37b8e..1b27c414abb 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Visualization.tsx
@@ -23,7 +23,8 @@ export const QuestionVisualization = () => {
onNavigateBack,
} = useInteractiveQuestionContext();
- const { height, ref, width } = useSdkElementSize();
+ const display = question?.card()?.display;
+ const { height, ref, width } = useSdkElementSize(display);
if (isQuestionLoading) {
return <SdkLoader />;
diff --git a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
index 9f66186dfb5..cac5d06f39a 100644
--- a/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
+++ b/enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult.tsx
@@ -1,13 +1,11 @@
import cx from "classnames";
-import type { ReactElement, ReactNode } from "react";
-import { useState } from "react";
+import { type ReactElement, type ReactNode, useState } from "react";
import { t } from "ttag";
import {
SdkError,
SdkLoader,
} from "embedding-sdk/components/private/PublicComponentWrapper";
-import { getDefaultVizHeight } from "embedding-sdk/lib/default-height";
import CS from "metabase/css/core/index.css";
import { Box, Flex, Group, Stack } from "metabase/ui";
@@ -73,9 +71,6 @@ export const InteractiveQuestionResult = ({
const { question, queryResults, isQuestionLoading } =
useInteractiveQuestionContext();
- const card = question?.card();
- const defaultHeight = card ? getDefaultVizHeight(card.display) : undefined;
-
let content;
if (isQuestionLoading) {
@@ -131,7 +126,7 @@ export const InteractiveQuestionResult = ({
return (
<Box
className={cx(CS.flexFull, CS.fullWidth)}
- h={height ?? defaultHeight}
+ h={height ?? "100%"}
bg="var(--mb-color-bg-question)"
>
{content}
diff --git a/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts b/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
index e986404f272..0a26241a8a5 100644
--- a/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
+++ b/enterprise/frontend/src/embedding-sdk/hooks/private/use-sdk-element-size.ts
@@ -1,11 +1,13 @@
import { useElementSize } from "@mantine/hooks";
-export const useSdkElementSize = () => {
+import { getDefaultVizHeight } from "embedding-sdk/lib/default-height";
+
+export const useSdkElementSize = (display?: string) => {
const { height, ref, width } = useElementSize();
// Some of our components by default don't have a specified height (i.e. the Visualization component)
// and are rendering with a height of 0. This is a workaround to set a default height for those components.
- const elementHeight = height || (width ? width / 9 : 500);
+ const elementHeight = height || (display && getDefaultVizHeight(display));
return { height: elementHeight, ref, width };
};
--
GitLab